124 lines
3.4 KiB
JavaScript
124 lines
3.4 KiB
JavaScript
import { IgniteElement } from "../ignite-html/ignite-element.js";
|
|
import { IgniteCallback } from "../ignite-html/ignite-html.js";
|
|
import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.js";
|
|
|
|
IgniteTemplate.prototype.tab = function(name, active = false) {
|
|
//Set the starting class based on whether or not the tab is active.
|
|
if (active) {
|
|
this.class("tab-active");
|
|
} else {
|
|
this.class("tab-inactive");
|
|
}
|
|
|
|
//What we do is create an IgniteCallback that will get called when
|
|
//the tabchange event is raised. Upon disconnecting the callback we remove
|
|
//the event listener.
|
|
var callback = new IgniteCallback(e => {
|
|
if (e.tabName == name) {
|
|
this.element.classList.remove("tab-inactive");
|
|
|
|
if (!this.element.classList.contains("tab-active")) {
|
|
this.element.classList.add("tab-active");
|
|
}
|
|
} else {
|
|
this.element.classList.remove("tab-active");
|
|
|
|
if (!this.element.classList.contains("tab-inactive")) {
|
|
this.element.classList.add("tab-inactive");
|
|
}
|
|
}
|
|
}, () => {
|
|
window.removeEventListener("tabchange", callback.callback);
|
|
});
|
|
|
|
//Register our callback to the tabchange event.
|
|
window.addEventListener("tabchange", callback.callback);
|
|
|
|
//Add this callback to our template so that upon deconstruction our callback is destroyed correctly.
|
|
this._callbacks.push(callback);
|
|
|
|
return this;
|
|
};
|
|
|
|
class TabLink extends IgniteElement {
|
|
constructor() {
|
|
super();
|
|
|
|
this.tabChangeListener = e => this.update(e);
|
|
window.addEventListener("tabchange", this.tabChangeListener);
|
|
}
|
|
|
|
get properties() {
|
|
return {
|
|
active: false,
|
|
tabs: [],
|
|
target: null
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return this.template
|
|
.onClick((event) => this.onClick(event))
|
|
.class(this.active, value => value ? "active" : null)
|
|
.child(new slot(this).class(this.active, value => value ? "active" : null));
|
|
}
|
|
|
|
update(event) {
|
|
if (event.tabName == this.target) {
|
|
this.active = true;
|
|
return;
|
|
}
|
|
|
|
for(var i = 0; i < this.tabs.length; i++) {
|
|
if (this.tabs[i] == e.tabName) {
|
|
this.active = true;
|
|
return;
|
|
}
|
|
}
|
|
|
|
this.active = false;
|
|
return;
|
|
}
|
|
|
|
onClick(event) {
|
|
event.preventDefault();
|
|
|
|
var changeEvent = new Event("tabchange");
|
|
changeEvent.tabName = this.target;
|
|
|
|
window.dispatchEvent(changeEvent);
|
|
}
|
|
|
|
cleanup() {
|
|
window.removeEventListener("tabchange", this.tabChangeListener);
|
|
}
|
|
}
|
|
|
|
class TabLinkTemplate extends IgniteTemplate {
|
|
/**
|
|
* Initializes a new tab link template.
|
|
* @param {String} target The target tab to active when this is clicked.
|
|
* @param {String|String[]} routes Optional tabs that also set this link to active if active.
|
|
* @param {...any} elements Elements to render within the link.
|
|
*/
|
|
constructor(target, tabs, ...elements) {
|
|
super("tab-link", elements);
|
|
|
|
if (!tabs) {
|
|
tabs = [];
|
|
}
|
|
|
|
if (!Array.isArray(tabs)) {
|
|
tabs = [tabs];
|
|
}
|
|
|
|
this.property("target", target);
|
|
this.property("tabs", tabs);
|
|
}
|
|
}
|
|
|
|
customElements.define("tab-link", TabLink);
|
|
|
|
export {
|
|
TabLinkTemplate as TabLink
|
|
} |