From b6902356fff4b8902d8dd781f37ac036cde000d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20V=C3=A4nttinen?= Date: Sun, 9 Jun 2024 17:50:06 +0300 Subject: [PATCH 1/2] TMS-1050: Accordion script fixes --- CHANGELOG.MD | 2 + assets/scripts/accordion.js | 154 ++++++++++++++++++++---------------- 2 files changed, 87 insertions(+), 69 deletions(-) diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 58aaa7b..37f9e7b 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +- TMS-1050: Add if-statements into accordion script to prevent breaking other elements functionality + ## [1.8.14] - 2024-06-04 - TMS-1044: Accordion-block changes diff --git a/assets/scripts/accordion.js b/assets/scripts/accordion.js index ff58556..77bcf71 100644 --- a/assets/scripts/accordion.js +++ b/assets/scripts/accordion.js @@ -51,23 +51,27 @@ export default class Accordion { if ( this.mainContainer ) { for ( let i = 0; i < this.mainContainer.length; i++ ) { - this.openAllButton[ i ].addEventListener( - 'click', - () => this.openAllDropdowns( - this.mainContainer[ i ], - this.openAllButton[ i ], - this.closeAllButton[ i ] - ) - ); + if ( this.openAllButton[ i ] ) { + this.openAllButton[ i ].addEventListener( + 'click', + () => this.openAllDropdowns( + this.mainContainer[ i ], + this.openAllButton[ i ], + this.closeAllButton[ i ] + ) + ); + } - this.closeAllButton[ i ].addEventListener( - 'click', - () => this.closeAllDropdowns( - this.mainContainer[ i ], - this.closeAllButton[ i ], - this.openAllButton[ i ] - ) - ); + if ( this.closeAllButton[ i ] ) { + this.closeAllButton[ i ].addEventListener( + 'click', + () => this.closeAllDropdowns( + this.mainContainer[ i ], + this.closeAllButton[ i ], + this.openAllButton[ i ] + ) + ); + } if ( this.dropdownTogglers ) { const togglers = this.mainContainer[ i ].getElementsByClassName( 'accordion__title-button' ); @@ -99,36 +103,38 @@ export default class Accordion { openAllDropdowns( mainContainer, openAllButton, closeAllButton ) { const dropdowns = mainContainer.getElementsByClassName( 'accordion__title-button' ); - for ( let i = 0; i < dropdowns.length; i++ ) { - const containerId = dropdowns[ i ].getAttribute( 'aria-controls' ); - const dropDownContent = document.querySelector( `#${ containerId }` ); - const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' ); - const textClose = dropdowns[ i ].querySelector( '.icon-text--close' ); - - textOpen.setAttribute( 'aria-hidden', 'true' ); - textClose.setAttribute( 'aria-hidden', 'false' ); - dropdowns[ i ].setAttribute( 'aria-expanded', 'true' ); - if ( ! dropdowns[ i ].classList.contains( 'active-accordion' ) ) { - dropdowns[ i ].classList.add( 'active-accordion' ); - } + if ( dropdowns.length >= 1 ) { + for ( let i = 0; i < dropdowns.length; i++ ) { + const containerId = dropdowns[ i ].getAttribute( 'aria-controls' ); + const dropDownContent = document.querySelector( `#${ containerId }` ); + const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' ); + const textClose = dropdowns[ i ].querySelector( '.icon-text--close' ); + + textOpen.setAttribute( 'aria-hidden', 'true' ); + textClose.setAttribute( 'aria-hidden', 'false' ); + dropdowns[ i ].setAttribute( 'aria-expanded', 'true' ); + if ( ! dropdowns[ i ].classList.contains( 'active-accordion' ) ) { + dropdowns[ i ].classList.add( 'active-accordion' ); + } - dropDownContent.classList.remove( 'is-hidden' ); + dropDownContent.classList.remove( 'is-hidden' ); - if ( ! dropdowns[ i ].classList.contains( 'is-hidden' ) - && ! dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) { + if ( ! dropdowns[ i ].classList.contains( 'is-hidden' ) + && ! dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) { - const accordionTables = dropDownContent.getElementsByTagName( 'table' ); + const accordionTables = dropDownContent.getElementsByTagName( 'table' ); - if ( accordionTables.length > 0 ) { - new Indicate( accordionTables, { arrows: true } ); + if ( accordionTables.length > 0 ) { + new Indicate( accordionTables, { arrows: true } ); - dropdowns[ i ].classList.add( 'accordion--table-initialized' ); + dropdowns[ i ].classList.add( 'accordion--table-initialized' ); + } } } - } - closeAllButton.classList.remove( 'is-hidden' ); - openAllButton.classList.add( 'is-hidden' ); + closeAllButton.classList.remove( 'is-hidden' ); + openAllButton.classList.add( 'is-hidden' ); + } } /** @@ -143,36 +149,38 @@ export default class Accordion { closeAllDropdowns( mainContainer, closeAllButton, openAllButton ) { const dropdowns = mainContainer.getElementsByClassName( 'accordion__title-button' ); - for ( let i = 0; i < dropdowns.length; i++ ) { - const containerId = dropdowns[ i ].getAttribute( 'aria-controls' ); - const dropDownContent = document.querySelector( `#${ containerId }` ); - const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' ); - const textClose = dropdowns[ i ].querySelector( '.icon-text--close' ); - - textOpen.setAttribute( 'aria-hidden', 'false' ); - textClose.setAttribute( 'aria-hidden', 'true' ); - dropdowns[ i ].setAttribute( 'aria-expanded', 'false' ); - if ( dropdowns[ i ].classList.contains( 'active-accordion' ) ) { - dropdowns[ i ].classList.remove( 'active-accordion' ); - } + if ( dropdowns.length >= 1 ) { + for ( let i = 0; i < dropdowns.length; i++ ) { + const containerId = dropdowns[ i ].getAttribute( 'aria-controls' ); + const dropDownContent = document.querySelector( `#${ containerId }` ); + const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' ); + const textClose = dropdowns[ i ].querySelector( '.icon-text--close' ); + + textOpen.setAttribute( 'aria-hidden', 'false' ); + textClose.setAttribute( 'aria-hidden', 'true' ); + dropdowns[ i ].setAttribute( 'aria-expanded', 'false' ); + if ( dropdowns[ i ].classList.contains( 'active-accordion' ) ) { + dropdowns[ i ].classList.remove( 'active-accordion' ); + } - dropDownContent.classList.add( 'is-hidden' ); + dropDownContent.classList.add( 'is-hidden' ); - if ( dropdowns[ i ].classList.contains( 'is-hidden' ) - && dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) { + if ( dropdowns[ i ].classList.contains( 'is-hidden' ) + && dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) { - const accordionTables = dropDownContent.getElementsByTagName( 'table' ); + const accordionTables = dropDownContent.getElementsByTagName( 'table' ); - if ( accordionTables.length > 0 ) { - new Indicate( accordionTables, { arrows: true } ); + if ( accordionTables.length > 0 ) { + new Indicate( accordionTables, { arrows: true } ); - dropdowns[ i ].classList.remove( 'accordion--table-initialized' ); + dropdowns[ i ].classList.remove( 'accordion--table-initialized' ); + } } } - } - openAllButton.classList.remove( 'is-hidden' ); - closeAllButton.classList.add( 'is-hidden' ); + openAllButton.classList.remove( 'is-hidden' ); + closeAllButton.classList.add( 'is-hidden' ); + } } /** @@ -188,13 +196,15 @@ export default class Accordion { const dropdowns = mainContainer.getElementsByClassName( 'accordion__title-button' ); const openDropdowns = mainContainer.getElementsByClassName( 'active-accordion' ); - if ( openDropdowns.length === dropdowns.length ) { - closeAllButton.classList.remove( 'is-hidden' ); - openAllButton.classList.add( 'is-hidden' ); - } - else { - openAllButton.classList.remove( 'is-hidden' ); - closeAllButton.classList.add( 'is-hidden' ); + if ( openAllButton && closeAllButton ) { + if ( openDropdowns.length === dropdowns.length ) { + closeAllButton.classList.remove( 'is-hidden' ); + openAllButton.classList.add( 'is-hidden' ); + } + else { + openAllButton.classList.remove( 'is-hidden' ); + closeAllButton.classList.add( 'is-hidden' ); + } } } @@ -211,8 +221,14 @@ export default class Accordion { const textOpen = clickedToggler.querySelector( '.icon-text--open' ); const textClose = clickedToggler.querySelector( '.icon-text--close' ); - this.toggleAriaHidden( textOpen ); - this.toggleAriaHidden( textClose ); + if ( textOpen ) { + this.toggleAriaHidden( textOpen ); + } + + if ( textClose ) { + this.toggleAriaHidden( textClose ); + } + this.toggleAriaExpanded( clickedToggler ); dropDownContent.classList.toggle( 'is-hidden' ); From 571913d8776e710aa94d172449fdaa7599cb6c3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20V=C3=A4nttinen?= Date: Tue, 11 Jun 2024 22:19:09 +0300 Subject: [PATCH 2/2] TMS-1050: CR fix --- assets/scripts/accordion.js | 100 +++++++++++++++++++----------------- 1 file changed, 52 insertions(+), 48 deletions(-) diff --git a/assets/scripts/accordion.js b/assets/scripts/accordion.js index 77bcf71..9c988c8 100644 --- a/assets/scripts/accordion.js +++ b/assets/scripts/accordion.js @@ -103,38 +103,40 @@ export default class Accordion { openAllDropdowns( mainContainer, openAllButton, closeAllButton ) { const dropdowns = mainContainer.getElementsByClassName( 'accordion__title-button' ); - if ( dropdowns.length >= 1 ) { - for ( let i = 0; i < dropdowns.length; i++ ) { - const containerId = dropdowns[ i ].getAttribute( 'aria-controls' ); - const dropDownContent = document.querySelector( `#${ containerId }` ); - const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' ); - const textClose = dropdowns[ i ].querySelector( '.icon-text--close' ); - - textOpen.setAttribute( 'aria-hidden', 'true' ); - textClose.setAttribute( 'aria-hidden', 'false' ); - dropdowns[ i ].setAttribute( 'aria-expanded', 'true' ); - if ( ! dropdowns[ i ].classList.contains( 'active-accordion' ) ) { - dropdowns[ i ].classList.add( 'active-accordion' ); - } + if ( dropdowns.length === 0 ) { + return; + } - dropDownContent.classList.remove( 'is-hidden' ); + for ( let i = 0; i < dropdowns.length; i++ ) { + const containerId = dropdowns[ i ].getAttribute( 'aria-controls' ); + const dropDownContent = document.querySelector( `#${ containerId }` ); + const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' ); + const textClose = dropdowns[ i ].querySelector( '.icon-text--close' ); + + textOpen.setAttribute( 'aria-hidden', 'true' ); + textClose.setAttribute( 'aria-hidden', 'false' ); + dropdowns[ i ].setAttribute( 'aria-expanded', 'true' ); + if ( ! dropdowns[ i ].classList.contains( 'active-accordion' ) ) { + dropdowns[ i ].classList.add( 'active-accordion' ); + } - if ( ! dropdowns[ i ].classList.contains( 'is-hidden' ) - && ! dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) { + dropDownContent.classList.remove( 'is-hidden' ); - const accordionTables = dropDownContent.getElementsByTagName( 'table' ); + if ( ! dropdowns[ i ].classList.contains( 'is-hidden' ) + && ! dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) { - if ( accordionTables.length > 0 ) { - new Indicate( accordionTables, { arrows: true } ); + const accordionTables = dropDownContent.getElementsByTagName( 'table' ); - dropdowns[ i ].classList.add( 'accordion--table-initialized' ); - } + if ( accordionTables.length > 0 ) { + new Indicate( accordionTables, { arrows: true } ); + + dropdowns[ i ].classList.add( 'accordion--table-initialized' ); } } - - closeAllButton.classList.remove( 'is-hidden' ); - openAllButton.classList.add( 'is-hidden' ); } + + closeAllButton.classList.remove( 'is-hidden' ); + openAllButton.classList.add( 'is-hidden' ); } /** @@ -149,38 +151,40 @@ export default class Accordion { closeAllDropdowns( mainContainer, closeAllButton, openAllButton ) { const dropdowns = mainContainer.getElementsByClassName( 'accordion__title-button' ); - if ( dropdowns.length >= 1 ) { - for ( let i = 0; i < dropdowns.length; i++ ) { - const containerId = dropdowns[ i ].getAttribute( 'aria-controls' ); - const dropDownContent = document.querySelector( `#${ containerId }` ); - const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' ); - const textClose = dropdowns[ i ].querySelector( '.icon-text--close' ); - - textOpen.setAttribute( 'aria-hidden', 'false' ); - textClose.setAttribute( 'aria-hidden', 'true' ); - dropdowns[ i ].setAttribute( 'aria-expanded', 'false' ); - if ( dropdowns[ i ].classList.contains( 'active-accordion' ) ) { - dropdowns[ i ].classList.remove( 'active-accordion' ); - } + if ( dropdowns.length === 0 ) { + return; + } - dropDownContent.classList.add( 'is-hidden' ); + for ( let i = 0; i < dropdowns.length; i++ ) { + const containerId = dropdowns[ i ].getAttribute( 'aria-controls' ); + const dropDownContent = document.querySelector( `#${ containerId }` ); + const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' ); + const textClose = dropdowns[ i ].querySelector( '.icon-text--close' ); + + textOpen.setAttribute( 'aria-hidden', 'false' ); + textClose.setAttribute( 'aria-hidden', 'true' ); + dropdowns[ i ].setAttribute( 'aria-expanded', 'false' ); + if ( dropdowns[ i ].classList.contains( 'active-accordion' ) ) { + dropdowns[ i ].classList.remove( 'active-accordion' ); + } - if ( dropdowns[ i ].classList.contains( 'is-hidden' ) - && dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) { + dropDownContent.classList.add( 'is-hidden' ); - const accordionTables = dropDownContent.getElementsByTagName( 'table' ); + if ( dropdowns[ i ].classList.contains( 'is-hidden' ) + && dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) { - if ( accordionTables.length > 0 ) { - new Indicate( accordionTables, { arrows: true } ); + const accordionTables = dropDownContent.getElementsByTagName( 'table' ); - dropdowns[ i ].classList.remove( 'accordion--table-initialized' ); - } + if ( accordionTables.length > 0 ) { + new Indicate( accordionTables, { arrows: true } ); + + dropdowns[ i ].classList.remove( 'accordion--table-initialized' ); } } - - openAllButton.classList.remove( 'is-hidden' ); - closeAllButton.classList.add( 'is-hidden' ); } + + openAllButton.classList.remove( 'is-hidden' ); + closeAllButton.classList.add( 'is-hidden' ); } /**