extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-12 08:58:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Details: Add accordionGroup attribute to group multiple details together, allowing only one in the group to be open at a time

Browse Source
This commit is contained in:
nathan 2024-12-05 10:45:16 -07:00
parent fb1732de84
commit 230635c5d6
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
api/js/etemplate/Layout/Et2Details/Et2Details.ts
View File

@ -148,6 +148,13 @@ export class Et2Details extends Et2Widget(SlDetails)
@property({type: Boolean})
overlaySummaryOnOpen = false;
/**
* Group multiple details together so only one can be open at once
* @type {string}
*/
@property({type: String})
accordionGroup : string;
/**
* List of properties that get translated
* Done separately to not interfere with properties - if we re-define label property,
@ -161,10 +168,21 @@ export class Et2Details extends Et2Widget(SlDetails)
}
}
constructor()
{
super();
this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
}
connectedCallback()
{
super.connectedCallback();
if(this.accordionGroup)
{
window.document.addEventListener("sl-show", this.handleAccordionOpen);
}
this.updateComplete.then(() => {
if (this.toggleOnHover) {
this.addEventListener("mouseover", this.show);
@ -176,6 +194,8 @@ export class Et2Details extends Et2Widget(SlDetails)
disconnectedCallback()
{
super.disconnectedCallback();
window.document.removeEventListener("sl-show", this.handleAccordionOpen);
window.document.removeEventListener('mouseout', this._mouseOutEvent);
}
@ -188,6 +208,14 @@ export class Et2Details extends Et2Widget(SlDetails)
if (!this.getDOMNode().contains(event.relatedTarget)) this.hide();
}
handleAccordionOpen(event)
{
if(event.target !== this && this.accordionGroup && event.target.accordionGroup == this.accordionGroup)
{
this.hide();
}
}
render()
{
const isRtl = this.matches(':dir(rtl)');