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. super();
  10. wc.groupEnd();
  11. };
  12. /**
  13. * Set observable values here. When Changed, attributeChangedCallback is invoked
  14. * @observedAttributes
  15. */
  16. static get observedAttributes() {
  17. wc.group("Band.observedAttributes");
  18. this.observables = ["header"];
  19. wc.groupEnd();
  20. return this.observables;
  21. };
  22. /**
  23. * This function is called when this is attached to DOM
  24. * @connectedCallback.
  25. */
  26. connectedCallback() {
  27. wc.group("Band.connectedCallback")
  28. let self = this;
  29. // GET PROPERTIES AND INTERESTING ELEMENTS
  30. this._initialize();
  31. // REPLACE CONTENT IF NECESSARY WITH NEW STUFF
  32. this.innerHTML = `
  33. <div class="row">
  34. <div class="wc-band-lhs">
  35. </div>
  36. <div class="wc-band-rhs">
  37. </div>
  38. </div>
  39. `;
  40. // ADD STATS AND OTHER FINAL STUFF
  41. this._finalize();
  42. // PUBLISH INTERESTING EVENTS
  43. //this._publish();
  44. wc.groupEnd();
  45. };
  46. /**
  47. * Publish all events
  48. * @private
  49. * @_publish
  50. */
  51. _publish() {
  52. wc.group("Band.publish");
  53. this.addEventListener("click", e => {
  54. this._click();
  55. });
  56. wc.groupEnd();
  57. }
  58. /**
  59. * A sample callback usage function - see connectedCallback()
  60. * @private
  61. * @_click
  62. */
  63. _click() {
  64. wc.group("Band._click:", this.id);
  65. wc.publish("wc-band", {
  66. time: new Date().getTime(),
  67. action: "click",
  68. id: this.id,
  69. uparam: this.properties.uparam
  70. });
  71. wc.groupEnd();
  72. };
  73. /**
  74. * Invoked When component is removed. Usually with a .remove() function call
  75. * @disconnectedCallback
  76. */
  77. disconnectedCallback() {
  78. wc.group("Band.disconnectedCallback")
  79. /* CLEAN UP NOW */
  80. wc.groupEnd();
  81. };
  82. /**
  83. * Called with .setAttribute(...) function call
  84. * @attributeChangedCallback
  85. */
  86. attributeChangedCallback(attr, oldval, newval) {
  87. wc.group("Band.attributeChangedCallback:", attr, oldval, newval);
  88. this.properties = this.properties || [];
  89. let obs = Band.observedAttributes;
  90. for (let i = 0; i < obs.length; i++) {
  91. if (newval) {
  92. this.properties[obs[i]] = newval;
  93. }
  94. }
  95. // YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  96. try {
  97. switch(attr)
  98. {
  99. case "background":
  100. break;
  101. default:
  102. break;
  103. }
  104. }
  105. catch(e) {
  106. wc.warn(e.name + ' > ' + e.message);
  107. }
  108. wc.groupEnd();
  109. };
  110. /**
  111. * Stores DOM elements of interest for future use
  112. * @private
  113. * @_fetchElements
  114. */
  115. _fetchElements() {
  116. wc.group("Band._fetchElements");
  117. this.dom = this.dom || [];
  118. this.dom.content = this.innerHTML;
  119. wc.groupEnd();
  120. };
  121. /**
  122. * Component attributes are _fetched and defaults are set if undefined
  123. * @private
  124. * @_fetchAttributes
  125. * @param {string} [modal=true] mode for our band
  126. */
  127. _fetchAttributes() {
  128. wc.group("Band._fetchAttributes");
  129. this.properties = {
  130. cname : "band",
  131. author : "Mel Heravi",
  132. version : "1.0",
  133. header : "UNDEFINED HEADER"
  134. };
  135. // SAVE WIDGET SPECIFIC PROPERTIES
  136. this.propertiesW = [];
  137. // SAVE ALL OTHER PROPERTIES
  138. let attrs = wc.getAttributes(this)
  139. for (var key in attrs) {
  140. let attr = this.getAttribute(key) || this.properties.key;
  141. this.properties[key] = this.getAttribute(key);
  142. this.propertiesW[key] = this.getAttribute(key);
  143. wc.log(key + ": " + attrs[key]);
  144. }
  145. // SET ALL INITIAL ATTRIBUTES
  146. for (var key in this.properties) {
  147. switch(key)
  148. {
  149. case "background":
  150. break;
  151. case "header":
  152. let h = document.querySelector("wc-header")
  153. break;
  154. default:
  155. break;
  156. }
  157. }
  158. wc.log("ATTRIBUTES: ", this.properties);
  159. wc.groupEnd();
  160. };
  161. /**
  162. * A sample callback usage function - see connectedCallback()
  163. * @private
  164. * @_onClick
  165. */
  166. _onClick() {
  167. wc.group("Band._onClick:", this.id);
  168. wc.publish("wc-band", {
  169. action: "click",
  170. id: this.id,
  171. uparam: this.properties.uparam
  172. });
  173. wc.groupEnd();
  174. };
  175. /**
  176. * Destroy the instance object and artifacts
  177. * @private
  178. * @_destroy
  179. */
  180. destroy() {
  181. wc.group("Band.destroy:", this.id);
  182. // FREE ALL MEMORY
  183. // you should delete all created objects here
  184. // FREE POINTER
  185. delete this;
  186. // REMOVE ITEM FROM DOM
  187. this.parentNode.removeChild(this);
  188. wc.groupEnd();
  189. };
  190. /**
  191. * configure the instance object and artifacts
  192. * @private
  193. * @_configure
  194. */
  195. configure(band) {
  196. wc.group("Band.configure");
  197. this._lhs("lhs", band.lhs);
  198. this._rhs("rhs", band.rhs);
  199. wc.groupEnd();
  200. };
  201. /**
  202. * @private
  203. * @_lhs
  204. */
  205. _lhs(side, band) {
  206. wc.group("Band._lhs:", side, band);
  207. // CALL FUNC BASED ON CATEGORY
  208. eval("this._" + band.category + "(side, band)");
  209. wc.groupEnd();
  210. };
  211. /**
  212. * @private
  213. * @_table
  214. */
  215. _table(side, band) {
  216. wc.group("Band._table:", side, band);
  217. let con = "#" + this.id + " .wc-band-" + side;
  218. $(con).empty();
  219. $(con).addClass(band.width).append("<wc-table></wc-table>");
  220. setTimeout(() => {
  221. let tbl = this.querySelector("wc-table");
  222. tbl.configure(band);
  223. }, 200);
  224. wc.groupEnd();
  225. };
  226. /**
  227. *
  228. * @private
  229. * @_lhs
  230. */
  231. _rhs(side, band) {
  232. wc.group("Band._rhs", side, band);
  233. // CALL FUNC BASED ON CATEGORY
  234. eval("this._" + band.category + "(side, band)");
  235. wc.groupEnd();
  236. };
  237. /**
  238. *
  239. * @private
  240. * @_lhs
  241. */
  242. _chart(side, band) {
  243. wc.group("Band._chart:", side, band);
  244. let con = "#" + this.id + " .wc-band-" + side;
  245. $(con).empty();
  246. $(con)
  247. .addClass(band.width)
  248. .append(`<wc-chart id="${this.id}-${side}"></wc-chart>`);
  249. let chart = this.querySelector("wc-chart");
  250. eval("chart." + band.type + "(band)");
  251. wc.groupEnd();
  252. };
  253. /**
  254. * SAVE DATA FOR ANALYTICS
  255. * @private
  256. * @_initialize
  257. */
  258. _initialize() {
  259. wc.group("Band._initialize:", this.id);
  260. // FETCH ALL INTERESTING ELEMENTS
  261. this._fetchElements();
  262. // FETCH ALL ATTRIBUTES
  263. this._fetchAttributes();
  264. wc.groupEnd();
  265. };
  266. /**
  267. * SAVE DATA FOR ANALYTICS
  268. * @private
  269. * @_finalize
  270. */
  271. _finalize() {
  272. wc.group("Band._finalize:", this.id);
  273. this.classList.add("wc");
  274. // ADD ANALYTICS HERE
  275. wc.setStats(this, this.properties.cname, this.properties.version);
  276. // SHOW IT NOW (NO FLICKERS)
  277. this.style.visibility = "visible";
  278. wc.groupEnd();
  279. };
  280. }
  281. window.customElements.define('wc-band', Band);