mirror of
https://github.com/Mibew/simple-icons.git
synced 2024-11-16 02:14:12 +03:00
Merge pull request #459 from nietonfir/feature-search
Implement JS search
This commit is contained in:
Johan Fagerberg
GitHub
commit
f55b0f08d6
@ -6,7 +6,7 @@ Free SVG icons for popular brands, maintained by [Dan Leech](https://twitter.com
|
||||
|
||||
- [x] New page layout
|
||||
- [x] Jekyll code for sorting icons by hue
|
||||
- [ ] JS search function
|
||||
- [x] JS search function
|
||||
- [ ] Analytics tracking for icon clicks
|
||||
- [x] CSS grid fallback
|
||||
- [x] Social sharing tags
|
||||
|
||||
166
index.html
166
index.html
@ -245,18 +245,74 @@
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 1rem 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 45rem) {
|
||||
.search {
|
||||
margin: 1rem 3rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.search .search__wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.search .search__close {
|
||||
display: none;
|
||||
font-size: 1rem;
|
||||
padding: 6px 12px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 1px;
|
||||
}
|
||||
.search .search__close span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search input {
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
@media (min-width: 45rem) {
|
||||
.search input {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.search--active .search__close {
|
||||
display: block;
|
||||
}
|
||||
.search--active input {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 1.5rem;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-width: 45rem) {
|
||||
.grid {
|
||||
margin: 3rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid.search__empty:after {
|
||||
content: 'No matching icons found.';
|
||||
font-size: 1.25em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
.grid {
|
||||
display: grid;
|
||||
@ -266,6 +322,16 @@
|
||||
grid-row-gap: 0.375rem;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
.grid.search__empty:after {
|
||||
grid-column: 1/span 2;
|
||||
grid-row-end: span 2;
|
||||
}
|
||||
|
||||
@media (min-width: 30.75rem) {
|
||||
.grid.search__empty:after {
|
||||
grid-column: 1/-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
@ -364,6 +430,10 @@
|
||||
opacity: 1;
|
||||
padding: 1.5rem 0 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -377,6 +447,12 @@
|
||||
</header>
|
||||
<main role="main">
|
||||
<p class="hero">Free <abbr title="Scalable Vector Graphic">SVG</abbr> icons for popular brands</p>
|
||||
<div class="search">
|
||||
<div class="search__wrapper">
|
||||
<div class="search__close"><span>×</span></div>
|
||||
<input type="text" placeholder="Search by brand …" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="grid">
|
||||
<li class="grid-item grid-item--ad">
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script>
|
||||
@ -410,5 +486,95 @@
|
||||
Use <a href="https://github.com/danleech/simple-icons">GitHub</a> for requests, corrections and contributions.</p>
|
||||
<a class="share-button" href="https://twitter.com/share?url=https%3A%2F%2Fsimpleicons.org&via=bathtype&text=Simple%20Icons%3A%20free%20SVG%20icons%20for%20popular%20brands.">Share this on Twitter!</a>
|
||||
</footer>
|
||||
{% assign allIconNames = "" %}
|
||||
{% for icon in iconsArray %}
|
||||
{% assign iconArray = icon | split: "," %}
|
||||
{% capture allIconNames %}{{ allIconNames }}"{{ iconArray[3] }}",{% endcapture %}
|
||||
{% endfor %}
|
||||
{% for icon in greyscaleIconsArray %}
|
||||
{% assign iconArray = icon | split: "," %}
|
||||
{% capture allIconNames %}{{ allIconNames }}"{{ iconArray[1] }}"{% unless forloop.last %},{% endunless %}{% endcapture %}
|
||||
{% endfor %}
|
||||
<script type="text/javascript">
|
||||
(function(document) {
|
||||
var icons = [{{ allIconNames }}],
|
||||
$grid = document.querySelector('.grid'),
|
||||
$icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
|
||||
$search = document.querySelector('.search'),
|
||||
$searchClose = $search.querySelector('.search__close'),
|
||||
$searchInput = $search.querySelector('input');
|
||||
|
||||
// include a modified debounce underscorejs helper function.
|
||||
// see
|
||||
// - http://underscorejs.org/docs/underscore.html#section-83
|
||||
// - http://underscorejs.org/#debounce
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout, args, context, timestamp, result;
|
||||
|
||||
var later = function() {
|
||||
var last = +new Date - timestamp;
|
||||
|
||||
if (last < wait && last >= 0) {
|
||||
timeout = setTimeout(later, wait - last);
|
||||
} else {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
result = func.apply(context, args);
|
||||
if (!timeout) context = args = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return function() {
|
||||
context = this;
|
||||
args = arguments;
|
||||
timestamp = +new Date;
|
||||
var callNow = immediate && !timeout;
|
||||
if (!timeout) timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
function search(value) {
|
||||
var hiddenCounter = 0,
|
||||
value = value.toLowerCase().trim();
|
||||
|
||||
icons.forEach(function(e, i) {
|
||||
if (e.indexOf(value) > -1) {
|
||||
$icons[i].classList.remove('hidden');
|
||||
} else {
|
||||
hiddenCounter++;
|
||||
$icons[i].classList.add('hidden');
|
||||
}
|
||||
})
|
||||
|
||||
$grid.classList.toggle('search__empty', hiddenCounter == icons.length);
|
||||
}
|
||||
|
||||
$search.addEventListener('input', debounce(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var value = e.target.value;
|
||||
if (value) {
|
||||
$search.classList.add('search--active');
|
||||
} else {
|
||||
$search.classList.remove('search--active');
|
||||
}
|
||||
search(value);
|
||||
}, 50), false);
|
||||
$searchClose.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
$searchInput.value = '';
|
||||
$search.classList.remove('search--active');
|
||||
search('');
|
||||
}, false);
|
||||
})( document );
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user