Source: v1.js

  1. /**
  2.  * V1 Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/v1.png width=30% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/v1.html">DEMO</a>
  5.  */
  6. class V1 extends HTMLElement {
  7.     constructor() {
  8.         wc.group("V1.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("V1.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("V1.connectedCallback")
  34. 	
  35. 	let self = this;
  37. 	// ADD A RANDOM ID IF NONE EXIST
  38. 	if (!this.id) {
  39. 	    this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
  40. 	}
  42. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  43. 	this._initialize();
  45. 	// IF PAGE IS RELOADED
  46. 	if (wc.refreshed()) {
  47. 	    this.properties.page = wc.parseQuery().page;
  48. 	    console.log("THIS PAGE IS RELOADED:", this.properties.page);
  49. 	}
  51. 	this.configure();
  53. 	// ADD STATS AND OTHER FINAL STUFF
  54. 	this._finalize();
  56.         wc.groupEnd();
  57.     };
  59.     /**
  60.      * Called with .setAttribute(...) function call
  61.      * @attributeChangedCallback
  62.      */
  63.     attributeChangedCallback(attr, oldval, newval) {
  64.         wc.group("V1.attributeChangedCallback:", attr, oldval, newval);
  66. 	this.properties = this.properties || [];
  68. 	let obs = V1.observedAttributes;
  70. 	for (let i = 0; i < obs.length; i++) {
  71. 	    if (newval) {
  72. 		this.properties[obs[i]] = newval;
  73. 	    }
  74. 	}
  75. 	
  76. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  77. 	try {
  78. 	    switch(attr) 
  79. 	    {
  80. 		case "header":
  81. 		break;
  82. 		
  83. 		default:
  84. 		break;
  85. 	    }
  86. 	} catch(e) {
  87. 	    wc.warn(e.name + ' > ' + e.message);
  88. 	}
  90.         wc.groupEnd();
  91.     };
  93.     /**
  94.      * Stores DOM elements of interest for future use
  95.      * @private
  96.      * @_fetchElements
  97.      */
  98.     _fetchElements() {
  99. 	wc.group("V1._fetchElements");
  100. 	
  101. 	this.dom = this.dom || [];
  102. 	this.dom.content = this.innerHTML;
  104. 	wc.groupEnd();
  105.     };
  107.     /**
  108.      * Component attributes are _fetched and defaults are set if undefined
  109.      * @private
  110.      * @_fetchAttributes
  111.      */
  112.     _fetchAttributes() {
  113. 	wc.group("V1._fetchAttributes");
  114. 	
  115. 	this.properties = {
  116. 	    uparam	: "",
  117. 	    cname	: "V1",
  118. 	    author	: "Mel M. Heravi",
  119. 	    version	: "1.0"
  120. 	};
  121. 	
  122. 	// SAVE WIDGET SPECIFIC PROPERTIES
  123. 	this.propertiesW = [];
  124. 	
  125. 	// SAVE ALL OTHER PROPERTIES
  126. 	let attrs = wc.getAttributes(this)
  127. 	
  128.  	for (var key in attrs) {
  129. 	    let attr = this.getAttribute(key) || this.properties.key;
  130. 	    this.properties[key]  = this.getAttribute(key);
  131. 	    this.propertiesW[key] = this.getAttribute(key);
  132. 	    wc.log(key + ": " + attrs[key]);
  133. 	}
  135. 	// SET ALL INITIAL ATTRIBUTES
  136.  	for (var key in this.properties) {
  137. 	    switch(key) 
  138. 	    {
  139. 		case "header":
  140. 		break;
  141. 		
  142. 		default:
  143. 		break;
  144. 	    }
  145. 	}
  147. 	wc.log("ATTRIBUTES: ", this.properties);
  149. 	wc.groupEnd();
  150.     };
  152.     /**
  153.      * configure the instance object and artifacts
  154.      * @configure
  155.      * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  156.      */
  157.     configure() {
  158. 	wc.group("V1.configure:");
  160. 	let self = this;
  162. 	$.getJSON(this.properties.path + "/config.json", function(data) {
  163. 	    self._process(data);
  164. 	}).fail(function(jqXHR, textStatus, errorThrown) {
  165. 	    alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  166. 	});
  168. 	wc.groupEnd();
  169.     };
  171.     /**
  172.      * _process the instance object and artifacts
  173.      * @private
  174.      * @_process
  175.      */
  176.     _process(data) {
  177. 	wc.group("V1._process:", data);
  178. 	
  179. 	this.data = data;
  180. 	this.cname = this.properties.cname.toLowerCase();
  182. 	let tstr = "";
  184. 	tstr += `
  185. 	<div class="v1-msg alert alert-warning alert-dismissible fade show" style="margin-bottom:0;display:none;border-radius:0" role="alert">
  186. 	    <div class="container-fluid">
  187. 		<div class="row">
  188. 		    <div class="col-12 padding-0 margin-0">
  189. 			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  190. 			    <span aria-hidden="true">&times;</span>
  191. 			</button>
  192. 	
  193. 			<strong class="wc-far">WARNING:</strong> <msg>waiting...</msg>
  194. 		    </div>
  195. 		</div>
  196. 	    </div>
  197. 	</div>`;
  199. 	tstr += `
  200. 	<div class="${this.cname}__header sticky-top">
  201. 	    <wc-include href="${data.header}"></wc-include>
  202. 	</div>`;
  204. 	for (var i = 0; i < data.pages.length; i++) {
  205. 	    tstr += `<div class="${this.cname}__page ${data.pages[i].page}"></div>`;
  206. 	}
  207. 	
  208. 	tstr += `
  209. 	<div class="${this.cname}__footer">
  210. 	    <wc-include href="${data.footer}"></wc-include>
  211. 	</div>`;
  213. 	// ADD COMPONENT MARKTOP
  214. 	this.innerHTML = tstr;
  216. 	wc.wait4(".navbar", ()=> {
  217. 	    this.show(this.properties.page);
  219. 	    // LISTEN TO HASH CHANGES
  220. 	    wc.popstate(() => {
  221. 		let x = document.location.search.replace("?page=","")
  222. 		
  223. 		if (x != "") {
  224. 		    // CLICK ON PAGE LINK
  225. 		    this.show(x, false);
  226. 		    
  227. 		    // PUBLISH SHOW EVENT
  228. 		    wc.publish(`${this.cname}`, {
  229. 			time: new Date().getTime(),
  230. 			action: "popstate",
  231. 			id: x
  232. 		    });
  233. 		}
  234. 	    });
  235. 	});
  237. 	wc.groupEnd();
  238.     };
  240.     /**
  241.      * Initialize component
  242.      * @private
  243.      * @_initialize
  244.      */
  245.     _initialize() {
  246. 	wc.group("V1._initialize:", this.id);
  248. 	// FETCH ALL INTERESTING ELEMENTS
  249. 	this._fetchElements();
  251. 	// FETCH ALL ATTRIBUTES
  252. 	this._fetchAttributes();
  253. 	
  254. 	wc.groupEnd();
  255.     };
  257.     /**
  258.      * Save data for analytics and final wrap up
  259.      * @private
  260.      * @_finalize
  261.      */
  262.     _finalize() {
  263. 	wc.group("V1._finalize:", this.id);
  265. 	this.classList.add("wc");
  267. 	// ADD ANALYTICS HERE
  268. 	wc.setStats(this, this.properties.cname, this.properties.version);
  269. 	
  270. 	// SHOW IT NOW (NO FLICKERS) 
  271. 	this.style.visibility = "visible";
  273. 	wc.groupEnd();
  274.     };
  276.     /**
  277.      * Invoked When component is removed. Usually with a .remove() function call
  278.      * @disconnectedCallback
  279.      */
  280.     disconnectedCallback() {
  281.         wc.group("V1.disconnectedCallback")
  283. 	// FREE MEMORY AND CLEANUP
  285.         wc.groupEnd();
  286.     };
  288.     /**
  289.      * Destroy the instance object and artifacts
  290.      * @destroy
  291.      */
  292.     destroy() {
  293. 	wc.group("V1.destroy");
  295. 	// FREE ALL MEMORY
  296. 	// you should delete all created objects here
  297. 	
  298. 	// FREE POINTER
  299. 	delete this;
  300. 	
  301. 	// REMOVE ITEM FROM DOM
  302. 	this.parentNode.removeChild(this);
  304. 	wc.groupEnd();
  305.     };
  307.     /**
  308.      * refresh a page
  309.      * @refresh
  310.      */
  311.     refresh(page) {
  312. 	wc.group("V1.refresh:", page);
  314. 	// EMPTY CONTENT
  315. 	$("." + page).empty();
  317. 	// RE-LOAD THE PAGE
  318. 	this.show(page);
  319. 	
  320. 	wc.groupEnd();
  321. 	return page;
  322.     };
  324.     /**
  325.      * show a page
  326.      * @show
  327.      */
  328.     msg(flag, type, dismissable, msg, timeout) {
  329. 	wc.group("V1.show:", flag, msg);
  331. 	if (timeout) {
  332. 	    wc.timeout(() => {
  333. 		this.msg("hide");
  334. 	    }, timeout);
  335. 	}
  337. 	if (msg) {
  338. 	    $("wc-v1 .v1-msg msg").html(msg);
  339. 	}
  341. 	// RESET CLASSES
  342. 	$("wc-v1 .v1-msg")
  343. 	    .removeClass("alert-info alert-success  alert-danger alert-warning")
  344. 	    .addClass("alert-" + type);
  346. 	// SHOW/HIDE DISMISS BTN
  347. 	if (dismissable == false) {
  348. 	    $("wc-v1 .v1-msg .close").hide()
  349. 	}
  351. 	switch(type) 
  352. 	{
  353. 	    case "info":
  354. 	    $("wc-v1 .v1-msg strong").text("INFO:")
  355. 	    break;
  357. 	    case "warning":
  358. 	    $("wc-v1 .v1-msg strong").text("WARNING:")
  359. 	    break;
  361. 	    case "success":
  362. 	    $("wc-v1 .v1-msg strong").text("SUCCESS:")
  363. 	    break;
  365. 	    case "danger":
  366. 	    $("wc-v1 .v1-msg strong").text("ERROR:")
  367. 	    break;
  368. 	}
  370. 	if (flag == "show") {
  371. 	    $("wc-v1 .v1-msg").slideDown();
  372. 	} else {
  373. 	    $("wc-v1 .v1-msg").slideUp();
  374. 	}
  376. 	wc.groupEnd();
  377.     };
  379.     /**
  380.      * show a page
  381.      * @show
  382.      */
  383.     show(page, push=true) {
  384. 	wc.group("V1.show:", page);
  386. 	// FLIP ALL TILES BACK TO NORMAL
  387. 	$("wc-tile-front").mouseout()
  389. 	$("[page-id]").removeClass("active")
  390. 	$(`[page-id=${page}]`).addClass("active")
  392. 	// HIDE ALL PAGES
  393. 	$(`.${this.cname}__page`).hide();
  395. 	let obj = $.grep(this.data.pages, function(obj) {
  396. 	    return obj.page === page;
  397. 	});
  399. 	let apage = $("." + page);
  400. 	let empty = apage.is(":empty");
  402. 	if (obj[0].cache == "false" || empty) {
  403. 	    apage.load(obj[0].url)
  404. 	}
  406. 	// SHOW THIS PAGE 
  407. 	apage.show();
  408. 	
  409. 	// PUBLISH SHOW EVENT
  410. 	wc.publish(`${this.cname}`, {
  411. 	    time: new Date().getTime(),
  412. 	    action: "show",
  413. 	    id: page
  414. 	});
  416. 	// SAVE BROWSER HISTORY
  417. 	if (push) {
  418. 	    wc.pushstate(page);
  419. 	}
  421. 	wc.groupEnd();
  422. 	return page;
  423.     };
  425.     /**
  426.      * for testing only
  427.      * @tester
  428.      */
  429.     tester(page) {
  430. 	wc.group("V1.tester:", page);
  432. 	let self = this;
  434. 	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">`;
  435. 	for (var i = 0; i < this.data.pages.length; i++) {
  436. 	    str += `<button type="button" class="btn btn-danger wc-v1-btn-tester">${this.data.pages[i].page}</button>`;
  437. 	}
  438. 	str += "</div>"
  440. 	$("body").v1end(str);
  442. 	$(".wc-v1-btn-tester").on("click", function() {
  443. 	    self.show($(this).text());
  444. 	});
  446. 	wc.groupEnd();
  447.     };
  448. }
  450. window.customElements.define('wc-v1', V1);