/**
* Sidebar Component<BR>
* <BR><BR><img src=../img/sidebar.png width=30% style="border:1px lime dashed;padding:20px">
* <BR><BR><a href="../html/sidebar.html">DEMO</a>
*/
class Sidebar extends HTMLElement {
constructor() {
wc.group("Sidebar.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("Sidebar.observedAttributes");
this.observables = [];
wc.groupEnd();
return this.observables;
};
/**
* This function is called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("Sidebar.connectedCallback")
// USE THIS FLAG FOR IE EXCEPTIONS
this.ie = wc.detectIE();
let self = this;
// GET PROPERTIES AND INTERESTING ELEMENTS
this._initialize();
if (this.properties.side == "left") {
this.innerHTML = `
<div class="wc-sidebar-container">
<div class="wc-sidebar-fixed">
<wc-include href='/tk/lib/components/misc/webpack/src/w/html/parts/sidebar/fixed.html'></wc-include>
</div>
<div class="wc-sidebar-float">
<wc-include href='/tk/lib/components/misc/webpack/src/w/html/parts/sidebar/float.html'></wc-include>
</div>
</div>`
} else {
this.innerHTML = `
<div class="wc-sidebar-container">
<div class="wc-sidebar-float">
<wc-include href='/tk/lib/components/misc/webpack/src/w/html/parts/sidebar/fixed.html'></wc-include>
</div>
<div class="wc-sidebar-fixed">
<wc-include href='/tk/lib/components/misc/webpack/src/w/html/parts/sidebar/float.html'></wc-include>
</div>
</div>`
}
wc.wait4(".wc-sidebar-float-body", ()=> {
// RESPONSIVE ADDON EVENTS
$(this).find(".fa-bars").on("click", (e) => {
if ($(".fa-bars").hasClass("isopen")) {
wc.log("normal menus...");
$(".fa-bars").removeClass("isopen");
this.close();
} else {
$(".fa-bars").addClass("isopen");
wc.log("fixed menus...");
this.open();
}
});
// SET USER FIXED WIDTH
$(".wc-sidebar-fixed").css("flex", "0 0 " + this.properties.width + "px");
$(".wc-sidebar-fixed-header, .wc-sidebar-float-header").css({
"height": this.properties.height,
"line-height": this.properties.height + "px"
});
$(".wc-sidebar-fixed-body, .wc-sidebar-float-body").css({
"height": "calc(100vh - " + (parseInt(this.properties.height) + parseInt(this.properties.top) + parseInt(this.properties.bot)) + "px)",
"overflow": "auto",
"-webkit-overflow-scrolling": "touch"
});
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
});
wc.groupEnd();
};
/**
* Publish all events
* @private
* @_publish
*/
_publish() {
wc.group("Sidebar.publish");
this.addEventListener("click", e => {
wc.publish("wc-sidebar", {
time: new Date().getTime(),
action: "click",
id: this.id,
uparam: this.properties.uparam
});
});
wc.groupEnd();
}
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("Sidebar.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Sidebar.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("Sidebar._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("Sidebar._fetchAttributes");
this.properties = {
cname : "Sidebar",
author : "Mel Heravi",
version : "1.0",
side : "left",
width : "300",
height : "100",
top : "0",
bot : "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();
};
/**
* Destroy the instance object and artifacts
* @destroy
*/
destroy() {
wc.group("Sidebar.destroy:", this.id);
// FREE ALL MEMORY
// you should delete all created objects here
// FREE POINTER
delete this;
// REMOVE ITEM FROM DOM
this.parentNode.removeChild(this);
wc.groupEnd();
};
/**
* configure the instance object and artifacts
* @configure
*/
configure(options) {
wc.group("Sidebar.configure:", JSON.stringify(options));
// PROCESS ALL OPTIONS HERE
wc.groupEnd();
};
/**
* SAVE DATA FOR ANALYTICS
* @private
* @_initialize
*/
_initialize() {
wc.group("Sidebar._initialize:", this.id);
// FETCH ALL INTERESTING ELEMENTS
this._fetchElements();
// FETCH ALL ATTRIBUTES
this._fetchAttributes();
wc.groupEnd();
};
/**
* SAVE DATA FOR ANALYTICS
* @private
* @_finalize
*/
_finalize() {
wc.group("Sidebar._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("Sidebar.disconnectedCallback")
/** CLEAN UP NOW */
wc.groupEnd();
};
/**
* @open
*/
open() {
wc.group("Sidebar.open")
if (this.properties.side == "right") {
$(".wc-sidebar-fixed").animate({'marginRight': '0px'}, 500);
$(".wc-sidebar-float").animate({'marginLeft': '-300px'}, 500);
} else {
$(".wc-sidebar-fixed").animate({'marginRight': '0px'}, 500);
$(".wc-sidebar-float").animate({'marginRight': '-300px'}, 500);
}
wc.groupEnd();
};
/**
* @close
*/
close() {
wc.group("Sidebar.close")
if (this.properties.side == "right") {
$(".wc-sidebar-fixed").animate({'marginRight': '-300px'}, 500);
$(".wc-sidebar-float").animate({'marginLeft': '0px'}, 500);
} else {
$(".wc-sidebar-fixed").animate({'marginRight': '-300px'}, 500);
$(".wc-sidebar-float").animate({'marginRight': '0px'}, 500);
}
wc.groupEnd();
}
}
window.customElements.define('wc-sidebar', Sidebar);