|
|
Line 1: |
Line 1: |
| /* 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);
| |
| }
| |
| }
| |
|
| |
| if (window.innerWidth < 768 && document.querySelectorAll('h2').length > 4){ //only happen if window width is below value and if there are more than a certain number of h2 elements
| |
| docReady(collapsibleHeadings);
| |
| }
| |
|
| |
| function collapsibleHeadings() {
| |
|
| |
| // Get all the <h2> headings
| |
| var headings = document.querySelectorAll('.mw-parser-output h2');
| |
| Array.prototype.forEach.call(headings, function (heading) {
| |
| // Give each <h2> a toggle button child
| |
| // with the SVG plus/minus icon
| |
|
| |
| heading.innerHTML = "<button aria-expanded=\"false\"> ".concat(heading.innerHTML, "<svg aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 10 10\"><rect class=\"vert\" height=\"8\" width=\"2\" y=\"1\" x=\"4\"/><rect height=\"2\" width=\"8\" y=\"4\" x=\"1\"/></svg></button>");
| |
|
| |
|
| |
| // 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;
| |
| };
| |
| });
| |
| }
| |