From 43953217792db8fc5dbbe0afff0051fefd9eebc3 Mon Sep 17 00:00:00 2001
From: Kefaku <114934849+Kefaku@users.noreply.github.com>
Date: Mon, 2 Oct 2023 16:30:41 +0200
Subject: [PATCH] numerical filtering (#144)

---
 _includes/body.html  | 17 +++++++++++++++++
 assets/js/scripts.js | 11 +++++++++++
 2 files changed, 28 insertions(+)

diff --git a/_includes/body.html b/_includes/body.html
index e956da86..26dd499d 100644
--- a/_includes/body.html
+++ b/_includes/body.html
@@ -1,3 +1,4 @@
+<!-- Search / Filter Section -->
 <div class="search">
     <div class="search-container">
         <input type="text" id="search">
@@ -7,11 +8,13 @@
     <div class="sort-container">
         <button class="popular">{{ site.data.trans[page.lang].popular }}</button>
         <button data-dropdown="#alphabetical-dropdown" class="az-sort">A - Z</button>
+        <button data-dropdown="#numerical-dropdown" class="09-sort">0 - 9</button>
         <button data-dropdown="#difficulty-dropdown" class="diff-sort">{{ site.data.trans[page.lang].difficulty }}</button>
         <button class="reset">{{ site.data.trans[page.lang].reset }}</button>
     </div>
 </div>
 
+<!-- Site List -->
 <main>
     <section class="sites" id="sites">
         <p class="no-results">{{ site.data.trans[page.lang].noresults }} <a href='https://github.com/justgetmydata/jgmd'>{{ site.data.trans[page.lang].noresultshelp }}</a>.</p>
@@ -62,6 +65,7 @@
     </section>
 </main>
 
+<!-- About Section -->
 <section id="about" class="info-block about">
     <div class="info-container">
         <div class="info-block-half">
@@ -135,6 +139,19 @@ <h2>{{ site.data.trans[page.lang].extensionguide|safe }}</h2>
     </ul>
 </div>
 
+<!-- Numerical sorting -->
+<div id="numerical-dropdown" class="dropdown dropdown-tip">
+    <ul class="dropdown-menu ltr">
+        <span class="num-sort">
+            {% assign digits = '0,1,2,3,4,5,6,7,8,9' | split:',' %}
+            {% for digit in digits %}
+            <li><a href="">{{ digit }}</a></li>
+            {% endfor %}
+        </span>
+    </ul>
+</div>
+
+<!-- Difficulty sorting -->
 <div id="difficulty-dropdown" class="dropdown dropdown-tip">
     <ul class="dropdown-menu">
         <span class="diff-sort">
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index 7dd00da3..f54caddd 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -55,6 +55,17 @@ $(function(){
         });
     });
 
+    // 0 - 9 filtering
+    $(".num-sort a").click(function(e){
+        e.preventDefault();
+        var term = $(this).text().toLowerCase();
+    
+        hideFilteredSites(function() {
+            var text = $(this).find(".site-header").text().trim().toLowerCase().substr(0,1);
+            return !~text.indexOf(term);
+        });
+    });
+
     // Difficulty filtering
     $(".diff-sort a").click(function(e){
         e.preventDefault();