Source: band.js

  1. /**
  2.  * band Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/band.png width=60% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/band.html">DEMO</a>
  5.  */
  6. class Band extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Band.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("Band.observedAttributes");
  22. 	this.observables = ["header"];
  24.         wc.groupEnd();
  25.         return this.observables;
  26.     };
  28.     /**
  29.      * This function is called when this is attached to DOM
  30.      * @connectedCallback. 
  31.      */
  32.     connectedCallback() {
  33.         wc.group("Band.connectedCallback")
  34. 	
  35. 	let self = this;
  37. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  38. 	this._initialize();
  40. 	// REPLACE CONTENT IF NECESSARY WITH NEW STUFF
  41. 	this.innerHTML = `
  42. <div class="row">
  43.     <div class="wc-band-lhs">
  44.     </div>
  45.     
  46.     <div class="wc-band-rhs">
  47.     </div>
  48. </div>
  49. `;
  50. 	// ADD STATS AND OTHER FINAL STUFF
  51. 	this._finalize();
  53. 	// PUBLISH INTERESTING EVENTS
  54. 	//this._publish();
  56.         wc.groupEnd();
  57.     };
  59.     /**
  60.      * Publish all events
  61.      * @private
  62.      * @_publish
  63.      */
  64.     _publish() {
  65. 	wc.group("Band.publish");
  67. 	this.addEventListener("click", e => {
  68. 	    this._click();
  69. 	});
  70. 	
  71. 	wc.groupEnd();
  72.     }
  74.     /**
  75.      * A sample callback usage function - see connectedCallback()
  76.      * @private
  77.      * @_click
  78.      */
  79.     _click() {
  80. 	wc.group("Band._click:", this.id);
  82. 	wc.publish("wc-band", {
  83. 	    time: new Date().getTime(),
  84. 	    action: "click",
  85. 	    id: this.id,
  86. 	    uparam: this.properties.uparam
  87. 	});
  89. 	wc.groupEnd();
  90.     };
  92.     /**
  93.      * Invoked When component is removed. Usually with a .remove() function call
  94.      * @disconnectedCallback
  95.      */
  96.     disconnectedCallback() {
  97.         wc.group("Band.disconnectedCallback")
  99. 	/* CLEAN UP NOW */
  101.         wc.groupEnd();
  102.     };
  104.     /**
  105.      * Called with .setAttribute(...) function call
  106.      * @attributeChangedCallback
  107.      */
  108.     attributeChangedCallback(attr, oldval, newval) {
  109.         wc.group("Band.attributeChangedCallback:", attr, oldval, newval);
  111. 	this.properties = this.properties || [];
  113. 	let obs = Band.observedAttributes;
  115. 	for (let i = 0; i < obs.length; i++) {
  116. 	    if (newval) {
  117. 		this.properties[obs[i]] = newval;
  118. 	    }
  119. 	}
  120. 	
  121. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  122. 	try {
  123. 	    switch(attr) 
  124. 	    {
  125. 		case "background":
  126. 		break;
  127. 		
  128. 		default:
  129. 		break;
  130. 	    }
  131. 	}
  132. 	catch(e) {
  133. 	    wc.warn(e.name + ' > ' + e.message);
  134. 	}
  136.         wc.groupEnd();
  137.     };
  139.     /**
  140.      * Stores DOM elements of interest for future use
  141.      * @private
  142.      * @_fetchElements
  143.      */
  144.     _fetchElements() {
  145. 	wc.group("Band._fetchElements");
  146. 	
  147. 	this.dom = this.dom || [];
  148. 	this.dom.content = this.innerHTML;
  150. 	wc.groupEnd();
  151.     };
  153.     /**
  154.      * Component attributes are _fetched and defaults are set if undefined
  155.      * @private
  156.      * @_fetchAttributes
  157.      * @param {string} [modal=true] mode for our band
  158.      */
  159.     _fetchAttributes() {
  160. 	wc.group("Band._fetchAttributes");
  161. 	
  162. 	this.properties = {
  163. 	    cname      : "band",
  164. 	    author     : "Mel Heravi",
  165. 	    version    : "1.0",
  166. 	    header     : "UNDEFINED HEADER"
  167. 	};
  168. 	
  169. 	// SAVE WIDGET SPECIFIC PROPERTIES
  170. 	this.propertiesW = [];
  172. 	// SAVE ALL OTHER PROPERTIES
  173. 	let attrs = wc.getAttributes(this)
  174. 	
  175.  	for (var key in attrs) {
  176. 	    let attr = this.getAttribute(key) || this.properties.key;
  177. 	    this.properties[key]  = this.getAttribute(key);
  178. 	    this.propertiesW[key] = this.getAttribute(key);
  179. 	    wc.log(key + ": " + attrs[key]);
  180. 	}
  182. 	// SET ALL INITIAL ATTRIBUTES
  183.  	for (var key in this.properties) {
  184. 	    switch(key) 
  185. 	    {
  186. 		case "background":
  187. 		break;
  188. 		
  189. 		case "header":
  190. 		let h = document.querySelector("wc-header")
  191. 		break;
  192. 		
  193. 		default:
  194. 		break;
  195. 	    }
  196. 	}
  198. 	wc.log("ATTRIBUTES: ", this.properties);
  200. 	wc.groupEnd();
  201.     };
  203.     /**
  204.      * A sample callback usage function - see connectedCallback()
  205.      * @private
  206.      * @_onClick
  207.      */
  208.     _onClick() {
  209. 	wc.group("Band._onClick:", this.id);
  211. 	wc.publish("wc-band", {
  212. 	    action: "click",
  213. 	    id: this.id,
  214. 	    uparam: this.properties.uparam
  215. 	});
  217. 	wc.groupEnd();
  218.     };
  220.     /**
  221.      * Destroy the instance object and artifacts
  222.      * @private
  223.      * @_destroy
  224.      */
  225.     destroy() {
  226. 	wc.group("Band.destroy:", this.id);
  228. 	// FREE ALL MEMORY
  229. 	// you should delete all created objects here
  231. 	// FREE POINTER
  232. 	delete this;
  234. 	// REMOVE ITEM FROM DOM
  235. 	this.parentNode.removeChild(this);
  237. 	wc.groupEnd();
  238.     };
  240.     /**
  241.      * configure the instance object and artifacts
  242.      * @private
  243.      * @_configure
  244.      */
  245.     configure(band) {
  246. 	wc.group("Band.configure");
  247. 	
  248. 	this._lhs("lhs", band.lhs);
  249. 	this._rhs("rhs", band.rhs);
  251. 	wc.groupEnd();
  252.     };
  254.     /**
  255.        * @private
  256.      * @_lhs
  257.      */
  258.     _lhs(side, band) {
  259. 	wc.group("Band._lhs:", side, band);
  261. 	// CALL FUNC BASED ON CATEGORY
  262. 	eval("this._" + band.category + "(side, band)");
  264. 	wc.groupEnd();
  265.     };
  267.     /**
  268.        * @private
  269.      * @_table
  270.      */
  271.     _table(side, band) {
  272. 	wc.group("Band._table:", side, band);
  274. 	let con = "#" + this.id + " .wc-band-" + side;
  276. 	$(con).empty();
  278. 	$(con).addClass(band.width).append("<wc-table></wc-table>");
  280. 	setTimeout(() => {
  281. 	    let tbl = this.querySelector("wc-table");
  282. 	    tbl.configure(band);
  283. 	}, 200);
  285. 	wc.groupEnd();
  286.     };
  288.     /**
  289.      * 
  290.      * @private
  291.      * @_lhs
  292.      */
  293.     _rhs(side, band) {
  294. 	wc.group("Band._rhs", side, band);
  296. 	// CALL FUNC BASED ON CATEGORY
  297. 	eval("this._" + band.category + "(side, band)");
  299. 	wc.groupEnd();
  300.     };
  302.     /**
  303.      * 
  304.      * @private
  305.      * @_lhs
  306.      */
  307.     _chart(side, band) {
  308. 	wc.group("Band._chart:", side, band);
  310. 	let con = "#" + this.id + " .wc-band-" + side;
  312. 	$(con).empty();
  314. 	$(con)
  315. 	    .addClass(band.width)
  316. 	    .append(`<wc-chart id="${this.id}-${side}"></wc-chart>`);
  318. 	let chart = this.querySelector("wc-chart");
  320. 	eval("chart." + band.type + "(band)");
  322. 	wc.groupEnd();
  323.     };
  325.     /**
  326.      * SAVE DATA FOR ANALYTICS
  327.      * @private
  328.      * @_initialize
  329.      */
  330.     _initialize() {
  331. 	wc.group("Band._initialize:", this.id);
  333. 	// FETCH ALL INTERESTING ELEMENTS
  334. 	this._fetchElements();
  336. 	// FETCH ALL ATTRIBUTES
  337. 	this._fetchAttributes();
  338. 	
  339. 	wc.groupEnd();
  340.     };
  342.     /**
  343.      * SAVE DATA FOR ANALYTICS
  344.      * @private
  345.      * @_finalize
  346.      */
  347.     _finalize() {
  348. 	wc.group("Band._finalize:", this.id);
  350. 	this.classList.add("wc");
  352. 	// ADD ANALYTICS HERE
  353. 	wc.setStats(this, this.properties.cname, this.properties.version);
  354. 	
  355. 	// SHOW IT NOW (NO FLICKERS) 
  356. 	this.style.visibility = "visible";
  358. 	wc.groupEnd();
  359.     };
  360. }
  362. window.customElements.define('wc-band', Band);