Source: menubar.js

  1. /**
  2.  * Menubar Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/menubar.png width=30% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/menubar.html">DEMO</a>
  5.  */
  6. class Menubar extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Menubar.constructor")
  9. 	
  10.         super();
  12.         wc.groupEnd();
  13.     };
  14.     
  15.     /**
  16.      * Set observable values here. When Changed, attributeChangedCallback is invoked
  17.      * @observedAttributes
  18.      */
  19.     static get observedAttributes() {
  20.         wc.group("Menubar.observedAttributes");
  22. 	this.observables = [];
  24.         wc.groupEnd();
  25.         return this.observables;
  26.     };
  28.     /**
  29.      * Initial Markup
  30.      * @private
  31.      * @_template
  32.      */
  33.     _template() {
  34.         wc.group("Menubar.template");
  35. 	
  36. 	var temp = this.dom.content;
  38.         wc.groupEnd();
  39.         return temp;
  40.     };
  42.     /**
  43.      * Called when this is attached to DOM
  44.      * @connectedCallback. 
  45.      */
  46.     connectedCallback() {
  47.         wc.group("Menubar.connectedCallback")
  48. 	
  49. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  50. 	this._initialize();
  52. 	// ADD COMPONENT MARKTOP
  53. 	this.innerHTML = this._template()
  55. 	$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
  56. 	//Checks if li has sub (ul) and adds class for toggle icon - just an UI
  58. 	$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
  59. 	//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)
  61. 	$(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");
  63. 	//Adds menu-mobile class (for mobile toggle menu) before the normal menu
  64. 	//Mobile menu is hidden if width is more then 959px, but normal menu is displayed
  65. 	//Normal menu is hidden if width is below 959px, and jquery adds mobile menu
  66. 	//Done this way so it can be used with wordpress without any trouble
  68. 	$(".menu > ul > li").hover(function(e) {
  69. 	    if ($(window).width() > 943) {
  70. 		$(this).children("ul").stop(true, false).fadeToggle(150);
  71. 		e.preventDefault();
  72. 	    }
  73. 	});
  74. 	//If width is more than 943px dropdowns are displayed on hover
  76. 	$(".menu > ul > li").click(function() {
  77. 	    if ($(window).width() <= 943) {
  78. 		$(this).children("ul").fadeToggle(150);
  79. 	    }
  80. 	});
  81. 	//If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
  83. 	$(".menu-mobile").click(function(e) {
  84. 	    $(".menu > ul").toggleClass('show-on-mobile');
  85. 	    e.preventDefault();
  86. 	});
  87. 	//when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
  89. 	// MEL: SET WIDTH OF EACH <UL>
  90. 	$(".menu-dropdown-icon").each(function() {
  91. 	    let len = $(this).find("> ul > li > ul").length;
  92. 	    
  93. 	    if (len) {
  94. 		$(this).find("> ul > li").width(100/len+"%");
  96. 		// EACH COLUMN IS 300PX WIDE
  97. 		//$(this).find("> ul").width(len*300+"px");
  98. 	    }
  99. 	});
  101. 	// PUBLISH EVENTS
  102. 	this._publish();
  103. 	
  104. 	// ADD STATS AND OTHER FINAL STUFF
  105. 	this._finalize();
  107.         wc.groupEnd();
  108.     };
  110.     /**
  111.      * Publish all events of interest
  112.      * @private
  113.      * @_publish
  114.      */
  115.     _publish() {
  116. 	wc.group("Menubar.publish");
  118. 	let self = this;
  120. 	$(this).find("a").on("click", function() {
  121. 	    let id = $(this).attr("id");
  123. 	    wc.publish("wc-menubar", {
  124. 		time: new Date().getTime(),
  125. 		action: "click",
  126. 		id: id
  127. 	    });
  128. 	});
  129. 	
  130. 	wc.groupEnd();
  131.     }
  133.     /**
  134.      * Called with .setAttribute(...) function call
  135.      * @attributeChangedCallback
  136.      */
  137.     attributeChangedCallback(attr, oldval, newval) {
  138.         wc.group("Menubar.attributeChangedCallback:", attr, oldval, newval);
  140. 	this.properties = this.properties || [];
  142. 	let obs = Menubar.observedAttributes;
  144. 	for (let i = 0; i < obs.length; i++) {
  145. 	    if (newval) {
  146. 		this.properties[obs[i]] = newval;
  147. 	    }
  148. 	}
  149. 	
  150. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  151. 	try {
  152. 	    switch(attr) 
  153. 	    {
  154. 		case "header":
  155. 		break;
  156. 		
  157. 		default:
  158. 		break;
  159. 	    }
  160. 	} catch(e) {
  161. 	    wc.warn(e.name + ' > ' + e.message);
  162. 	}
  164.         wc.groupEnd();
  165.     };
  167.     /**
  168.      * Stores DOM elements of interest for future use
  169.      * @private
  170.      * @_fetchElements
  171.      */
  172.     _fetchElements() {
  173. 	wc.group("Menubar._fetchElements");
  174. 	
  175. 	this.dom = this.dom || [];
  176. 	this.dom.content = this.innerHTML;
  178. 	wc.groupEnd();
  179.     };
  181.     /**
  182.      * Component attributes are _fetched and defaults are set if undefined
  183.      * @private
  184.      * @_fetchAttributes
  185.      */
  186.     _fetchAttributes() {
  187. 	wc.group("Menubar._fetchAttributes");
  188. 	
  189. 	this.properties = {
  190. 	    cname      : "Menubar",
  191. 	    author     : "Mel M. Heravi",
  192. 	    version    : "1.0"
  193. 	};
  194. 	
  195. 	// SAVE WIDGET SPECIFIC PROPERTIES
  196. 	this.propertiesW = [];
  197. 	
  198. 	// SAVE ALL OTHER PROPERTIES
  199. 	let attrs = wc.getAttributes(this)
  200. 	
  201.  	for (var key in attrs) {
  202. 	    let attr = this.getAttribute(key) || this.properties.key;
  203. 	    this.properties[key]  = this.getAttribute(key);
  204. 	    this.propertiesW[key] = this.getAttribute(key);
  205. 	    wc.log(key + ": " + attrs[key]);
  206. 	}
  208. 	// SET ALL INITIAL ATTRIBUTES
  209.  	for (var key in this.properties) {
  210. 	    switch(key) 
  211. 	    {
  212. 		case "header":
  213. 		break;
  214. 		
  215. 		default:
  216. 		break;
  217. 	    }
  218. 	}
  220. 	wc.log("ATTRIBUTES: ", this.properties);
  222. 	wc.groupEnd();
  223.     };
  225.     /**
  226.      * configure the instance object and artifacts
  227.      * @configure
  228.      */
  229.     configure(options) {
  230. 	wc.group("Menubar.configure:", JSON.stringify(options));
  232. 	// PROCESS ALL OPTIONS HERE
  234. 	wc.groupEnd();
  235.     };
  237.     /**
  238.      * Initialize component
  239.      * @private
  240.      * @_initialize
  241.      */
  242.     _initialize() {
  243. 	wc.group("Menubar._initialize:", this.id);
  245. 	// FETCH ALL INTERESTING ELEMENTS
  246. 	this._fetchElements();
  248. 	// FETCH ALL ATTRIBUTES
  249. 	this._fetchAttributes();
  250. 	
  251. 	wc.groupEnd();
  252.     };
  254.     /**
  255.      * Save data for analytics and final wrap up
  256.      * @private
  257.      * @_finalize
  258.      */
  259.     _finalize() {
  260. 	wc.group("Menubar._finalize:", this.id);
  262. 	this.classList.add("wc");
  264. 	// ADD ANALYTICS HERE
  265. 	wc.setStats(this, this.properties.cname, this.properties.version);
  266. 	
  267. 	// SHOW IT NOW (NO FLICKERS) 
  268. 	this.style.visibility = "visible";
  270. 	wc.groupEnd();
  271.     };
  273.     /**
  274.      * Invoked When component is removed. Usually with a .remove() function call
  275.      * @disconnectedCallback
  276.      */
  277.     disconnectedCallback() {
  278.         wc.group("Menubar.disconnectedCallback")
  280. 	// FREE MEMORY AND CLEANUP
  282.         wc.groupEnd();
  283.     };
  284. }
  286. window.customElements.define('wc-menubar', Menubar);