Mibew/simple-icons
1
0
Fork 0
mirror of https://github.com/Mibew/simple-icons.git synced 2025-05-25 03:28:55 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Remember users ordering preference (#1053)

Browse Source 
* Add basic support to remember sorting order for users

Without cookies!

* Prevent "sort by relevance" from being the stored preference

because it is not applicable if there is no search query

* Rename "sort" to "order" in scripts

* Create constant for the ordering preference ID in the local storage

* Verify `window.localStorage" exists before using it
This commit is contained in:
Eric Cornelissen 2018-11-05 02:58:49 +02:00 committed by Johan Fagerberg
parent 8727352e03
commit 92613a12ed
1 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
site_script.js
View File

@ -1,16 +1,17 @@
(function(document) { (function(document) {
var $grid = document.querySelector('.grid'), var $grid = document.querySelector('.grid'),
$icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'), $icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
$search = document.querySelector('.search'), $search = document.querySelector('.search'),
$searchClose = $search.querySelector('.search__close'), $searchClose = $search.querySelector('.search__close'),
$searchInput = $search.querySelector('input'), $searchInput = $search.querySelector('input'),
$sortColor = document.getElementById('sort-color'), $orderByColor = document.getElementById('sort-color'),
$sortAlphabetically = document.getElementById('sort-alphabetically'), $orderAlphabetically = document.getElementById('sort-alphabetically'),
$sortRelevance = document.getElementById('sort-relevance'); $orderByRelevance = document.getElementById('sort-relevance');
var queryParameter = 'q', var queryParameter = 'q',
orderingPreferenceIdentifier = 'ordering-preference',
previousQuery = null, previousQuery = null,
previousOrder = $sortColor; previousOrdering = $orderByColor;
// 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');
@ -108,47 +109,61 @@
$grid.classList.toggle('search__empty', matchedIcons.length == 0); $grid.classList.toggle('search__empty', matchedIcons.length == 0);
if (query === '') { if (query === '') {
if ($sortRelevance.classList.contains('active')) { if ($orderByRelevance.classList.contains('active')) {
selectSortingOrder(previousOrder); selectOrdering(previousOrdering);
} }
$sortRelevance.setAttribute('display', 'none'); $orderByRelevance.setAttribute('display', 'none');
previousQuery = null; previousQuery = null;
} else { } else {
if (previousQuery === null) { if (previousQuery === null) {
selectSortingOrder($sortRelevance); selectOrdering($orderByRelevance);
} }
previousQuery = query; previousQuery = query;
} }
} }
function sort() { function orderIcons() {
if ($sortColor.classList.contains('active')) { if ($orderByColor.classList.contains('active')) {
$icons.forEach(icon => { icon.style.order = null; }); $icons.forEach(icon => { icon.style.order = null; });
} else if ($sortAlphabetically.classList.contains('active')) { } else if ($orderAlphabetically.classList.contains('active')) {
$icons.forEach(icon => { icon.style.order = icon.getAttribute('order'); }); $icons.forEach(icon => { icon.style.order = icon.getAttribute('order'); });
} else if ($sortRelevance.classList.contains('active')) { } else if ($orderByRelevance.classList.contains('active')) {
$icons.forEach(icon => { icon.style.order = icon.getAttribute('data-relevance'); }); $icons.forEach(icon => { icon.style.order = icon.getAttribute('data-relevance'); });
} }
} }
function selectSortingOrder(selected) { function selectOrdering(selected) {
selected.classList.add('active'); selected.classList.add('active');
var options = [$sortColor, $sortAlphabetically, $sortRelevance]; var options = [$orderByColor, $orderAlphabetically, $orderByRelevance];
for (var option of options.filter(option => option !== selected)) { for (var option of options.filter(option => option !== selected)) {
option.classList.remove('active'); option.classList.remove('active');
} }
if (selected !== $sortRelevance) { if (selected !== $orderByRelevance) {
previousOrder = selected; previousOrdering = selected;
} else { } else {
$sortRelevance.removeAttribute('display'); $orderByRelevance.removeAttribute('display');
} }
sort(); orderIcons();
// Store ordering preference
var preferenceOptions = [$orderByColor, $orderAlphabetically];
if (localStorage && preferenceOptions.includes(selected)) {
localStorage.setItem(orderingPreferenceIdentifier, selected.id);
}
} }
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Restore ordering preference of the user. This should be performed before
// applying the search query as it would overwrite "order by relevance"
if (localStorage) {
var storedOrderingId = localStorage.getItem(orderingPreferenceIdentifier);
var ordering = document.getElementById(storedOrderingId);
if (ordering) selectOrdering(ordering);
}
// Load search query if present // Load search query if present
var query = getUrlParameter(queryParameter); var query = getUrlParameter(queryParameter);
if (query) { if (query) {
@ -179,13 +194,13 @@
search(''); search('');
}, false); }, false);
$sortColor.addEventListener('click', function() { $orderByColor.addEventListener('click', function() {
selectSortingOrder($sortColor); selectOrdering($orderByColor);
}); });
$sortAlphabetically.addEventListener('click', function() { $orderAlphabetically.addEventListener('click', function() {
selectSortingOrder($sortAlphabetically); selectOrdering($orderAlphabetically);
}); });
$sortRelevance.addEventListener('click', function() { $orderByRelevance.addEventListener('click', function() {
selectSortingOrder($sortRelevance); selectOrdering($orderByRelevance);
}); });
})( document ); })( document );