From 92613a12edd0447df9c621e520663e0fa00ff914 Mon Sep 17 00:00:00 2001
From: Eric Cornelissen <ericornelissen@gmail.com>
Date: Mon, 5 Nov 2018 02:58:49 +0200
Subject: [PATCH] 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
---
 site_script.js | 73 ++++++++++++++++++++++++++++++--------------------
 1 file changed, 44 insertions(+), 29 deletions(-)

diff --git a/site_script.js b/site_script.js
index 36546bca..01cf24f6 100644
--- a/site_script.js
+++ b/site_script.js
@@ -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 );