Source: rating.js

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