MediaWiki:Mobile.js

/* 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);
}