MontoyaTech/ignite-html-tabs
MontoyaTech/ignite-html-tabs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Removed tab link template in favor of tabButton extension. Added tabs api class similar to my route plugin. Cleaned up code and added new functionality.

Browse Source
This commit is contained in:
MattMo 2021-12-13 16:51:32 -08:00
parent e684d337ee
commit 8a112e94d8
1 changed files with 111 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
ignite-html-tabs.js
View File

@ -7,14 +7,16 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
* @param {String} name The name of the tab. * @param {String} name The name of the tab.
* @param {String} group The tab group to put this tab under, by default this is null. * @param {String} group The tab group to put this tab under, by default this is null.
* @param {Boolean} active Whether or not this tab is active by default. * @param {Boolean} active Whether or not this tab is active by default.
* @returns {IgniteTemplate} This ignite template. * @returns {IgniteTemplate} Returns this ignite template.
*/ */
IgniteTemplate.prototype.tab = function(name, group = null, active = false) { IgniteTemplate.prototype.tab = function(name, group = null, active = false) {
//Set the starting class based on whether or not the tab is active. //Add the tab class to this element.
this.class("tab")
//If active, make this tab active.
if (active) { if (active) {
this.class("tab-active"); this.class("active");
} else { Tabs.change(name, group);
this.class("tab-inactive");
} }
//What we do is create an IgniteCallback that will get called when //What we do is create an IgniteCallback that will get called when
@ -23,17 +25,11 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
var callback = new IgniteCallback(event => { var callback = new IgniteCallback(event => {
if (this.element) { if (this.element) {
if (event.name == name && event.group == group) { if (event.name == name && event.group == group) {
this.element.classList.remove("tab-inactive"); if (!this.element.classList.contains("active")) {
this.element.classList.add("active");
if (!this.element.classList.contains("tab-active")) {
this.element.classList.add("tab-active");
} }
} else if (event.group == group) { } else if (event.group == group) {
this.element.classList.remove("tab-active"); this.element.classList.remove("active");
if (!this.element.classList.contains("tab-inactive")) {
this.element.classList.add("tab-inactive");
}
} }
} }
}, () => { }, () => {
@ -49,109 +45,123 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
return this; return this;
} }
class TabLink extends IgniteElement { /**
constructor() { * Makes this IgniteTemplate a tab button that will become active or inactive based on the current tab and change tabs when clicked.
super(); * @param {String} name The name of the tab that this button will set to active.
* @param {String} group The tab group the tab belongs to.
* @param {Boolean} active Whether or not this button is active, indicating the tab is active.
* @returns {IgniteTemplate} Returns this ignite template.
*/
IgniteTemplate.prototype.tabButton = function(name, group = null, active = false) {
//Add the tab-btn class to this element.
this.class("tab-btn");
this.tabChangeListener = e => this.update(e); //If active, make the button active.
window.addEventListener("tabchange", this.tabChangeListener); if (active) {
this.class("active");
} }
get properties() { //What we do is create an IgniteCallback that will get called when
return { //the tabchange event is raised. Upon disconnecting the callback we remove
active: false, //the event listener.
name: null, var callback = new IgniteCallback(event => {
group: null, if (this.element) {
secondary: null //See if the group matches.
}; if (event.group == group) {
} if (event.name == name) {
//Mark this button as active.
render() { if (!this.element.classList.contains("active")) {
return this.template this.element.classList.add("active");
.onClick((event) => this.onClick(event)) }
.class(this.active, value => value ? "active" : null) } else {
.child(new slot(this).class(this.active, value => value ? "active" : null)); //Mark this button as inactive.
} this.element.classList.remove("active");
}
update(event) {
//If the name and group match, set this tab link to active.
if (this.name == event.name && this.group == event.group) {
this.active = true;
return;
}
//See if this event matched any of the secondary tabs.
for(var i = 0; i < this.secondary.length; i++) {
if (this.secondary[i] == event.name && this.group == event.group) {
this.active = true;
return;
} }
} }
}, () => {
//Otherwise set this tab to inactive if it's active and the group matches. window.removeEventListener("tabchange", callback.callback);
if (event.group == this.group && this.active) { });
this.active = false;
}
}
onClick(event) { //Register our callback to the tabchange event.
event.preventDefault(); window.addEventListener("tabchange", callback.callback);
var changeEvent = new Event("tabchange"); //Add this callback to our template so that upon deconstruction our callback is destroyed correctly.
changeEvent.name = this.name; this._callbacks.push(callback);
changeEvent.group = this.group;
window.dispatchEvent(changeEvent); //Setup our on click to change tabs.
} this.onClick(() => Tabs.change(name, group));
cleanup() { return this;
window.removeEventListener("tabchange", this.tabChangeListener);
}
}
class TabLinkTemplate extends IgniteTemplate {
/**
* Initializes a new tab link template.
* @param {String} name The name of the tab this link is for and will set active to.
* @param {String} group The name of the group this link belongs to, this is optional.
* @param {String|String[]} secondary Optional tabs that also set this link to active if active.
* @param {...any} elements Elements to render within the link.
*/
constructor(name, group, secondary, ...elements) {
super("tab-link", elements);
//If the secondary tabs is null, set it to an empty array.
if (!secondary) {
secondary = [];
}
//If the secondary tabs is not an array then wrap it in one.
if (!Array.isArray(secondary)) {
secondary = [secondary];
}
this.property("name", name);
this.property("group", group);
this.property("secondary", secondary);
}
} }
/** /**
* Fires a change tab event that will cause the given tab to become active. * A api class to help easily work with tabs.
* @param {String} name The name of the tab to change to.
* @param {String} group The name of the tab group if applicable.
*/ */
function changeTab(name, group = null) { class Tabs {
var changeEvent = new Event("tabchange"); /**
changeEvent.name = name; * Changes the given tab to active.
changeEvent.group = group; * @param {String} name The name of the tab to change to.
* @param {String} group The name of the group this tab belongs to if any. Default is null.
* @param {Boolean} active Whether or not to make this tab active. Default is true.
*/
static change(name, group = null, active = true) {
//Init the groups if needed.
if (Tabs.groups[group] == undefined) {
Tabs.groups[group] = { };
}
window.dispatchEvent(changeEvent); //Init the tabs if needed.
if (group == null && Tabs.tabs[name] == undefined) {
Tabs.tabs[name] = false;
}
//If this tab is supposed to be active make that happen.
if (active) {
if (group) {
//Reset all tabs
Object.keys(Tabs.groups[group]).forEach(key => Tabs.groups[group][key] = false);
//Set this tab to active.
Tabs.groups[group][name] = true;
} else {
//Reset all tabs
Object.keys(Tabs.tabs).forEach(key => Tabs.tabs[key] = false);
//Set this tab to active.
Tabs.groups[group][name] = true;
}
} else {
//Set this tab to inactive.
if (group) {
Tabs.groups[group][name] = false;
} else {
Tabs.tabs[name] = false;
}
}
//Create a tab change event and fire it.
var changeEvent = new Event("tabchange");
changeEvent.name = (active ? name : "");
changeEvent.group = group;
window.dispatchEvent(changeEvent);
}
/**
* Returns whether or not the given tab is active.
* @param {String} name The name of the tab.
* @param {String} group The name of the group this tab belongs to. Default is null.
*/
static isActive(name, group = null) {
return ((group && Tabs.groups[group] != undefined && Tabs.groups[group][name]) || (group == null && Tabs.tabs[name] != undefined && Tabs.tabs[name])) ? true : false;
}
} }
customElements.define("tab-link", TabLink); Tabs.groups = { };
Tabs.tabs = { };
window.Tabs = Tabs;
export { export {
TabLinkTemplate as TabLink, Tabs
changeTab as changeTab
} }