Source: button.js

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