/**
* Panel Component<BR>
* <BR><BR><img src=/tk/lib/components/w/img/panel.png width=30% style="border:1px lime dashed;padding:20px">
* <BR><BR><a href="/tk/lib/components/w/html/panel.html">DEMO</a>
*/
class Panel extends HTMLElement {
constructor() {
wc.group("Panel.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("Panel.observedAttributes");
this.observables = [];
wc.groupEnd();
return this.observables;
};
/**
* Called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("Panel.connectedCallback")
// ADD A RANDOM ID IF NONE EXIST
this.id = this.id || this.constructor.name.toLowerCase() + "-" + wc.uid();
// GET PROPERTIES AND INTERESTING ELEMENTS
this._initialize();
// SHOW THIS COMPONENT
this._render()
// CHECK | UPDATE ATTRIBUTES
this._attributes();
// SUBSCRIBE TO ALL EVENTS OF INTEREST
this._subscribe();
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
wc.groupEnd();
};
/**
* Initial Markup
* @private
* @_template
*/
_template() {
wc.group("Panel.template");
var temp;
// ADD COMPONENT MARKTOP
if (wcENV == "prod") {
// FOR PRODUCTION (convert part.html to jstr using h2j)
temp = `<h1>A BLANK TEMPLATE</h1>`+
''+
`<i class="fa fa-home fa-5x"></i>`+
''+
`<div class="mt-3">`+
` <h1 class="btn btn-lg btn-primary">I AM A BOOTSTRAP BUTTON</h4>`+
`</div>`;
} else {
// FOR DEVELOPMENT/LOCAL TESTING
temp = "<wc-include href=/tk/lib/components/w/html/parts/panel.part.html></wc-include>";
}
wc.groupEnd();
return temp;
};
/**
* @private
* @_attributes
*/
_attributes() {
wc.group("Panel._attributes");
if (0) {
// TRANSFER ALL ATTRIBUTES NOW (BELOW IS AN EXAMPLE)
// -------------------------------------------------
// SAMPLE CODE BELOW
for (var key in this.propertiesW) {
// SKIP CLASS AND ID
if (key != "class" && key != "id") {
wc.log(key, this.properties[key]);
this.removeAttribute(key);
this.setAttribute(key, this.properties[key]);
}
}
}
wc.groupEnd();
};
/**
* @private
* @_render
*/
_render() {
wc.group("Panel._render");
this.innerHTML = this._template();
wc.groupEnd();
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("Panel.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Panel.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("Panel._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("Panel._fetchAttributes");
this.properties = {
uparam : "",
cname : "Panel",
author : "Mel M. Heravi, Ph.D.",
version : "1.0"
};
// SAVE WIDGET SPECIFIC PROPERTIES
this.propertiesW = [];
// GET ALL COMPONENT PROPERTIES
let attrs = wc.getAttributes(this)
// SAVE IN properties & propertiesW
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("Panel.configure: data=", data);
// START TIME
let time1 = Date.now();
// IF JSON VARIABLE (data) IS PROVIDED
if (data) {
// DIRECT CALL TO ACTION
this._process(data);
} else {
// USUALLY TO INITIALIZE THE COMPONENT FROM A JSON URL
let self = this;
$.getJSON(this.properties.cfg, function(data) {
self._process(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
});
}
// END TIME
let time2 = Date.now();
wc.groupEnd();
return "T:" + (time2-time2);
};
/**
* _process the instance object and artifacts
* @private
* @_process
* MELIFIED
*/
_process(data) {
wc.group("Panel._process:", data);
let template = $("#panel-template").html();
// BASIC ASSUMPTIONS
this.isOpen = true;
this.collapsable = data.collapsable || false;
// WE DO EXPECT AT LEAST THE BODY
data.header = data.header || null;
data.footer = data.footer || null;
template = template.replace(/%HEADER%/, data.header);
template = template.replace(/%FOOTER%/, data.footer);
template = template.replace(/%BODY%/, data.body);
// ADD TEMPLATE TO PANEL CONTAINER
$(this).empty().append(template);
// SAVE THESE FOR USE LATER
this.pbody = $(this).find(".wc-panel-body");
this.pheader = $(this).find(".wc-panel-header");
this.pfooter = $(this).find(".wc-panel-footer");
// IF COLLAPSABLE ADD CARET ICONS
if (this.collapsable == true) {
this.pheader
.append("<i class='fa fa-angle-up'></i>")
.append("<i class='fa fa-angle-down'></i>")
.css("cursor", "pointer");
}
// SET PANEL HEIGHT
this.pbody.height(this.properties.height || "300px");
// HIDE FOOTER | FOOTER IF NOT IN JSON
if (!data.footer) this.pfooter.hide();
if (!data.header) this.pheader.hide();
// PUBLISH ALL EVENTS OF INTEREST
this._publish();
wc.groupEnd();
};
/**
* Initialize component
* @_open
* MELIFIED
*/
_open() {
wc.group("Panel._open:", this.id);
if (this.isOpen) {
return;
} else {
$(this).find(".wc-panel-header").click();
}
wc.groupEnd();
};
/**
* Initialize component
* @_close
* MELIFIED
*/
_close() {
wc.group("Panel._close:", this.id);
if (this.isClose) {
return;
} else {
$(this).find(".wc-panel-header").click();
}
wc.groupEnd();
};
/**
* Initialize component
* @private
* @_initialize
*/
_initialize() {
wc.group("Panel._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("Panel._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("Panel.disconnectedCallback")
wc.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @destroy
*/
destroy() {
wc.group("Panel.destroy");
// FREE ALL MEMORY
// you should delete all created objects here
// FREE POINTER
delete this;
// REMOVE ITEM FROM DOM
this.parentNode.removeChild(this);
wc.groupEnd();
};
/**
* @private
* @_publish
* MELIFIED
*/
_publish() {
wc.group("Panel._publish");
let header = $(this).find(".wc-panel-header");
if (this.collapsable == true) {
// PUBLISH CLICK EVENTS
$(this).find(".wc-panel-header").on("click", () => {
let fa = $(this).find(".fa");
if (this.isOpen) {
this.isOpen = false;
} else {
this.isOpen = true;
}
$(fa).toggle();
$(this.pbody).slideToggle();
wc.publish("wc-panel", {
id: self.id,
time: new Date().getTime(),
action: "click",
status: this.isOpen
});
});
}
wc.groupEnd();
return true;
};
/**
* Subscribe all to events of interest
* @private
* @_subscribe
* MELIFIED
*/
_subscribe() {
wc.group("Panel._subscribe:", this.id);
let self = this;
// SUBSCRIPTION START
wc.subscribe("wc-panel", function(msg,data) {
if (data.id == self.id) {
wc.info(`SUBSCRIPTION TRIGGERED ${JSON.stringify(data)}`)
switch(data.action)
{
case "toggle":
$(self).find(".wc-panel-header").click();
break;
case "open":
self._open();
break;
case "close":
self._close();
break;
default:
break;
}
}
});
// SUBSCRIPTION END
wc.groupEnd();
}
/**
* FOR TESTING THE COMPONENT
* @test
* MELIFIED
*/
test() {
console.group("test.panel");
// LIST OF COMMANDS FROM Panel.test
var tests = [
{action:"close", value:{}},
{action:"open", value:{}},
{action:"toggle", value:{}},
{action:"open", value:{}},
]
for (var i = 0; i < tests.length; i++) {
wc.tester("wc-panel", "my-panel", tests[i], (i+1)*2000)
}
console.groupEnd();
};
}
window.customElements.define('wc-panel', Panel);