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

216
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} 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.
* @returns {IgniteTemplate} This ignite template.
* @returns {IgniteTemplate} Returns this ignite template.
*/
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) {
this.class("tab-active");
} else {
this.class("tab-inactive");
this.class("active");
Tabs.change(name, group);
}
//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 => {
if (this.element) {
if (event.name == name && event.group == group) {
this.element.classList.remove("tab-inactive");
if (!this.element.classList.contains("tab-active")) {
this.element.classList.add("tab-active");
if (!this.element.classList.contains("active")) {
this.element.classList.add("active");
}
} else if (event.group == group) {
this.element.classList.remove("tab-active");
if (!this.element.classList.contains("tab-inactive")) {
this.element.classList.add("tab-inactive");
}
this.element.classList.remove("active");
}
}
}, () => {
@ -49,109 +45,123 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
return this;
}
class TabLink extends IgniteElement {
constructor() {
super();
this.tabChangeListener = e => this.update(e);
window.addEventListener("tabchange", this.tabChangeListener);
}
get properties() {
return {
active: false,
name: null,
group: null,
secondary: 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 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.
if (event.group == this.group && this.active) {
this.active = false;
}
}
onClick(event) {
event.preventDefault();
var changeEvent = new Event("tabchange");
changeEvent.name = this.name;
changeEvent.group = this.group;
window.dispatchEvent(changeEvent);
}
cleanup() {
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.
/**
* Makes this IgniteTemplate a tab button that will become active or inactive based on the current tab and change tabs when clicked.
* @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.
*/
constructor(name, group, secondary, ...elements) {
super("tab-link", elements);
IgniteTemplate.prototype.tabButton = function(name, group = null, active = false) {
//Add the tab-btn class to this element.
this.class("tab-btn");
//If the secondary tabs is null, set it to an empty array.
if (!secondary) {
secondary = [];
//If active, make the button active.
if (active) {
this.class("active");
}
//If the secondary tabs is not an array then wrap it in one.
if (!Array.isArray(secondary)) {
secondary = [secondary];
//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(event => {
if (this.element) {
//See if the group matches.
if (event.group == group) {
if (event.name == name) {
//Mark this button as active.
if (!this.element.classList.contains("active")) {
this.element.classList.add("active");
}
} else {
//Mark this button as inactive.
this.element.classList.remove("active");
}
}
}
}, () => {
window.removeEventListener("tabchange", callback.callback);
});
this.property("name", name);
this.property("group", group);
this.property("secondary", secondary);
}
//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);
//Setup our on click to change tabs.
this.onClick(() => Tabs.change(name, group));
return this;
}
/**
* Fires a change tab event that will cause the given tab to become active.
* @param {String} name The name of the tab to change to.
* @param {String} group The name of the tab group if applicable.
* A api class to help easily work with tabs.
*/
function changeTab(name, group = null) {
var changeEvent = new Event("tabchange");
changeEvent.name = name;
changeEvent.group = group;
class Tabs {
/**
* Changes the given tab to active.
* @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] = { };
}
//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 {
TabLinkTemplate as TabLink,
changeTab as changeTab
Tabs
}