/**
* Header Component <BR>
* This component will replace both thick and thin components moving forward<BR>
* <BR><BR><img src=../images/header.png width=100% style="border:1px lime dashed";>
* <BR><BR><a href="../html/header.html">DEMO</a>
*/
class Header extends HTMLElement {
constructor() {
console.group("Header.constructor")
super();
console.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
console.group("Header.observedAttributes");
this.observables = ["uname", "aname", "sname", "env"];
console.log(this.observables);
console.groupEnd();
return this.observables;
};
/**
* This function is called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
console.group("Header.connectedCallback")
let self = this;
// FETCH ALL INTERESTING ELEMENTS
this._fetchElements();
// FETCH ALL ATTRIBUTES
this._fetchAttributes();
// REPLACE CONTENT IF NECESSARY WITH NEW STUFF
this.innerHTML = `
<div class="wc-header-container ${this.properties.lob} lob-border-bottom">
<div class="wc-header-inner clearfix">
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class="wc-header-lhs pull-left">
<div class="clearfix">
<div class="wc-header-logo pull-left"><img src="/Melify/mtk/dev/tk/lib/components/w3c/assets/dtcc.png"></div>
<div class="wc-header-sep pull-left"></div>
<div class="wc-header-app pull-left">
<div class="wc-header-app-sname clearfix">${this.properties.sname}</div>
<div class="wc-header-app-aname ${this.properties.lob} lob-color clearfix">
<div class="wc-color">${this.properties.aname} <font color=red><small>${this.properties.env}</font></small></div>
</div>
</div>
</div>
</div>
<div class="wc-header-rhs pull-right">
<div class="wc-header-top-menus">
${this.dom.topmenus}
</div>
<div class="wc-header-user">
<div class="clearfix">
<div class="wc-header-cog pull-right">
${this.dom.cogmenus}
</div>
<div class="wc-header-logout pull-right">
<a href="#" id="header-logout">Logout</a>
</div>
<div class="wc-header-uname pull-right">${this.properties.uname}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wc-header-network clearfix ${this.properties.lob} lob-pattern">
<div class="wc-header-network-inner clearfix">
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class="wc-header-network-lhs pull-left">
<div class="wc-header-bot-menus">
${this.dom.botmenus}
</div>
</div>
<div class="wc-header-network-rhs pull-right">
<div class="clearfix">
<div class="pull-right"><i class="fa fa-search"></i></div>
<div class="pull-right"><input name="search" value="" class="form-control" style=background:#333!important;border:0!important></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`;
// DO DROPDOWN BOTTOM BORDERS NOW
let dropdown = __(".dropdown-menu");
$(dropdown).addClass(this.properties.lob);
$(dropdown).addClass("lob-border-bottom");
if (this.properties.search === "false") {
let search = this.querySelector(".wc-header-network-rhs .clearfix");
$(search).hide();
}
let links = this.querySelectorAll("a");
for (let i=0; i<links.length; i++) {
let link = links[i];
if (link.id != "") {
link.addEventListener("click", function() {
self._onClick(link);
});
}
}
this._finalize();
// SHOW IT NOW (NO FLICKERS)
this.style.visibility = "visible";
console.groupEnd();
};
/**
* Invoked When component is removed. Usually with a .remove() function call
* @disconnectedCallback
*/
disconnectedCallback() {
console.group("Header.disconnectedCallback")
/* CLEAN UP NOW */
console.groupEnd();
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
console.group("Header.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
console.log("attributes: ", this.properties);
// EXAMPLE ONLY. replace with observables
switch(attr)
{
case "uname":
this.properties.uname = newval;
this.style.uname = this.properties.uname;
break;
case "aname":
this.properties.aname = newval;
this.style.aname = this.properties.aname;
break;
case "sname":
this.properties.sname = newval;
this.style.sname = this.properties.sname;
break;
case "env":
this.properties.env = newval;
this.style.env = this.properties.env;
break;
}
console.groupEnd();
};
/**
* Stores DOM elements of interest for future use
* @_fetchElements
*/
_fetchElements() {
console.group("Header._fetchElements");
this.dom = this.dom || [];
this.dom.topmenus = this.querySelector("wc-header-topmenus").innerHTML;
this.dom.botmenus = this.querySelector("wc-header-botmenus").innerHTML;
this.dom.cogmenus = this.querySelector("wc-header-cogmenus").innerHTML;
console.groupEnd();
};
/**
* Component attributes are _fetched and defaults are set if undefined
* @_fetchAttributes
* @param {string} [uname=NOTSET] user name
* @param {string} [sname=NOTSET] service name
* @param {string} [aname=NOTSET] application name
* @param {string} env environment
*/
_fetchAttributes() {
console.group("Header._fetchAttributes");
this.properties = {
"cname" : "Header",
"author" : "Mel Heravi",
"version" : "1.0",
"uname" : "NOTSET",
"aname" : "NOTSET",
"sname" : "NOTSET",
"env" : "",
};
// SAVE WIDGET SPECIFIC PROPERTIES
this.propertiesW = [];
// SAVE ALL OTHER PROPERTIES
let attrs = wc.getAttributes(this)
for (var key in attrs) {
this.properties[key] = this.getAttribute(key);
this.propertiesW[key] = this.getAttribute(key);
console.log(key + ": " + attrs[key]);
}
console.groupEnd();
};
/**
* A sample callback usage function - see connectedCallback()
* @_onClick
*/
_onClick(link) {
console.group("Header._onClick:", link);
wc.publish(this, "wc-header", {
action: "click",
id: link.id
});
console.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @_destroy
*/
destroy() {
console.group("Header.destroy:", this.id);
// FREE POINTER
delete this;
// REMOVE ITEM FROM DOM
this.parentNode.removeChild(this);
console.groupEnd();
};
/**
* SAVE DATA FOR ANALYTICS
* @__finalize
*/
_finalize() {
console.group("Header._finalize:", this.id);
this.classList.add("wc");
// ADD ANALYTICS HERE
wc.getStats(this, this.properties.cname, this.properties.version);
console.groupEnd();
};
/**
* FOR TESTING PURPOSES
* @test
*/
static test() {
console.group("Header.test");
console.log("testing results will be printed here...");
console.groupEnd();
return true;
}
}
window.customElements.define('wc-header', Header);