From 99adefb2013da6da4eb20c2e1475937086db7f1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Radek=20=C5=A0er=C3=BD?= Date: Wed, 1 Nov 2023 14:07:37 +0100 Subject: [PATCH] feature: Control element is now optional The control element for `CollapsableItem` is now optional. If there is no control element, you can either expand / collapse the item programmatically from JS, or you can use an external link. --- src/CollapsableExtLink.ts | 2 +- src/CollapsableItem.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/CollapsableExtLink.ts b/src/CollapsableExtLink.ts index c61e9d7..a9aa41e 100644 --- a/src/CollapsableExtLink.ts +++ b/src/CollapsableExtLink.ts @@ -40,7 +40,7 @@ export class CollapsableExtLink { this.extLink.addEventListener('click', this.listener) } - public toggleClass(): void { + public toggleState(): void { const { options } = this.collapsable this.extLink.classList.toggle(options.classNames.externalLinkActive, this.collapsableItem.isExpanded) diff --git a/src/CollapsableItem.ts b/src/CollapsableItem.ts index dbac440..1ac3c37 100644 --- a/src/CollapsableItem.ts +++ b/src/CollapsableItem.ts @@ -41,7 +41,7 @@ export class CollapsableItem { const controlElements = element.querySelectorAll(collapsable.options.control) const boxElements = element.querySelectorAll(collapsable.options.box) - if (!controlElements.length || !boxElements.length) { + if (!boxElements.length) { throw new Error(`Collapsable: Missing control or box element.'`) } @@ -157,7 +157,7 @@ export class CollapsableItem { this._isExpanded = action === 'expand' const extLinks = this.collapsable.getExtLinkById(this.id) - extLinks.forEach((extLink) => extLink.toggleClass()) + extLinks.forEach((extLink) => extLink.toggleState()) this.controlInteractiveElements.forEach((link) => link.setAttribute('aria-expanded', String(action === 'expand'))) this.boxElements.forEach((box) => {