Source: tile.js

  1. /**
  2. * Tile Component<BR>
  3. * <BR><BR><img src=/tk/lib/components/w/img/tile.png width=30% style="border:1px lime dashed;padding:20px">
  4. * <BR><BR><a href="/tk/lib/components/w/html/tile.html">DEMO</a>
  5. */
  6. class Tile extends HTMLElement {
  7. constructor() {
  8. wc.group("Tile.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("Tile.observedAttributes");
  18. this.observables = [];
  19. wc.groupEnd();
  20. return this.observables;
  21. };
  22. /**
  23. * Initial Markup
  24. * @private
  25. * @_template
  26. */
  27. _template() {
  28. wc.group("Tile.template");
  29. var temp = this.dom.content;
  30. wc.groupEnd();
  31. return temp;
  32. };
  33. /**
  34. * Called when this is attached to DOM
  35. * @connectedCallback.
  36. */
  37. connectedCallback() {
  38. wc.group("Tile.connectedCallback")
  39. // GET PROPERTIES AND INTERESTING ELEMENTS
  40. this._initialize();
  41. // ADD COMPONENT MARKTOP
  42. this.innerHTML = this._template()
  43. let h = $(this).height();
  44. let self = this;
  45. if ($(`#${this.id} wc-tile-back`).length == 1) {
  46. if (1) {
  47. // WAIT A LITTLE AND THEN SHOW
  48. var timer;
  49. $(this).click(function() {
  50. var that = this;
  51. timer = wc.timeout(function() {
  52. $(self).removeClass("hovered")
  53. $(that).addClass("hovered")
  54. $(`#${self.id} wc-tile-front, #${self.id} wc-tile-back`).animate({ 'marginTop': '-' + h}, 500);
  55. }, 100);
  56. }).mouseleave(function() {
  57. $(`#${this.id} wc-tile-front, #${this.id} wc-tile-back`).animate({ 'marginTop': '0'}, 500);
  58. clearTimeout(timer);
  59. });
  60. } else {
  61. if (0) {
  62. $(this).hover(function() {
  63. $(`#${this.id} wc-tile-front, #${this.id} wc-tile-back`).animate({ 'marginTop': '-' + h}, 500);
  64. }, function(){
  65. $(`#${this.id} wc-tile-front, #${this.id} wc-tile-back`).animate({ 'marginTop': '0'}, 500);
  66. });
  67. }
  68. }
  69. }
  70. // ADD STATS AND OTHER FINAL STUFF
  71. this._finalize();
  72. wc.groupEnd();
  73. };
  74. /**
  75. * Called with .setAttribute(...) function call
  76. * @attributeChangedCallback
  77. */
  78. attributeChangedCallback(attr, oldval, newval) {
  79. wc.group("Tile.attributeChangedCallback:", attr, oldval, newval);
  80. this.properties = this.properties || [];
  81. let obs = Tile.observedAttributes;
  82. for (let i = 0; i < obs.length; i++) {
  83. if (newval) {
  84. this.properties[obs[i]] = newval;
  85. }
  86. }
  87. // YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  88. try {
  89. switch(attr)
  90. {
  91. case "header":
  92. break;
  93. default:
  94. break;
  95. }
  96. } catch(e) {
  97. wc.warn(e.name + ' > ' + e.message);
  98. }
  99. wc.groupEnd();
  100. };
  101. /**
  102. * Stores DOM elements of interest for future use
  103. * @private
  104. * @_fetchElements
  105. */
  106. _fetchElements() {
  107. wc.group("Tile._fetchElements");
  108. this.dom = this.dom || [];
  109. this.dom.content = this.innerHTML;
  110. wc.groupEnd();
  111. };
  112. /**
  113. * Component attributes are _fetched and defaults are set if undefined
  114. * @private
  115. * @_fetchAttributes
  116. */
  117. _fetchAttributes() {
  118. wc.group("Tile._fetchAttributes");
  119. this.properties = {
  120. cname : "Tile",
  121. author : "Mel M. Heravi",
  122. version : "1.0"
  123. };
  124. // SAVE WIDGET SPECIFIC PROPERTIES
  125. this.propertiesW = [];
  126. // SAVE ALL OTHER PROPERTIES
  127. let attrs = wc.getAttributes(this)
  128. for (var key in attrs) {
  129. let attr = this.getAttribute(key) || this.properties.key;
  130. this.properties[key] = this.getAttribute(key);
  131. this.propertiesW[key] = this.getAttribute(key);
  132. wc.log(key + ": " + attrs[key]);
  133. }
  134. // SET ALL INITIAL ATTRIBUTES
  135. for (var key in this.properties) {
  136. switch(key)
  137. {
  138. case "header":
  139. break;
  140. default:
  141. break;
  142. }
  143. }
  144. wc.log("ATTRIBUTES: ", this.properties);
  145. wc.groupEnd();
  146. };
  147. /**
  148. * configure the instance object and artifacts
  149. * @configure
  150. */
  151. configure(options) {
  152. wc.group("Tile.configure:", JSON.stringify(options));
  153. // PROCESS ALL OPTIONS HERE
  154. wc.groupEnd();
  155. };
  156. /**
  157. * Initialize component
  158. * @private
  159. * @_initialize
  160. */
  161. _initialize() {
  162. wc.group("Tile._initialize:", this.id);
  163. // FETCH ALL INTERESTING ELEMENTS
  164. this._fetchElements();
  165. // FETCH ALL ATTRIBUTES
  166. this._fetchAttributes();
  167. wc.groupEnd();
  168. };
  169. /**
  170. * Save data for analytics and final wrap up
  171. * @private
  172. * @_finalize
  173. */
  174. _finalize() {
  175. wc.group("Tile._finalize:", this.id);
  176. this.classList.add("wc");
  177. // ADD ANALYTICS HERE
  178. wc.setStats(this, this.properties.cname, this.properties.version);
  179. // SHOW IT NOW (NO FLICKERS)
  180. this.style.visibility = "visible";
  181. wc.groupEnd();
  182. };
  183. /**
  184. * Invoked When component is removed. Usually with a .remove() function call
  185. * @disconnectedCallback
  186. */
  187. disconnectedCallback() {
  188. wc.group("Tile.disconnectedCallback")
  189. // FREE MEMORY AND CLEANUP
  190. wc.groupEnd();
  191. };
  192. }
  193. window.customElements.define('wc-tile', Tile);