Mibew/simple-icons
1
0
Fork 0
mirror of https://github.com/Mibew/simple-icons.git synced 2025-01-17 23:51:08 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Wire up the search box

Browse Source
This commit is contained in:
nietonfir 2017-05-26 01:09:08 +02:00
parent 704a4d884b
commit 79ad92be95
1 changed files with 61 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
index.html
View File

@ -478,8 +478,47 @@
{% endfor %}
<script type="text/javascript">
(function(document) {
var icons = [{{ allIconNames }}],
$icons = document.querySelectorAll('.grid > .grid-item:not(.grid-item--ad)');
var icons = [{{ allIconNames }}],
$icons = document.querySelectorAll('.grid > .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) {
value = value.toLowerCase();
@ -491,7 +530,26 @@
$icons[i].classList.add('hidden');
}
})
};
}
$search.addEventListener('input', debounce(function(e) {
e.preventDefault();
var value = e.target.value;
if (value) {
$search.classList.add('search--active');
search(value);
} else {
$search.classList.remove('search--active');
}
}, 250), false);
$searchClose.addEventListener('click', function(e) {
e.stopPropagation();
$searchInput.value = '';
$search.classList.remove('search--active');
search('');
}, false);
})( document );
</script>
</body>