MediaWiki:Mobile.js - Revision history

Saucy: collapsible elements

2023-07-25T06:10:47Z

collapsible elements

← Older revision		Revision as of 06:10, 25 July 2023
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);
			}

Saucy: Undo revision 9672 by Saucy (talk): Apparently this does not work and I would have to change the actual source code on the server

2023-07-08T04:40:44Z

Undo revision 9672 by Saucy (talk): Apparently this does not work and I would have to change the actual source code on the server

← Older revision		Revision as of 04:40, 8 July 2023
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 */


	/*
	~~For whatever reason, the MediaWiki devs decided to disable collapsible sections on mobile.~~
	~~(See https://phabricator.wikimedia.org/T111565)~~
	~~I'm hoping if I just add back the missing function that it will work again~~
	*/
	~~$.fn.makeCollapsible = function(options) {~~
	~~options = options \|\| {};~~
	~~this.each(function() {~~
	~~var $collapsible = $(this).addClass('mw-collapsible');~~
	~~if ($collapsible.data('mw-made-collapsible')) {~~
	~~return;~~
	~~} else {~~
	~~$collapsible.addClass('mw-made-collapsible').data('mw-made-collapsible', true);~~
	}
	~~var collapseText = options.collapseText \|\| $collapsible.attr('data-collapsetext') \|\| mw.msg('collapsible-collapse');~~
	~~var expandText = options.expandText \|\| $collapsible.attr('data-expandtext') \|\| mw.msg('collapsible-expand');~~
	~~var actionHandler = function(e, opts) {~~
	~~var defaultOpts = {~~
	~~toggleClasses: true,~~
	~~toggleARIA: true,~~
	~~toggleText: {~~
	~~collapseText: collapseText,~~
	~~expandText: expandText~~
	}
	};
	~~opts = $.extend(defaultOpts, options, opts);~~
	~~togglingHandler($(this), $collapsible, e, opts);~~
	};
	~~var buildDefaultToggleLink = function() {~~
	~~return $('<span>').addClass('mw-collapsible-text').text(collapseText).wrap('<button type="button" class="mw-collapsible-toggle mw-collapsible-toggle-default"></button>').parent();~~
	};
	~~var $customTogglers;~~
	~~if (options.$customTogglers) {~~
	~~$customTogglers = $(options.$customTogglers);~~
	~~} else {~~
	~~var collapsibleId = $collapsible.attr('id') \|\| '';~~
	~~if (collapsibleId.indexOf('mw-customcollapsible-') === 0) {~~
	~~collapsibleId = $.escapeSelector(collapsibleId);~~
	~~$customTogglers = $('.' + collapsibleId.replace('mw-customcollapsible', 'mw-customtoggle')).addClass('mw-customtoggle');~~
	}
	}
	~~var $toggle;~~
	~~if ($customTogglers && $customTogglers.length) {~~
	~~actionHandler = function(e, opts) {~~
	~~var defaultOpts = {};~~
	~~opts = $.extend(defaultOpts, options, opts);~~
	~~togglingHandler($(this), $collapsible, e, opts);~~
	}
	;
	~~$toggle = $customTogglers;~~
	~~} else {~~
	~~var $firstItem;~~
	~~if ($collapsible.is('table')) {~~
	~~var $caption = $collapsible.find('> caption');~~
	~~if ($caption.length) {~~
	~~$toggle = $caption.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').first();~~
	~~if (!$toggle.length) {~~
	~~$toggle = buildDefaultToggleLink().appendTo($caption);~~
	}
	~~} else {~~
	~~$firstItem = $collapsible.find('tr').first().find('th, td');~~
	~~$toggle = $firstItem.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').first();~~
	~~if (!$toggle.length) {~~
	~~$toggle = buildDefaultToggleLink().prependTo($firstItem.eq(-1));~~
	}
	}
	} else if ($collapsible.parent().is('li') && $collapsible.parent().children('.mw-collapsible').length === 1 && $collapsible.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').length === 0) {
	~~$toggle = buildDefaultToggleLink();~~
	~~$collapsible.before($toggle);~~
	~~} else if ($collapsible.is('ul') \|\| $collapsible.is('ol')) {~~
	~~$firstItem = $collapsible.find('li').first();~~
	~~$toggle = $firstItem.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').first();~~
	~~if (!$toggle.length) {~~
	~~var firstval = $firstItem.prop('value');~~
	~~if (firstval === undefined \|\| !firstval \|\| firstval === '-1' \|\| firstval === -1) {~~
	~~$firstItem.prop('value', '1');~~
	}
	~~$toggle = buildDefaultToggleLink();~~
	~~$toggle.wrap('<li class="mw-collapsible-toggle-li"></li>').parent().prependTo($collapsible);~~
	}
	~~} else {~~
	~~$toggle = $collapsible.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').first();~~
	~~if (!$collapsible.find('> .mw-collapsible-content').length) {~~
	~~$collapsible.wrapInner('<div class="mw-collapsible-content"></div>');~~
	}
	~~if (!$toggle.length) {~~
	~~$toggle = buildDefaultToggleLink().prependTo($collapsible);~~
	}
	}
	}
	~~if ($toggle.hasClass('mw-collapsible-toggle-placeholder')) {~~
	~~var $realToggle = buildDefaultToggleLink();~~
	~~$toggle.replaceWith($realToggle);~~
	~~$toggle = $realToggle;~~
	}
	~~$toggle.on('click.mw-collapsible keydown.mw-collapsible', actionHandler).attr('aria-expanded', 'true').prop('tabIndex', 0);~~
	~~$(this).data('mw-collapsible', {~~
	~~collapse: function() {~~
	~~actionHandler.call($toggle.get(0), null, {~~
	~~wasCollapsed: false~~
	~~});~~
	},
	~~expand: function() {~~
	~~actionHandler.call($toggle.get(0), null, {~~
	~~wasCollapsed: true~~
	~~});~~
	},
	~~toggle: function() {~~
	~~actionHandler.call($toggle.get(0), null, null);~~
	}
	~~});~~
	~~if (options.collapsed \|\| $collapsible.hasClass('mw-collapsed')) {~~
	~~actionHandler.call($toggle.get(0), null, {~~
	~~wasCollapsed: false~~
	~~});~~
	}
	~~});~~
	~~window.addEventListener('hashchange', hashHandler);~~
	~~mw.hook('wikipage.collapsibleContent').fire(this);~~
	~~return this;~~
	}

Saucy: tryna fix the devs' bad decisions

2023-07-08T04:37:41Z

tryna fix the devs' bad decisions

← Older revision		Revision as of 04:37, 8 July 2023
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 */


			/*
			For whatever reason, the MediaWiki devs decided to disable collapsible sections on mobile.
			(See https://phabricator.wikimedia.org/T111565)
			I'm hoping if I just add back the missing function that it will work again
			*/
			$.fn.makeCollapsible = function(options) {
			options = options \|\| {};
			this.each(function() {
			var $collapsible = $(this).addClass('mw-collapsible');
			if ($collapsible.data('mw-made-collapsible')) {
			return;
			} else {
			$collapsible.addClass('mw-made-collapsible').data('mw-made-collapsible', true);
			}
			var collapseText = options.collapseText \|\| $collapsible.attr('data-collapsetext') \|\| mw.msg('collapsible-collapse');
			var expandText = options.expandText \|\| $collapsible.attr('data-expandtext') \|\| mw.msg('collapsible-expand');
			var actionHandler = function(e, opts) {
			var defaultOpts = {
			toggleClasses: true,
			toggleARIA: true,
			toggleText: {
			collapseText: collapseText,
			expandText: expandText
			}
			};
			opts = $.extend(defaultOpts, options, opts);
			togglingHandler($(this), $collapsible, e, opts);
			};
			var buildDefaultToggleLink = function() {
			return $('<span>').addClass('mw-collapsible-text').text(collapseText).wrap('<button type="button" class="mw-collapsible-toggle mw-collapsible-toggle-default"></button>').parent();
			};
			var $customTogglers;
			if (options.$customTogglers) {
			$customTogglers = $(options.$customTogglers);
			} else {
			var collapsibleId = $collapsible.attr('id') \|\| '';
			if (collapsibleId.indexOf('mw-customcollapsible-') === 0) {
			collapsibleId = $.escapeSelector(collapsibleId);
			$customTogglers = $('.' + collapsibleId.replace('mw-customcollapsible', 'mw-customtoggle')).addClass('mw-customtoggle');
			}
			}
			var $toggle;
			if ($customTogglers && $customTogglers.length) {
			actionHandler = function(e, opts) {
			var defaultOpts = {};
			opts = $.extend(defaultOpts, options, opts);
			togglingHandler($(this), $collapsible, e, opts);
			}
			;
			$toggle = $customTogglers;
			} else {
			var $firstItem;
			if ($collapsible.is('table')) {
			var $caption = $collapsible.find('> caption');
			if ($caption.length) {
			$toggle = $caption.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').first();
			if (!$toggle.length) {
			$toggle = buildDefaultToggleLink().appendTo($caption);
			}
			} else {
			$firstItem = $collapsible.find('tr').first().find('th, td');
			$toggle = $firstItem.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').first();
			if (!$toggle.length) {
			$toggle = buildDefaultToggleLink().prependTo($firstItem.eq(-1));
			}
			}
			} else if ($collapsible.parent().is('li') && $collapsible.parent().children('.mw-collapsible').length === 1 && $collapsible.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').length === 0) {
			$toggle = buildDefaultToggleLink();
			$collapsible.before($toggle);
			} else if ($collapsible.is('ul') \|\| $collapsible.is('ol')) {
			$firstItem = $collapsible.find('li').first();
			$toggle = $firstItem.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').first();
			if (!$toggle.length) {
			var firstval = $firstItem.prop('value');
			if (firstval === undefined \|\| !firstval \|\| firstval === '-1' \|\| firstval === -1) {
			$firstItem.prop('value', '1');
			}
			$toggle = buildDefaultToggleLink();
			$toggle.wrap('<li class="mw-collapsible-toggle-li"></li>').parent().prependTo($collapsible);
			}
			} else {
			$toggle = $collapsible.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').first();
			if (!$collapsible.find('> .mw-collapsible-content').length) {
			$collapsible.wrapInner('<div class="mw-collapsible-content"></div>');
			}
			if (!$toggle.length) {
			$toggle = buildDefaultToggleLink().prependTo($collapsible);
			}
			}
			}
			if ($toggle.hasClass('mw-collapsible-toggle-placeholder')) {
			var $realToggle = buildDefaultToggleLink();
			$toggle.replaceWith($realToggle);
			$toggle = $realToggle;
			}
			$toggle.on('click.mw-collapsible keydown.mw-collapsible', actionHandler).attr('aria-expanded', 'true').prop('tabIndex', 0);
			$(this).data('mw-collapsible', {
			collapse: function() {
			actionHandler.call($toggle.get(0), null, {
			wasCollapsed: false
			});
			},
			expand: function() {
			actionHandler.call($toggle.get(0), null, {
			wasCollapsed: true
			});
			},
			toggle: function() {
			actionHandler.call($toggle.get(0), null, null);
			}
			});
			if (options.collapsed \|\| $collapsible.hasClass('mw-collapsed')) {
			actionHandler.call($toggle.get(0), null, {
			wasCollapsed: false
			});
			}
			});
			window.addEventListener('hashchange', hashHandler);
			mw.hook('wikipage.collapsibleContent').fire(this);
			return this;
			}

Saucy: No longer necessary

2023-05-09T06:42:40Z

No longer necessary

← Older revision		Revision as of 06:42, 9 May 2023
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 */


	~~// Notify people who have arrived via the wiki.ironyhub.com domain that it will be expiring soon~~
	~~if ((new URL(document.location)).searchParams.has("fromolddomain")) {~~
	mw.notify($("<span>⚠️ The <i>wiki.ironyhub.com</i> domain will no longer be available after July 29. Please make sure to use the <i>irony.wiki</i> domain for all future visits.</span>"), {autoHide: false});
	}

Saucy at 08:53, 24 July 2022

2022-07-24T08:53:50Z

← Older revision		Revision as of 08:53, 24 July 2022
Line 3:		Line 3:

	// Notify people who have arrived via the wiki.ironyhub.com domain that it will be expiring soon		// Notify people who have arrived via the wiki.ironyhub.com domain that it will be expiring soon
	~~var urlParams =~~ new ~~URLSearchParams~~(document.~~URL~~);		if ((new URL(document.location)).searchParams.has("fromolddomain")) {
	~~if (urlParams~~.has("fromolddomain")) {
	mw.notify($("<span>⚠️ The <i>wiki.ironyhub.com</i> domain will no longer be available after July 29. Please make sure to use the <i>irony.wiki</i> domain for all future visits.</span>"), {autoHide: false});		mw.notify($("<span>⚠️ The <i>wiki.ironyhub.com</i> domain will no longer be available after July 29. Please make sure to use the <i>irony.wiki</i> domain for all future visits.</span>"), {autoHide: false});
	}		}

Saucy: Notify people who have arrived via the wiki.ironyhub.com domain that it will be expiring soon

2022-07-24T08:48:03Z

Notify people who have arrived via the wiki.ironyhub.com domain that it will be expiring soon

New page

/* All JavaScript here will be loaded for users of the mobile site */

// Notify people who have arrived via the wiki.ironyhub.com domain that it will be expiring soon
var urlParams = new URLSearchParams(document.URL);
if (urlParams.has("fromolddomain")) {
mw.notify($("⚠️ The wiki.ironyhub.com domain will no longer be available after July 29. Please make sure to use the irony.wiki domain for all future visits."), {autoHide: false});
}