Add sort menu to category pages

rust-gamedev · Jan 25, 2025 · 542b140 · 542b140
1 parent eba921b
commit 542b140
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 4 deletions.
diff --git a/sass/_extra.scss b/sass/_extra.scss
@@ -78,6 +78,10 @@ ul.ui.list li::before {
     margin-left: 0.5em;
 }
 
+#sort-menu {
+    margin-bottom: 1em;
+}
+
 @media only screen and (max-width: 991px) {
     .masthead .ui.menu a.item {
         display: none;

diff --git a/sass/_semantic.scss b/sass/_semantic.scss
@@ -31,7 +31,7 @@
 // @import 'semantic/accordion';
 // @import 'semantic/checkbox';
 // @import 'semantic/dimmer';
-// @import 'semantic/dropdown';
+@import 'semantic/dropdown';
 //@import 'semantic/embed';
 //@import 'semantic/video';
 // @import 'semantic/modal';

diff --git a/static/assets/js/sortCrates.js b/static/assets/js/sortCrates.js
@@ -0,0 +1,42 @@
+function sortCrates(attribute, numeric, ascending) {
+    var section = $("#crates-section .cards");
+    var cards = section.children(".card");
+
+    var default_value = numeric ? 0 : "";
+
+    cards.sort(function (a, b) {
+        var aAttr = a.getAttribute(attribute) || default_value;
+        var bAttr = b.getAttribute(attribute) || default_value;
+
+        if (numeric) {
+            aAttr = parseInt(aAttr);
+            bAttr = parseInt(bAttr);
+        } else {
+            aAttr = aAttr.toUpperCase();
+            bAttr = bAttr.toUpperCase();
+        }
+
+        if (aAttr > bAttr) {
+            return ascending ? 1 : -1;
+        } else if (aAttr < bAttr) {
+            return ascending ? -1 : 1;
+        } else {
+            return 0;
+        }
+    });
+
+    cards.detach().appendTo(section);
+}
+
+$(document).ready(function () {
+    var sortDropdown = $("#sort-menu");
+
+    sortDropdown.dropdown({
+        onChange: function (value, text, selected) {
+            var type = selected[0].getAttribute("data-type");
+            var order = selected[0].getAttribute("data-order");
+
+            sortCrates(value, type == "num", order == "asc");
+        },
+    });
+});
diff --git a/templates/categories/macros.html b/templates/categories/macros.html
@@ -82,7 +82,7 @@
     {% endif %}
 {% endif %}
 
-<li class="ui card{% if archived %} archived{% endif %}">
+<li class="ui card{% if archived %} archived{% endif %}" data-name="{{ name }}"{% if downloads %} data-downloads="{{ downloads }}"{%endif%}{% if recent_downloads %} data-recent="{{ recent_downloads }}"{% endif %}{% if license %} data-license="{{ license }}"{% endif %}{% if stars %} data-stars="{{ stars }}"{% endif %}{% if last_activity %} data-activity="{{ last_activity }}"{% endif %}>
     {% if item.image %}
          {% if primary_url %}
             <a class="image" href="{{ primary_url }}">

diff --git a/templates/categories/page.html b/templates/categories/page.html
@@ -48,7 +48,7 @@ <h1 class="ui center aligned icon header">
     {% endif %}
 {% endfor %}
 
-<section>
+<section id="crates-section">
     <h2 class="ui horizontal divider small header">
         <a href="#{{ section.extra.plural | slugify }}" id="{{ section.extra.plural | slugify }}">
             <i class="list icon big" aria-hidden="true"></i>
@@ -58,6 +58,24 @@ <h2 class="ui horizontal divider small header">
 
     <div class="ui vertical stripe">
         <div class="ui container">
+            <div id="sort-menu" class="ui dropdown icon selection">
+                <i class="sort amount down icon" aria-hidden="true"></i>
+                <span class="text">Sort by A-Z</span>
+                <i class="dropdown icon" aria-hidden="true"></i>
+
+                <ul class="menu">
+                    <li class="item" data-value="data-name" data-order="asc">Sort by A-Z</li>
+                    <li class="item" data-value="data-name">Sort by Z-A</li>
+
+                    {% if section.extra.plural == "crates" %}
+                        <li class="item" data-value="data-downloads" data-type="num">Sort by Downloads</li>
+                        <li class="item" data-value="data-recent" data-type="num">Sort by Recent Downloads</li>
+                        <li class="item" data-value="data-stars" data-type="num">Sort by Stars</li>
+                        <li class="item" data-value="data-activity">Sort by Last Activity</li>
+                    {% endif %}
+                </ul>
+            </div>
+
             <ul class="ui stackable cards nolist {{ columns }}">
                 {% for item in crates %}
                     {{ category_macros::info(item=item, section=section) }}
@@ -115,4 +133,9 @@ <h2 class="ui horizontal divider small header">
         </div>
     </div>
 </section>
-{% endblock content %}
+{% endblock content %}
+
+{% block footer %}
+    <script src="/assets/semantic/js/dropdown.min.js"></script>
+    <script src="/assets/js/sortCrates.js"></script>
+{% endblock %}