/* * This file is part of the TYPO3 CMS project. * * It is free software; you can redistribute it and/or modify it under * the terms of the GNU General Public License, either version 2 * of the License, or any later version. * * For the full copyright and license information, please read the * LICENSE.txt file that was distributed with this source code. * * The TYPO3 project - inspiring people to share! */ import type {SelectTree} from './SelectTree'; import {Tooltip} from 'bootstrap'; import {html, LitElement, TemplateResult} from 'lit'; import {customElement} from 'lit/decorators'; import {lll} from 'TYPO3/CMS/Core/lit-helper'; @customElement('typo3-backend-form-selecttree-toolbar') export class SelectTreeToolbar extends LitElement { public tree: SelectTree; private settings = { collapseAllBtn: 'collapse-all-btn', expandAllBtn: 'expand-all-btn', searchInput: 'search-input', toggleHideUnchecked: 'hide-unchecked-btn' }; /** * State of the hide unchecked toggle button * * @type {boolean} */ private hideUncheckedState: boolean = false; // disable shadow dom for now protected createRenderRoot(): HTMLElement | ShadowRoot { return this; } protected firstUpdated(): void { this.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((tooltipTriggerEl: HTMLElement) => new Tooltip(tooltipTriggerEl)); } protected render(): TemplateResult { return html`
`; } /** * Collapse children of root node */ private collapseAll() { this.tree.collapseAll(); } /** * Expand all nodes */ private expandAll() { this.tree.expandAll(); } private filter(event: InputEvent): void { const inputEl = event.target; this.tree.filter(inputEl.value.trim()); } /** * Show only checked items */ private toggleHideUnchecked(): void { this.hideUncheckedState = !this.hideUncheckedState; if (this.hideUncheckedState) { this.tree.nodes.forEach((node: any) => { if (node.checked) { this.tree.showParents(node); node.expanded = true; node.hidden = false; } else { node.hidden = true; node.expanded = false; } }); } else { this.tree.nodes.forEach((node: any) => node.hidden = false); } this.tree.prepareDataForVisibleNodes(); this.tree.updateVisibleNodes(); } }