From ba3be61a409b55d478efb7538e93d9c6c05cc037 Mon Sep 17 00:00:00 2001 From: Alistair Wearring <95761929+AWearring@users.noreply.github.com> Date: Tue, 1 Oct 2024 12:43:40 +0100 Subject: [PATCH] Remove accordion icon added by JS and add to twig instead (#200) * Remove accordion icon added by JS and add to twig instead * Moved button from JS to Twig * Removed un-needed commented code * Removed more commented code * Updated button to hidden in twig and un-hidden by JS and updated destroy() * Corrected button selector code * Removed unrequired class from button * Hide the button in CSS when it has attribute "hidden" * Added default heading text, hide in JS * If heading or buttons don't exist --- .../css/localgov-accordion.css | 4 + .../js/localgov-accordion.js | 132 ++++++++++-------- .../localgov_subsites_paragraphs.module | 2 + ...ragraph--localgov-accordion-pane.html.twig | 8 +- 4 files changed, 86 insertions(+), 60 deletions(-) diff --git a/modules/localgov_subsites_paragraphs/css/localgov-accordion.css b/modules/localgov_subsites_paragraphs/css/localgov-accordion.css index c20658f..b56b0b6 100644 --- a/modules/localgov_subsites_paragraphs/css/localgov-accordion.css +++ b/modules/localgov_subsites_paragraphs/css/localgov-accordion.css @@ -8,6 +8,10 @@ text-align: left; } +.accordion-pane__title button[hidden] { + display: none; +} + .accordion--initialised .accordion-pane__content { display: none; } diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js index 1b07288..cfba2a9 100644 --- a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js +++ b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js @@ -117,83 +117,97 @@ const pane = accordionPanes[i]; const content = pane.querySelectorAll('.accordion-pane__content'); const title = pane.querySelectorAll('.accordion-pane__title'); - const titleText = title[0].textContent; - const button = document.createElement('button'); - const text = document.createTextNode(titleText); + const button = title[0].querySelector('button'); + const heading = title[0].querySelector('.accordion-pane__heading'); const id = `accordion-content-${index}-${i}`; // Add id attribute to all pane content elements. content[0].setAttribute('id', id); - // Add show/hide button to each accordion title. - button.appendChild(text); - // Add an initially hidden icon which can be used if required to make accordions fit GDS standard - button.innerHTML += ""; - button.setAttribute('aria-expanded', 'false'); - button.setAttribute('aria-controls', id); - - // Add click event listener to the show/hide button. - button.addEventListener('click', e => { - const targetPaneId = e.target.getAttribute('aria-controls'); - const targetPane = accordion.querySelectorAll(`#${targetPaneId}`); - const openPane = accordion.querySelectorAll(`.${openClass}`); - - // Check the current state of the button and the content it controls. - if (e.target.getAttribute('aria-expanded') === 'false') { - // Close currently open pane. - if (openPane.length && !allowMultiple) { - const openPaneId = openPane[0].getAttribute('id'); - const openPaneButton = accordion.querySelectorAll( - `[aria-controls="${openPaneId}"]`, - ); - - collapsePane(openPaneButton[0], openPane[0]); - } + // Hide default Heading text + if (heading) { + heading.hidden = true; + }; + + if (button) { + // Add aria-controls id to button and un-hide + button.setAttribute('aria-controls', id); + button.hidden = false; + + // Add click event listener to the show/hide button. + button.addEventListener('click', e => { + const targetPaneId = e.target.getAttribute('aria-controls'); + const targetPane = accordion.querySelectorAll(`#${targetPaneId}`); + const openPane = accordion.querySelectorAll(`.${openClass}`); - // Show new pane. - expandPane(e.target, targetPane[0]); - } else { - // If target pane is currently open, close it. - collapsePane(e.target, targetPane[0]); - } + // Check the current state of the button and the content it controls. + if (e.target.getAttribute('aria-expanded') === 'false') { + // Close currently open pane. + if (openPane.length && !allowMultiple) { + const openPaneId = openPane[0].getAttribute('id'); + const openPaneButton = accordion.querySelectorAll( + `[aria-controls="${openPaneId}"]`, + ); - if (showHideButton) { - const accordionState = getAccordionState(); - const toggleState = showHideButton.getAttribute('aria-expanded') === 'true'; + collapsePane(openPaneButton[0], openPane[0]); + } - if ( - (accordionState === 1 && !toggleState) || - (!accordionState && toggleState) - ) { - toggleAll(); + // Show new pane. + expandPane(e.target, targetPane[0]); + } else { + // If target pane is currently open, close it. + collapsePane(e.target, targetPane[0]); } - } - }); - if (displayShowHide) { - showHideButton = accordion.querySelector('.accordion-toggle-all'); - showHideButton.hidden = false; - showHideButton.addEventListener('click', toggleAll); - showHideButtonLabel = showHideButton.querySelector('.accordion-text'); - } + if (showHideButton) { + const accordionState = getAccordionState(); + const toggleState = showHideButton.getAttribute('aria-expanded') === 'true'; + + if ( + (accordionState === 1 && !toggleState) || + (!accordionState && toggleState) + ) { + toggleAll(); + } + } + }); + }; - // Add init class. - accordion.classList.add(initClass); + if (button) { + if (displayShowHide) { + showHideButton = accordion.querySelector('.accordion-toggle-all'); + showHideButton.hidden = false; + showHideButton.addEventListener('click', toggleAll); + showHideButtonLabel = showHideButton.querySelector('.accordion-text'); + } + + // Add init class. + accordion.classList.add(initClass); + }; - // Add show/hide button to each accordion pane title element. - title[0].children[0].innerHTML = ''; - title[0].children[0].appendChild(button); } }; const destroy = () => { for (let i = 0; i < numberOfPanes; i++) { - // Remove buttons from accordion pane titles. + // Remove id attributes from buttons in accordion pane titles. const button = accordion - .querySelectorAll('.accordion-pane__title') - [i].querySelectorAll('button'); - if (button.length > 0) { - button[0].outerHTML = button[0].innerHTML; + .querySelectorAll('.accordion-pane__title')[i] + .querySelector('button') + .removeAttribute('id'); + + // Hide buttons in accordion pane titles. + if (button) { + button.hidden = true; + } + + // Un-hide default heading text + const heading = accordion + .querySelectorAll('.accordion-pane__title')[i] + .querySelector('.accordion-pane__heading'); + + if (heading) { + heading.hidden = false; } // Remove id attributes from pane content elements. diff --git a/modules/localgov_subsites_paragraphs/localgov_subsites_paragraphs.module b/modules/localgov_subsites_paragraphs/localgov_subsites_paragraphs.module index b1660d6..741c03e 100644 --- a/modules/localgov_subsites_paragraphs/localgov_subsites_paragraphs.module +++ b/modules/localgov_subsites_paragraphs/localgov_subsites_paragraphs.module @@ -122,6 +122,8 @@ function localgov_subsites_paragraphs_preprocess_paragraph(&$variables) { $heading_level = $paragraph->get('localgov_heading_level')->value; if (is_string($heading_level)) { $variables['heading'] = _localgov_subsites_paragraphs_create_heading($heading_text, $heading_level); + $variables['heading_text'] = $heading_text; + $variables['heading_level'] = $heading_level; } } diff --git a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig index fc70928..d0a622b 100644 --- a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig +++ b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig @@ -52,7 +52,13 @@ {% block content %}
- {{ heading }} + <{{ heading_level }}> + {{ heading_text }} + +
{{ content.localgov_body_text }}