From 593c6406fbc4931e211f13ceadc4618452d308a4 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 21 May 2024 18:46:19 -0400
Subject: [PATCH] =?UTF-8?q?refactor(core):=20=E2=99=BB=EF=B8=8F=20simplify?=
 =?UTF-8?q?=20section=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 includes/Partials/BodyContent.php             |  6 +-
 resources/skins.citizen.scripts/sections.js   | 72 +++++++++++++------
 .../components/Sections.less                  | 14 ++--
 3 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/includes/Partials/BodyContent.php b/includes/Partials/BodyContent.php
index 3acdcf03..eb85db13 100644
--- a/includes/Partials/BodyContent.php
+++ b/includes/Partials/BodyContent.php
@@ -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;
diff --git a/resources/skins.citizen.scripts/sections.js b/resources/skins.citizen.scripts/sections.js
index e449b876..5327b8d2 100644
--- a/resources/skins.citizen.scripts/sections.js
+++ b/resources/skins.citizen.scripts/sections.js
@@ -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 = {
diff --git a/resources/skins.citizen.styles/components/Sections.less b/resources/skins.citizen.styles/components/Sections.less
index ed406e30..b1274c98 100644
--- a/resources/skins.citizen.styles/components/Sections.less
+++ b/resources/skins.citizen.styles/components/Sections.less
@@ -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;
 		}
 	}
 }