Source: carousel.js

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