Source: range.js

  1. /**
  2. * Range Component<BR>
  3. * <BR><BR><img src=/tk/lib/components/w/img/range.png width=30% style="border:1px lime dashed;padding:20px">
  4. * <BR><BR><a href="/tk/lib/components/w/html/range.html">DEMO</a>
  5. */
  6. class Range extends HTMLElement {
  7. constructor() {
  8. wc.group("Range.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("Range.observedAttributes");
  18. this.observables = [];
  19. wc.groupEnd();
  20. return this.observables;
  21. };
  22. /**
  23. * Called when this is attached to DOM
  24. * @connectedCallback.
  25. */
  26. connectedCallback() {
  27. wc.group("Range.connectedCallback")
  28. let self = this;
  29. // ADD A RANDOM ID IF NONE EXIST
  30. if (!this.id) {
  31. this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
  32. }
  33. let val = $(this).attr("value") || 0;
  34. // ADD COMPONENT MARKTOP
  35. this.innerHTML = `<input type="text" class="wc-range-slider" value="${val}" />`
  36. // GET PROPERTIES AND INTERESTING ELEMENTS
  37. this._initialize();
  38. this.slider = this.querySelector(`.wc-range-slider`);
  39. $.getJSON(this.properties.cfg, function(data) {
  40. // APPEND CALLBACKS AND PUBLISH EVENTS
  41. data["onChange"] = function (data) {
  42. wc.publish("wc-range", {
  43. time: new Date().getTime(),
  44. action: "change",
  45. id: self.id,
  46. value: data.from
  47. });
  48. }
  49. // ADD CALLBACKS
  50. $(self.slider).ionRangeSlider(data);
  51. }).fail(function(jqXHR, textStatus, errorThrown) {
  52. alert(`FAILED TO FETCH: ${self.properties.cfg}`);
  53. });
  54. // ADD STATS AND OTHER FINAL STUFF
  55. this._finalize();
  56. ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  57. wc.groupEnd();
  58. };
  59. /**
  60. * Called with .setAttribute(...) function call
  61. * @attributeChangedCallback
  62. */
  63. attributeChangedCallback(attr, oldval, newval) {
  64. wc.group("Range.attributeChangedCallback:", attr, oldval, newval);
  65. this.properties = this.properties || [];
  66. let obs = Range.observedAttributes;
  67. for (let i = 0; i < obs.length; i++) {
  68. if (newval) {
  69. this.properties[obs[i]] = newval;
  70. }
  71. }
  72. // YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  73. try {
  74. switch(attr)
  75. {
  76. case "header":
  77. //this.querySelector("h1").innerHTML = newval;
  78. break;
  79. default:
  80. break;
  81. }
  82. } catch(e) {
  83. wc.warn(e.name + ' > ' + e.message);
  84. }
  85. wc.groupEnd();
  86. };
  87. /**
  88. * Stores DOM elements of interest for future use
  89. * @private
  90. * @_fetchElements
  91. */
  92. _fetchElements() {
  93. wc.group("Range._fetchElements");
  94. this.dom = this.dom || [];
  95. this.dom.content = this.innerHTML;
  96. wc.groupEnd();
  97. };
  98. /**
  99. * Component attributes are _fetched and defaults are set if undefined
  100. * @private
  101. * @_fetchAttributes
  102. */
  103. _fetchAttributes() {
  104. wc.group("Range._fetchAttributes");
  105. this.properties = {
  106. uparam : "",
  107. cname : "Range",
  108. author : "Mel M. Heravi, Ph.D.",
  109. version : "1.0"
  110. };
  111. // SAVE WIDGET SPECIFIC PROPERTIES
  112. this.propertiesW = [];
  113. // SAVE ALL OTHER PROPERTIES
  114. let attrs = wc.getAttributes(this)
  115. for (var key in attrs) {
  116. let attr = this.getAttribute(key) || this.properties.key;
  117. this.properties[key] = this.getAttribute(key);
  118. this.propertiesW[key] = this.getAttribute(key);
  119. wc.log(key + ": " + attrs[key]);
  120. }
  121. // SET ALL INITIAL ATTRIBUTES
  122. for (var key in this.properties) {
  123. switch(key)
  124. {
  125. case "header":
  126. break;
  127. default:
  128. break;
  129. }
  130. }
  131. wc.log("ATTRIBUTES: ", this.properties);
  132. wc.groupEnd();
  133. };
  134. /**
  135. * configure the instance object and artifacts
  136. * @configure
  137. * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  138. */
  139. configure(data) {
  140. wc.group("Range.configure:", data);
  141. // IF JSON VARIABLE (data) IS PROVIDED
  142. if (data) {
  143. this._process(data);
  144. } else {
  145. let self = this;
  146. $.getJSON(this.properties.cfg, function(data) {
  147. self._process(data);
  148. }).fail(function(jqXHR, textStatus, errorThrown) {
  149. alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  150. });
  151. }
  152. wc.groupEnd();
  153. };
  154. /**
  155. * _process the instance object and artifacts
  156. * @private
  157. * @_process
  158. */
  159. _process(data) {
  160. wc.group("Range._process:", data);
  161. // DO WHATEVER WITH THE DATA
  162. wc.groupEnd();
  163. };
  164. /**
  165. * Initialize component
  166. * @private
  167. * @_initialize
  168. */
  169. _initialize() {
  170. wc.group("Range._initialize:", this.id);
  171. // FETCH ALL INTERESTING ELEMENTS
  172. this._fetchElements();
  173. // FETCH ALL ATTRIBUTES
  174. this._fetchAttributes();
  175. wc.groupEnd();
  176. };
  177. /**
  178. * Save data for analytics and final wrap up
  179. * @private
  180. * @_finalize
  181. */
  182. _finalize() {
  183. wc.group("Range._finalize:", this.id);
  184. this.classList.add("wc");
  185. // ADD ANALYTICS HERE
  186. wc.setStats(this, this.properties.cname, this.properties.version);
  187. // SHOW IT NOW (NO FLICKERS)
  188. this.style.visibility = "visible";
  189. wc.groupEnd();
  190. };
  191. /**
  192. * Invoked When component is removed. Usually with a .remove() function call
  193. * @disconnectedCallback
  194. */
  195. disconnectedCallback() {
  196. wc.group("Range.disconnectedCallback")
  197. ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  198. wc.groupEnd();
  199. };
  200. /**
  201. * Destroy the instance object and artifacts
  202. * @destroy
  203. */
  204. destroy() {
  205. wc.group("Range.destroy");
  206. // FREE ALL MEMORY
  207. // you should delete all created objects here
  208. // FREE POINTER
  209. delete this;
  210. // REMOVE ITEM FROM DOM
  211. this.parentNode.removeChild(this);
  212. ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  213. wc.groupEnd();
  214. };
  215. /**
  216. * @value
  217. */
  218. value() {
  219. wc.group("Range.destroy");
  220. let rval = $(this.slider).val()
  221. wc.log("value:", rval);
  222. wc.groupEnd();
  223. return rval;
  224. };
  225. }
  226. window.customElements.define('wc-range', Range);