Page MenuHomeWickedGov Phorge
Files F4112159

sectionCollapsing.js
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

sectionCollapsing.js
View Options

const isCollapsedByDefault = require( './isCollapsedByDefault' );
/**
* Sets attributes on collapsible elements based on collapsed state
*
* @method
* @param {HTMLElement} container div element containing collapsible heading
* @param {HTMLElement} headingText span element containing heading text
* @param {HTMLElement} icon span element for icon
* @param {boolean} isCollapsed collapsed state to set
* @ignore
*/
function setCollapsedState( content, headingText, icon, isCollapsed ) {
// show the content if hidden, hide if shown (until found so find in page works)
content.hidden = isCollapsed ? 'until-found' : false;
// update the dropdown state based on the content visibility
if ( isCollapsed ) {
headingText.setAttribute( 'aria-expanded', 'true' );
icon.classList.add( 'mf-icon-expand' );
icon.classList.remove( 'mf-icon-collapse' );
} else {
headingText.setAttribute( 'aria-expanded', 'false' );
icon.classList.add( 'mf-icon-collapse' );
icon.classList.remove( 'mf-icon-expand' );
}
}
/**
* Toggles collapsible state for a heading
*
* @method
* @param {HTMLElement} container div element containing collapsible heading
* @param {HTMLElement} headingText span element containing heading text
* @param {HTMLElement} icon span element for icon
* @ignore
*/
function toggle( content, headingText, icon ) {
const currentlyHidden = content.hidden;
setCollapsedState( content, headingText, icon, !currentlyHidden );
}
/**
* Initialises collapsing code.
*
* @method
* @param {HTMLElement} container to enable collapsing on
* @ignore
*/
function init( container ) {
const isCollapsed = isCollapsedByDefault();
const headingWrappers = Array.from( container.querySelectorAll( '.mw-parser-output > section > .mw-heading' ) );
headingWrappers.forEach( ( wrapper ) => {
wrapper.classList.add( 'mf-collapsible-heading' );
const heading = wrapper.firstElementChild;
// Add class to collapsible content
// Used in CSS before hidden attribute is added
const content = wrapper.nextElementSibling;
content.classList.add( 'mf-collapsible-content' );
// Update the heading text to account for semantics of collapsing sections
const headingText = document.createElement( 'span' );
headingText.textContent = heading.textContent;
headingText.setAttribute( 'tabindex', '0' );
headingText.setAttribute( 'role', 'button' );
headingText.setAttribute( 'aria-controls', content.id );
// Create the dropdown arrow
const icon = document.createElement( 'span' );
icon.classList.add( 'mf-icon', 'mf-icon--small', 'mf-collapsible-icon' );
icon.setAttribute( 'aria-hidden', true );
setCollapsedState( content, headingText, icon, isCollapsed );
// Replace contents of the heading element
heading.innerHTML = '';
heading.append( icon );
heading.append( headingText );
// Register the click handlers
heading.addEventListener( 'click', () => toggle( content, headingText, icon ) );
} );
}
module.exports = { init };

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 22:43 (9 h, 42 m ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
46/d7/bc630e8121716ac09d353416b719
Default Alt Text
sectionCollapsing.js (2 KB)

Event Timeline