57 lines
1.6 KiB
HTML
57 lines
1.6 KiB
HTML
<cat-template>
|
|
<cat-caption><cat-inherits label='label'></cat-inherits></cat-caption>
|
|
</cat-template>
|
|
<script>
|
|
(function() {
|
|
let template = document.currentScript.ownerDocument.querySelector('cat-template');
|
|
customElements.define('cat-tabview-select', class extends HTMLElement {
|
|
static get observedAttributes() { return ['label', 'closeable']; }
|
|
attributeChangedCallback(attr, oldValue, newValue) {
|
|
console.log(attr);
|
|
this[attr] = newValue;
|
|
if (attr == 'closeable') {
|
|
if (!newValue) {
|
|
this.removeChild(this.querySelector('button.click'));
|
|
} else {
|
|
var btn = document.createElement('button');
|
|
btn.className = 'close';
|
|
this.appendChild(btn);
|
|
btn.addEventListener('click', evt => this.closeHandler(evt));
|
|
}
|
|
}
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.isAttached = false;
|
|
}
|
|
connectedCallback() {
|
|
template.cloneTo(this);
|
|
this.addEventListener('click', evt => this.clickHandler(evt));
|
|
if (this.getAttribute('closeable')) {
|
|
}
|
|
this.isAttached = true;
|
|
}
|
|
clickHandler(e) {
|
|
this.dispatchEvent(new CustomEvent('select', {'detail': this}));
|
|
e.preventDefault();
|
|
}
|
|
closeHandler(e) {
|
|
this.dispatchEvent(new CustomEvent('close', {'detail': this}));
|
|
e.preventDefault();
|
|
}
|
|
associateContent(node) {
|
|
this.content = node;
|
|
}
|
|
close() {
|
|
if (!this.isAttached) return;
|
|
this.parentNode.removeChild(this);
|
|
this.isAttached = false;
|
|
if (this.content) {
|
|
this.content.close();
|
|
}
|
|
}
|
|
});
|
|
})()
|
|
</script>
|