Mibew/simple-icons
1
0
Fork 0
mirror of https://github.com/Mibew/simple-icons.git synced 2025-02-21 16:34:33 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #658 from ericcornelissen/url-search-query

Browse Source 
Add support for search query in URL
This commit is contained in:
Johan Fagerberg 2017-11-02 00:33:03 +01:00 committed by GitHub
commit a63abe4e59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
index.html
View File

@ -536,12 +536,13 @@
{% endfor %} {% endfor %}
<script type="text/javascript"> <script type="text/javascript">
(function(document) { (function(document) {
var icons = [{{ allIconNames }}].map(normalizeSearchTerm), var icons = [{{ allIconNames }}].map(normalizeSearchTerm),
$grid = document.querySelector('.grid'), queryParameter = 'q',
$icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'), $grid = document.querySelector('.grid'),
$search = document.querySelector('.search'), $icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
$searchClose = $search.querySelector('.search__close'), $search = document.querySelector('.search'),
$searchInput = $search.querySelector('input'); $searchClose = $search.querySelector('.search__close'),
$searchInput = $search.querySelector('input');
// Remove the "disabled" attribute from the search input // Remove the "disabled" attribute from the search input
$searchInput.setAttribute('title', 'Search Simple Icons'); $searchInput.setAttribute('title', 'Search Simple Icons');
@ -583,6 +584,17 @@
}; };
} }
// Get any parameter from the URL's search section (location.search).
// see
// - https://davidwalsh.name/query-string-javascript
// - https://github.com/WebReflection/url-search-params
function getUrlParameter(parameter) {
name = parameter.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
function search(value) { function search(value) {
var hiddenCounter = 0, var hiddenCounter = 0,
value = normalizeSearchTerm(value); value = normalizeSearchTerm(value);
@ -603,14 +615,25 @@
return value.toLowerCase().replace(/ /g, ''); return value.toLowerCase().replace(/ /g, '');
} }
document.addEventListener('DOMContentLoaded', function() {
// Load search query if present
var query = getUrlParameter(queryParameter);
if (query !== null) {
$search.classList.add('search--active');
$searchInput.value = query;
search(query);
}
});
$search.addEventListener('input', debounce(function(e) { $search.addEventListener('input', debounce(function(e) {
e.preventDefault(); e.preventDefault();
var value = e.target.value; var value = e.target.value;
if (value) { if (value) {
$search.classList.add('search--active'); $search.classList.add('search--active');
window.history.replaceState(null, '', '?' + queryParameter + '=' + value);
} else { } else {
$search.classList.remove('search--active'); $search.classList.remove('search--active');
window.history.replaceState(null, '', '/');
} }
search(value); search(value);
}, 50), false); }, 50), false);
@ -619,6 +642,7 @@
$searchInput.value = ''; $searchInput.value = '';
$search.classList.remove('search--active'); $search.classList.remove('search--active');
window.history.replaceState(null, '', '/');
search(''); search('');
}, false); }, false);
})( document ); })( document );