1,979
edits
MediaWiki:Mobile.js: Difference between revisions
tryna fix the devs' bad decisions
(No longer necessary) |
(tryna fix the devs' bad decisions) Tag: Reverted |
||
| 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; | |||
} | |||