Source: panel.js

  1. /**
  2.  * Panel Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/panel.png width=30% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/panel.html">DEMO</a>
  5.  */
  6. class Panel extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Panel.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("Panel.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("Panel.connectedCallback")
  34. 	
  35. 	// ADD A RANDOM ID IF NONE EXIST
  36. 	this.id = this.id || this.constructor.name.toLowerCase() + "-" + wc.uid();
  38. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  39. 	this._initialize();
  41. 	// SHOW THIS COMPONENT
  42. 	this._render()
  44. 	// CHECK | UPDATE ATTRIBUTES
  45. 	this._attributes();
  46. 	
  47. 	// SUBSCRIBE TO ALL EVENTS OF INTEREST
  48. 	this._subscribe();
  50. 	// ADD STATS AND OTHER FINAL STUFF
  51. 	this._finalize();
  53.         wc.groupEnd();
  54.     };
  56.     /**
  57.      * Initial Markup
  58.      * @private
  59.      * @_template
  60.      */
  61.     _template() {
  62.         wc.group("Panel.template");
  63. 	
  64. 	var temp;
  66. 	// ADD COMPONENT MARKTOP
  67. 	if (wcENV == "prod") {
  68. 	    // FOR PRODUCTION (convert part.html to jstr using h2j)
  69. 	    temp = `<h1>A BLANK TEMPLATE</h1>`+
  70. 		''+
  71. 		`<i class="fa fa-home fa-5x"></i>`+
  72. 		''+
  73. 		`<div class="mt-3">`+
  74. 		`    <h1 class="btn btn-lg btn-primary">I AM A BOOTSTRAP BUTTON</h4>`+
  75. 		`</div>`;
  76. 	} else {
  77. 	    // FOR DEVELOPMENT/LOCAL TESTING
  78. 	    temp = "<wc-include href=/tk/lib/components/w/html/parts/panel.part.html></wc-include>";
  79. 	}
  81.         wc.groupEnd();
  82.         return temp;
  83.     };
  85.     /**
  86.      * @private
  87.      * @_attributes
  88.      */
  89.     _attributes() {
  90.         wc.group("Panel._attributes");
  91. 	
  92. 	if (0) {
  93. 	    // TRANSFER ALL ATTRIBUTES NOW (BELOW IS AN EXAMPLE)
  94. 	    // -------------------------------------------------
  95. 	    // SAMPLE CODE BELOW
  96.  	    for (var key in this.propertiesW) {
  97. 		// SKIP CLASS AND ID
  98. 		if (key != "class" && key != "id") {
  99. 		    wc.log(key, this.properties[key]);
  101. 		    this.removeAttribute(key);
  102. 		    this.setAttribute(key, this.properties[key]);
  103. 		}
  104. 	    }	
  105. 	}
  106. 	
  107.         wc.groupEnd();
  108.     };
  110.     /**
  111.      * @private
  112.      * @_render
  113.      */
  114.     _render() {
  115.         wc.group("Panel._render");
  116. 	
  117. 	this.innerHTML = this._template();
  119.         wc.groupEnd();
  120.     };
  122.     /**
  123.      * Called with .setAttribute(...) function call
  124.      * @attributeChangedCallback
  125.      */
  126.     attributeChangedCallback(attr, oldval, newval) {
  127.         wc.group("Panel.attributeChangedCallback:", attr, oldval, newval);
  129. 	this.properties = this.properties || [];
  131. 	let obs = Panel.observedAttributes;
  133. 	for (let i = 0; i < obs.length; i++) {
  134. 	    if (newval) {
  135. 		this.properties[obs[i]] = newval;
  136. 	    }
  137. 	}
  138. 	
  139. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  140. 	try {
  141. 	    switch(attr) 
  142. 	    {
  143. 		case "header":
  144. 		//this.querySelector("h1").innerHTML = newval;
  145. 		break;
  146. 		
  147. 		default:
  148. 		break;
  149. 	    }
  150. 	} catch(e) {
  151. 	    wc.warn(e.name + ' > ' + e.message);
  152. 	}
  154.         wc.groupEnd();
  155.     };
  157.     /**
  158.      * Stores DOM elements of interest for future use
  159.      * @private
  160.      * @_fetchElements
  161.      */
  162.     _fetchElements() {
  163. 	wc.group("Panel._fetchElements");
  164. 	
  165. 	this.dom = this.dom || [];
  166. 	this.dom.content = this.innerHTML;
  168. 	wc.groupEnd();
  169.     };
  171.     /**
  172.      * Component attributes are _fetched and defaults are set if undefined
  173.      * @private
  174.      * @_fetchAttributes
  175.      */
  176.     _fetchAttributes() {
  177. 	wc.group("Panel._fetchAttributes");
  178. 	
  179. 	this.properties = {
  180. 	    uparam	: "",
  181. 	    cname	: "Panel",
  182. 	    author	: "Mel M. Heravi, Ph.D.",
  183. 	    version	: "1.0"
  184. 	};
  185. 	
  186. 	// SAVE WIDGET SPECIFIC PROPERTIES
  187. 	this.propertiesW = [];
  188. 	
  189. 	// GET ALL COMPONENT PROPERTIES
  190. 	let attrs = wc.getAttributes(this)
  191. 	
  192. 	// SAVE IN properties & propertiesW
  193.  	for (var key in attrs) {
  194. 	    let attr = this.getAttribute(key) || this.properties.key;
  195. 	    this.properties[key]  = this.getAttribute(key);
  196. 	    this.propertiesW[key] = this.getAttribute(key);
  197. 	    wc.log(key + ": " + attrs[key]);
  198. 	}
  200. 	// SET ALL INITIAL ATTRIBUTES
  201.  	for (var key in this.properties) {
  202. 	    switch(key) 
  203. 	    {
  204. 		case "header":
  205. 		break;
  206. 		
  207. 		default:
  208. 		break;
  209. 	    }
  210. 	}
  212. 	wc.log("ATTRIBUTES: ", this.properties);
  214. 	wc.groupEnd();
  215.     };
  217.     /**
  218.      * configure the instance object and artifacts
  219.      * @configure
  220.      * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  221.      */
  222.     configure(data) {
  223. 	wc.group("Panel.configure: data=", data);
  225. 	// START TIME
  226. 	let time1 = Date.now();
  228. 	// IF JSON VARIABLE (data) IS PROVIDED
  229. 	if (data) {
  230. 	    // DIRECT CALL TO ACTION
  231. 	    this._process(data);
  232. 	} else {
  233. 	    // USUALLY TO INITIALIZE THE COMPONENT FROM A JSON URL
  234. 	    let self = this;
  236. 	    $.getJSON(this.properties.cfg, function(data) {
  237. 		self._process(data);
  238. 	    }).fail(function(jqXHR, textStatus, errorThrown) {
  239. 		alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  240. 	    });
  241. 	}
  243. 	// END TIME
  244. 	let time2 = Date.now();
  246. 	wc.groupEnd();
  247. 	return "T:" + (time2-time2);
  248.     };
  250.     /**
  251.      * _process the instance object and artifacts
  252.      * @private
  253.      * @_process
  254.      * MELIFIED
  255.      */
  256.     _process(data) {
  257. 	wc.group("Panel._process:", data);
  258. 	
  259. 	let template = $("#panel-template").html();
  260. 	
  261. 	// BASIC ASSUMPTIONS
  262. 	this.isOpen = true;
  263. 	this.collapsable = data.collapsable || false;
  265. 	// WE DO EXPECT AT LEAST THE BODY
  266. 	data.header = data.header || null;
  267. 	data.footer = data.footer || null;
  268. 	
  269. 	template = template.replace(/%HEADER%/, data.header);
  270. 	template = template.replace(/%FOOTER%/, data.footer);
  271. 	template = template.replace(/%BODY%/,     data.body);
  273. 	// ADD TEMPLATE TO PANEL CONTAINER
  274. 	$(this).empty().append(template);
  276. 	// SAVE THESE FOR USE LATER
  277. 	this.pbody   = $(this).find(".wc-panel-body");
  278. 	this.pheader = $(this).find(".wc-panel-header");
  279. 	this.pfooter = $(this).find(".wc-panel-footer");
  281. 	// IF COLLAPSABLE ADD CARET ICONS
  282. 	if (this.collapsable == true) {
  283. 	    this.pheader
  284. 		.append("<i class='fa fa-angle-up'></i>")
  285. 		.append("<i class='fa fa-angle-down'></i>")
  286. 		.css("cursor", "pointer");
  287. 	    
  288. 	}
  290. 	// SET PANEL HEIGHT
  291. 	this.pbody.height(this.properties.height || "300px");
  293. 	// HIDE FOOTER | FOOTER IF NOT IN JSON
  294. 	if (!data.footer) this.pfooter.hide();
  295. 	if (!data.header) this.pheader.hide();
  297. 	// PUBLISH ALL EVENTS OF INTEREST
  298. 	this._publish();
  300. 	wc.groupEnd();
  301.     };
  303.     /**
  304.      * Initialize component
  305.      * @_open
  306.      * MELIFIED
  307.      */
  308.     _open() {
  309. 	wc.group("Panel._open:", this.id);
  311. 	if (this.isOpen) {
  312. 	    return;
  313. 	} else {
  314. 	    $(this).find(".wc-panel-header").click();
  315. 	}
  317. 	wc.groupEnd();
  318.     };
  320.     /**
  321.      * Initialize component
  322.      * @_close
  323.      * MELIFIED
  324.      */
  325.     _close() {
  326. 	wc.group("Panel._close:", this.id);
  328. 	if (this.isClose) {
  329. 	    return;
  330. 	} else {
  331. 	    $(this).find(".wc-panel-header").click();
  332. 	}
  334. 	wc.groupEnd();
  335.     };
  337.     /**
  338.      * Initialize component
  339.      * @private
  340.      * @_initialize
  341.      */
  342.     _initialize() {
  343. 	wc.group("Panel._initialize:", this.id);
  345. 	// FETCH ALL INTERESTING ELEMENTS
  346. 	this._fetchElements();
  348. 	// FETCH ALL ATTRIBUTES
  349. 	this._fetchAttributes();
  350. 	
  351. 	wc.groupEnd();
  352.     };
  354.     /**
  355.      * Save data for analytics and final wrap up
  356.      * @private
  357.      * @_finalize
  358.      */
  359.     _finalize() {
  360. 	wc.group("Panel._finalize:", this.id);
  362. 	this.classList.add("wc");
  364. 	// ADD ANALYTICS HERE
  365. 	wc.setStats(this, this.properties.cname, this.properties.version);
  366. 	
  367. 	// SHOW IT NOW (NO FLICKERS) 
  368. 	this.style.visibility = "visible";
  370. 	wc.groupEnd();
  371.     };
  373.     /**
  374.      * Invoked When component is removed. Usually with a .remove() function call
  375.      * @disconnectedCallback
  376.      */
  377.     disconnectedCallback() {
  378.         wc.group("Panel.disconnectedCallback")
  380.         wc.groupEnd();
  381.     };
  383.     /**
  384.      * Destroy the instance object and artifacts
  385.      * @destroy
  386.      */
  387.     destroy() {
  388. 	wc.group("Panel.destroy");
  390. 	// FREE ALL MEMORY
  391. 	// you should delete all created objects here
  392. 	
  393. 	// FREE POINTER
  394. 	delete this;
  395. 	
  396. 	// REMOVE ITEM FROM DOM
  397. 	this.parentNode.removeChild(this);
  399. 	wc.groupEnd();
  400.     };
  402.     /**
  403.      * @private
  404.      * @_publish
  405.      * MELIFIED
  406.      */
  407.     _publish() {
  408. 	wc.group("Panel._publish");
  410. 	let header = $(this).find(".wc-panel-header");
  412. 	if (this.collapsable == true) {
  413. 	    // PUBLISH CLICK EVENTS
  414. 	    $(this).find(".wc-panel-header").on("click", () => {
  415. 		let fa = $(this).find(".fa");
  416. 		
  417. 		if (this.isOpen) {
  418. 		    this.isOpen = false;
  419. 		} else {
  420. 		    this.isOpen = true;
  421. 		}
  423. 		$(fa).toggle();
  424. 		$(this.pbody).slideToggle();
  426. 		wc.publish("wc-panel", {
  427. 		    id: self.id,
  428. 		    time: new Date().getTime(),
  429. 		    action: "click",
  430. 		    status: this.isOpen
  431. 		});
  432. 	    });
  433. 	}
  434. 	
  435. 	wc.groupEnd();
  436. 	return true;
  437.     };
  439.     /**
  440.      * Subscribe all to events of interest
  441.      * @private
  442.      * @_subscribe
  443.      * MELIFIED
  444.      */
  445.     _subscribe() {
  446. 	wc.group("Panel._subscribe:", this.id);
  447. 	
  448. 	let self = this;
  450. 	// SUBSCRIPTION START
  451. 	wc.subscribe("wc-panel", function(msg,data) {
  452. 	    if (data.id == self.id) {
  453. 		wc.info(`SUBSCRIPTION TRIGGERED ${JSON.stringify(data)}`)
  454. 		switch(data.action) 
  455. 		{
  456. 		    case "toggle":
  457. 		    $(self).find(".wc-panel-header").click();
  458. 		    break;
  460. 		    case "open":
  461. 		    self._open();
  462. 		    break;
  464. 		    case "close":
  465. 		    self._close();
  466. 		    break;
  468. 		    default:
  469. 		    break;
  470. 		}
  471. 	    }
  472. 	});
  473. 	// SUBSCRIPTION END
  474. 	
  475. 	wc.groupEnd();
  476.     }
  478.     /**
  479.      * FOR TESTING THE COMPONENT
  480.      * @test
  481.      * MELIFIED
  482.      */
  483.     test() {
  484. 	console.group("test.panel");
  486. 	// LIST OF COMMANDS FROM Panel.test
  487. 	var tests = [
  488. 	    {action:"close",            value:{}},
  489. 	    {action:"open",             value:{}},
  490. 	    {action:"toggle",           value:{}},
  491. 	    {action:"open",             value:{}},
  492. 	]
  494. 	for (var i = 0; i < tests.length; i++) {
  495. 	    wc.tester("wc-panel", "my-panel", tests[i], (i+1)*2000)
  496. 	}
  498. 	console.groupEnd();
  499.     };
  500. }
  502. window.customElements.define('wc-panel', Panel);