/**
* A panel components - <strike>UX/COE Compliant</strike>
* <BR><BR><img src=../images/panel.png width=50% style="border:1px lime dashed";>
* <BR><BR><a href="../html/panel.html">DEMO</a>
*/
class Panel extends HTMLElement {
constructor() {
console.group("Panel.constructor")
super();
console.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
console.group("Panel.observedAttributes");
let observables = ["width", "height", "collapsible", "background"];
console.log(observables);
console.groupEnd();
return observables;
};
/**
* This function is called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
console.group("Panel.connectedCallback")
let self = this;
// ADD CLASS
this.classList.add("wc");
// FETCH ALL INTERESTING ELEMENTS
this._fetchElements();
// FETCH ALL ATTRIBUTES
this._fetchAttributes();
this.dom.pbody.style.height = this.properties.height;
this.dom.pbody.style.background = this.properties.background;
this.style.width = this.properties.width;
// IS THIS PANEL COLLABSIBLE ?
if (this.properties.collapsible == "true") {
this.dom.pheader.classList.add("opened"); // DEFAULT
this.dom.pheader.classList.add("collapsible");
this.dom.pheader.addEventListener("click", function() {
self._onClick();
});
}
// WRAP UP AND ADD STATS
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("Maker.disconnectedCallback")
// CLEANUP NOW
console.groupEnd();
};
/**
* Invoked When component is removed. Usually with a .remove() function call
* @disconnectedCallback
*/
disconnectedCallback() {
console.group("Panel.disconnectedCallback")
/* CLEAN UP NOW */
console.groupEnd();
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
console.group("Panel.attributeChangedCallback:", attr, oldval, newval);
if (typeof this.properties == "undefined") {
this.properties = [];
}
switch(attr)
{
case "width":
this.properties.width = newval;
break;
case "height":
this.properties.height = newval;
break;
case "background":
this.properties.background = newval;
break;
}
console.groupEnd();
};
/**
* Stores DOM elements of interest for future use
* @_fetchElements
*/
_fetchElements() {
console.group("Panel._fetchElements");
this.dom = this.dom || [];
this.dom.content = this.innerHTML;
// ADD TEMPLATE TO DOM
this.dom.pheader = this.querySelector("wc-panel-header");
this.dom.pbody = this.querySelector("wc-panel-body");
this.dom.pfooter = this.querySelector("wc-panel-footer");
console.groupEnd();
};
/**
* Component attributes are _fetched and defaults are set if undefined
* @_fetchAttributes
* @param {string} author component owner
* @param {string} version Latest version of this component
* @param {boolean} [collapsible=false] if panel can be collapsed
* @param {string} [width=100%] panel width
* @param {string} [height=100%] body height
* @param {string} [background=#FFF] body color
*/
_fetchAttributes() {
console.group("Panel._fetchAttributes");
this.properties = {
"cname" : "Panel",
"author" : "Mel Heravi",
"version" : "1.0",
"user" : "Mel",
"collapsible" : "false",
"height" : "100%",
"width" : "100%",
"background" : "#FFF",
};
if (this.hasAttribute("collapsible")) {
this.properties.collapsible = this.getAttribute("collapsible");
console.log("collapsible: ", this.properties.collapsible);
}
if (this.hasAttribute("height")) {
this.properties.height = this.getAttribute("height");
}
if (this.hasAttribute("width")) {
this.properties.width = this.getAttribute("width");
}
if (this.hasAttribute("background")) {
this.properties.background = this.getAttribute("background");
}
console.groupEnd();
};
/**
* A sample callback usage function - see connectedCallback()
* @_onClick
*/
_onClick() {
console.group("Panel._onClick");
if (this.dom.pbody.style.display == "" || this.dom.pbody.style.display == "block") {
this.close();
} else{
this.open();
}
console.groupEnd();
};
/**
* Opens a given panel
* @open
*/
open(publish = true) {
console.group("Panel.open:", publish, this.getAttribute("id"));
if (0) {
$(this.dom.pbody).slideDown();
} else {
this.dom.pbody.style.display = "block";
}
this.dom.pheader.classList.add("opened");
this.dom.pheader.classList.remove("closed");
if (publish) {
wc.publish(this, "wc-panel", {
parentid: this.parentNode.id,
action: "opened"
});
}
console.groupEnd();
};
/**
* Closes a open panel
* @close
*/
close(publish = true) {
console.group("Panel.close:", publish, this.getAttribute("id"));
if (0) {
$(this.dom.pbody).slideUp();
} else {
this.dom.pbody.style.display = "none";
}
this.dom.pheader.classList.remove("opened");
this.dom.pheader.classList.add("closed");
if (publish) {
wc.publish(this, "wc-panel", {
parentid: this.parentNode.id,
action: "closed"
});
}
console.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @_destroy
*/
destroy() {
console.group("Message.destroy:", this.id);
delete this;
// REMOVE ITEM FROM DOM
this.parentNode.removeChild(this);
console.groupEnd();
};
/**
* SAVE DATA FOR ANALYTICS
* @__finalize
*/
_finalize() {
console.group("Panel._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("Panel.test");
console.log("testing results will be printed here...");
console.groupEnd();
return true;
}
}
window.customElements.define('wc-panel', Panel);