/**
* Components Component<BR>
* <BR><BR><img src=/tk/lib/components/w/img/components.png width=30% style="border:1px lime dashed;padding:20px">
* <BR><BR><a href="/tk/lib/components/w/html/components.html">DEMO</a>
*/
class Components extends HTMLElement {
constructor() {
wc.group("Components.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("Components.observedAttributes");
this.observables = [];
wc.groupEnd();
return this.observables;
};
/**
* Called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("Components.connectedCallback")
let self = this;
this.env = wc.getSearchParam("env") || "dev"
// 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 = "<wc-include href='/tk/lib/components/misc/webpack/src/w/html/parts/components/main.html'></wc-include>"
this.configure();
wc.wait4(".btn-group-horizontal .btn", function() {
$(".btn-group-horizontal .btn").on("click", function() {
self.env = $(this).attr("env")
self._env();
});
});
wc.wait4(".wc-components-search", function() {
$(".wc-components-search").focus();
$(".wc-components-search").on('input', function() {
self._search();
});
if (self.env == "prod") {
$(".btn-group-horizontal .btn").hide();
}
});
// 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();
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("Components.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Components.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("Components._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("Components._fetchAttributes");
this.properties = {
uparam : "",
cname : "Components",
author : "Mel M. Heravi, Ph.D.",
version : "1.0"
};
// 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("Components.configure:", data);
let self = this;
// GET HTML FILES
$.getJSON("/mtk/rest/os/dir?path=/Melify/mtk/dev/tk/lib/components/w/html&files=*", function(hfiles) {
self.hfiles = hfiles;
// GET IMG FILES
$.getJSON("/mtk/rest/os/dir?path=/Melify/mtk/dev/tk/lib/components/w/img&files=*.png", function(ifiles) {
self.ifiles = ifiles;
// GET PROD FILES
$.getJSON("/mtk/rest/os/dir?path=/Melify/mtk/dev/tk/lib/components/misc/webpack/prod&files=*", function(pfiles) {
self.pfiles = pfiles;
self._process();
});
});
});
wc.groupEnd();
};
/**
* _process the instance object and artifacts
* @private
* @_process
*/
_process() {
wc.group("Components._process");
if (0) {
console.log("HFILES", this.hfiles)
console.log("IFILES", this.ifiles)
console.log("PFILES", this.pfiles)
}
for (var i = 0; i < this.ifiles.length; i++) {
let name = this.ifiles[i].replace(".png","");
this._tile(name);
}
this._env();
wc.groupEnd();
};
/**
* Initialize component
* @private
* @_initialize
*/
_initialize() {
wc.group("Components._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("Components._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("Components.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("Components.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();
};
/**
* @_tile
*/
_tile(name) {
wc.group("Components._tile:", name);
$(".wc-components-main").append(`
<a href="/tk/lib/components/misc/webpack/src/w/html/${name}.html" target="_blank" id="${name}">
<div class="wc-components-tile float-left col-lg-2">
<div class="shadow border">
<span class="wc-components-name">${name}</span>
<img src="/tk/lib/components/misc/webpack/src/w/img/${name}.png">
</div>
</div>
</a>`);
wc.groupEnd();
};
/**
* @_env
*/
_env() {
wc.group("Components._env");
let self = this;
switch(this.env)
{
case "prod":
$(".wc-components-tile").parent().each(function() {
let id = $(this).attr("id");
$(this).attr("href","/tk/lib/components/misc/webpack/prod/" + id);
if (!self.pfiles.includes(id)) {
$("#" + id).css({"opacity":"0.2", "cursor":"not-allowed"}).attr("onclick","return false");
}
});
break;
case "dev":
$(".wc-components-tile").parent().each(function() {
let id = $(this).attr("id");
$(this).attr("href",`/tk/lib/components/misc/webpack/src/w/html/${id}.html`);
if (self.hfiles.includes(id + ".html")) {
$("#" + id).css({"opacity":"1.0", "cursor":"hand"}).removeAttr("onclick")
}
});
break;
}
// CLIP BUTTONS
$(".btn-group-horizontal .btn").removeClass("active");
$(`[env=${this.env}]`).addClass("active");
// SET IT IN ADDRESSBAR
wc.setSearchParam(`?env=${this.env}`);
wc.groupEnd();
};
/**
* @_search
*/
_search() {
wc.group("Components._search");
let self = this;
let val = $(".wc-components-search").val()
$(".wc-components-main a").each(function() {
let id = $(this).attr("id");
if (!id.includes(val)) {
$(this).hide();
} else {
$(this).show();
}
});
wc.groupEnd();
};
}
window.customElements.define('wc-components', Components);