/**
* Tabs Component<BR>
* <BR><BR><img src=/tk/lib/components/w/img/tabs.png width=30% style="border:1px lime dashed;padding:20px">
* <BR><BR><a href="/tk/lib/components/w/html/tabs.html">DEMO</a>
*/
class Tabs extends HTMLElement {
constructor() {
wc.group("Tabs.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("Tabs.observedAttributes");
this.observables = [];
wc.groupEnd();
return this.observables;
};
/**
* Called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("Tabs.connectedCallback")
let self = this;
// ADD A RANDOM ID IF NONE EXIST
if (!this.id) {
this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
}
// GET PROPERTIES AND INTERESTING ELEMENTS
this._initialize();
// ADD COMPONENT MARKTOP
this.innerHTML = this._template()
if (this.properties.cfg) {
this.configure();
}
// SUBSCRIBE TO REQUESTS FROM CLIENTS
wc.subscribe(this.id, function(e) {
self._request(e)
});
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
wc.groupEnd();
};
/**
* Initial Markup
* @private
* @_template
*/
_template() {
wc.group("Tabs.template");
var temp = `
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 wc-tabs-top">
TOP
</div>
<div class="wc-tabs-lhs">
LHS
</div>
<div class="wc-tabs-mid w-100">
MID
</div>
<div class="wc-tabs-rhs">
RHS
</div>
<div class="col-sm-12 wc-tabs-bot">
BOT
</div>
</div>`
wc.wait4(".wc-tabs-lhs", () => {
this.top = this.querySelector(".wc-tabs-top")
this.bot = this.querySelector(".wc-tabs-bot")
this.lhs = this.querySelector(".wc-tabs-lhs")
this.rhs = this.querySelector(".wc-tabs-rhs")
this.mid = this.querySelector(".wc-tabs-mid")
$(".wc-tabs-top, .wc-tabs-bot, .wc-tabs-lhs, .wc-tabs-rhs").hide();
});
wc.groupEnd();
return temp;
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("Tabs.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Tabs.observedAttributes;
for (let i = 0; i < obs.length; i++) {
if (newval) {
this.properties[obs[i]] = newval;
}
}
// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
try {
switch(attr)
{
case "header":
//this.querySelector("h1").innerHTML = newval;
break;
default:
break;
}
} catch(e) {
wc.warn(e.name + ' > ' + e.message);
}
wc.groupEnd();
};
/**
* Stores DOM elements of interest for future use
* @private
* @_fetchElements
*/
_fetchElements() {
wc.group("Tabs._fetchElements");
this.dom = this.dom || [];
this.dom.content = this.innerHTML;
wc.groupEnd();
};
/**
* Component attributes are _fetched and defaults are set if undefined
* @private
* @_fetchAttributes
*/
_fetchAttributes() {
wc.group("Tabs._fetchAttributes");
this.properties = {
uparam : "",
cname : "Tabs",
author : "Mel M. Heravi, Ph.D.",
version : "1.0",
show : 0,
cols : "2,10"
};
// SAVE WIDGET SPECIFIC PROPERTIES
this.propertiesW = [];
// SAVE ALL OTHER PROPERTIES
let attrs = wc.getAttributes(this)
for (var key in attrs) {
let attr = this.getAttribute(key) || this.properties.key;
this.properties[key] = this.getAttribute(key);
this.propertiesW[key] = this.getAttribute(key);
wc.log(key + ": " + attrs[key]);
}
// SET ALL INITIAL ATTRIBUTES
for (var key in this.properties) {
switch(key)
{
case "header":
break;
default:
break;
}
}
wc.log("ATTRIBUTES: ", this.properties);
wc.groupEnd();
};
/**
* configure the instance object and artifacts
* @configure
* @param {string} data use data if exist else use 'this.properties.cfg' parameter
*/
configure(data) {
wc.group("Tabs.configure:", data);
// IF JSON VARIABLE (data) IS PROVIDED
if (data) {
this._process(data);
} else {
let self = this;
$.getJSON(this.properties.cfg, function(data) {
self._process(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
});
}
wc.groupEnd();
};
/**
* _process the instance object and artifacts
* @private
* @_process
*/
_process(data) {
wc.group("Tabs._process:", data);
switch(this.properties.side)
{
case "top":
this._top(data);
break;
case "bot":
this._bot(data);
break;
case "lhs":
this.cols = this.properties.cols.split(",");
this._lhs(data);
break;
case "rhs":
this.cols = this.properties.cols.split(",");
this._rhs(data);
break;
}
wc.groupEnd();
};
/**
* @private
* @_top
*/
_top(data) {
wc.group("Tabs._top");
let self = this;
$(this.top).show();
this.mid = this.querySelector(".wc-tabs-mid");
if (this.properties.cfg) {
$(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev" cfg="${this.properties.cfg}"></wc-pager>`);
} else {
$(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev"></wc-pager>`);
wc.wait4(`wc-pager`, function() {
let tmp = self.querySelector(`wc-pager`);
tmp.configure(data);
});
}
// PAGER HANDLE
let str = `<ul class="nav nav-tabs">`;
let num =0;
for (var key in data) {
var p = data[key]
str += `<a tab-num="${num++}" page="${data[key].page}" class="nav-link" href="#!">${data[key].label}</a>`
}
str += "</ul>"
$(this.top).html(str);
$(`#${this.id} [tab-num=${this.properties.show}]`).addClass("active");
wc.wait4("wc-pager", () => {
this.pager = this.querySelector("wc-pager");
this.pager.show($(`#${this.id} [tab-num="${this.properties.show}"]`).attr("page"));
let as = this.querySelectorAll("ul a");
$(as).on("click", function() {
$(as).removeClass("active");
$(this).addClass("active");
let tn = $(this).attr("tab-num");
let pg = $(this).attr("page");
self.pager.show(pg);
});
});
wc.groupEnd();
};
/**
* @private
* @_bot
*/
_bot(data) {
wc.group("Tabs._bot");
let self = this;
$(this.bot).show();
this.mid = this.querySelector(".wc-tabs-mid");
if (this.properties.cfg) {
$(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev" cfg="${this.properties.cfg}"></wc-pager>`);
} else {
$(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev"></wc-pager>`);
wc.wait4(`wc-pager`, function() {
let tmp = self.querySelector(`wc-pager`);
tmp.configure(data);
});
}
wc.wait4("wc-pager", () => {
this.pager = this.querySelector("wc-pager");
this.pager.configure(data);
});
// PAGER HANDLE
let str = `<ul class="nav nav-tabs">`;
let num =0;
for (var key in data) {
var p = data[key]
str += `<a tab-num="${num++}" page="${data[key].page}" class="nav-link" href="#!">${data[key].label}</a>`
}
str += "</ul>"
this.top = this.querySelector(".wc-tabs-bot");
$(this.top).html(str);
$(`#${this.id} [tab-num=${this.properties.show}]`).addClass("active");
wc.wait4("wc-pager", () => {
this.pager = this.querySelector("wc-pager");
let as = this.querySelectorAll("ul a");
$(as).on("click", function() {
$(as).removeClass("active");
$(this).addClass("active");
let tn = $(this).attr("tab-num");
let pg = $(this).attr("page");
self.pager.show(pg);
});
this.pager.show($(`#${this.id} [tab-num=${this.properties.show}]`).attr("page"));
});
wc.groupEnd();
};
/**
* @private
* @_lhs
*/
_lhs(data) {
wc.group("Tabs._lhs");
let self = this;
$(this.lhs).show();
// ADD PAGER
if (this.properties.cfg) {
$(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev" cfg="${this.properties.cfg}"></wc-pager>`);
} else {
$(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev"></wc-pager>`);
wc.wait4(`wc-pager`, function() {
let tmp = self.querySelector(`wc-pager`);
tmp.configure(data);
});
}
$(this.lhs).addClass("col-sm-" + this.cols[0]);
$(this.mid).addClass("col-sm-" + this.cols[1]);
let str = `<ul class="list-group list-group-flush">`;
let n = 0;
for (var key in data) {
str += `<li tab-num="${n++}" page="${data[key].page}" id="wc-tabs-${data[key].id}" class="list-group-item list-group-item-action" url="${data[key].url}">${data[key].label}</li>`
}
str += "</ul>";
$(this.lhs).html(str);
wc.wait4("wc-pager", () => {
this.pager = this.querySelector("wc-pager");
$(`#${this.id} [tab-num=${this.properties.show}]`).addClass("active");
let as = this.querySelectorAll("ul li");
$(as).on("click", function() {
$(as).removeClass("active");
$(this).addClass("active");
let tn = $(this).attr("tab-num");
let pg = $(this).attr("page");
self.pager.show(pg);
});
});
wc.groupEnd();
};
/**
* @private
* @_rhs
*/
_rhs(data) {
wc.group("Tabs._rhs");
let self = this;
$(this.rhs).show();
// ADD PAGER
if (this.properties.cfg) {
$(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev" cfg="${this.properties.cfg}"></wc-pager>`);
} else {
$(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev"></wc-pager>`);
wc.wait4(`wc-pager`, function() {
let tmp = self.querySelector(`wc-pager`);
tmp.configure(data);
});
}
$(this.rhs).addClass("col-sm-" + this.cols[0]);
$(this.mid).addClass("col-sm-" + this.cols[1]);
let str = `<ul class="list-group list-group-flush">`;
let n = 0;
for (var key in data) {
str += `<li tab-num="${n++}" page="${data[key].page}" id="wc-tabs-${data[key].id}" class="list-group-item list-group-item-action" url="${data[key].url}">${data[key].label}</li>`
}
str += "</ul>";
$(this.rhs).html(str);
wc.wait4("wc-pager", () => {
this.pager = this.querySelector("wc-pager");
$(`#${this.id} [tab-num=${this.properties.show}]`).addClass("active");
let as = this.querySelectorAll("ul li");
$(as).on("click", function() {
$(as).removeClass("active");
$(this).addClass("active");
let tn = $(this).attr("tab-num");
let pg = $(this).attr("page");
self.pager.show(pg);
});
});
wc.groupEnd();
};
/**
* Initialize component
* @private
* @_initialize
*/
_initialize() {
wc.group("Tabs._initialize:", this.id);
// FETCH ALL INTERESTING ELEMENTS
this._fetchElements();
// FETCH ALL ATTRIBUTES
this._fetchAttributes();
wc.groupEnd();
};
/**
* Save data for analytics and final wrap up
* @private
* @_finalize
*/
_finalize() {
wc.group("Tabs._finalize:", this.id);
this.classList.add("wc");
// ADD ANALYTICS HERE
wc.setStats(this, this.properties.cname, this.properties.version);
// SHOW IT NOW (NO FLICKERS)
this.style.visibility = "visible";
wc.groupEnd();
};
/**
* Invoked When component is removed. Usually with a .remove() function call
* @disconnectedCallback
*/
disconnectedCallback() {
wc.group("Tabs.disconnectedCallback")
ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
wc.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @destroy
*/
destroy() {
wc.group("Tabs.destroy");
// FREE ALL MEMORY
// you should delete all created objects here
// FREE POINTER
delete this;
// REMOVE ITEM FROM DOM
this.parentNode.removeChild(this);
ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
wc.groupEnd();
};
/**
* @_publish
*/
_publish(type) {
wc.group("Tabs._publish:", type);
wc.publish("wc-tabs", {
time: new Date().getTime(),
action: type,
id: this.id
});
wc.groupEnd();
return true;
};
/**
* @_open
*/
_open(tabid) {
wc.group("Tabs._open:", tabid);
let tab = this.querySelector(`[tab-num="${tabid}"]`);
// CLICK TO OPEN THE PAGE
$(tab).click();
wc.publish("wc-tabs", {
time: new Date().getTime(),
action: "open",
tab: tabid,
id: this.id
});
wc.groupEnd();
return true;
};
/**
* @_load
*/
_load(tabid, type, content) {
wc.group("Tabs._load:", tabid);
let tab = this.querySelector(`[tab-num="${tabid}"]`);
let page = $(tab).attr("page");
let pager = this.querySelector(`.wc-pager__page.${page}`);
// OPEN THE TAB
this._open(tabid);
// LOAD CONTENT FROM CONTENT
if (type == "url") {
$(pager).load(content);
}
if (type == "html") {
pager.innerHTML = content;
}
wc.publish("wc-tabs", {
time: new Date().getTime(),
action: "load",
url: content,
id: this.id
});
wc.groupEnd();
return true;
};
/**
* @_request
*/
_request(e) {
wc.group("Tabs._request:", this.id, JSON.stringify(e.detail));
switch(e.detail.request)
{
case "open":
this._open(e.detail.tab);
break;
case "load":
// LOAD FROM URL
if (typeof e.detail.url != "undefined") {
this._load(e.detail.tab, "url", e.detail.url);
}
// ADD CONTENT AS HTML
if (typeof e.detail.html != "undefined") {
this._load(e.detail.tab, "html", e.detail.html);
}
break;
default:
alert("DO NOT HAVE SUCH REQUEST: " + e.detail.request);
break;
}
wc.groupEnd();
return true;
};
/**
* @test
*/
static test(what) {
wc.group("Tabs.test:", what);
switch(what)
{
case "open":
wc.publish("my-tabs-top", {time:new Date().getTime(), requestor:"my-tabs-top", request:"open", tab:2})
break;
case "load":
wc.publish("my-tabs-top", {time:new Date().getTime(), requestor:"my-tabs-top", request:"load", tab:1, url:"/mtk/render?ajax=1&callback=tk::dummy::3"})
break;
case "html":
wc.publish("my-tabs-top", {time:new Date().getTime(), requestor:"my-tabs-top", request:"load", tab:1, html:"<h1>Mel was here</h1>"})
break;
}
wc.groupEnd();
return true;
}
}
window.customElements.define('wc-tabs', Tabs);
// SO I CAN CALL THE STATIC METHOD GLOBALLY
window.Tabs = Tabs;