MediaWiki:Common.js: Difference between revisions
From WikiMSK
No edit summary |
No edit summary |
||
Line 11: | Line 11: | ||
} | } | ||
docReady( | docReady(console.log("ready!")); | ||
function collapsibleHeadings() { | function collapsibleHeadings() { |
Revision as of 08:54, 22 August 2020
/* Any JavaScript here will be loaded for all users on every page load. */
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
docReady(console.log("ready!"));
function collapsibleHeadings() {
// Get all the <h2> headings
var headings = document.querySelectorAll('main h2');
Array.prototype.forEach.call(headings, function (heading) {
// Give each <h2> a toggle button child
// with the SVG plus/minus icon
heading.innerHTML = "\n <button aria-expanded=\"false\">\n ".concat(heading.textContent, "\n <svg aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 10 10\">\n <rect class=\"vert\" height=\"8\" width=\"2\" y=\"1\" x=\"4\"/>\n <rect height=\"2\" width=\"8\" y=\"4\" x=\"1\"/>\n </svg>\n </button>\n "); // Function to create a node list
// of the content between this <h2> and the next
var getContent = function getContent(elem) {
var elems = [];
while (elem.nextElementSibling && elem.nextElementSibling.tagName !== 'H2') {
elems.push(elem.nextElementSibling);
elem = elem.nextElementSibling;
} // Delete the old versions of the content nodes
elems.forEach(function (node) {
node.parentNode.removeChild(node);
});
return elems;
}; // Assign the contents to be expanded/collapsed (array)
var contents = getContent(heading); // Create a wrapper element for `contents` and hide it
var wrapper = document.createElement('div');
wrapper.hidden = true; // Add each element of `contents` to `wrapper`
contents.forEach(function (node) {
wrapper.appendChild(node);
}); // Add the wrapped content back into the DOM
// after the heading
heading.parentNode.insertBefore(wrapper, heading.nextElementSibling); // Assign the button
var btn = heading.querySelector('button');
btn.onclick = function () {
// Cast the state as a boolean
var expanded = btn.getAttribute('aria-expanded') === 'true' || false; // Switch the state
btn.setAttribute('aria-expanded', !expanded); // Switch the content's visibility
wrapper.hidden = expanded;
};
});
};