Source: listbox.js

  1. /**
  2. * A Listbox component - <strike>UX/COE Compliant</strike>
  3. * <BR><BR><img src=../images/listbox.png width=30% style="border:1px lime dashed";>
  4. * <BR><BR><a href="../html/listbox.html">DEMO</a>
  5. */
  6. class Listbox extends HTMLElement {
  7. constructor() {
  8. console.group("Listbox.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("Listbox.observedAttributes");
  18. this.observables = ["width"];
  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("Listbox.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. for (let i=0; i<this.dom.items.length; i++) {
  37. console.log(this.dom.items[i]);
  38. let item = this.dom.items[i];
  39. item.addEventListener("click", function() {
  40. self._onClick(item);
  41. });
  42. }
  43. // WRAP UP AND ADD STATS
  44. this._finalize();
  45. // SHOW IT NOW (NO FLICKERS)
  46. this.style.visibility = "visible";
  47. console.groupEnd();
  48. };
  49. /**
  50. * Invoked When component is removed. Usually with a .remove() function call
  51. * @disconnectedCallback
  52. */
  53. disconnectedCallback() {
  54. console.group("Listbox.disconnectedCallback")
  55. /* CLEAN UP NOW */
  56. console.groupEnd();
  57. };
  58. /**
  59. * Called with .setAttribute(...) function call
  60. * @attributeChangedCallback
  61. */
  62. attributeChangedCallback(attr, oldval, newval) {
  63. console.group("Listbox.attributeChangedCallback:", attr, oldval, newval);
  64. this.properties = this.properties || [];
  65. // EXAMPLE ONLY. replace with observables
  66. switch(attr)
  67. {
  68. case "width":
  69. this.properties.width = newval;
  70. this.style.width = this.properties.width;
  71. break;
  72. }
  73. console.groupEnd();
  74. };
  75. /**
  76. * Stores DOM elements of interest for future use
  77. * @_fetchElements
  78. */
  79. _fetchElements() {
  80. console.group("Listbox._fetchElements");
  81. this.dom = this.dom || [];
  82. this.dom.content = this.innerHTML;
  83. this.dom.items = this.querySelectorAll(".list-group-item");
  84. console.groupEnd();
  85. };
  86. /**
  87. * Component attributes are _fetched and defaults are set if undefined
  88. * @_fetchAttributes
  89. * @param {string} [width=100%] Listbox width
  90. */
  91. _fetchAttributes() {
  92. console.group("Listbox._fetchAttributes");
  93. this.properties = {
  94. "cname" : "Listbox",
  95. "author" : "Mel Heravi",
  96. "version" : "1.0",
  97. "width" : "100%"
  98. };
  99. // EXAMPLE ONLY. replace with attributes
  100. if (this.hasAttribute("width")) {
  101. this.properties.width = this.getAttribute("width");
  102. this.style.width = this.properties.width;
  103. console.log("width: ", this.properties.width);
  104. }
  105. console.groupEnd();
  106. };
  107. /**
  108. * A sample callback usage function - see connectedCallback()
  109. * @_onClick
  110. * @param {object} item clicked item
  111. */
  112. _onClick(item) {
  113. console.group("Listbox._onClick:", this.id);
  114. // REMOVE ACTIVE ITEM
  115. for (let i=0; i<this.dom.items.length; i++) {
  116. this.dom.items[i].classList.remove("active");
  117. }
  118. // ACTIVATE THIS ITEM
  119. item.classList.add("active");
  120. //PUBLISH TO THE EVENT
  121. wc.publish(this, "wc-listbox", {
  122. item: item.id,
  123. action: "click"
  124. });
  125. console.groupEnd();
  126. };
  127. /**
  128. * Destroy the instance object and artifacts
  129. * @_destroy
  130. */
  131. destroy() {
  132. console.group("Message.destroy:", this.id);
  133. // FREE POINTER
  134. delete this;
  135. // REMOVE ITEM FROM DOM
  136. this.parentNode.removeChild(this);
  137. console.groupEnd();
  138. };
  139. /**
  140. * SAVE DATA FOR ANALYTICS
  141. * @__finalize
  142. */
  143. _finalize() {
  144. console.group("Listbox._finalize:", this.id);
  145. this.classList.add("wc");
  146. // ADD ANALYTICS HERE
  147. wc.getStats(this, this.properties.cname, this.properties.version);
  148. console.groupEnd();
  149. };
  150. /**
  151. * FOR TESTING PURPOSES
  152. * @test
  153. */
  154. static test() {
  155. console.group("Listbox.test");
  156. console.log("testing results will be printed here...");
  157. console.groupEnd();
  158. return true;
  159. }
  160. }
  161. window.customElements.define('wc-listbox', Listbox);