diff --git a/index.html b/index.html
index 8e9b4c6a..0099d379 100644
--- a/index.html
+++ b/index.html
@@ -207,6 +207,7 @@
+
-
diff --git a/site_script.js b/site_script.js
index 852df751..6c8742fa 100644
--- a/site_script.js
+++ b/site_script.js
@@ -1,12 +1,16 @@
(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 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'),
- $sortColor = document.getElementById('sort-color'),
- $sortAlpha = document.getElementById('sort-alphabetically');
+ previousQuery = null,
+ previousOrder = $sortColor;
// Remove the "disabled" attribute from the search input
$searchInput.setAttribute('title', 'Search Simple Icons');
@@ -96,18 +100,51 @@
}).sort(function(a, b) {
return a.score - b.score;
}).forEach(function(item, index) {
- item.element.classList.remove('hidden');
-
- if (query !== '') {
- // Order according to relevance (i.e. score) if there is a query
- item.element.style.order = index;
- } else {
- // Use color-based order if there is no query
- item.element.style.removeProperty('order');
- }
+ var element = item.element;
+ element.setAttribute('data-relevance', index);
+ element.classList.remove('hidden');
});
$grid.classList.toggle('search__empty', hiddenCounter == icons.length);
+ if (query === '') {
+ if ($sortRelevance.classList.contains('active')) {
+ selectSortingOrder(previousOrder);
+ }
+
+ $sortRelevance.setAttribute('display', 'none');
+ previousQuery = null;
+ } else {
+ if (previousQuery === null) {
+ selectSortingOrder($sortRelevance);
+ }
+
+ previousQuery = query;
+ }
+ }
+ function sort() {
+ if ($sortColor.classList.contains('active')) {
+ $icons.forEach(icon => { icon.style.order = null; });
+ } else if ($sortAlphabetically.classList.contains('active')) {
+ $icons.forEach(icon => { icon.style.order = icon.getAttribute('order'); });
+ } else if ($sortRelevance.classList.contains('active')) {
+ $icons.forEach(icon => { icon.style.order = icon.getAttribute('data-relevance'); });
+ }
+ }
+ function selectSortingOrder(selected) {
+ selected.classList.add('active');
+
+ var options = [$sortColor, $sortAlphabetically, $sortRelevance];
+ for (var option of options.filter(option => option !== selected)) {
+ option.classList.remove('active');
+ }
+
+ if (selected !== $sortRelevance) {
+ previousOrder = selected;
+ } else {
+ $sortRelevance.removeAttribute('display');
+ }
+
+ sort();
}
document.addEventListener('DOMContentLoaded', function() {
@@ -142,15 +179,12 @@
}, false);
$sortColor.addEventListener('click', function() {
- $icons.forEach(icon => { icon.style.order = null; });
-
- $sortColor.classList.add('active');
- $sortAlpha.classList.remove('active');
+ selectSortingOrder($sortColor);
});
- $sortAlpha.addEventListener('click', function() {
- $icons.forEach(icon => { icon.style.order = icon.getAttribute('order'); });
-
- $sortAlpha.classList.add('active');
- $sortColor.classList.remove('active');
+ $sortAlphabetically.addEventListener('click', function() {
+ selectSortingOrder($sortAlphabetically);
+ });
+ $sortRelevance.addEventListener('click', function() {
+ selectSortingOrder($sortRelevance);
});
})( document );
diff --git a/stylesheet.css b/stylesheet.css
index d97e8971..522420b1 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -202,6 +202,10 @@ a.share-button {
opacity: 1;
}
+#sort-relevance:hover path:not(:nth-of-type(1)) {
+ fill: #fbc02d;
+}
+
.grid {
display: flex;
flex-wrap: wrap;