Source: flip.js

  1. /**
  2. * Flip Component<BR>
  3. * <BR><BR><img src=/tk/lib/components/w/img/flip.png width=70% style="border:1px lime dashed;padding:20px">
  4. * <BR><BR><a href="/tk/lib/components/w/html/flip.html">DEMO</a>
  5. */
  6. class Flip extends HTMLElement {
  7. constructor() {
  8. wc.group("Flip.constructor")
  9. super();
  10. wc.groupEnd();
  11. };
  12. /**
  13. * Set observable values here. When Changed, attributeChangedCallback is invoked
  14. * @observedAttributes
  15. */
  16. static get observedAttributes() {
  17. wc.group("Flip.observedAttributes");
  18. this.observables = [];
  19. wc.groupEnd();
  20. return this.observables;
  21. };
  22. /**
  23. * This function is called get component template
  24. * @template
  25. */
  26. template() {
  27. wc.group("Flip.template");
  28. let w = $(this).parent().width();
  29. let h = $(this).parent().height();
  30. let tmp = `
  31. <wc-flip-container>
  32. <wc-flipper>
  33. ${this.dom.content}
  34. </wc-flipper>
  35. </wc-flip-container>`
  36. wc.timeout(() => {
  37. let con = this.querySelector("wc-flip-container");
  38. $(con).on("click", function() {
  39. $(this).addClass("hover");
  40. });
  41. $(con).mouseleave(function() {
  42. $(this).removeClass("hover");
  43. });
  44. }, 300);
  45. wc.groupEnd();
  46. return tmp;
  47. };
  48. /**
  49. * This function is called when this is attached to DOM
  50. * @connectedCallback.
  51. */
  52. connectedCallback() {
  53. wc.group("Flip.connectedCallback")
  54. let self = this;
  55. // GET PROPERTIES AND INTERESTING ELEMENTS
  56. this._initialize();
  57. // REPLACE CONTENT FROM TEMPLATE
  58. this.innerHTML = this.template();
  59. // PUBLISH INTERESTING EVENTS
  60. this._publish();
  61. // ADD STATS AND OTHER FINAL STUFF
  62. this._finalize();
  63. wc.groupEnd();
  64. };
  65. /**
  66. * Publish all events
  67. * @private
  68. * @_publish
  69. */
  70. _publish() {
  71. wc.group("Flip.publish");
  72. this.addEventListener("click", e => {
  73. wc.publish("wc-flip", {
  74. time: new Date().getTime(),
  75. action: "click",
  76. id: this.id,
  77. uparam: this.properties.uparam
  78. });
  79. });
  80. wc.groupEnd();
  81. }
  82. /**
  83. * Called with .setAttribute(...) function call
  84. * @attributeChangedCallback
  85. */
  86. attributeChangedCallback(attr, oldval, newval) {
  87. wc.group("Flip.attributeChangedCallback:", attr, oldval, newval);
  88. this.properties = this.properties || [];
  89. let obs = Flip.observedAttributes;
  90. for (let i = 0; i < obs.length; i++) {
  91. if (newval) {
  92. this.properties[obs[i]] = newval;
  93. }
  94. }
  95. // YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  96. try {
  97. switch(attr)
  98. {
  99. case "header":
  100. break;
  101. default:
  102. break;
  103. }
  104. } catch(e) {
  105. wc.warn(e.name + ' > ' + e.message);
  106. }
  107. wc.groupEnd();
  108. };
  109. /**
  110. * Stores DOM elements of interest for future use
  111. * @private
  112. * @_fetchElements
  113. */
  114. _fetchElements() {
  115. wc.group("Flip._fetchElements");
  116. this.dom = this.dom || [];
  117. this.dom.content = this.innerHTML;
  118. wc.groupEnd();
  119. };
  120. /**
  121. * Component attributes are _fetched and defaults are set if undefined
  122. * @private
  123. * @_fetchAttributes
  124. * @param {string} [modal=true] mode for our flip
  125. */
  126. _fetchAttributes() {
  127. wc.group("Flip._fetchAttributes");
  128. this.properties = {
  129. cname : "flip",
  130. author : "Mel Heravi",
  131. version : "1.0",
  132. };
  133. // SAVE WIDGET SPECIFIC PROPERTIES
  134. this.propertiesW = [];
  135. // SAVE ALL OTHER PROPERTIES
  136. let attrs = wc.getAttributes(this)
  137. for (var key in attrs) {
  138. let attr = this.getAttribute(key) || this.properties.key;
  139. this.properties[key] = this.getAttribute(key);
  140. this.propertiesW[key] = this.getAttribute(key);
  141. wc.log(key + ": " + attrs[key]);
  142. }
  143. // SET ALL INITIAL ATTRIBUTES
  144. for (var key in this.properties) {
  145. switch(key)
  146. {
  147. case "header":
  148. break;
  149. default:
  150. break;
  151. }
  152. }
  153. wc.log("ATTRIBUTES: ", this.properties);
  154. wc.groupEnd();
  155. };
  156. /**
  157. * Destroy the instance object and artifacts
  158. * @destroy
  159. */
  160. destroy() {
  161. wc.group("Flip.destroy:", this.id);
  162. // FREE ALL MEMORY
  163. // you should delete all created objects here
  164. // FREE POINTER
  165. delete this;
  166. // REMOVE ITEM FROM DOM
  167. this.parentNode.removeChild(this);
  168. wc.groupEnd();
  169. };
  170. /**
  171. * configure the instance object and artifacts
  172. * @configure
  173. */
  174. configure(options) {
  175. wc.group("Flip.configure:", JSON.stringify(options));
  176. // PROCESS ALL OPTIONS HERE
  177. wc.groupEnd();
  178. };
  179. /**
  180. * SAVE DATA FOR ANALYTICS
  181. * @private
  182. * @_initialize
  183. */
  184. _initialize() {
  185. wc.group("Flip._initialize:", this.id);
  186. // FETCH ALL INTERESTING ELEMENTS
  187. this._fetchElements();
  188. // FETCH ALL ATTRIBUTES
  189. this._fetchAttributes();
  190. wc.groupEnd();
  191. };
  192. /**
  193. * SAVE DATA FOR ANALYTICS
  194. * @private
  195. * @_finalize
  196. */
  197. _finalize() {
  198. wc.group("Flip._finalize:", this.id);
  199. this.classList.add("wc");
  200. // ADD ANALYTICS HERE
  201. wc.setStats(this, this.properties.cname, this.properties.version);
  202. // SHOW IT NOW (NO FLICKERS)
  203. this.style.visibility = "visible";
  204. wc.groupEnd();
  205. };
  206. /**
  207. * Invoked When component is removed. Usually with a .remove() function call
  208. * @disconnectedCallback
  209. */
  210. disconnectedCallback() {
  211. wc.group("Flip.disconnectedCallback")
  212. /* CLEAN UP NOW */
  213. wc.groupEnd();
  214. };
  215. }
  216. window.customElements.define('wc-flip', Flip);