Difference between revisions of "MediaWiki:Mobile.js"
Dinoguy1000 (talk | contribs) (fix MediaWiki:Mobile.css not loading (temporary until we can get stuff updated elsewhere)) |
(fix) |
||
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for users using the mobile site */ | /* Any JavaScript here will be loaded for users using the mobile site */ | ||
+ | |||
+ | /** | ||
+ | * update this (replace the timestamp with 5 tildes) whenever this page is edited | ||
+ | * this simplifies checking if new code has cleared server caches | ||
+ | */ | ||
+ | var LAST_LOG = '20:45, September 27, 2023 (UTC)'; | ||
+ | console.log('MediaWiki:Mobile.js last updated:', LAST_LOG); | ||
// https://phabricator.wikimedia.org/T191596 | // https://phabricator.wikimedia.org/T191596 | ||
mw.loader.using('mobile.site.styles'); | mw.loader.using('mobile.site.styles'); | ||
+ | |||
+ | /** | ||
+ | * Replicate the collapsible behavior on headings with the "imitation" class. | ||
+ | * | ||
+ | * Not an ideal solution, but `h2` elements generated by Scribunto are added | ||
+ | * after MobileFrontEnd processes page content and makes headings collapsible. | ||
+ | */ | ||
+ | // Find all headings with the imitation class and loop through them. | ||
+ | Array.from( | ||
+ | document.getElementsByClassName('collapsible-heading--imitation') | ||
+ | ).forEach(function (el) { | ||
+ | // Add an event listener to each heading | ||
+ | return el.addEventListener('click', function (ev) { | ||
+ | // The heading is the element that was clicked on. | ||
+ | var header = ev.currentTarget; | ||
+ | |||
+ | // The section is the next element. | ||
+ | var section = header.nextSibling; | ||
+ | |||
+ | // Don't continue if the section doesn't have the appropriate class. | ||
+ | if (!section.classList.contains('collapsible-block--imitation')) { | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | // Check if the section is already visible. | ||
+ | var currentlyVisible = section.classList.contains('open-block'); | ||
+ | |||
+ | // Toggle the header and section to the opposite of their current state. | ||
+ | header.classList.toggle('open-block', !currentlyVisible); | ||
+ | section.classList.toggle('open-block', !currentlyVisible); | ||
+ | section.setAttribute('aria-expanded', !currentlyVisible); | ||
+ | }); | ||
+ | }); |
Latest revision as of 20:45, 27 September 2023
/* Any JavaScript here will be loaded for users using the mobile site */
/**
* update this (replace the timestamp with 5 tildes) whenever this page is edited
* this simplifies checking if new code has cleared server caches
*/
var LAST_LOG = '20:45, September 27, 2023 (UTC)';
console.log('MediaWiki:Mobile.js last updated:', LAST_LOG);
// https://phabricator.wikimedia.org/T191596
mw.loader.using('mobile.site.styles');
/**
* Replicate the collapsible behavior on headings with the "imitation" class.
*
* Not an ideal solution, but `h2` elements generated by Scribunto are added
* after MobileFrontEnd processes page content and makes headings collapsible.
*/
// Find all headings with the imitation class and loop through them.
Array.from(
document.getElementsByClassName('collapsible-heading--imitation')
).forEach(function (el) {
// Add an event listener to each heading
return el.addEventListener('click', function (ev) {
// The heading is the element that was clicked on.
var header = ev.currentTarget;
// The section is the next element.
var section = header.nextSibling;
// Don't continue if the section doesn't have the appropriate class.
if (!section.classList.contains('collapsible-block--imitation')) {
return;
}
// Check if the section is already visible.
var currentlyVisible = section.classList.contains('open-block');
// Toggle the header and section to the opposite of their current state.
header.classList.toggle('open-block', !currentlyVisible);
section.classList.toggle('open-block', !currentlyVisible);
section.setAttribute('aria-expanded', !currentlyVisible);
});
});