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

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) {
var $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'),
$sortColor = document.getElementById('sort-color'),
$sortAlphabetically = document.getElementById('sort-alphabetically'),
$sortRelevance = document.getElementById('sort-relevance');
var $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'),
$orderByColor = document.getElementById('sort-color'),
$orderAlphabetically = document.getElementById('sort-alphabetically'),
$orderByRelevance = document.getElementById('sort-relevance');
var queryParameter = 'q',
orderingPreferenceIdentifier = 'ordering-preference',
previousQuery = null,
previousOrder = $sortColor;
previousOrdering = $orderByColor;
// Remove the "disabled" attribute from the search input
$searchInput.setAttribute('title', 'Search Simple Icons');
@ -108,47 +109,61 @@
$grid.classList.toggle('search__empty', matchedIcons.length == 0);
if (query === '') {
if ($sortRelevance.classList.contains('active')) {
selectSortingOrder(previousOrder);
if ($orderByRelevance.classList.contains('active')) {
selectOrdering(previousOrdering);
}
$sortRelevance.setAttribute('display', 'none');
$orderByRelevance.setAttribute('display', 'none');
previousQuery = null;
} else {
if (previousQuery === null) {
selectSortingOrder($sortRelevance);
selectOrdering($orderByRelevance);
}
previousQuery = query;
}
}
function sort() {
if ($sortColor.classList.contains('active')) {
function orderIcons() {
if ($orderByColor.classList.contains('active')) {
$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'); });
} else if ($sortRelevance.classList.contains('active')) {
} else if ($orderByRelevance.classList.contains('active')) {
$icons.forEach(icon => { icon.style.order = icon.getAttribute('data-relevance'); });
}
}
function selectSortingOrder(selected) {
function selectOrdering(selected) {
selected.classList.add('active');
var options = [$sortColor, $sortAlphabetically, $sortRelevance];
var options = [$orderByColor, $orderAlphabetically, $orderByRelevance];
for (var option of options.filter(option => option !== selected)) {
option.classList.remove('active');
}
if (selected !== $sortRelevance) {
previousOrder = selected;
if (selected !== $orderByRelevance) {
previousOrdering = selected;
} 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() {
// 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
var query = getUrlParameter(queryParameter);
if (query) {
@ -179,13 +194,13 @@
search('');
}, false);
$sortColor.addEventListener('click', function() {
selectSortingOrder($sortColor);
$orderByColor.addEventListener('click', function() {
selectOrdering($orderByColor);
});
$sortAlphabetically.addEventListener('click', function() {
selectSortingOrder($sortAlphabetically);
$orderAlphabetically.addEventListener('click', function() {
selectOrdering($orderAlphabetically);
});
$sortRelevance.addEventListener('click', function() {
selectSortingOrder($sortRelevance);
$orderByRelevance.addEventListener('click', function() {
selectOrdering($orderByRelevance);
});
})( document );