Source: breadcrumb.js

  1. /**
  2. * A breadcrumb component - <strike>UX/COE Compliant</strike>
  3. * <BR><BR><img src=../images/breadcrumb.png width=30% style="border:1px lime dashed";>
  4. * <BR><BR><a href="../html/breadcrumb.html">DEMO</a>
  5. */
  6. class Breadcrumb extends HTMLElement {
  7. constructor() {
  8. console.group("Breadcrumb.constructor")
  9. super();
  10. console.groupEnd();
  11. };
  12. /**
  13. * Set observable values here. When Changed, attributeChangedCallback is invoked
  14. * @observedAttributes
  15. */
  16. static get observedAttributes() {
  17. console.group("Breadcrumb.observedAttributes");
  18. this.observables = [];
  19. console.log(this.observables);
  20. console.groupEnd();
  21. return this.observables;
  22. };
  23. /**
  24. * This function is called when this is attached to DOM
  25. * @connectedCallback.
  26. */
  27. connectedCallback() {
  28. console.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. // WRAP UP AND ADD STATS
  38. this._finalize();
  39. //SHOW IT NOW (NO FLICKERS)
  40. this.style.visibility = "visible";
  41. console.groupEnd();
  42. };
  43. /**
  44. * Invoked When component is removed. Usually with a .remove() function call
  45. * @disconnectedCallback
  46. */
  47. disconnectedCallback() {
  48. console.group("Breadcrumb.disconnectedCallback")
  49. /* CLEAN UP NOW */
  50. console.groupEnd();
  51. };
  52. /**
  53. * Called with .setAttribute(...) function call
  54. * @attributeChangedCallback
  55. */
  56. attributeChangedCallback(attr, oldval, newval) {
  57. console.group("Breadcrumb.attributeChangedCallback:", attr, oldval, newval);
  58. this.properties = this.properties || [];
  59. let obs = Maker.observedAttributes;
  60. for (let i = 0; i < obs.length; i++) {
  61. this.properties[obs[i]] = newval;
  62. console.log(obs[i] + ": " + this.properties.background);
  63. // YOUR CODE FOR CHANGES GO HERE
  64. }
  65. console.groupEnd();
  66. };
  67. /**
  68. * Stores DOM elements of interest for future use
  69. * @_fetchElements
  70. */
  71. _fetchElements() {
  72. console.group("Breadcrumb._fetchElements");
  73. this.dom = {};
  74. this.dom.content = this.innerHTML;
  75. console.groupEnd();
  76. };
  77. /**
  78. * Component attributes are _fetched and defaults are set if undefined
  79. * @_fetchAttributes
  80. * @param {string} [background=indianred] background color
  81. */
  82. _fetchAttributes() {
  83. console.group("Breadcrumb._fetchAttributes");
  84. // SAVE WIDGET SPECIFIC PROPERTIES
  85. this.propertiesW = [];
  86. // SAVE ALL OTHER PROPERTIES
  87. let attrs = wc.getAttributes(this)
  88. for (var key in attrs) {
  89. this.properties[key] = this.getAttribute(key);
  90. this.propertiesW[key] = this.getAttribute(key);
  91. console.log(key + ": " + attrs[key]);
  92. }
  93. console.log("attributes: ", this.properties);
  94. // PROCESS ALL PROPERTIES (example below);
  95. // this.style.background = this.properties.background;
  96. console.groupEnd();
  97. };
  98. /**
  99. * Destroy the instance object and artifacts
  100. * @_destroy
  101. */
  102. destroy() {
  103. console.group("Message.destroy:", this.id);
  104. // FREE POINTER
  105. delete this;
  106. // REMOVE ITEM FROM DOM
  107. this.parentNode.removeChild(this);
  108. console.groupEnd();
  109. };
  110. /**
  111. * SAVE DATA FOR ANALYTICS
  112. * @__finalize
  113. */
  114. _finalize() {
  115. console.group("Breadcrumb._finalize:", this.id);
  116. this.classList.add("wc");
  117. // ADD ANALYTICS HERE
  118. wc.getStats(this, this.properties.cname, this.properties.version);
  119. console.groupEnd();
  120. };
  121. /**
  122. * FOR TESTING PURPOSES
  123. * @test
  124. */
  125. static test() {
  126. console.group("Breadcrumb.test");
  127. console.log("testing results will be printed here...");
  128. console.groupEnd();
  129. return true;
  130. }
  131. }
  132. window.customElements.define('wc-breadcrumb', Breadcrumb);