Source: breadcrumb.js

  1. /**
  2. * A breadcrumb component
  3. * <BR><BR><img src=/tk/lib/components/w/img/breadcrumb.png width=30% style="border:1px lime dashed";>
  4. * <BR><BR><a href="/tk/lib/components/w/html/breadcrumb.html">DEMO</a>
  5. */
  6. class Breadcrumb extends HTMLElement {
  7. constructor() {
  8. wc.group("Breadcrumb.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("Breadcrumb.observedAttributes");
  18. this.observables = [];
  19. wc.log(this.observables);
  20. wc.groupEnd();
  21. return this.observables;
  22. };
  23. /**
  24. * This function is called when this is attached to DOM
  25. * @connectedCallback.
  26. */
  27. connectedCallback() {
  28. wc.group("Breadcrumb.connectedCallback")
  29. let self = this;
  30. // MAKE SURE OUR COMPONENT HAS GLOBAL CLASS
  31. this.classList.add("wc");
  32. // FETCH ALL INTERESTING ELEMENTS
  33. this._fetchElements();
  34. // FETCH ALL ATTRIBUTES
  35. this._fetchAttributes();
  36. this.innerHTML = this.dom.content;
  37. $(this).find("a").each(function() {
  38. this.addEventListener("click", e => {
  39. wc.publish("wc-breadcrumb", {
  40. time: new Date().getTime(),
  41. action: "click",
  42. id: this.id,
  43. uparam: this.getAttribute("uparam")
  44. });
  45. });
  46. });
  47. // WRAP UP AND ADD STATS
  48. this._finalize();
  49. //SHOW IT NOW (NO FLICKERS)
  50. this.style.visibility = "visible";
  51. wc.groupEnd();
  52. };
  53. /**
  54. * Invoked When component is removed. Usually with a .remove() function call
  55. * @disconnectedCallback
  56. */
  57. disconnectedCallback() {
  58. wc.group("Breadcrumb.disconnectedCallback")
  59. /* CLEAN UP NOW */
  60. wc.groupEnd();
  61. };
  62. /**
  63. * Called with .setAttribute(...) function call
  64. * @attributeChangedCallback
  65. */
  66. attributeChangedCallback(attr, oldval, newval) {
  67. wc.group("Breadcrumb.attributeChangedCallback:", attr, oldval, newval);
  68. this.properties = this.properties || [];
  69. let obs = Maker.observedAttributes;
  70. for (let i = 0; i < obs.length; i++) {
  71. this.properties[obs[i]] = newval;
  72. wc.log(obs[i] + ": " + this.properties.background);
  73. // YOUR CODE FOR CHANGES GO HERE
  74. }
  75. wc.groupEnd();
  76. };
  77. /**
  78. * Stores DOM elements of interest for future use
  79. * @private
  80. * @_fetchElements
  81. */
  82. _fetchElements() {
  83. wc.group("Breadcrumb._fetchElements");
  84. this.dom = {};
  85. this.dom.content = this.innerHTML;
  86. wc.groupEnd();
  87. };
  88. /**
  89. * Component attributes are _fetched and defaults are set if undefined
  90. * @private
  91. * @_fetchAttributes
  92. * @param {string} [background=indianred] background color
  93. */
  94. _fetchAttributes() {
  95. wc.group("Breadcrumb._fetchAttributes");
  96. this.properties = {
  97. uparam : "",
  98. cname : "Breadcrumb",
  99. author : "Mel M. Heravi",
  100. version : "1.0"
  101. };
  102. // SAVE WIDGET SPECIFIC PROPERTIES
  103. this.propertiesW = [];
  104. // SAVE ALL OTHER PROPERTIES
  105. let attrs = wc.getAttributes(this)
  106. for (var key in attrs) {
  107. let attr = this.getAttribute(key) || this.properties.key;
  108. this.properties[key] = this.getAttribute(key);
  109. this.propertiesW[key] = this.getAttribute(key);
  110. wc.log(key + ": " + attrs[key]);
  111. }
  112. // SET ALL INITIAL ATTRIBUTES
  113. for (var key in this.properties) {
  114. switch(key)
  115. {
  116. case "header":
  117. break;
  118. default:
  119. break;
  120. }
  121. }
  122. wc.log("ATTRIBUTES: ", this.properties);
  123. wc.groupEnd();
  124. };
  125. /**
  126. * Destroy the instance object and artifacts
  127. * @private
  128. * @_destroy
  129. */
  130. destroy() {
  131. wc.group("Message.destroy:", this.id);
  132. // FREE POINTER
  133. delete this;
  134. // REMOVE ITEM FROM DOM
  135. this.parentNode.removeChild(this);
  136. wc.groupEnd();
  137. };
  138. /**
  139. * SAVE DATA FOR ANALYTICS
  140. * @private
  141. * @_ */
  142. _finalize() {
  143. wc.group("Breadcrumb._finalize:", this.id);
  144. this.classList.add("wc");
  145. // ADD ANALYTICS HERE
  146. wc.setStats(this, this.properties.cname, this.properties.version);
  147. wc.groupEnd();
  148. };
  149. /**
  150. * FOR TESTING PURPOSES
  151. * @test
  152. */
  153. static test() {
  154. wc.group("Breadcrumb.test");
  155. wc.log("testing results will be printed here...");
  156. wc.groupEnd();
  157. return true;
  158. }
  159. }
  160. window.customElements.define('wc-breadcrumb', Breadcrumb);
  161. // SO I CAN CALL THE STATIC METHOD GLOBALLY
  162. window.Breadcrumb = Breadcrumb;