extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-22 13:58:40 +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 4370897b1c
commit 94661acf4e
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}) @property({type: Boolean})
overlaySummaryOnOpen = false; 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 * List of properties that get translated
* Done separately to not interfere with properties - if we re-define label property, * 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() connectedCallback()
{ {
super.connectedCallback(); super.connectedCallback();
if(this.accordionGroup)
{
window.document.addEventListener("sl-show", this.handleAccordionOpen);
}
this.updateComplete.then(() => { this.updateComplete.then(() => {
if (this.toggleOnHover) { if (this.toggleOnHover) {
this.addEventListener("mouseover", this.show); this.addEventListener("mouseover", this.show);
@ -176,6 +194,8 @@ export class Et2Details extends Et2Widget(SlDetails)
disconnectedCallback() disconnectedCallback()
{ {
super.disconnectedCallback(); super.disconnectedCallback();
window.document.removeEventListener("sl-show", this.handleAccordionOpen);
window.document.removeEventListener('mouseout', this._mouseOutEvent); window.document.removeEventListener('mouseout', this._mouseOutEvent);
} }
@ -188,6 +208,14 @@ export class Et2Details extends Et2Widget(SlDetails)
if (!this.getDOMNode().contains(event.relatedTarget)) this.hide(); if (!this.getDOMNode().contains(event.relatedTarget)) this.hide();
} }
handleAccordionOpen(event)
{
if(event.target !== this && this.accordionGroup && event.target.accordionGroup == this.accordionGroup)
{
this.hide();
}
}
render() render()
{ {
const isRtl = this.matches(':dir(rtl)'); const isRtl = this.matches(':dir(rtl)');