From e144d4d1b4d1ef2ec2f9f8b771b3606b581ace34 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Tue, 1 Feb 2022 22:43:15 +0100
Subject: Complete refactor of collapsibles.

This is now a completely self-contained feature, which
can be used in the same way on every page. I've moved all the
collapsible-related logics out of the resources.js file and
into collapsibles.js, and added documentation and other
quality-of-life features that will apply to other pages, as well.

Changes:
- The icon will now always change when the collapsible opens or closes.
- By adding the "collapsed" class, you can tell the collapsible to
  be collapsed by default.
---
 pydis_site/static/js/collapsibles.js        | 60 +++++++++++++++++++++++++++--
 pydis_site/static/js/resources/resources.js | 15 +-------
 2 files changed, 57 insertions(+), 18 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
index 443d3f49..1df0b9fe 100644
--- a/pydis_site/static/js/collapsibles.js
+++ b/pydis_site/static/js/collapsibles.js
@@ -1,15 +1,67 @@
+/*
+A utility for creating simple collapsible cards.
+
+To see this in action, go to /resources or /pages/guides/pydis-guides/contributing/bot/
+
+// HOW TO USE THIS //
+First, import this file and the corresponding css file into your template.
+
+  <link rel="stylesheet" href="{% static "css/collapsibles.css" %}">
+  <script defer src="{% static "js/collapsibles.js" %}"></script>
+
+Next, you'll need some HTML that these scripts can interact with.
+
+<div class="card">
+    <button type="button" class="card-header collapsible">
+        <span class="card-header-title subtitle is-6 my-2 ml-2">Your headline</span>
+        <span class="card-header-icon">
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
+        </span>
+    </button>
+    <div class="collapsible-content collapsed">
+        <div class="card-content">
+            You can put anything you want here. Lists, more divs, flexboxes, images, whatever.
+        </div>
+    </div>
+</div>
+
+That's it! Collapsing stuff should now work.
+ */
+
 document.addEventListener("DOMContentLoaded", () => {
-    // Set maxHeight to scroll height on all matching collapsibles
     const contentContainers = document.getElementsByClassName("collapsible-content");
     for (const container of contentContainers) {
-        container.style.maxHeight = container.scrollHeight + "px";
+        // Close any collapsibles that are marked as initially collapsed
+        if (container.classList.contains("collapsed")) {
+            container.style.maxHeight = "0px";
+        // Set maxHeight to the size of the container on all other containers.
+        } else {
+            container.style.maxHeight = container.scrollHeight + "px";
+        }
     }
 
+    // Listen for click events, and collapse or explode
     const headers = document.getElementsByClassName("collapsible");
     for (const header of headers) {
+        const content = header.nextElementSibling;
+        const icon = header.querySelector(".card-header-icon i");
+
+        // Any collapsibles that are not initially collapsed needs an icon switch.
+        if (!content.classList.contains("collapsed")) {
+            icon.classList.remove("fas", "fa-angle-down");
+            icon.classList.add("far", "fa-window-minimize");
+        }
+
         header.addEventListener("click", () => {
-            var content = header.nextElementSibling;
-            content.classList.toggle('collapsed');
+            if (content.style.maxHeight !== "0px"){
+                content.style.maxHeight = "0px";
+                icon.classList.remove("far", "fa-window-minimize");
+                icon.classList.add("fas", "fa-angle-down");
+            } else {
+                content.style.maxHeight = content.scrollHeight + "px";
+                icon.classList.remove("fas", "fa-angle-down");
+                icon.classList.add("far", "fa-window-minimize");
+            }
         });
     }
 });
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 00bc6ad8..e45233b3 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -217,20 +217,7 @@ document.addEventListener("DOMContentLoaded", function () {
     deserializeURLParams();
     updateUI();
 
-    // If you collapse or uncollapse a filter group, swap the icon.
-    $('button.collapsible').on("click", function() {
-        let icon = $(this).find(".card-header-icon i");
-
-        if ($(icon).hasClass("fa-window-minimize")) {
-            $(icon).removeClass(["far", "fa-window-minimize"]);
-            $(icon).addClass(["fas", "fa-angle-down"]);
-        } else {
-            $(icon).removeClass(["fas", "fa-angle-down"]);
-            $(icon).addClass(["far", "fa-window-minimize"]);
-        }
-    });
-
-    // If this is a mobile device, collapse the categories to win back some screen real estate.
+    // If this is a mobile device, collapse all the categories to win back some screen real estate.
     if (screen.width < 480) {
         let categoryHeaders = $(".filter-category-header .collapsible-content");
         let icons = $('.filter-category-header button .card-header-icon i');
-- 
cgit v1.2.3