Source: header.js

  1. /**
  2.  * Header Component <BR>
  3.  * This component will replace both thick and thin components moving forward<BR>
  4.  * <BR><BR><img src=../images/header.png width=100% style="border:1px lime dashed";>
  5.  * <BR><BR><a href="../html/header.html">DEMO</a>
  6.  */
  7. class Header extends HTMLElement {
  8.     constructor() {
  9.         console.group("Header.constructor")
  10. 	
  11.         super();
  13.         console.groupEnd();
  14.     };
  15.     
  16.     /**
  17.      * Set observable values here. When Changed, attributeChangedCallback is invoked
  18.      * @observedAttributes
  19.      */
  20.     static get observedAttributes() {
  21.         console.group("Header.observedAttributes");
  23. 	this.observables = ["uname", "aname", "sname", "env"];
  24. 	console.log(this.observables);
  26.         console.groupEnd();
  27.         return this.observables;
  28.     };
  30.     /**
  31.      * This function is called when this is attached to DOM
  32.      * @connectedCallback. 
  33.      */
  34.     connectedCallback() {
  35.         console.group("Header.connectedCallback")
  36. 	
  37. 	let self = this;
  39. 	// FETCH ALL INTERESTING ELEMENTS
  40. 	this._fetchElements();
  42. 	// FETCH ALL ATTRIBUTES
  43. 	this._fetchAttributes();
  45. 	// REPLACE CONTENT IF NECESSARY WITH NEW STUFF
  46. 	this.innerHTML = `
  47. <div class="wc-header-container ${this.properties.lob} lob-border-bottom">
  48.     <div class="wc-header-inner clearfix">
  49. 	<div class='container'>
  50. 	    <div class='row'>
  51. 		<div class='col-md-12'>
  52. 		    <div class="wc-header-lhs pull-left">
  53. 			<div class="clearfix">
  54. 			    <div class="wc-header-logo pull-left"><img src="/Melify/mtk/dev/tk/lib/components/w3c/assets/dtcc.png"></div>
  55. 			    <div class="wc-header-sep pull-left"></div>
  56. 			    <div class="wc-header-app pull-left">
  57. 				<div class="wc-header-app-sname clearfix">${this.properties.sname}</div>
  58. 				<div class="wc-header-app-aname ${this.properties.lob} lob-color clearfix">
  59. 				    <div class="wc-color">${this.properties.aname} <font color=red><small>${this.properties.env}</font></small></div>
  60. 				</div>
  61. 			    </div>
  62. 			</div>
  63. 		    </div>
  64. 		    <div class="wc-header-rhs pull-right">
  65. 			<div class="wc-header-top-menus">
  66. 			    ${this.dom.topmenus}
  67. 			</div>
  68. 			<div class="wc-header-user">
  69. 			    <div class="clearfix">
  70. 				<div class="wc-header-cog pull-right">
  71. 				    ${this.dom.cogmenus}
  72. 				</div>
  74. 				<div class="wc-header-logout pull-right">
  75. 				    <a href="#" id="header-logout">Logout</a>
  76. 				</div>
  78. 				<div class="wc-header-uname pull-right">${this.properties.uname}</div>
  79. 			    </div>
  80. 			</div>
  81. 		    </div>
  82. 		</div>
  83. 	    </div>
  84. 	</div>
  85.     </div>
  87.     <div class="wc-header-network clearfix ${this.properties.lob} lob-pattern">
  88. 	<div class="wc-header-network-inner clearfix">
  89. 	    <div class='container'>
  90. 		<div class='row'>
  91. 		    <div class='col-md-12'>
  92. 			<div class="wc-header-network-lhs pull-left">
  93. 			    <div class="wc-header-bot-menus">
  94. 				${this.dom.botmenus}
  95. 			    </div>
  96. 			</div>
  97. 			<div class="wc-header-network-rhs pull-right">
  98. 			    <div class="clearfix">
  99. 				<div class="pull-right"><i class="fa fa-search"></i></div>
  100. 				<div class="pull-right"><input name="search" value="" class="form-control" style=background:#333!important;border:0!important></div>
  101. 			    </div>
  102. 		    </div>
  103. 		</div>
  104. 	    </div>
  105. 	</div>
  106.     </div>
  107. </div>`;
  108. 	
  109. 	// DO DROPDOWN BOTTOM BORDERS NOW
  110. 	let dropdown = __(".dropdown-menu");
  111. 	$(dropdown).addClass(this.properties.lob);
  112. 	$(dropdown).addClass("lob-border-bottom");
  114. 	if (this.properties.search === "false") {
  115. 	    let search = this.querySelector(".wc-header-network-rhs .clearfix");
  116. 	    $(search).hide();
  117. 	}
  119. 	let links = this.querySelectorAll("a");
  121. 	for (let i=0; i<links.length; i++) {
  122. 	    let link = links[i];
  124. 	    if (link.id != "") {
  125. 		link.addEventListener("click", function() {
  126. 		    self._onClick(link);
  127. 		});
  128. 	    }
  129. 	}
  131. 	this._finalize();
  133. 	// SHOW IT NOW (NO FLICKERS) 
  134. 	this.style.visibility = "visible";
  136.         console.groupEnd();
  137.     };
  139.     /**
  140.      * Invoked When component is removed. Usually with a .remove() function call
  141.      * @disconnectedCallback
  142.      */
  143.     disconnectedCallback() {
  144.         console.group("Header.disconnectedCallback")
  146. 	/* CLEAN UP NOW */
  148.         console.groupEnd();
  149.     };
  151.     /**
  152.      * Called with .setAttribute(...) function call
  153.      * @attributeChangedCallback
  154.      */
  155.     attributeChangedCallback(attr, oldval, newval) {
  156.         console.group("Header.attributeChangedCallback:", attr, oldval, newval);
  158. 	this.properties = this.properties || [];
  160. 	console.log("attributes: ", this.properties);
  161. 	// EXAMPLE ONLY. replace with observables
  162. 	switch(attr)
  163. 	{
  164. 	    case "uname":
  165. 	    this.properties.uname = newval;
  166. 	    this.style.uname = this.properties.uname;
  167. 	    break;
  169. 	    case "aname":
  170. 	    this.properties.aname = newval;
  171. 	    this.style.aname = this.properties.aname;
  172. 	    break;
  174. 	    case "sname":
  175. 	    this.properties.sname = newval;
  176. 	    this.style.sname = this.properties.sname;
  177. 	    break;
  179. 	    case "env":
  180. 	    this.properties.env = newval;
  181. 	    this.style.env = this.properties.env;
  182. 	    break;
  183. 	}
  184. 	
  185.         console.groupEnd();
  186.     };
  188.     /**
  189.      * Stores DOM elements of interest for future use
  190.      * @_fetchElements
  191.      */
  192.     _fetchElements() {
  193. 	console.group("Header._fetchElements");
  194. 	
  195. 	this.dom = this.dom || [];
  196. 	this.dom.topmenus = this.querySelector("wc-header-topmenus").innerHTML;
  197. 	this.dom.botmenus = this.querySelector("wc-header-botmenus").innerHTML;
  198. 	this.dom.cogmenus = this.querySelector("wc-header-cogmenus").innerHTML;
  200. 	console.groupEnd();
  201.     };
  203.     /**
  204.      * Component attributes are _fetched and defaults are set if undefined
  205.      * @_fetchAttributes
  206.      * @param {string} [uname=NOTSET] user name
  207.      * @param {string} [sname=NOTSET] service name
  208.      * @param {string} [aname=NOTSET] application name
  209.      * @param {string} env environment
  210.      */
  211.     _fetchAttributes() {
  212. 	console.group("Header._fetchAttributes");
  213. 	
  214. 	this.properties = {
  215. 	    "cname"	 : "Header",
  216. 	    "author"     : "Mel Heravi",
  217. 	    "version"    : "1.0",
  218. 	    "uname"      : "NOTSET",
  219. 	    "aname"      : "NOTSET",
  220. 	    "sname"      : "NOTSET",
  221. 	    "env"        : "",
  222. 	};
  223. 	
  224. 	// SAVE WIDGET SPECIFIC PROPERTIES
  225. 	this.propertiesW = [];
  227. 	// SAVE ALL OTHER PROPERTIES
  228. 	let attrs = wc.getAttributes(this)
  229. 	
  230.  	for (var key in attrs) {
  231. 	    this.properties[key]  = this.getAttribute(key);
  232. 	    this.propertiesW[key] = this.getAttribute(key);
  233. 	    console.log(key + ": " + attrs[key]);
  234. 	}
  236. 	console.groupEnd();
  237.     };
  239.     /**
  240.      * A sample callback usage function - see connectedCallback()
  241.      * @_onClick
  242.      */
  243.     _onClick(link) {
  244. 	console.group("Header._onClick:", link);
  246. 	wc.publish(this, "wc-header", {
  247. 	    action: "click",
  248. 	    id: link.id
  249. 	});
  251. 	console.groupEnd();
  252.     };
  254.     /**
  255.      * Destroy the instance object and artifacts
  256.      * @_destroy
  257.      */
  258.     destroy() {
  259. 	console.group("Header.destroy:", this.id);
  261. 	// FREE POINTER
  262. 	delete this;
  264. 	// REMOVE ITEM FROM DOM
  265. 	this.parentNode.removeChild(this);
  267. 	console.groupEnd();
  268.     };
  270.     /**
  271.      * SAVE DATA FOR ANALYTICS
  272.      * @__finalize
  273.      */
  274.     _finalize() {
  275. 	console.group("Header._finalize:", this.id);
  277. 	this.classList.add("wc");
  279. 	// ADD ANALYTICS HERE
  280. 	wc.getStats(this, this.properties.cname, this.properties.version);
  281. 	
  282. 	console.groupEnd();
  283.     };
  285.     /**
  286.      * FOR TESTING PURPOSES
  287.      * @test
  288.      */
  289.     static test() {
  290. 	console.group("Header.test");
  292. 	console.log("testing results will be printed here...");
  294. 	console.groupEnd();
  295. 	return true;
  296.     }
  297. }
  299. window.customElements.define('wc-header', Header);