Source: app.js

  1. /**
  2.  * App Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/app.png width=30% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/app.html">DEMO</a>
  5.  */
  6. class App extends HTMLElement {
  7.     constructor() {
  8.         wc.group("App.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("App.observedAttributes");
  22. 	this.observables = [];
  24.         wc.groupEnd();
  25.         return this.observables;
  26.     };
  28.     /**
  29.      * Called when this is attached to DOM
  30.      * @connectedCallback. 
  31.      */
  32.     connectedCallback() {
  33.         wc.group("App.connectedCallback")
  34. 	
  35. 	// ADD A RANDOM ID IF NONE EXIST
  36. 	if (!this.id) {
  37. 	    this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
  38. 	}
  40. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  41. 	this._initialize();
  43. 	// IF PAGE IS RELOADED
  44. 	if (wc.refreshed()) {
  45. 	    this.properties.show = wc.parseQuery().page;
  46. 	    console.log("THIS PAGE IS RELOADED:", this.properties.show);
  47. 	}
  49. 	this.configure();
  51. 	// ADD STATS AND OTHER FINAL STUFF
  52. 	this._finalize();
  54.         wc.groupEnd();
  55.     };
  57.     /**
  58.      * Called with .setAttribute(...) function call
  59.      * @attributeChangedCallback
  60.      */
  61.     attributeChangedCallback(attr, oldval, newval) {
  62.         wc.group("App.attributeChangedCallback:", attr, oldval, newval);
  64. 	this.properties = this.properties || [];
  66. 	let obs = App.observedAttributes;
  68. 	for (let i = 0; i < obs.length; i++) {
  69. 	    if (newval) {
  70. 		this.properties[obs[i]] = newval;
  71. 	    }
  72. 	}
  73. 	
  74. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  75. 	try {
  76. 	    switch(attr) 
  77. 	    {
  78. 		case "header":
  79. 		break;
  80. 		
  81. 		default:
  82. 		break;
  83. 	    }
  84. 	} catch(e) {
  85. 	    wc.warn(e.name + ' > ' + e.message);
  86. 	}
  88.         wc.groupEnd();
  89.     };
  91.     /**
  92.      * Stores DOM elements of interest for future use
  93.      * @private
  94.      * @_fetchElements
  95.      */
  96.     _fetchElements() {
  97. 	wc.group("App._fetchElements");
  98. 	
  99. 	this.dom = this.dom || [];
  100. 	this.dom.content = this.innerHTML;
  102. 	wc.groupEnd();
  103.     };
  105.     /**
  106.      * Component attributes are _fetched and defaults are set if undefined
  107.      * @private
  108.      * @_fetchAttributes
  109.      */
  110.     _fetchAttributes() {
  111. 	wc.group("App._fetchAttributes");
  112. 	
  113. 	this.properties = {
  114. 	    uparam	: "",
  115. 	    cname	: "App",
  116. 	    author	: "Mel M. Heravi",
  117. 	    version	: "1.0"
  118. 	};
  119. 	
  120. 	// SAVE WIDGET SPECIFIC PROPERTIES
  121. 	this.propertiesW = [];
  122. 	
  123. 	// SAVE ALL OTHER PROPERTIES
  124. 	let attrs = wc.getAttributes(this)
  125. 	
  126.  	for (var key in attrs) {
  127. 	    let attr = this.getAttribute(key) || this.properties.key;
  128. 	    this.properties[key]  = this.getAttribute(key);
  129. 	    this.propertiesW[key] = this.getAttribute(key);
  130. 	    wc.log(key + ": " + attrs[key]);
  131. 	}
  133. 	// SET ALL INITIAL ATTRIBUTES
  134.  	for (var key in this.properties) {
  135. 	    switch(key) 
  136. 	    {
  137. 		case "header":
  138. 		break;
  139. 		
  140. 		default:
  141. 		break;
  142. 	    }
  143. 	}
  145. 	wc.log("ATTRIBUTES: ", this.properties);
  147. 	wc.groupEnd();
  148.     };
  150.     /**
  151.      * configure the instance object and artifacts
  152.      * @configure
  153.      * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  154.      */
  155.     configure() {
  156. 	wc.group("App.configure:");
  158. 	let self = this;
  160. 	$.getJSON(this.properties.path + "/config.json", function(data) {
  161. 	    self._process(data);
  162. 	}).fail(function(jqXHR, textStatus, errorThrown) {
  163. 	    alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  164. 	});
  166. 	wc.groupEnd();
  167.     };
  169.     /**
  170.      * _process the instance object and artifacts
  171.      * @private
  172.      * @_process
  173.      */
  174.     _process(data) {
  175. 	wc.group("App._process:", data);
  176. 	
  177. 	this.data = data;
  178. 	this.cname = this.properties.cname.toLowerCase();
  180. 	let tstr = `<div><wc-include href="/tk/lib/components/misc/webpack/src/w/html/parts/app/banner.html"></wc-include></div>`;
  182. 	tstr += `
  183. 	<wc-msg id="my-msg">WAITING...</wc-msg>
  185. 	<div class="${this.cname}__header sticky-top">
  186. 	    <wc-include href="${data.header}"></wc-include>
  187. 	</div>`;
  189. 	for (var i = 0; i < data.pages.length; i++) {
  190. 	    tstr += `<div class="${this.cname}__page ${data.pages[i].page}"></div>`;
  191. 	}
  192. 	
  193. 	tstr += `
  194. 	<div class="${this.cname}__footer">
  195. 	    <wc-include href="${data.footer}"></wc-include>
  196. 	</div>`;
  198. 	// ADD COMPONENT MARKTOP
  199. 	this.innerHTML = tstr;
  201. 	wc.wait4(".navbar", ()=> {
  202. 	    this.show(this.properties.show);
  204. 	    // LISTEN TO HASH CHANGES
  205. 	    wc.popstate(() => {
  206. 		let x = document.location.search.replace("?page=","")
  207. 		
  208. 		if (x != "") {
  209. 		    // CLICK ON PAGE LINK
  210. 		    this.show(x, false);
  211. 		    
  212. 		    // PUBLISH SHOW EVENT
  213. 		    wc.publish(`${this.cname}`, {
  214. 			time: new Date().getTime(),
  215. 			action: "popstate",
  216. 			id: x
  217. 		    });
  218. 		}
  219. 	    });
  220. 	});
  222. 	wc.wait4("wc-msg", ()=> {
  223. 	    this.msg = this.querySelector("wc-msg");
  224. 	    this.msg.show({id:"M2011: ", type:"info", html:"Loading. Please wait...", timer:3000, block: true})
  225. 	    this.tester();
  226. 	});
  228. 	wc.groupEnd();
  229.     };
  231.     /**
  232.      * Initialize component
  233.      * @private
  234.      * @_initialize
  235.      */
  236.     _initialize() {
  237. 	wc.group("App._initialize:", this.id);
  239. 	// FETCH ALL INTERESTING ELEMENTS
  240. 	this._fetchElements();
  242. 	// FETCH ALL ATTRIBUTES
  243. 	this._fetchAttributes();
  244. 	
  245. 	wc.groupEnd();
  246.     };
  248.     /**
  249.      * Save data for analytics and final wrap up
  250.      * @private
  251.      * @_finalize
  252.      */
  253.     _finalize() {
  254. 	wc.group("App._finalize:", this.id);
  256. 	this.classList.add("wc");
  258. 	// ADD ANALYTICS HERE
  259. 	wc.setStats(this, this.properties.cname, this.properties.version);
  260. 	
  261. 	// SHOW IT NOW (NO FLICKERS) 
  262. 	this.style.visibility = "visible";
  264. 	wc.groupEnd();
  265.     };
  267.     /**
  268.      * Invoked When component is removed. Usually with a .remove() function call
  269.      * @disconnectedCallback
  270.      */
  271.     disconnectedCallback() {
  272.         wc.group("App.disconnectedCallback")
  274. 	// FREE MEMORY AND CLEANUP
  276.         wc.groupEnd();
  277.     };
  279.     /**
  280.      * Destroy the instance object and artifacts
  281.      * @destroy
  282.      */
  283.     destroy() {
  284. 	wc.group("App.destroy");
  286. 	// FREE ALL MEMORY
  287. 	// you should delete all created objects here
  288. 	
  289. 	// FREE POINTER
  290. 	delete this;
  291. 	
  292. 	// REMOVE ITEM FROM DOM
  293. 	this.parentNode.removeChild(this);
  295. 	wc.groupEnd();
  296.     };
  298.     /**
  299.      * refresh a page
  300.      * @refresh
  301.      */
  302.     refresh(page) {
  303. 	wc.group("App.refresh:", page);
  305. 	// EMPTY CONTENT
  306. 	$("." + page).empty();
  308. 	// RE-LOAD THE PAGE
  309. 	this.show(page);
  310. 	
  311. 	wc.groupEnd();
  312. 	return page;
  313.     };
  315.     /**
  316.      * show a page
  317.      * @show
  318.      */
  319.     show(page, push=true) {
  320. 	wc.group("App.show:", page);
  322. 	$("[page-id]").removeClass("active")
  323. 	$(`[page-id=${page}]`).addClass("active")
  325. 	// HIDE ALL PAGES
  326. 	$(`.${this.cname}__page`).hide();
  328. 	let obj = $.grep(this.data.pages, function(obj) {
  329. 	    return obj.page === page;
  330. 	});
  332. 	let apage = $("." + page);
  333. 	let empty = apage.is(":empty");
  335. 	if (obj[0].cache == "false" || empty) {
  336. 	    apage.load(obj[0].url)
  337. 	}
  339. 	// SHOW THIS PAGE 
  340. 	apage.show();
  341. 	
  342. 	// PUBLISH SHOW EVENT
  343. 	wc.publish(`${this.cname}`, {
  344. 	    time: new Date().getTime(),
  345. 	    action: "show",
  346. 	    id: page
  347. 	});
  349. 	// SAVE BROWSER HISTORY
  350. 	if (push) {
  351. 	    wc.pushstate(page);
  352. 	}
  354. 	wc.groupEnd();
  355. 	return page;
  356.     };
  358.     /**
  359.      * for testing only
  360.      * @tester
  361.      */
  362.     tester(page) {
  363. 	wc.group("App.tester:", page);
  365. 	let self = this;
  367. 	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">`;
  368. 	for (var i = 0; i < this.data.pages.length; i++) {
  369. 	    str += `<button type="button" class="btn btn-danger wc-app-btn-tester">${this.data.pages[i].page}</button>`;
  370. 	}
  371. 	str += "</div>"
  373. 	$("body").append(str);
  375. 	$(".wc-app-btn-tester").on("click", function() {
  376. 	    self.show($(this).text());
  377. 	});
  379. 	wc.groupEnd();
  380.     };
  382.     /**
  383.      * PROCESS JSON MESSAGES
  384.      * @message
  385.      * app.message('{"action": "show","page": "page-2"}')
  386.      */
  387.     message(text) {
  388. 	wc.group("App.message:", text);
  390. 	let msg  = app.querySelector("wc-msg");
  391. 	let json = JSON.parse(text);
  393. 	if ("action" in json === false) {
  394. 	    msg.show({id:"M2020: ", type:"error", html:"NO ACTION SPECIFIED", close: true, block: true})
  395. 	}
  397. 	switch(json.action) 
  398. 	{
  399. 	    case "show":
  400. 	    app.show(json.page);
  401. 	    break;
  403. 	    default:
  404. 	    msg.show({id:"M2020: ", type:"error", html:"NO SUCH ACTION: " + json.action, close: true, block: true})
  405. 	    break;
  406. 	}
  408. 	wc.groupEnd();
  409. 	return true;
  410.     };
  411. }
  413. window.customElements.define('wc-app', App);