58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
// Toolbar component logic
|
||
|
||
class Toolbar extends HTMLElement {
|
||
constructor() {
|
||
super();
|
||
|
||
// Attach a shadow root and clone the template defined in toolbar.html
|
||
this.attachShadow({ mode: 'open' });
|
||
const tmpl = document.getElementById('toolbar-template');
|
||
if (!tmpl) {
|
||
console.error('Toolbar: template not found in DOM');
|
||
return;
|
||
}
|
||
this.shadowRoot.appendChild(tmpl.content.cloneNode(true));
|
||
|
||
// Bind internal handlers
|
||
this._onColorChange = this._onColorChange.bind(this);
|
||
this._onGridChange = this._onGridChange.bind(this);
|
||
}
|
||
|
||
connectedCallback() {
|
||
// Listen for events bubbled up from slotted child components
|
||
this.addEventListener('colorchange', this._onColorChange);
|
||
this.addEventListener('gridchange', this._onGridChange);
|
||
}
|
||
|
||
disconnectedCallback() {
|
||
// Clean up listeners when the element is removed
|
||
this.removeEventListener('colorchange', this._onColorChange);
|
||
this.removeEventListener('gridchange', this._onGridChange);
|
||
}
|
||
|
||
// Forward background color changes as a toolbar‑specific event
|
||
_onColorChange(e) {
|
||
this.dispatchEvent(
|
||
new CustomEvent('bgcolorchange', {
|
||
detail: e.detail,
|
||
bubbles: true,
|
||
composed: true,
|
||
})
|
||
);
|
||
}
|
||
|
||
// Forward grid setting changes as a toolbar‑specific event
|
||
_onGridChange(e) {
|
||
this.dispatchEvent(
|
||
new CustomEvent('gridsettingschange', {
|
||
detail: e.detail,
|
||
bubbles: true,
|
||
composed: true,
|
||
})
|
||
);
|
||
}
|
||
}
|
||
|
||
// Register the custom element; the tag name follows kebab‑case convention
|
||
customElements.define('toolbar-component', Toolbar);
|