web/simple-icons
1
0
Fork 0
mirror of https://github.com/simple-icons/simple-icons.git synced 2024-12-16 01:10:30 +02:00
Code Releases Activity

Add support for search query in URL

Browse Source 
As discussed in #648, implemented JavaScript based support for a search
query in the URL. This feature does two things:
1. If you go to `www.simpleicons.org/?q=adobe`, the page will load with
a search query for the string `'adobe'`.
2. If you start searching on `www.simpleicons.org`, the url will be
updated with each keystroke to `www.simpleicons.org/?q=hellowor`.

Since `window.history.replaceState` is being used, this changing of the
URL does not mess with the browser history. I.e. if the user came from
www.google.com, started searching and press the back button they will
return to www.google.com immediately.
This commit is contained in:
Eric Cornelissen 2017-11-01 21:17:23 +01:00
parent 462d15f6f9
commit b395b7837a
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@ -536,12 +536,13 @@
{% endfor %}
<script type="text/javascript">
(function(document) {
var icons = [{{ allIconNames }}].map(normalizeSearchTerm),
$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');
var icons = [{{ allIconNames }}].map(normalizeSearchTerm),
queryParameter = 'q',
$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');
// Remove the "disabled" attribute from the search input
$searchInput.setAttribute('title', 'Search Simple Icons');
@ -603,14 +604,25 @@
return value.toLowerCase().replace(/ /g, '');
}
document.addEventListener('DOMContentLoaded', function() {
// Load search query if present
var query = new URLSearchParams(window.location.search).get(queryParameter);
if (query !== null) {
$search.classList.add('search--active');
$searchInput.value = query;
search(query);
}
});
$search.addEventListener('input', debounce(function(e) {
e.preventDefault();
var value = e.target.value;
if (value) {
$search.classList.add('search--active');
window.history.replaceState(null, '', '?' + queryParameter + '=' + value);
} else {
$search.classList.remove('search--active');
window.history.replaceState(null, '', '/');
}
search(value);
}, 50), false);
@ -619,6 +631,7 @@
$searchInput.value = '';
$search.classList.remove('search--active');
window.history.replaceState(null, '', '/');
search('');
}, false);
})( document );