build(site): add menu for sorting and fix disclaimer page

BeyondMagic · BeyondMagic · commit d3ec814694fb · 2024-10-11T04:52:19.000-03:00
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
@@ -55,10 +55,11 @@ function createLightbox(id) {
 
   var search = /** @type {HTMLInputElement} */document.getElementById('searchInput');
   search.addEventListener('keydown', function (e) {
-    if (e.key === "Enter") sort(search.value);
+    if (e.key === "Enter") sort(localStorage.sort, search.value);
   });
-  document.getElementById('searchButton').addEventListener('click', function () {
-    return false;
+  var search_button = /** @type {HTMLInputElement} */document.getElementById('searchButton');
+  search_button.addEventListener('click', function () {
+    return sort(localStorage.sort, search.value);
   });
 
   /*  Load Content
@@ -72,44 +73,25 @@ function createLightbox(id) {
   if (!localStorage.sort) localStorage.sort = 'latest';
 
   /*
-   * Make the sort icon a button.
+   * Add event to sort when an option is chosen..
    */
-  var sort_trigger = /** @type {HTMLElement} */document.getElementById('js-sortSwitcher');
-  sort_trigger.addEventListener('click', function () {
-    return toggle_sorting();
+  var sort_menu = /** @type {HTMLSelectElement} */document.getElementById('js-sort-menu');
+  sort_menu.addEventListener('change', function () {
+    var name = /** @type {string} */sort_menu.selectedOptions[0].getAttribute('name');
+    sort(name);
   });
-  sort();
-
-  /**
-   * Toggle the sorting type of the themes.
-   **/
-  function toggle_sorting() {
-    switch (localStorage.sort) {
-      case 'latest':
-        localStorage.sort = 'updated';
-        break;
-      case 'updated':
-        localStorage.sort = 'stars';
-        break;
-      case 'stars':
-        localStorage.sort = 'random';
-        break;
-      case 'random':
-        localStorage.sort = 'oldest';
-        break;
-      default:
-        localStorage.sort = 'latest';
-    }
-    return sort();
-  }
+  sort(localStorage.sort);
+  var current_option = sort_menu.options.namedItem(localStorage.sort);
+  if (current_option) current_option.selected = true;
 
   /**
    * Toggle the sorting type of the themes.
    *
+   * @param {string} kind How to sort the themes.
    * @param {string=} filter Term to filter the themes.
    **/
-  function sort(filter) {
-    sort_trigger.title = "\"".concat(localStorage.sort, "\"");
+  function sort(kind, filter) {
+    localStorage.sort = kind;
 
     // Remove all themes cards from the page.
     var cards_container = document.getElementById('themes_container');
diff --git a/docs/assets/js/main.min.js b/docs/assets/js/main.min.js
diff --git a/docs/disclaimer.html b/docs/disclaimer.html
@@ -12,14 +12,7 @@
   <body>
     <header id="main_header">
       <h3 class="header-branding">FirefoxCSS Store</h3>
-      <nav id="main_nav"><a href="index.html">Theme List</a><a id="js-themeSwitcher" href="#"><i class="fas fa-moon"></i></a><a id="js-sortSwitcher" href="#"><i class="fas fa-sort"></i></a>
-        <div class="searchform" method="get">
-          <div class="inputgroup">
-            <input class="searchinput" id="searchInput" type="text" placeholder="Search">
-            <button class="btn-submit searchsubmit" id="searchButton" type="submit"><i class="fas fa-search"></i></button>
-          </div>
-        </div>
-      </nav>
+      <nav id="main_nav"><a href="index.html">Theme List</a><a id="js-themeSwitcher" href="#"><i class="fas fa-moon"></i></a></nav>
     </header>
     <main id="main_content">
       <div class="disclaimer"><h1>Disclaimer</h1>
diff --git a/docs/index.html b/docs/index.html
@@ -12,7 +12,14 @@
   <body>
     <header id="main_header">
       <h3 class="header-branding">FirefoxCSS Store</h3>
-      <nav id="main_nav"><a href="index.html">Theme List</a><a id="js-themeSwitcher" href="#"><i class="fas fa-moon"></i></a><a id="js-sortSwitcher" href="#"><i class="fas fa-sort"></i></a>
+      <nav id="main_nav"><a href="index.html">Theme List</a><a id="js-themeSwitcher" href="#"><i class="fas fa-moon"></i></a>
+        <select id="js-sort-menu">
+          <option name="updated">Updated</option>
+          <option name="stars">Stars</option>
+          <option name="latest">Latest</option>
+          <option name="oldest">Oldest</option>
+          <option name="random">Random</option>
+        </select>
         <div class="searchform" method="get">
           <div class="inputgroup">
             <input class="searchinput" id="searchInput" type="text" placeholder="Search">
