104 lines
3.9 KiB
HTML
104 lines
3.9 KiB
HTML
<cat-template>
|
|
<cat-tabview-selects><cat-inherits closeable='closeable'></cat-inherits></cat-tabview-selects>
|
|
<cat-tabview-tabs></cat-tabview-tabs>
|
|
</cat-template>
|
|
<script>
|
|
(function() {
|
|
let template = document.currentScript.ownerDocument.querySelector('cat-template');
|
|
customElements.define('cat-tabview', class extends HTMLElement {
|
|
static get observedAttributes() { return ['label', 'selected', 'closeable']; }
|
|
attributeChangedCallback(attr, oldValue, newValue) { this[attr] = newValue; }
|
|
|
|
constructor() {
|
|
super();
|
|
template.cloneTo(this);
|
|
}
|
|
connectedCallback() {
|
|
new MutationObserver(e => {
|
|
for (var i = 0; i < e[0].addedNodes.length; i++) {
|
|
var node = e[0].addedNodes[i];
|
|
if (node.tagName === 'CAT-TAB') {
|
|
this.addTab(node);
|
|
} else {
|
|
// INTO THE ETHER WITH YOU
|
|
this.removeChild(node);
|
|
}
|
|
}
|
|
}).observe(this, { childList: true });
|
|
for (var i = this.children.length-1; i >= 0; i--) {
|
|
if (this.children[i].tagName === 'CAT-TAB') {
|
|
this.addTab(this.children[i]);
|
|
}
|
|
}
|
|
}
|
|
addTab(node) {
|
|
//console.dir(tab);
|
|
let tab = document.createElement('cat-tabview-select');
|
|
this.querySelector('cat-tabview-selects').appendChild(tab);
|
|
if (this.hasAttribute('closeable')) tab.setAttribute('closeable', this.getAttribute('closeable'));
|
|
tab.setAttribute('label', node.getAttribute('label'));
|
|
tab.associateContent(node);
|
|
tab.addEventListener('select', e => this.selectTab(e.detail) );
|
|
tab.addEventListener('close', e => this.removeTab(e.detail) );
|
|
this.querySelector('cat-tabview-tabs').appendChild(node);
|
|
node.associateControl(tab);
|
|
node.setAttribute('hidden', '');
|
|
if (!this.selectedTab) {
|
|
this.selectTab(tab);
|
|
}
|
|
}
|
|
removeTab(node, forceRemove) {
|
|
if (!node) return false;
|
|
let selects = this.querySelector('cat-tabview-selects');
|
|
let tabs = this.querySelector('cat-tabview-tabs');
|
|
for (var i = 0; i < selects.children.length; i++) {
|
|
if (selects.children[i] === node) {
|
|
// do not remove if a listener has prevented it.
|
|
if (!forceRemove && !this.dispatchEvent(new CustomEvent('close-tab', {detail: node, cancelable: true}))) {
|
|
return false;
|
|
}
|
|
selects.removeChild(selects.children[i]);
|
|
for (var j = 0; j < tabs.children.length; j++) {
|
|
if (tabs.children[j].control === node) {
|
|
var tab = tabs.children[j];
|
|
tabs.removeChild(tab);
|
|
this.dispatchEvent(new CustomEvent('remove-tab', {detail: tab}));
|
|
break;
|
|
}
|
|
}
|
|
this.selectTab(selects.children[i] ? selects.children[i] : selects.children[i-1]);
|
|
return true;
|
|
break;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
selectTab(node) {
|
|
var selects = this.querySelector('cat-tabview-selects');
|
|
var tabs = this.querySelector('cat-tabview-tabs');
|
|
for (var i = 0; i < selects.children.length; i++) {
|
|
if (selects.children[i] === node) {
|
|
for (var j = 0; j < tabs.children.length; j++) {
|
|
if (tabs.children[j].control === node) {
|
|
tabs.children[j].removeAttribute('hidden');
|
|
this.selectedTab = tabs.children[j];
|
|
this.selectedTab.control.classList.add('selected');
|
|
this.selectedTabIndex = j;
|
|
} else {
|
|
tabs.children[j].setAttribute('hidden', '');
|
|
tabs.children[j].control.classList.remove('selected');
|
|
}
|
|
}
|
|
this.dispatchEvent(new CustomEvent('select-tab', {detail: this.selectedTab}));
|
|
return true;
|
|
}
|
|
}
|
|
this.selectedTab = null;
|
|
this.selectedTabIndex = -1;
|
|
this.dispatchEvent(new CustomEvent('select-tab', {detail: null}));
|
|
return false;
|
|
}
|
|
});
|
|
})()
|
|
</script>
|