Source: slider.js

  1. /**
  2. * Slider Component<BR>
  3. * <BR><BR><img src=../images/slider.png width=40%>
  4. * <BR><BR><a href="../html/slider.html">DEMO</a>
  5. */
  6. class Slider extends HTMLElement {
  7. constructor() {
  8. console.group("Slider.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("Slider.observedAttributes");
  18. this.observables = ["title", "pinned"];
  19. console.groupEnd();
  20. return this.observables;
  21. };
  22. /**
  23. * This function is called when this is attached to DOM
  24. * @connectedCallback.
  25. */
  26. connectedCallback() {
  27. console.group("Slider.connectedCallback")
  28. let self = this;
  29. // GET PROPERTIES AND INTERESTING ELEMENTS
  30. this._initialize();
  31. let menus = this.querySelector("wc-slider-menus").innerHTML;
  32. let guts = this.querySelector("wc-slider-guts").innerHTML;
  33. //alert(this.properties.title);
  34. // REPLACE CONTENT IF NECESSARY WITH NEW STUFF
  35. this.innerHTML = `
  36. <nav class="wc-slider-menu" id="wc-slider-menu">
  37. <div class="clearfix wc-slider-menu-title">
  38. <div class="pull-left">
  39. ${this.properties.title}
  40. </div>
  41. <div class="pull-right">
  42. <i class='fa fa-thumb-tack fa-rotate-45' style=color:#FFF></i>
  43. </div>
  44. </div>
  45. ${menus}
  46. </nav>
  47. <main class="wc-slider-panel" id="wc-slider-panel">
  48. ${guts}
  49. </main>`
  50. // ADD STATS AND OTHER FINAL STUFF
  51. this._finalize();
  52. // SHOW IT NOW (NO FLICKERS)
  53. this.style.visibility = "visible";
  54. console.groupEnd();
  55. };
  56. /**
  57. * Invoked When component is removed. Usually with a .remove() function call
  58. * @disconnectedCallback
  59. */
  60. disconnectedCallback() {
  61. console.group("Slider.disconnectedCallback")
  62. /* CLEAN UP NOW */
  63. console.groupEnd();
  64. };
  65. /**
  66. * Called with .setAttribute(...) function call
  67. * @attributeChangedCallback
  68. */
  69. attributeChangedCallback(attr, oldval, newval) {
  70. console.group("Slider.attributeChangedCallback:", attr, oldval, newval);
  71. this.properties = this.properties || [];
  72. let obs = Slider.observedAttributes;
  73. for (let i = 0; i < obs.length; i++) {
  74. this.properties[obs[i]] = newval;
  75. // YOUR CODE FOR CHANGES GO HERE
  76. }
  77. console.groupEnd();
  78. };
  79. /**
  80. * Stores DOM elements of interest for future use
  81. * @_fetchElements
  82. */
  83. _fetchElements() {
  84. console.group("Slider._fetchElements");
  85. this.dom = this.dom || [];
  86. this.dom.content = this.innerHTML;
  87. console.groupEnd();
  88. };
  89. /**
  90. * Component attributes are _fetched and defaults are set if undefined
  91. * @_fetchAttributes
  92. * @param {string} [title="Menus"] background color
  93. */
  94. _fetchAttributes() {
  95. console.group("Slider._fetchAttributes");
  96. this.properties = {
  97. "cname" : "Slider",
  98. "author" : "Mel Heravi",
  99. "version" : "1.0",
  100. "title" : "Menus",
  101. "pinned" : "false"
  102. };
  103. // SAVE WIDGET SPECIFIC PROPERTIES
  104. this.propertiesW = [];
  105. // SAVE ALL OTHER PROPERTIES
  106. let attrs = wc.getAttributes(this)
  107. for (var key in attrs) {
  108. this.properties[key] = this.getAttribute(key);
  109. this.propertiesW[key] = this.getAttribute(key);
  110. console.log(key + ": " + attrs[key]);
  111. }
  112. console.log("attributes: ", this.properties);
  113. console.groupEnd();
  114. };
  115. /**
  116. * A sample callback usage function - see connectedCallback()
  117. * @_onClick
  118. */
  119. _onClick() {
  120. console.group("Slider._onClick:", this.id);
  121. wc.publish(this, "wc-slider", {
  122. action: "click",
  123. id: this.id,
  124. uparam: this.properties.uparam
  125. });
  126. console.groupEnd();
  127. };
  128. /**
  129. * Destroy the instance object and artifacts
  130. * @_destroy
  131. */
  132. destroy() {
  133. console.group("Slider.destroy:", this.id);
  134. // FREE POINTER
  135. delete this;
  136. // REMOVE ITEM FROM DOM
  137. this.parentNode.removeChild(this);
  138. console.groupEnd();
  139. };
  140. /**
  141. * configure the instance object and artifacts
  142. * @_configure
  143. */
  144. configure(options) {
  145. console.group("Slider.configure:", JSON.stringify(options));
  146. // PROCESS ALL OPTIONS HERE
  147. console.groupEnd();
  148. };
  149. /**
  150. * SAVE DATA FOR ANALYTICS
  151. * @__initialize
  152. */
  153. _initialize() {
  154. console.group("Slider._initialize:", this.id);
  155. // FETCH ALL INTERESTING ELEMENTS
  156. this._fetchElements();
  157. // FETCH ALL ATTRIBUTES
  158. this._fetchAttributes();
  159. console.groupEnd();
  160. };
  161. /**
  162. * SAVE DATA FOR ANALYTICS
  163. * @__finalize
  164. */
  165. _finalize() {
  166. console.group("Slider._finalize:", this.id);
  167. self = this;
  168. this.classList.add("wc");
  169. // ADD ANALYTICS HERE
  170. wc.getStats(this, this.properties.cname, this.properties.version);
  171. self.slideout = new Slideout({
  172. 'panel': document.getElementById('wc-slider-panel'),
  173. 'menu': document.getElementById('wc-slider-menu'),
  174. 'padding': 256,
  175. 'tolerance': 70
  176. });
  177. $('.toggle-button').on('click', e => {
  178. this._toggle();
  179. });
  180. $('.wc-slider-menu a').on('click', function(e) {
  181. self._toggle();
  182. $('.wc-slider-menu a').removeClass("active");
  183. $(this).addClass("active");
  184. console.log('PUBLISHING slider menu click', $(this).attr("id"));
  185. wc.publish(this, "wc-slider", {
  186. action: "click",
  187. id: this.id
  188. });
  189. });
  190. $(".fa-thumb-tack").on("click", e => {
  191. if ($(".fa-thumb-tack").hasClass("active")) {
  192. this.properties.pinned = "false";
  193. $(".fa-thumb-tack").removeClass("active");
  194. $(".fa-thumb-tack").addClass("fa-rotate-45");
  195. $(".fa-bars").show();
  196. } else {
  197. this.properties.pinned = "true";
  198. $(".fa-thumb-tack").addClass("active");
  199. $(".fa-thumb-tack").removeClass("fa-rotate-45");
  200. $(".fa-bars").hide();
  201. }
  202. });
  203. // INITIALLY OPENED
  204. this._toggle();
  205. console.groupEnd();
  206. };
  207. /**
  208. * SAVE DATA FOR ANALYTICS
  209. * @__toggle
  210. */
  211. _toggle() {
  212. console.group("slider._toggle");
  213. if (this.properties.pinned == "false") {
  214. $(".wc-slider-menu").toggle(0, function(e) {
  215. self.slideout.toggle();
  216. });
  217. }
  218. console.groupEnd();
  219. }
  220. }
  221. window.customElements.define('wc-slider', Slider);