Source: toolbar.js

  1. /**
  2. * Toolbar Component<BR>
  3. * <BR><BR><img src=/tk/lib/components/w/img/toolbar.png width=40% style="border:1px lime dashed;padding:20px">
  4. * <BR><BR><a href="/tk/lib/components/w/html/toolbar.html">DEMO</a>
  5. */
  6. class Toolbar extends HTMLElement {
  7. constructor() {
  8. wc.group("Toolbar.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("Toolbar.observedAttributes");
  18. this.observables = [];
  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("Toolbar.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 = `<div id="${this.id}-container">${this.innerHTML}</div>`;
  33. this.style.background = this.properties.bg || "indianred";
  34. this.style.color = this.properties.fg || "#FFF";
  35. this.properties.isize = this.properties.isize || "18px";
  36. $(this).find("wc-toolbar-item").each(function() {
  37. if (typeof $(this).attr("wc-toolbar-sep") === 'undefined') {
  38. $(this).html("<i class='fa fa-" + $(this).attr("icon") + "' style=font-size:" + self.properties.isize + "></i>");
  39. $(this).on("click", e => {
  40. self._onClick($(this).attr("id"))
  41. });
  42. }
  43. });
  44. // ADD STATS AND OTHER FINAL STUFF
  45. this._finalize();
  46. wc.groupEnd();
  47. };
  48. /**
  49. * Invoked When component is removed. Usually with a .remove() function call
  50. * @disconnectedCallback
  51. */
  52. disconnectedCallback() {
  53. wc.group("Toolbar.disconnectedCallback")
  54. /* CLEAN UP NOW */
  55. wc.groupEnd();
  56. };
  57. /**
  58. * Called with .setAttribute(...) function call
  59. * @attributeChangedCallback
  60. */
  61. attributeChangedCallback(attr, oldval, newval) {
  62. wc.group("Toolbar.attributeChangedCallback:", attr, oldval, newval);
  63. this.properties = this.properties || [];
  64. let obs = Toolbar.observedAttributes;
  65. for (let i = 0; i < obs.length; i++) {
  66. if (newval) {
  67. this.properties[obs[i]] = newval;
  68. }
  69. }
  70. // YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  71. try {
  72. switch(attr)
  73. {
  74. case "background":
  75. break;
  76. }
  77. }
  78. catch(e) {
  79. wc.warn(e.name + ' > ' + e.message);
  80. }
  81. wc.groupEnd();
  82. };
  83. /**
  84. * Stores DOM elements of interest for future use
  85. * @private
  86. * @_fetchElements
  87. */
  88. _fetchElements() {
  89. wc.group("Toolbar._fetchElements");
  90. this.dom = this.dom || [];
  91. this.dom.content = this.innerHTML;
  92. wc.groupEnd();
  93. };
  94. /**
  95. * Component attributes are _fetched and defaults are set if undefined
  96. * @private
  97. * @_fetchAttributes
  98. * @param {string} [modal=true] mode for our toolbar
  99. */
  100. _fetchAttributes() {
  101. wc.group("Toolbar._fetchAttributes");
  102. this.properties = {
  103. cname : "Toolbar",
  104. author : "Mel Heravi",
  105. version : "1.0",
  106. };
  107. // SAVE WIDGET SPECIFIC PROPERTIES
  108. this.propertiesW = [];
  109. // SAVE ALL OTHER PROPERTIES
  110. let attrs = wc.getAttributes(this)
  111. for (var key in attrs) {
  112. let attr = this.getAttribute(key) || this.properties.key;
  113. this.properties[key] = this.getAttribute(key);
  114. this.propertiesW[key] = this.getAttribute(key);
  115. wc.log(key + ": " + attrs[key]);
  116. }
  117. // SET ALL INITIAL ATTRIBUTES
  118. for (var key in this.properties) {
  119. switch(key)
  120. {
  121. case "background":
  122. break;
  123. }
  124. }
  125. wc.log("ATTRIBUTES: ", this.properties);
  126. wc.groupEnd();
  127. };
  128. /**
  129. * A sample callback usage function - see connectedCallback()
  130. * @private
  131. * @_onClick
  132. */
  133. _onClick(tid) {
  134. wc.group("Toolbar._onClick:",tid);
  135. wc.publish("wc-toolbar", {
  136. action: "click",
  137. id: this.id,
  138. tid: tid,
  139. uparam: this.properties.uparam
  140. });
  141. wc.groupEnd();
  142. };
  143. /**
  144. * Destroy the instance object and artifacts
  145. * @private
  146. * @_destroy
  147. */
  148. destroy() {
  149. wc.group("Toolbar.destroy:", this.id);
  150. // FREE ALL MEMORY
  151. // you should delete all created objects here
  152. // FREE POINTER
  153. delete this;
  154. // REMOVE ITEM FROM DOM
  155. this.parentNode.removeChild(this);
  156. wc.groupEnd();
  157. };
  158. /**
  159. * configure the instance object and artifacts
  160. * @private
  161. * @_configure
  162. */
  163. configure(options) {
  164. wc.group("Toolbar.configure:", JSON.stringify(options));
  165. // PROCESS ALL OPTIONS HERE
  166. wc.groupEnd();
  167. };
  168. /**
  169. * SAVE DATA FOR ANALYTICS
  170. * @private
  171. * @_initialize
  172. */
  173. _initialize() {
  174. wc.group("Toolbar._initialize:", this.id);
  175. // FETCH ALL INTERESTING ELEMENTS
  176. this._fetchElements();
  177. // FETCH ALL ATTRIBUTES
  178. this._fetchAttributes();
  179. wc.groupEnd();
  180. };
  181. /**
  182. * SAVE DATA FOR ANALYTICS
  183. * @private
  184. * @_finalize
  185. */
  186. _finalize() {
  187. wc.group("Toolbar._finalize:", this.id);
  188. this.classList.add("wc");
  189. // ADD ANALYTICS HERE
  190. wc.setStats(this, this.properties.cname, this.properties.version);
  191. // SHOW IT NOW (NO FLICKERS)
  192. this.style.visibility = "visible";
  193. wc.groupEnd();
  194. };
  195. }
  196. window.customElements.define('wc-toolbar', Toolbar);