1,979
edits
(Undo revision 9672 by Saucy (talk): Apparently this does not work and I would have to change the actual source code on the server) Tags: Replaced Undo |
(collapsible elements) |
||
Line 1: | Line 1: | ||
/* All JavaScript here will be loaded for users of the mobile site */ | /* All JavaScript here will be loaded for users of the mobile site */ | ||
// 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) { | |||
var 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) { | |||
var 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"); | |||
var innerHtml = this.innerHTML; | |||
var attributes = this.attributes; | |||
var btn = document.createElement("button"); | |||
btn.innerHTML = innerHtml; | |||
for (var i = 0; i < attributes.length; i++) { | |||
btn.attributes.setNamedItem(attributes[i].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); | |||
} |