/* This file is part of »dali«. Copyright 2025 'kcf' »dali« is free software: you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. »dali« is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with »dali«. If not, see . */ namespace _dali.widgets { /** */ type type_entry_data = { label : string; groups : Array; action : (() => void); } /** */ export class class_widget_menu implements lib_plankton.zoo_widget.interface_widget { /** */ private entries : Array; /** */ private initial_groups : Array; /** */ private label : (null | string); /** */ private container : (null | HTMLElement); /** */ public constructor( entries : Array, { "initial_groups": initial_groups = [], "initial_label": initial_label = "", } : { initial_groups ?: Array; initial_label ?: string; } = { } ) { this.entries = entries; this.initial_groups = initial_groups; this.label = initial_label; this.container = null; } /** */ public set_groups( groups : Array ) : void { this.entries.forEach( (entry, index) => { const active : boolean = groups.some(group => entry.groups.includes(group)); const rel : string = index.toFixed(0); const dom_entry = this.container.querySelector(".widget-menu-entry[rel=\"" + rel + "\"]"); dom_entry.classList.toggle("widget-menu-entry-hidden", (! active)); } ); } /** */ public set_label( label : (null | string) ) : void { this.label = label; this.container.querySelector(".widget-menu-button").innerHTML = ( (this.label === null) ? ("[" + "=" + "]") : ("[" + this.label + "]") ); } /** */ private toggle_collapsed( { "mode": mode = null, } : { mode ?: (null | boolean); } = { } ) : void { this.container.classList.toggle("widget-menu-collapsed", mode ?? undefined); } /** * [implementation] */ public async load( target_element : Element ) : Promise { // structure this.container = await _dali.helpers.element_from_template( "widget-menu", "main", { "entries": ( ( await lib_plankton.call.promise_condense( this.entries.map( (entry, index) => () => _dali.helpers.template_coin( "widget-menu", "entry", { "label": entry.label, "rel": index.toFixed(0), } ) ) ) ) .join("") ), } ); // logic { // collapser { this.container.querySelector(".widget-menu-button").addEventListener( "click", () => { this.toggle_collapsed(); } ); } // entries { this.container.querySelectorAll(".widget-menu-entry").forEach( dom_entry => { dom_entry.addEventListener( "click", () => { const index : int = parseInt(dom_entry.getAttribute("rel")); const entry : type_entry_data = this.entries[index]; this.toggle_collapsed({"mode": true}); entry.action(); } ); } ); } } // init { this.toggle_collapsed({"mode": true}); this.set_groups(this.initial_groups); this.set_label(null); } // finish target_element.appendChild(this.container); } } }