49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
customElements.define('cat-control-group', class extends HTMLElement {
|
|
static get observedAttributes() { return ['label', 'closed']; }
|
|
|
|
attributeChangedCallback(attr, oldValue, newValue) {
|
|
if (attr == 'label') {
|
|
this.label = newValue;
|
|
} else if (attr == 'closed') {
|
|
this.closed = newValue === null ? true : false;
|
|
}
|
|
}
|
|
set label(val) { this.caption.setAttribute('label', val); }
|
|
get label() { return this.caption.getAttribute('label'); }
|
|
set closed(val) { if (val) this.showContent(); else this.hideContent(); }
|
|
get closed() { return this.box.style.display === 'none' ? true : false }
|
|
|
|
connectedCallback() {
|
|
while (this.firstChild) this.box.appendChild(this.firstChild);
|
|
|
|
this.appendChild(this.caption);
|
|
this.appendChild(this.box);
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
this.box = document.createElement('cat-box');
|
|
|
|
this.caption = document.createElement('cat-caption');
|
|
this.checkbox = document.createElement('cat-checkbox');
|
|
this.caption.appendChild(this.checkbox);
|
|
this.caption.addEventListener('click', e => {
|
|
if (this.hasAttribute('closed')) {
|
|
this.removeAttribute('closed');
|
|
} else {
|
|
this.setAttribute('closed', '');
|
|
}
|
|
});
|
|
}
|
|
|
|
hideContent() {
|
|
this.box.style.display = 'none';
|
|
this.checkbox.setAttribute('checked', true);
|
|
}
|
|
showContent() {
|
|
this.box.style.display = '';
|
|
this.checkbox.setAttribute('checked', false);
|
|
}
|
|
});
|