From dda3e355ac31dc4b9629f2e9e63474bbba69d740 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 30 Jan 2022 14:29:48 +0100
Subject: Refactor: collapsibles as a stand-alone component

---
 pydis_site/static/js/collapsibles.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 pydis_site/static/js/collapsibles.js

(limited to 'pydis_site/static/js/collapsibles.js')

diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
new file mode 100644
index 00000000..366a033c
--- /dev/null
+++ b/pydis_site/static/js/collapsibles.js
@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const headers = document.getElementsByClassName("collapsible");
+    for (const header of headers) {
+        header.addEventListener("click", () => {
+            var content = header.nextElementSibling;
+            if (content.style.maxHeight){
+              content.style.maxHeight = null;
+            } else {
+              content.style.maxHeight = content.scrollHeight + "px";
+            }
+        });
+    }
+});
-- 
cgit v1.2.3


From d31340f8abeabc5df1c778d7d8eae4d0806fad0e Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Tue, 1 Feb 2022 02:13:34 +0100
Subject: Fix bug where transition wouldn't work on first collapse.

---
 pydis_site/static/css/collapsibles.css        | 6 +++++-
 pydis_site/static/js/collapsibles.js          | 6 +-----
 pydis_site/static/js/resources/resources.js   | 7 ++++---
 pydis_site/templates/resources/resources.html | 4 ++--
 4 files changed, 12 insertions(+), 11 deletions(-)

(limited to 'pydis_site/static/js/collapsibles.js')

diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
index 8fdd1f12..d35e77ea 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -6,7 +6,11 @@
 }
 
 .collapsible-content {
+  max-height: 40em;
+  transition: max-height 0.3s ease-out;
+}
+
+.collapsible-content.collapsed {
   overflow: hidden;
   max-height: 0;
-  transition: max-height 0.2s ease-out;
 }
diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
index 366a033c..d12d9f86 100644
--- a/pydis_site/static/js/collapsibles.js
+++ b/pydis_site/static/js/collapsibles.js
@@ -3,11 +3,7 @@ document.addEventListener("DOMContentLoaded", () => {
     for (const header of headers) {
         header.addEventListener("click", () => {
             var content = header.nextElementSibling;
-            if (content.style.maxHeight){
-              content.style.maxHeight = null;
-            } else {
-              content.style.maxHeight = content.scrollHeight + "px";
-            }
+            content.classList.toggle('collapsed');
         });
     }
 });
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index bffb5e91..00bc6ad8 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -234,11 +234,12 @@ document.addEventListener("DOMContentLoaded", function () {
     if (screen.width < 480) {
         let categoryHeaders = $(".filter-category-header .collapsible-content");
         let icons = $('.filter-category-header button .card-header-icon i');
-        categoryHeaders.addClass("no-transition");
-        categoryHeaders.css("max-height", "");
+        categoryHeaders.addClass("no-transition collapsed");
         icons.removeClass(["far", "fa-window-minimize"]);
         icons.addClass(["fas", "fa-angle-down"]);
-        categoryHeaders.removeClass("no-transition");
+
+        // Wait 10ms before removing this class, or else the transition will animate due to a race condition.
+        setTimeout(() => { categoryHeaders.removeClass("no-transition"); }, 10);
     }
 
     // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox.
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index cebaace2..c221c8a3 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -116,9 +116,9 @@
 
                             {# Checkboxes #}
                             {% if filter_data.hidden %}
-                                <div class="collapsible-content">
+                                <div class="collapsible-content collapsed">
                             {% else %}
-                                <div class="collapsible-content" style="max-height: fit-content;">
+                                <div class="collapsible-content">
                             {% endif %}
                                     <div class="card-content">
                                         {% for filter_item in filter_data.filters %}
-- 
cgit v1.2.3


From e07d21a91e63353d693a6fcee3eef0a16b593e06 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Tue, 1 Feb 2022 02:50:27 +0100
Subject: Fix delay when collapsing collapsibles.

---
 pydis_site/static/css/collapsibles.css | 3 +--
 pydis_site/static/js/collapsibles.js   | 6 ++++++
 2 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'pydis_site/static/js/collapsibles.js')

diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
index d35e77ea..a722d646 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -6,11 +6,10 @@
 }
 
 .collapsible-content {
-  max-height: 40em;
   transition: max-height 0.3s ease-out;
 }
 
 .collapsible-content.collapsed {
   overflow: hidden;
-  max-height: 0;
+  max-height: 0 !important;
 }
diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
index d12d9f86..443d3f49 100644
--- a/pydis_site/static/js/collapsibles.js
+++ b/pydis_site/static/js/collapsibles.js
@@ -1,4 +1,10 @@
 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";
+    }
+
     const headers = document.getElementsByClassName("collapsible");
     for (const header of headers) {
         header.addEventListener("click", () => {
-- 
cgit v1.2.3


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.
---
 .../guides/pydis-guides/contributing/bot.md        | 20 ++++----
 pydis_site/static/css/collapsibles.css             |  4 --
 pydis_site/static/js/collapsibles.js               | 60 ++++++++++++++++++++--
 pydis_site/static/js/resources/resources.js        | 15 +-----
 4 files changed, 67 insertions(+), 32 deletions(-)

(limited to 'pydis_site/static/js/collapsibles.js')

diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md
index ed9e3db3..2aa10aa3 100644
--- a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md
+++ b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md
@@ -14,10 +14,10 @@ First things first, to run the bot's code and make changes to it, you need a loc
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Getting started with Git and GitHub</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
               <p>If you don't have Git on your computer already, <a href="https://git-scm.com/downloads">install it</a>. You can additionally install a Git GUI such as <a href="https://www.gitkraken.com/download">GitKraken</a>, or the <a href="https://cli.github.com/manual/installation">GitHub CLI</a>.</p>
               <p>To learn more about Git, you can look into <a href="../working-with-git">our guides</a>, as well as <a href="https://education.github.com/git-cheat-sheet-education.pdf">this cheatsheet</a>, <a href="https://learngitbranching.js.org">Learn Git Branching</a>, and otherwise any guide you can find on the internet. Once you got the basic idea though, the best way to learn Git is to use it.</p>
@@ -78,10 +78,10 @@ See [here](../obtaining-discord-ids) for help with obtaining Discord IDs.
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Optional config.yml</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
               <p>If you used the provided server template, and you're not sure which channels belong where in the config file, you can use the config below. Pay attention to the comments with several <code>#</code> symbols, and replace the <code>�</code> characters with the right IDs.</p>
               <pre>
@@ -458,10 +458,10 @@ We understand this is tedious and are working on a better solution for setting u
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Why do you need a separate config file?</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
             While it's technically possible to edit <code>config-default.yml</code> to match your server, it is heavily discouraged.
             This file's purpose is to provide the configurations the Python bot needs to run in the Python server in production, and should remain as such.
@@ -487,10 +487,10 @@ You are now almost ready to run the Python bot. The simplest way to do so is wit
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Getting started with Docker</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
             The requirements for Docker are:
             <ul>
@@ -541,10 +541,10 @@ With at least the site running in Docker already (see the previous section on ho
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Ways to run code</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
             Notice that the bot is started as a module. There are several ways to do so:
             <ul>
diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
index a722d646..1d73fa00 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -7,9 +7,5 @@
 
 .collapsible-content {
   transition: max-height 0.3s ease-out;
-}
-
-.collapsible-content.collapsed {
   overflow: hidden;
-  max-height: 0 !important;
 }
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