StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-11 16:48:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(core): ♻️ simplify section handling

Browse source
This commit is contained in:
alistair3149 2024-05-21 18:46:19 -04:00
parent a405d64616
commit 593c6406fb
No known key found for this signature in database
3 changed files with 58 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
includes/Partials/BodyContent.php
View file

@ -43,9 +43,9 @@ final class BodyContent extends Partial {
*/
/**
* Class name for collapsible section wrappers
* Class name for section wrappers
*/
public const STYLE_COLLAPSIBLE_SECTION_CLASS = 'citizen-section-collapsible';
public const SECTION_CLASS = 'citizen-section';
/**
* List of tags that could be considered as section headers.
@ -203,7 +203,7 @@ final class BodyContent extends Partial {
*/
private function createSectionBodyElement( DOMDocument $doc, $sectionNumber ) {
$sectionBody = $doc->createElement( 'section' );
$sectionBody->setAttribute( 'class', self::STYLE_COLLAPSIBLE_SECTION_CLASS );
$sectionBody->setAttribute( 'class', self::SECTION_CLASS );
$sectionBody->setAttribute( 'id', 'citizen-section-collapsible-' . $sectionNumber );
return $sectionBody;

72
resources/skins.citizen.scripts/sections.js
View file

@ -10,42 +10,68 @@ function init( bodyContent ) {
}
const headings = bodyContent.querySelectorAll( '.citizen-section-heading' );
const sections = bodyContent.querySelectorAll( '.citizen-section-collapsible' );
const sections = bodyContent.querySelectorAll( '.citizen-section' );
const toggleAriaExpanded = ( headline ) => {
headline.toggleAttribute( 'aria-expanded' );
const setHeadlineAttributes = ( heading, collapsibleID, i ) => {
const headline = heading.querySelector( '.mw-headline' ) ||
heading.querySelector( '.mw-heading' );
};
if ( !headline ) {
return;
}
const setHeadlineAttributes = ( headline, collapsibleID ) => {
headline.setAttribute( 'tabindex', 0 );
headline.setAttribute( 'role', 'button' );
headline.setAttribute( 'aria-controls', collapsibleID );
headline.setAttribute( 'aria-expanded', true );
headline.setAttribute( 'data-mw-citizen-section-heading-index', i );
};
const handleClick = ( i ) => {
const collapsibleID = `citizen-section-collapsible-${ i + 1 }`;
const headline = headings[ i ].querySelector( '.citizen-section-heading .mw-headline' );
if ( headline ) {
setHeadlineAttributes( headline, collapsibleID );
headings[ i ].addEventListener( 'click', function ( e ) {
this.classList.toggle( 'citizen-section-heading--collapsed' );
sections[ i + 1 ].classList.toggle( 'citizen-section-collapsible--collapsed' );
toggleAriaExpanded( headline );
if ( e.target.closest( '.mw-editsection, .mw-editsection-like' ) ) {
e.stopPropagation();
}
} );
const toggleClasses = ( i ) => {
if ( sections[ i + 1 ] ) {
headings[ i ].classList.toggle( 'citizen-section-heading--collapsed' );
sections[ i + 1 ].classList.toggle( 'citizen-section--collapsed' );
}
};
for ( let i = 0; i < headings.length; i++ ) {
handleClick( i );
const toggleAriaExpanded = ( el ) => {
const isExpanded = el.getAttribute( 'aria-expanded' ) === 'true';
el.setAttribute( 'aria-expanded', isExpanded ? 'false' : 'true' );
};
const onEditSectionClick = ( e ) => {
e.stopPropagation();
};
const handleClick = ( e ) => {
const target = e.target;
const isEditSection = target.closest( '.mw-editsection, .mw-editsection-like' );
if ( isEditSection ) {
onEditSectionClick( e );
return;
}
const heading = target.closest( '.citizen-section-heading' );
if ( heading ) {
const i = +heading.getAttribute( 'data-mw-citizen-section-heading-index' );
const headline = heading.querySelector( '.mw-headline' ) ||
heading.querySelector( '.mw-heading' );
if ( headline ) {
toggleClasses( i );
toggleAriaExpanded( headline );
}
}
};
const headingsLength = headings.length;
for ( let i = 0; i < headingsLength; i++ ) {
setHeadlineAttributes( headings[ i ], `citizen-section-${ i + 1 }`, i );
}
bodyContent.addEventListener( 'click', handleClick, false );
}
module.exports = {

14
resources/skins.citizen.styles/components/Sections.less
View file

@ -59,10 +59,10 @@
// Fix button alignment
&-heading,
&-collapsible > h3,
&-collapsible > h4,
&-collapsible > h5,
&-collapsible > h6 {
> h3,
> h4,
> h5,
> h6 {
display: flex;
align-items: center;
@ -73,10 +73,8 @@
}
}
&-collapsible {
&--collapsed {
display: none;
}
&--collapsed {
display: none;
}
}
}