|
|
(One intermediate revision by the same user not shown) |
Line 2: |
Line 2: |
|
| |
|
|
| |
|
| /* | | // I wasn't totally satisfied with MediaWiki's built-in way to make collapsible elements, so here is an alternative implementation I made. |
| For whatever reason, the MediaWiki devs decided to disable collapsible sections on mobile.
| | function customcollapseShow(jQueryObj) { |
| (See https://phabricator.wikimedia.org/T111565)
| | var container = $(jQueryObj).parents(".customcollapse"); |
| I'm hoping if I just add back the missing function that it will work again | | container.find(".customcollapse-content").show(); |
| */
| | container.find(".customcollapse-show").hide().removeAttr("aria-expanded"); |
| $.fn.makeCollapsible = function(options) {
| | container.find(".customcollapse-hide").show().attr("aria-expanded", "true"); |
| options = options || {};
| | container.find(".customcollapse-toggle").each(function () { |
| this.each(function() {
| | $(this).attr("aria-expanded", "true"); |
| var $collapsible = $(this).addClass('mw-collapsible');
| | if ($(this).attr("data-hidetext")) $(this).text($(this).attr("data-hidetext")); |
| if ($collapsible.data('mw-made-collapsible')) {
| | }); |
| return;
| | } |
| } else {
| | |
| $collapsible.addClass('mw-made-collapsible').data('mw-made-collapsible', true);
| | function customcollapseHide(jQueryObj) { |
| }
| | var container = $(jQueryObj).parents(".customcollapse"); |
| var collapseText = options.collapseText || $collapsible.attr('data-collapsetext') || mw.msg('collapsible-collapse');
| | container.find(".customcollapse-content").hide(); |
| var expandText = options.expandText || $collapsible.attr('data-expandtext') || mw.msg('collapsible-expand');
| | container.find(".customcollapse-hide").hide().removeAttr("aria-expanded"); |
| var actionHandler = function(e, opts) {
| | container.find(".customcollapse-show").show().attr("aria-expanded", "false"); |
| var defaultOpts = {
| | container.find(".customcollapse-toggle").each(function () { |
| toggleClasses: true,
| | $(this).attr("aria-expanded", "false"); |
| toggleARIA: true,
| | if ($(this).attr("data-showtext")) $(this).text($(this).attr("data-showtext")); |
| toggleText: {
| | }); |
| collapseText: collapseText,
| | } |
| expandText: expandText
| | |
| }
| | if ($(".customcollapse").length > 0) { |
| };
| | $(".customcollapse").each(function () { |
| opts = $.extend(defaultOpts, options, opts);
| | if ($(this).hasClass("collapsed")) { |
| togglingHandler($(this), $collapsible, e, opts);
| | $(this).find(".customcollapse-content").hide(); |
| };
| | $(this).find(".customcollapse-hide").hide(); |
| var buildDefaultToggleLink = function() {
| | $(this).find(".customcollapse-show").show().attr("aria-expanded", "false"); |
| return $('<span>').addClass('mw-collapsible-text').text(collapseText).wrap('<button type="button" class="mw-collapsible-toggle mw-collapsible-toggle-default"></button>').parent();
| | $(this).find(".customcollapse-toggle").each(function () { |
| };
| | $(this).attr("aria-expanded", "false"); |
| var $customTogglers;
| | if ($(this).attr("data-showtext")) $(this).text($(this).attr("data-showtext")); |
| if (options.$customTogglers) {
| | }); |
| $customTogglers = $(options.$customTogglers);
| | } else { |
| } else {
| | $(this).find(".customcollapse-show").hide(); |
| var collapsibleId = $collapsible.attr('id') || '';
| | $(this).find(".customcollapse-hide").show().attr("aria-expanded", "true"); |
| if (collapsibleId.indexOf('mw-customcollapsible-') === 0) {
| | $(this).find(".customcollapse-toggle").each(function () { |
| collapsibleId = $.escapeSelector(collapsibleId);
| | $(this).attr("aria-expanded", "true"); |
| $customTogglers = $('.' + collapsibleId.replace('mw-customcollapsible', 'mw-customtoggle')).addClass('mw-customtoggle');
| | if ($(this).attr("data-hidetext")) $(this).text($(this).attr("data-hidetext")); |
| }
| | }); |
| }
| | } |
| var $toggle;
| | $(this).find(".customcollapse-toggle").each(function () { |
| if ($customTogglers && $customTogglers.length) {
| | // For toggles, changing the element to a <button>. This necessitates removing the element and adding it back again |
| actionHandler = function(e, opts) {
| | $(this).addClass("plainbutton"); |
| var defaultOpts = {};
| | var innerHtml = this.innerHTML; |
| opts = $.extend(defaultOpts, options, opts);
| | var attributes = this.attributes; |
| togglingHandler($(this), $collapsible, e, opts);
| | var btn = document.createElement("button"); |
| }
| | btn.innerHTML = innerHtml; |
| ;
| | for (var i = 0; i < attributes.length; i++) { |
| $toggle = $customTogglers;
| | btn.attributes.setNamedItem(attributes[i].cloneNode()); |
| } else {
| | } |
| var $firstItem;
| | $(this).replaceWith(btn); |
| if ($collapsible.is('table')) {
| | }); |
| var $caption = $collapsible.find('> caption');
| | }); |
| if ($caption.length) {
| | |
| $toggle = $caption.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').first();
| | // Define a toggle element with class="customcollapse-toggle" |
| if (!$toggle.length) {
| | // These are simple text-only toggles that the script will modify. To make more custom ones, use customcollapse-show and customcollapse-hide classes |
| $toggle = buildDefaultToggleLink().appendTo($caption);
| | $(".customcollapse-toggle").on("click", function () { |
| }
| | if ($(this).attr("aria-expanded") == "true") customcollapseHide(this); |
| } else {
| | else customcollapseShow(this); |
| $firstItem = $collapsible.find('tr').first().find('th, td');
| | }); |
| $toggle = $firstItem.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').first();
| | |
| if (!$toggle.length) {
| | // Define a show element with class="customcollapse-show" |
| $toggle = buildDefaultToggleLink().prependTo($firstItem.eq(-1));
| | $(".customcollapse-show").on("click", customcollapseShow); |
| }
| | |
| }
| | // Define a hide element with class="customcollapse-hide" |
| } else if ($collapsible.parent().is('li') && $collapsible.parent().children('.mw-collapsible').length === 1 && $collapsible.find('> .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder').length === 0) {
| | $(".customcollapse-hide").on("click", customcollapseHide); |
| $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;
| |
| } | | } |