TMS-1044: Accordion-block open all / close all functionality

CHANGELOG.MD

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1044: Accordion-block changes
+    - Add open all & close all -buttons & js functionalities
+    - Add open / close text next to accordion toggler icon
 - TMS-1043:
     - Fix date checking for event
     - Minimize the amount of event data loops

assets/scripts/accordion.js

@@ -19,6 +19,8 @@ export default class Accordion {
 
         if ( this.mainContainer ) {
 
+            this.openAllButton = document.querySelectorAll( '.accordion__open-all' );
+            this.closeAllButton = document.querySelectorAll( '.accordion__close-all' );
             this.dropdownTogglers = document.querySelectorAll( '.accordion__title-button' );
             this.dropdowns = document.querySelectorAll( '.accordion__content' );
 
@@ -46,6 +48,154 @@ 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 ]
+                    )
+                );
+
+                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' );
+
+                    for ( let x = 0; x < togglers.length; x++ ) {
+                        togglers[ x ].addEventListener(
+                            'click',
+                            () => this.updateButtonStates(
+                                this.mainContainer[ i ],
+                                this.openAllButton[ i ],
+                                this.closeAllButton[ i ]
+                            )
+                        );
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Opens all dropdowns.
+     *
+     * @param {HTMLDivElement}    mainContainer  Main container for accordion dropdowns.
+     * @param {HTMLButtonElement} openAllButton  The open all -button that was clicked.
+     * @param {HTMLButtonElement} closeAllButton The close all -button to be shown.
+     *
+     * @return {void}
+     */
+    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' );
+            }
+
+            dropDownContent.classList.remove( 'is-hidden' );
+
+            if ( ! dropdowns[ i ].classList.contains( 'is-hidden' )
+            && ! dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) {
+
+                const accordionTables = dropDownContent.getElementsByTagName( 'table' );
+
+                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' );
+    }
+
+    /**
+     * Closes all dropdowns.
+     *
+     * @param {HTMLDivElement}    mainContainer  Main container for accordion dropdowns.
+     * @param {HTMLButtonElement} closeAllButton The close all -button that was clicked.
+     * @param {HTMLButtonElement} openAllButton  The open all -button to be shown.
+     *
+     * @return {void}
+     */
+    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' );
+            }
+
+            dropDownContent.classList.add( 'is-hidden' );
+
+            if ( dropdowns[ i ].classList.contains( 'is-hidden' )
+            && dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) {
+
+                const accordionTables = dropDownContent.getElementsByTagName( 'table' );
+
+                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' );
+    }
+
+    /**
+     * Updates "Close all" or "Open all" -button states depending on open accordion dropdowns.
+     *
+     * @param {HTMLDivElement}    mainContainer  Main container for accordion dropdowns.
+     * @param {HTMLButtonElement} openAllButton  The open all -button.
+     * @param {HTMLButtonElement} closeAllButton The close all -button.
+     *
+     * @return {void}
+     */
+    updateButtonStates( mainContainer, openAllButton, closeAllButton ) {
+        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' );
+        }
     }
 
     /**
@@ -58,7 +208,11 @@ export default class Accordion {
     toggleDropdown( clickedToggler ) {
         const containerId = clickedToggler.getAttribute( 'aria-controls' );
         const dropDownContent = document.querySelector( `#${ containerId }` );
+        const textOpen = clickedToggler.querySelector( '.icon-text--open' );
+        const textClose = clickedToggler.querySelector( '.icon-text--close' );
 
+        this.toggleAriaHidden( textOpen );
+        this.toggleAriaHidden( textClose );
         this.toggleAriaExpanded( clickedToggler );
         dropDownContent.classList.toggle( 'is-hidden' );
 
@@ -96,6 +250,18 @@ export default class Accordion {
 
     }
 
+    /**
+     * Get the icon-texts aria-hidden current state and set a new opposite state to it.
+     *
+     * @param {HTMLElement} iconText The icon-text element.
+     *
+     * @return {void}
+     */
+    toggleAriaHidden( iconText ) {
+        const ariaHiddenState = iconText.getAttribute( 'aria-hidden' ) === 'false' ? true : false;
+        iconText.setAttribute( 'aria-hidden', ariaHiddenState );
+    }
+
     /**
      * Add an unique identifier to each accordion.
      *

assets/styles/blocks/custom/_accordion.scss

@@ -1,4 +1,23 @@
 .accordion {
+    // Important properties to override all child-themes class styles
+    &__open-all,
+    &__close-all {
+        color: $primary !important;
+        background-color: transparent !important;
+        border: none !important;
+        border-radius: 0 !important;
+
+        .icon {
+            margin-left: $theme-spacing-three-quarters !important;
+        }
+
+        &:hover {
+            filter: none !important;
+            box-shadow: none !important;
+            text-decoration: underline !important;
+        }
+    }
+
     &__description {
         @include from($tablet) {
             max-width: 75%;
@@ -33,6 +52,14 @@
             .icon {
                 transform: rotate(180deg);
             }
+
+            .icon-text--open {
+                display: none;
+            }
+
+            .icon-text--close {
+                display: inline-block;
+            }
         }
 
         &:hover,
@@ -42,8 +69,19 @@
     }
 
     &__title-icon {
-        .icon {
-            transition: transform ease-in .2s;
+        align-items: center;
+    }
+
+    &__icon-text {
+        color: $primary;
+        font-size: $base-size;
+
+        &.icon-text--open {
+            display: inline-block;
+        }
+
+        &.icon-text--close {
+            display: none;
         }
     }
 }

assets/styles/themes/_theme-kokemus-overrides.scss

@@ -233,3 +233,19 @@
         }
     }
 }
+
+.accordion {
+    &__close-all,
+    &__open-all,
+    &__icon-text {
+        color: $primary-invert !important;
+    }
+
+    &__close-all,
+    &__open-all,
+    &__title-button {
+        .icon {
+            fill: $primary-invert !important;
+        }
+    }
+}

assets/styles/themes/_theme-neutraali-overrides.scss

@@ -176,3 +176,18 @@ $pill-background-active-focus: bulmaDarken($primary, 2.5%);
         }
     }
 }
+
+.accordion {
+    &__close-all,
+    &__open-all,
+    &__icon-text {
+        color: $primary-invert !important;
+    }
+
+    &__close-all,
+    &__open-all {
+        .icon {
+            fill: $primary-invert !important;
+        }
+    }
+}

assets/styles/themes/_theme-paahde-overrides.scss

@@ -244,3 +244,23 @@
         }
     }
 }
+
+.accordion {
+    &__row {
+        border-color: $primary;
+    }
+
+    &__close-all,
+    &__open-all,
+    &__icon-text {
+        color: $primary-invert !important;
+    }
+
+    &__close-all,
+    &__open-all,
+    &__title-button {
+        .icon {
+            fill: $primary-invert !important;
+        }
+    }
+}