|
|
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */ | | /* Any JavaScript here will be loaded for all users on every page load. */ |
|
| |
|
| |
| // I wasn't totally satisfied with MediaWiki's built-in way to make collapsible elements, so here is an alternative implementation I made.
| |
| function customcollapseShow(jQueryObj) {
| |
| let container = $(jQueryObj).parents(".customcollapse");
| |
| container.find(".customcollapse-content").show();
| |
| container.find(".customcollapse-show").hide().removeAttr("aria-expanded");
| |
| container.find(".customcollapse-hide").show().attr("aria-expanded", "true");
| |
| container.find(".customcollapse-toggle").each(function () {
| |
| $(this).attr("aria-expanded", "true");
| |
| if ($(this).attr("data-hidetext")) $(this).text($(this).attr("data-hidetext"));
| |
| });
| |
| }
| |
|
| |
| function customcollapseHide(jQueryObj) {
| |
| let container = $(jQueryObj).parents(".customcollapse");
| |
| container.find(".customcollapse-content").hide();
| |
| container.find(".customcollapse-hide").hide().removeAttr("aria-expanded");
| |
| container.find(".customcollapse-show").show().attr("aria-expanded", "false");
| |
| container.find(".customcollapse-toggle").each(function () {
| |
| $(this).attr("aria-expanded", "false");
| |
| if ($(this).attr("data-showtext")) $(this).text($(this).attr("data-showtext"));
| |
| });
| |
| }
| |
|
| |
| if ($(".customcollapse").length > 0) {
| |
| $(".customcollapse").each(function () {
| |
| if ($(this).hasClass("collapsed")) {
| |
| $(this).find(".customcollapse-content").hide();
| |
| $(this).find(".customcollapse-hide").hide();
| |
| $(this).find(".customcollapse-show").show().attr("aria-expanded", "false");
| |
| $(this).find(".customcollapse-toggle").each(function () {
| |
| $(this).attr("aria-expanded", "false");
| |
| if ($(this).attr("data-showtext")) $(this).text($(this).attr("data-showtext"));
| |
| });
| |
| } else {
| |
| $(this).find(".customcollapse-show").hide();
| |
| $(this).find(".customcollapse-hide").show().attr("aria-expanded", "true");
| |
| $(this).find(".customcollapse-toggle").each(function () {
| |
| $(this).attr("aria-expanded", "true");
| |
| if ($(this).attr("data-hidetext")) $(this).text($(this).attr("data-hidetext"));
| |
| });
| |
| }
| |
| $(this).find(".customcollapse-toggle").each(function () {
| |
| // For toggles, changing the element to a <button>. This necessitates removing the element and adding it back again
| |
| $(this).addClass("plainbutton");
| |
| let innerHtml = this.innerHTML;
| |
| let attributes = this.attributes;
| |
| let btn = document.createElement("button");
| |
| btn.innerHTML = innerHtml;
| |
| for (let attr of attributes) {
| |
| btn.attributes.setNamedItem(attr.cloneNode());
| |
| }
| |
| $(this).replaceWith(btn);
| |
| });
| |
| });
| |
|
| |
| // Define a toggle element with class="customcollapse-toggle"
| |
| // These are simple text-only toggles that the script will modify. To make more custom ones, use customcollapse-show and customcollapse-hide classes
| |
| $(".customcollapse-toggle").on("click", function () {
| |
| if ($(this).attr("aria-expanded") == "true") customcollapseHide(this);
| |
| else customcollapseShow(this);
| |
| });
| |
|
| |
| // Define a show element with class="customcollapse-show"
| |
| $(".customcollapse-show").on("click", customcollapseShow);
| |
|
| |
| // Define a hide element with class="customcollapse-hide"
| |
| $(".customcollapse-hide").on("click", customcollapseHide);
| |
| }
| |