/**
* V1 Component<BR>
* <BR><BR><img src=/tk/lib/components/w/img/v1.png width=30% style="border:1px lime dashed;padding:20px">
* <BR><BR><a href="/tk/lib/components/w/html/v1.html">DEMO</a>
*/
class V1 extends HTMLElement {
constructor() {
wc.group("V1.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("V1.observedAttributes");
this.observables = [];
wc.groupEnd();
return this.observables;
};
/**
* Called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("V1.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();
// IF PAGE IS RELOADED
if (wc.refreshed()) {
this.properties.page = wc.parseQuery().page;
console.log("THIS PAGE IS RELOADED:", this.properties.page);
}
this.configure();
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
wc.groupEnd();
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("V1.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = V1.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":
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("V1._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("V1._fetchAttributes");
this.properties = {
uparam : "",
cname : "V1",
author : "Mel M. Heravi",
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() {
wc.group("V1.configure:");
let self = this;
$.getJSON(this.properties.path + "/config.json", 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("V1._process:", data);
this.data = data;
this.cname = this.properties.cname.toLowerCase();
let tstr = "";
tstr += `
<div class="v1-msg alert alert-warning alert-dismissible fade show" style="margin-bottom:0;display:none;border-radius:0" role="alert">
<div class="container-fluid">
<div class="row">
<div class="col-12 padding-0 margin-0">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong class="wc-far">WARNING:</strong> <msg>waiting...</msg>
</div>
</div>
</div>
</div>`;
tstr += `
<div class="${this.cname}__header sticky-top">
<wc-include href="${data.header}"></wc-include>
</div>`;
for (var i = 0; i < data.pages.length; i++) {
tstr += `<div class="${this.cname}__page ${data.pages[i].page}"></div>`;
}
tstr += `
<div class="${this.cname}__footer">
<wc-include href="${data.footer}"></wc-include>
</div>`;
// ADD COMPONENT MARKTOP
this.innerHTML = tstr;
wc.wait4(".navbar", ()=> {
this.show(this.properties.page);
// LISTEN TO HASH CHANGES
wc.popstate(() => {
let x = document.location.search.replace("?page=","")
if (x != "") {
// CLICK ON PAGE LINK
this.show(x, false);
// PUBLISH SHOW EVENT
wc.publish(`${this.cname}`, {
time: new Date().getTime(),
action: "popstate",
id: x
});
}
});
});
wc.groupEnd();
};
/**
* Initialize component
* @private
* @_initialize
*/
_initialize() {
wc.group("V1._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("V1._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("V1.disconnectedCallback")
// FREE MEMORY AND CLEANUP
wc.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @destroy
*/
destroy() {
wc.group("V1.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();
};
/**
* refresh a page
* @refresh
*/
refresh(page) {
wc.group("V1.refresh:", page);
// EMPTY CONTENT
$("." + page).empty();
// RE-LOAD THE PAGE
this.show(page);
wc.groupEnd();
return page;
};
/**
* show a page
* @show
*/
msg(flag, type, dismissable, msg, timeout) {
wc.group("V1.show:", flag, msg);
if (timeout) {
wc.timeout(() => {
this.msg("hide");
}, timeout);
}
if (msg) {
$("wc-v1 .v1-msg msg").html(msg);
}
// RESET CLASSES
$("wc-v1 .v1-msg")
.removeClass("alert-info alert-success alert-danger alert-warning")
.addClass("alert-" + type);
// SHOW/HIDE DISMISS BTN
if (dismissable == false) {
$("wc-v1 .v1-msg .close").hide()
}
switch(type)
{
case "info":
$("wc-v1 .v1-msg strong").text("INFO:")
break;
case "warning":
$("wc-v1 .v1-msg strong").text("WARNING:")
break;
case "success":
$("wc-v1 .v1-msg strong").text("SUCCESS:")
break;
case "danger":
$("wc-v1 .v1-msg strong").text("ERROR:")
break;
}
if (flag == "show") {
$("wc-v1 .v1-msg").slideDown();
} else {
$("wc-v1 .v1-msg").slideUp();
}
wc.groupEnd();
};
/**
* show a page
* @show
*/
show(page, push=true) {
wc.group("V1.show:", page);
// FLIP ALL TILES BACK TO NORMAL
$("wc-tile-front").mouseout()
$("[page-id]").removeClass("active")
$(`[page-id=${page}]`).addClass("active")
// HIDE ALL PAGES
$(`.${this.cname}__page`).hide();
let obj = $.grep(this.data.pages, function(obj) {
return obj.page === page;
});
let apage = $("." + page);
let empty = apage.is(":empty");
if (obj[0].cache == "false" || empty) {
apage.load(obj[0].url)
}
// SHOW THIS PAGE
apage.show();
// PUBLISH SHOW EVENT
wc.publish(`${this.cname}`, {
time: new Date().getTime(),
action: "show",
id: page
});
// SAVE BROWSER HISTORY
if (push) {
wc.pushstate(page);
}
wc.groupEnd();
return page;
};
/**
* for testing only
* @tester
*/
tester(page) {
wc.group("V1.tester:", page);
let self = this;
let str = `<div class="btn-group btn-group-sm btn-group-tester" role="group" aria-label="btn-tester" style="position:fixed;bottom:60px;right:10px;z-index:99999999">`;
for (var i = 0; i < this.data.pages.length; i++) {
str += `<button type="button" class="btn btn-danger wc-v1-btn-tester">${this.data.pages[i].page}</button>`;
}
str += "</div>"
$("body").v1end(str);
$(".wc-v1-btn-tester").on("click", function() {
self.show($(this).text());
});
wc.groupEnd();
};
}
window.customElements.define('wc-v1', V1);