mirror of
https://github.com/Mibew/simple-icons.git
synced 2025-05-02 09:06:43 +03:00
Remember users ordering preference (#1053)
* 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:
parent
8727352e03
commit
92613a12ed
@ -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 );
|
||||||
|
Loading…
Reference in New Issue
Block a user