51 lines
1.7 KiB
HTML
51 lines
1.7 KiB
HTML
<template id='cat-control-group2'>
|
|
<link rel='stylesheet' href='main.css'>
|
|
<cat-caption><cat-checkbox></cat-checkbox></cat-caption>
|
|
<cat-container></cat-container>
|
|
</template>
|
|
|
|
<script>
|
|
(function() {
|
|
let doc = document.currentScript.ownerDocument;
|
|
customElements.define('cat-control-group2', class extends HTMLElement {
|
|
static get observedAttributes() { return ['label', 'closed']; }
|
|
|
|
attributeChangedCallback(attr, oldValue, newValue) {
|
|
if (!this.content) return;
|
|
console.log('man...');
|
|
if (attr == 'label') {
|
|
this.dom.querySelector('cat-caption').setAttribute('label', this.getAttribute('label'));
|
|
} else if (attr == 'closed') {
|
|
var container = this.dom.querySelector('cat-container');
|
|
console.log(container);
|
|
/*if (container.style.display === 'none') {
|
|
this.dom.querySelector('cat-container').style.display = '';
|
|
} else {
|
|
this.dom.querySelector('cat-container').style.display = 'none';
|
|
}*/
|
|
}
|
|
}
|
|
set closed(val) {
|
|
this.setAttribute('closed', val);
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
connectedCallback() {
|
|
var $ = this;
|
|
this.attachShadow({ mode: 'open' });
|
|
const template = doc.querySelector('#cat-control-group2');
|
|
this.dom = template.content.cloneNode(true);
|
|
this.dom.querySelector('cat-caption').setAttribute('label', this.getAttribute('label'));
|
|
this.dom.querySelector('cat-caption').addEventListener('click', e => {
|
|
//$.closed = true;
|
|
console.log('blep');
|
|
});
|
|
this.shadowRoot.appendChild(this.dom);
|
|
|
|
}
|
|
});
|
|
})()
|
|
</script>
|