/**
* Menubar Component<BR>
* <BR><BR><img src=/tk/lib/components/w/img/menubar.png width=30% style="border:1px lime dashed;padding:20px">
* <BR><BR><a href="/tk/lib/components/w/html/menubar.html">DEMO</a>
*/
class Menubar extends HTMLElement {
constructor() {
wc.group("Menubar.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("Menubar.observedAttributes");
this.observables = [];
wc.groupEnd();
return this.observables;
};
/**
* Initial Markup
* @private
* @_template
*/
_template() {
wc.group("Menubar.template");
var temp = this.dom.content;
wc.groupEnd();
return temp;
};
/**
* Called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("Menubar.connectedCallback")
// GET PROPERTIES AND INTERESTING ELEMENTS
this._initialize();
// ADD COMPONENT MARKTOP
this.innerHTML = this._template()
$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
//Checks if li has sub (ul) and adds class for toggle icon - just an UI
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
//Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
$(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");
//Adds menu-mobile class (for mobile toggle menu) before the normal menu
//Mobile menu is hidden if width is more then 959px, but normal menu is displayed
//Normal menu is hidden if width is below 959px, and jquery adds mobile menu
//Done this way so it can be used with wordpress without any trouble
$(".menu > ul > li").hover(function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
//If width is more than 943px dropdowns are displayed on hover
$(".menu > ul > li").click(function() {
if ($(window).width() <= 943) {
$(this).children("ul").fadeToggle(150);
}
});
//If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
$(".menu-mobile").click(function(e) {
$(".menu > ul").toggleClass('show-on-mobile');
e.preventDefault();
});
//when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
// MEL: SET WIDTH OF EACH <UL>
$(".menu-dropdown-icon").each(function() {
let len = $(this).find("> ul > li > ul").length;
if (len) {
$(this).find("> ul > li").width(100/len+"%");
// EACH COLUMN IS 300PX WIDE
//$(this).find("> ul").width(len*300+"px");
}
});
// PUBLISH EVENTS
this._publish();
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
wc.groupEnd();
};
/**
* Publish all events of interest
* @private
* @_publish
*/
_publish() {
wc.group("Menubar.publish");
let self = this;
$(this).find("a").on("click", function() {
let id = $(this).attr("id");
wc.publish("wc-menubar", {
time: new Date().getTime(),
action: "click",
id: id
});
});
wc.groupEnd();
}
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("Menubar.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Menubar.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("Menubar._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("Menubar._fetchAttributes");
this.properties = {
cname : "Menubar",
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
*/
configure(options) {
wc.group("Menubar.configure:", JSON.stringify(options));
// PROCESS ALL OPTIONS HERE
wc.groupEnd();
};
/**
* Initialize component
* @private
* @_initialize
*/
_initialize() {
wc.group("Menubar._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("Menubar._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("Menubar.disconnectedCallback")
// FREE MEMORY AND CLEANUP
wc.groupEnd();
};
}
window.customElements.define('wc-menubar', Menubar);