diff options
author | 2022-02-01 22:43:15 +0100 | |
---|---|---|
committer | 2022-02-01 22:43:15 +0100 | |
commit | e144d4d1b4d1ef2ec2f9f8b771b3606b581ace34 (patch) | |
tree | 13c057809298c4f6ce6b16985e762df5a96e4107 /pydis_site/static | |
parent | Refactor 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.css | 4 | ||||
-rw-r--r-- | pydis_site/static/js/collapsibles.js | 60 | ||||
-rw-r--r-- | pydis_site/static/js/resources/resources.js | 15 |
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'); |