aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/static
diff options
context:
space:
mode:
authorGravatar Leon Sandøy <[email protected]>2022-02-01 22:43:15 +0100
committerGravatar Leon Sandøy <[email protected]>2022-02-01 22:43:15 +0100
commite144d4d1b4d1ef2ec2f9f8b771b3606b581ace34 (patch)
tree13c057809298c4f6ce6b16985e762df5a96e4107 /pydis_site/static
parentRefactor as_css_class to 'to_kebabcase'. (diff)
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.
Diffstat (limited to 'pydis_site/static')
-rw-r--r--pydis_site/static/css/collapsibles.css4
-rw-r--r--pydis_site/static/js/collapsibles.js60
-rw-r--r--pydis_site/static/js/resources/resources.js15
3 files changed, 57 insertions, 22 deletions
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');