Source: tabs.js

  1. /**
  2.  * Tabs Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/tabs.png width=30% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/tabs.html">DEMO</a>
  5.  */
  6. class Tabs extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Tabs.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("Tabs.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("Tabs.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. 	// ADD COMPONENT MARKTOP
  46. 	this.innerHTML = this._template()
  48. 	if (this.properties.cfg) {
  49. 	    this.configure();
  50. 	}
  52. 	// SUBSCRIBE TO REQUESTS FROM CLIENTS
  53. 	wc.subscribe(this.id, function(e) {
  54. 	    self._request(e)
  55. 	});
  57. 	// ADD STATS AND OTHER FINAL STUFF
  58. 	this._finalize();
  60. 	ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  62.         wc.groupEnd();
  63.     };
  65.     /**
  66.      * Initial Markup
  67.      * @private
  68.      * @_template
  69.      */
  70.     _template() {
  71.         wc.group("Tabs.template");
  72. 	
  73. 	var temp = `
  74.         <div class="container-fluid">
  75. 	    <div class="row">
  76. 		<div class="col-sm-12 wc-tabs-top">
  77. 		    TOP
  78. 		</div>
  80. 		<div class="wc-tabs-lhs">
  81. 		    LHS
  82. 		</div>
  84. 		<div class="wc-tabs-mid w-100">
  85. 		    MID
  86. 		</div>
  88. 		<div class="wc-tabs-rhs">
  89. 		    RHS
  90. 		</div>
  92. 		<div class="col-sm-12 wc-tabs-bot">
  93. 		    BOT
  94. 		</div>
  95. 	    </div>`
  97. 	wc.wait4(".wc-tabs-lhs", () => {
  98. 	    this.top = this.querySelector(".wc-tabs-top")
  99. 	    this.bot = this.querySelector(".wc-tabs-bot")
  100. 	    this.lhs = this.querySelector(".wc-tabs-lhs")
  101. 	    this.rhs = this.querySelector(".wc-tabs-rhs")
  102. 	    this.mid = this.querySelector(".wc-tabs-mid")
  104. 	    $(".wc-tabs-top, .wc-tabs-bot, .wc-tabs-lhs, .wc-tabs-rhs").hide();
  105. 	});
  107.         wc.groupEnd();
  108.         return temp;
  109.     };
  111.     /**
  112.      * Called with .setAttribute(...) function call
  113.      * @attributeChangedCallback
  114.      */
  115.     attributeChangedCallback(attr, oldval, newval) {
  116.         wc.group("Tabs.attributeChangedCallback:", attr, oldval, newval);
  118. 	this.properties = this.properties || [];
  120. 	let obs = Tabs.observedAttributes;
  122. 	for (let i = 0; i < obs.length; i++) {
  123. 	    if (newval) {
  124. 		this.properties[obs[i]] = newval;
  125. 	    }
  126. 	}
  127. 	
  128. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  129. 	try {
  130. 	    switch(attr) 
  131. 	    {
  132. 		case "header":
  133. 		//this.querySelector("h1").innerHTML = newval;
  134. 		break;
  135. 		
  136. 		default:
  137. 		break;
  138. 	    }
  139. 	} catch(e) {
  140. 	    wc.warn(e.name + ' > ' + e.message);
  141. 	}
  143.         wc.groupEnd();
  144.     };
  146.     /**
  147.      * Stores DOM elements of interest for future use
  148.      * @private
  149.      * @_fetchElements
  150.      */
  151.     _fetchElements() {
  152. 	wc.group("Tabs._fetchElements");
  153. 	
  154. 	this.dom = this.dom || [];
  155. 	this.dom.content = this.innerHTML;
  157. 	wc.groupEnd();
  158.     };
  160.     /**
  161.      * Component attributes are _fetched and defaults are set if undefined
  162.      * @private
  163.      * @_fetchAttributes
  164.      */
  165.     _fetchAttributes() {
  166. 	wc.group("Tabs._fetchAttributes");
  167. 	
  168. 	this.properties = {
  169. 	    uparam	: "",
  170. 	    cname	: "Tabs",
  171. 	    author	: "Mel M. Heravi, Ph.D.",
  172. 	    version	: "1.0",
  173. 	    show	: 0,
  174. 	    cols	: "2,10"
  175. 	};
  176. 	
  177. 	// SAVE WIDGET SPECIFIC PROPERTIES
  178. 	this.propertiesW = [];
  179. 	
  180. 	// SAVE ALL OTHER PROPERTIES
  181. 	let attrs = wc.getAttributes(this)
  182. 	
  183.  	for (var key in attrs) {
  184. 	    let attr = this.getAttribute(key) || this.properties.key;
  185. 	    this.properties[key]  = this.getAttribute(key);
  186. 	    this.propertiesW[key] = this.getAttribute(key);
  187. 	    wc.log(key + ": " + attrs[key]);
  188. 	}
  190. 	// SET ALL INITIAL ATTRIBUTES
  191.  	for (var key in this.properties) {
  192. 	    switch(key) 
  193. 	    {
  194. 		case "header":
  195. 		break;
  196. 		
  197. 		default:
  198. 		break;
  199. 	    }
  200. 	}
  202. 	wc.log("ATTRIBUTES: ", this.properties);
  204. 	wc.groupEnd();
  205.     };
  207.     /**
  208.      * configure the instance object and artifacts
  209.      * @configure
  210.      * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  211.      */
  212.     configure(data) {
  213. 	wc.group("Tabs.configure:", data);
  215. 	// IF JSON VARIABLE (data) IS PROVIDED
  216. 	if (data) {
  217. 	    this._process(data);
  218. 	} else {
  219. 	    let self = this;
  221. 	    $.getJSON(this.properties.cfg, function(data) {
  222. 		self._process(data);
  223. 	    }).fail(function(jqXHR, textStatus, errorThrown) {
  224. 		alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  225. 	    });
  226. 	}
  228. 	wc.groupEnd();
  229.     };
  231.     /**
  232.      * _process the instance object and artifacts
  233.      * @private
  234.      * @_process
  235.      */
  236.     _process(data) {
  237. 	wc.group("Tabs._process:", data);
  238. 	
  239. 	switch(this.properties.side) 
  240. 	{
  241. 	    case "top":
  242. 	    this._top(data);
  243. 	    break;
  245. 	    case "bot":
  246. 	    this._bot(data);
  247. 	    break;
  249. 	    case "lhs":
  250. 	    this.cols = this.properties.cols.split(",");
  251. 	    this._lhs(data);
  252. 	    break;
  254. 	    case "rhs":
  255. 	    this.cols = this.properties.cols.split(",");
  256. 	    this._rhs(data);
  257. 	    break;
  258. 	}
  260. 	wc.groupEnd();
  261.     };
  263.     /**
  264.      * @private
  265.      * @_top
  266.      */
  267.     _top(data) {
  268. 	wc.group("Tabs._top");
  270. 	let self = this;
  272. 	$(this.top).show();
  274. 	this.mid = this.querySelector(".wc-tabs-mid");
  276. 	if (this.properties.cfg) {
  277. 	    $(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev" cfg="${this.properties.cfg}"></wc-pager>`);
  278. 	} else {
  279. 	    $(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev"></wc-pager>`);
  281. 	    wc.wait4(`wc-pager`, function() {
  282. 		let tmp = self.querySelector(`wc-pager`);
  283. 		tmp.configure(data);
  284. 	    });
  285. 	}
  287. 	// PAGER HANDLE
  288. 	let str = `<ul class="nav nav-tabs">`;
  290. 	let num =0;
  291. 	for (var key in data) {
  292. 	    var p = data[key]
  293. 	    str += `<a tab-num="${num++}" page="${data[key].page}" class="nav-link" href="#!">${data[key].label}</a>`
  294. 	}	    
  296. 	str += "</ul>"
  298. 	$(this.top).html(str);
  300. 	$(`#${this.id} [tab-num=${this.properties.show}]`).addClass("active");
  302. 	wc.wait4("wc-pager", () => {
  303. 	    this.pager = this.querySelector("wc-pager");
  304. 	    this.pager.show($(`#${this.id} [tab-num="${this.properties.show}"]`).attr("page"));
  306. 	    let as = this.querySelectorAll("ul a");
  308. 	    $(as).on("click", function() {
  309. 		$(as).removeClass("active");
  310. 		$(this).addClass("active");
  312. 		let tn = $(this).attr("tab-num");
  313. 		let pg = $(this).attr("page");
  314. 		self.pager.show(pg);
  315. 	    });
  316. 	});
  318. 	wc.groupEnd();
  319.     };
  321.     /**
  322.      * @private
  323.      * @_bot
  324.      */
  325.     _bot(data) {
  326. 	wc.group("Tabs._bot");
  328. 	let self = this;
  330. 	$(this.bot).show();
  332. 	this.mid = this.querySelector(".wc-tabs-mid");
  334. 	if (this.properties.cfg) {
  335. 	    $(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev" cfg="${this.properties.cfg}"></wc-pager>`);
  336. 	} else {
  337. 	    $(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev"></wc-pager>`);
  339. 	    wc.wait4(`wc-pager`, function() {
  340. 		let tmp = self.querySelector(`wc-pager`);
  341. 		tmp.configure(data);
  342. 	    });
  343. 	}
  345. 	wc.wait4("wc-pager", () => {
  346. 	    this.pager = this.querySelector("wc-pager");
  347. 	    this.pager.configure(data);
  348. 	});
  350. 	// PAGER HANDLE
  351. 	let str = `<ul class="nav nav-tabs">`;
  353. 	let num =0;
  354. 	for (var key in data) {
  355. 	    var p = data[key]
  356. 	    str += `<a tab-num="${num++}" page="${data[key].page}" class="nav-link" href="#!">${data[key].label}</a>`
  357. 	}	    
  359. 	str += "</ul>"
  361. 	this.top = this.querySelector(".wc-tabs-bot");
  362. 	$(this.top).html(str);
  364. 	$(`#${this.id} [tab-num=${this.properties.show}]`).addClass("active");
  366. 	wc.wait4("wc-pager", () => {
  367. 	    this.pager = this.querySelector("wc-pager");
  369. 	    let as = this.querySelectorAll("ul a");
  370. 	    $(as).on("click", function() {
  371. 		$(as).removeClass("active");
  372. 		$(this).addClass("active");
  374. 		let tn = $(this).attr("tab-num");
  375. 		let pg = $(this).attr("page");
  376. 		self.pager.show(pg);
  377. 	    });
  379. 	    this.pager.show($(`#${this.id} [tab-num=${this.properties.show}]`).attr("page"));
  380. 	});
  382. 	wc.groupEnd();
  383.     };
  385.     /**
  386.      * @private
  387.      * @_lhs
  388.      */
  389.     _lhs(data) {
  390. 	wc.group("Tabs._lhs");
  392. 	let self = this;
  394. 	$(this.lhs).show();
  396. 	// ADD PAGER
  397. 	if (this.properties.cfg) {
  398. 	    $(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev" cfg="${this.properties.cfg}"></wc-pager>`);
  399. 	} else {
  400. 	    $(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev"></wc-pager>`);
  402. 	    wc.wait4(`wc-pager`, function() {
  403. 		let tmp = self.querySelector(`wc-pager`);
  404. 		tmp.configure(data);
  405. 	    });
  406. 	}
  408. 	$(this.lhs).addClass("col-sm-" + this.cols[0]);
  409. 	$(this.mid).addClass("col-sm-" + this.cols[1]);
  411. 	let str = `<ul class="list-group list-group-flush">`;
  413. 	let n = 0;
  414. 	for (var key in data) {
  415. 	    str += `<li tab-num="${n++}" page="${data[key].page}" id="wc-tabs-${data[key].id}" class="list-group-item list-group-item-action" url="${data[key].url}">${data[key].label}</li>`
  416. 	}
  417. 	
  418. 	str += "</ul>";
  420. 	$(this.lhs).html(str);
  422. 	wc.wait4("wc-pager", () => {
  423. 	    this.pager = this.querySelector("wc-pager");
  424. 	    $(`#${this.id} [tab-num=${this.properties.show}]`).addClass("active");
  426. 	    let as = this.querySelectorAll("ul li");
  428. 	    $(as).on("click", function() {
  429. 		$(as).removeClass("active");
  430. 		$(this).addClass("active");
  432. 		let tn = $(this).attr("tab-num");
  433. 		let pg = $(this).attr("page");
  434. 		
  435. 		self.pager.show(pg);
  436. 	    });
  437. 	});
  438. 	
  439. 	wc.groupEnd();
  440.     };
  442.     /**
  443.      * @private
  444.      * @_rhs
  445.      */
  446.     _rhs(data) {
  447. 	wc.group("Tabs._rhs");
  449. 	let self = this;
  451. 	$(this.rhs).show();
  453. 	// ADD PAGER
  454. 	if (this.properties.cfg) {
  455. 	    $(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev" cfg="${this.properties.cfg}"></wc-pager>`);
  456. 	} else {
  457. 	    $(this.mid).html(`<wc-pager id="${this.id}-pager" class="wc-maximize" env="dev"></wc-pager>`);
  459. 	    wc.wait4(`wc-pager`, function() {
  460. 		let tmp = self.querySelector(`wc-pager`);
  461. 		tmp.configure(data);
  462. 	    });
  463. 	}
  465. 	$(this.rhs).addClass("col-sm-" + this.cols[0]);
  466. 	$(this.mid).addClass("col-sm-" + this.cols[1]);
  468. 	let str = `<ul class="list-group list-group-flush">`;
  470. 	let n = 0;
  471. 	for (var key in data) {
  472. 	    str += `<li tab-num="${n++}" page="${data[key].page}" id="wc-tabs-${data[key].id}" class="list-group-item list-group-item-action" url="${data[key].url}">${data[key].label}</li>`
  473. 	}
  475. 	str += "</ul>";
  477. 	$(this.rhs).html(str);
  479. 	wc.wait4("wc-pager", () => {
  480. 	    this.pager = this.querySelector("wc-pager");
  481. 	    $(`#${this.id} [tab-num=${this.properties.show}]`).addClass("active");
  483. 	    let as = this.querySelectorAll("ul li");
  484. 	    $(as).on("click", function() {
  485. 		$(as).removeClass("active");
  486. 		$(this).addClass("active");
  488. 		let tn = $(this).attr("tab-num");
  489. 		let pg = $(this).attr("page");
  490. 		
  491. 		self.pager.show(pg);
  492. 	    });
  493. 	});
  494. 	
  495. 	wc.groupEnd();
  496.     };
  498.     /**
  499.      * Initialize component
  500.      * @private
  501.      * @_initialize
  502.      */
  503.     _initialize() {
  504. 	wc.group("Tabs._initialize:", this.id);
  506. 	// FETCH ALL INTERESTING ELEMENTS
  507. 	this._fetchElements();
  509. 	// FETCH ALL ATTRIBUTES
  510. 	this._fetchAttributes();
  511. 	
  512. 	wc.groupEnd();
  513.     };
  515.     /**
  516.      * Save data for analytics and final wrap up
  517.      * @private
  518.      * @_finalize
  519.      */
  520.     _finalize() {
  521. 	wc.group("Tabs._finalize:", this.id);
  523. 	this.classList.add("wc");
  525. 	// ADD ANALYTICS HERE
  526. 	wc.setStats(this, this.properties.cname, this.properties.version);
  527. 	
  528. 	// SHOW IT NOW (NO FLICKERS) 
  529. 	this.style.visibility = "visible";
  531. 	wc.groupEnd();
  532.     };
  534.     /**
  535.      * Invoked When component is removed. Usually with a .remove() function call
  536.      * @disconnectedCallback
  537.      */
  538.     disconnectedCallback() {
  539.         wc.group("Tabs.disconnectedCallback")
  541. 	ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  543.         wc.groupEnd();
  544.     };
  546.     /**
  547.      * Destroy the instance object and artifacts
  548.      * @destroy
  549.      */
  550.     destroy() {
  551. 	wc.group("Tabs.destroy");
  553. 	// FREE ALL MEMORY
  554. 	// you should delete all created objects here
  555. 	
  556. 	// FREE POINTER
  557. 	delete this;
  558. 	
  559. 	// REMOVE ITEM FROM DOM
  560. 	this.parentNode.removeChild(this);
  562. 	ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  564. 	wc.groupEnd();
  565.     };
  567.     /**
  568.      * @_publish
  569.      */
  570.     _publish(type) {
  571. 	wc.group("Tabs._publish:", type);
  573. 	wc.publish("wc-tabs", {
  574. 	    time: new Date().getTime(),
  575. 	    action: type,
  576. 	    id: this.id
  577. 	});
  579. 	wc.groupEnd();
  580. 	return true;
  581.     };
  583.     /**
  584.      * @_open
  585.      */
  586.     _open(tabid) {
  587. 	wc.group("Tabs._open:", tabid);
  589. 	let tab = this.querySelector(`[tab-num="${tabid}"]`);
  591. 	// CLICK TO OPEN THE PAGE
  592. 	$(tab).click();
  594. 	wc.publish("wc-tabs", {
  595. 	    time: new Date().getTime(),
  596. 	    action: "open",
  597. 	    tab: tabid,
  598. 	    id: this.id
  599. 	});
  601. 	wc.groupEnd();
  602. 	return true;
  603.     };
  605.     /**
  606.      * @_load
  607.      */
  608.     _load(tabid, type, content) {
  609. 	wc.group("Tabs._load:", tabid);
  611. 	let tab = this.querySelector(`[tab-num="${tabid}"]`);
  612. 	let page = $(tab).attr("page");
  613. 	let pager = this.querySelector(`.wc-pager__page.${page}`);
  615. 	// OPEN THE TAB
  616. 	this._open(tabid);
  618. 	// LOAD CONTENT FROM CONTENT
  619. 	if (type == "url") {
  620. 	    $(pager).load(content);
  621. 	}
  623. 	if (type == "html") {
  624. 	    pager.innerHTML = content;
  625. 	}
  627. 	wc.publish("wc-tabs", {
  628. 	    time: new Date().getTime(),
  629. 	    action: "load",
  630. 	    url: content,
  631. 	    id: this.id
  632. 	});
  634. 	wc.groupEnd();
  635. 	return true;
  636.     };
  638.     /**
  639.      * @_request
  640.      */
  641.     _request(e) {
  642. 	wc.group("Tabs._request:", this.id, JSON.stringify(e.detail));
  643. 	
  644. 	switch(e.detail.request) 
  645. 	{
  646. 	    case "open":
  647. 	    this._open(e.detail.tab);
  648. 	    break;
  650. 	    case "load":
  651. 	    // LOAD FROM URL
  652. 	    if (typeof e.detail.url != "undefined") {
  653. 		this._load(e.detail.tab, "url", e.detail.url);
  654. 	    }
  656. 	    // ADD CONTENT AS HTML
  657. 	    if (typeof e.detail.html != "undefined") {
  658. 		this._load(e.detail.tab, "html", e.detail.html);
  659. 	    }
  661. 	    break;
  663. 	    default:
  664. 	    alert("DO NOT HAVE SUCH REQUEST: " + e.detail.request);
  665. 	    break;
  666. 	}
  668. 	wc.groupEnd();
  669. 	return true;
  670.     };
  672.     /**
  673.      * @test
  674.      */
  675.     static test(what) {
  676. 	wc.group("Tabs.test:", what);
  678. 	switch(what) 
  679. 	{
  680. 	    case "open":
  681. 	    wc.publish("my-tabs-top", {time:new Date().getTime(), requestor:"my-tabs-top", request:"open", tab:2})
  682. 	    break;
  684. 	    case "load":
  685. 	    wc.publish("my-tabs-top", {time:new Date().getTime(), requestor:"my-tabs-top", request:"load", tab:1, url:"/mtk/render?ajax=1&callback=tk::dummy::3"})
  686. 	    break;
  688. 	    case "html":
  689. 	    wc.publish("my-tabs-top", {time:new Date().getTime(), requestor:"my-tabs-top", request:"load", tab:1, html:"<h1>Mel was here</h1>"})
  690. 	    break;
  691. 	}
  692. 	
  693. 	wc.groupEnd();
  694. 	return true;
  695.     }
  696. }
  698. window.customElements.define('wc-tabs', Tabs);
  700. // SO I CAN CALL THE STATIC METHOD GLOBALLY
  701. window.Tabs = Tabs;