diff --git a/src/components/compress/custom-els/MultiPanel/index.ts b/src/components/compress/custom-els/MultiPanel/index.ts index 3a5cef8f..30e1596f 100644 --- a/src/components/compress/custom-els/MultiPanel/index.ts +++ b/src/components/compress/custom-els/MultiPanel/index.ts @@ -1,5 +1,9 @@ import * as style from './styles.css'; +interface CloseAllOptions { + exceptFirst?: boolean; +} + const openOneOnlyAttr = 'open-one-only'; function getClosestHeading(el: Element) { @@ -36,7 +40,7 @@ export default class MultiPanel extends HTMLElement { attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) { if (name === openOneOnlyAttr && newValue === null) { - // TODO + this._closeAll({ exceptFirst: true }); } } @@ -120,8 +124,13 @@ export default class MultiPanel extends HTMLElement { } } - private _closeAll(): void { - const els = [...this.children].filter(el => el.matches('[expanded]')); + private _closeAll(options: CloseAllOptions = {}): void { + const { exceptFirst = false } = options; + let els = [...this.children].filter(el => el.matches('[expanded]')); + + if (exceptFirst) { + els = els.slice(1); + } for (const el of els) { el.removeAttribute('expanded'); @@ -142,27 +151,19 @@ export default class MultiPanel extends HTMLElement { // it means it has odd number of elements. log error and set heading to end the loop. if (!content) { console.error(' requires an even number of element children.'); - heading = null; - continue; + break; } // When odd number of elements were inserted in the middle, // what was heading before may become content after the insertion. // Remove classes and attributes to prepare for this change. heading.classList.remove(style.panelContent); - - if (content.classList.contains(style.panelHeading)) { - content.classList.remove(style.panelHeading); - } - if (heading.hasAttribute('expanded') && heading.hasAttribute('aria-expanded')) { - heading.removeAttribute('expanded'); - heading.removeAttribute('aria-expanded'); - } + content.classList.remove(style.panelHeading); + heading.removeAttribute('expanded'); + heading.removeAttribute('aria-expanded'); // If appreciable, remove tabindex from content which used to be header. - if (content.hasAttribute('tabindex')) { - content.removeAttribute('tabindex'); - } + content.removeAttribute('tabindex'); // Assign heading and content classes heading.classList.add(style.panelHeading); @@ -190,6 +191,9 @@ export default class MultiPanel extends HTMLElement { if (!preserveTabIndex && this.firstElementChild) { this.firstElementChild.setAttribute('tabindex', '0'); } + + // In case we're openOneOnly, and an additional open item has been added: + if (this.openOneOnly) this._closeAll({ exceptFirst: true }); } // returns heading that is before currently selected one.