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. 	
  10.         super();
  12.         wc.groupEnd();
  13.     };
  14.     
  15.     /**
  16.      * Set observable values here. When Changed, attributeChangedCallback is invoked
  17.      * @observedAttributes
  18.      */
  19.     static get observedAttributes() {
  20.         wc.group("Rating.observedAttributes");
  22. 	this.observables = [];
  24.         wc.groupEnd();
  25.         return this.observables;
  26.     };
  28.     /**
  29.      * Called when this is attached to DOM
  30.      * @connectedCallback. 
  31.      */
  32.     connectedCallback() {
  33.         wc.group("Rating.connectedCallback")
  34. 	
  35. 	let self = this;
  37. 	// ADD A RANDOM ID IF NONE EXIST
  38. 	if (!this.id) {
  39. 	    this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
  40. 	}
  42. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  43. 	this._initialize();
  45. 	// ADD COMPONENT MARKTOP
  46. 	this.innerHTML = `<div id="${this.id}-actual" class="jq-stars"></div>`
  48. 	// ADD STATS AND OTHER FINAL STUFF
  49. 	this._finalize();
  51. 	let stars = this.querySelector(".jq-stars")
  53. 	$(stars).starRating({
  54. 	    initialRating: this.properties.rating,
  55. 	    strokeColor: this.properties.stroke,
  56. 	    strokeWidth: this.properties.width,
  57. 	    starSize: this.properties.width,
  58. 	    readOnly: this.properties.readonly == true,
  59. 	    callback: function(currentRating, $el){
  60. 		wc.publish("wc-rating", {
  61. 		    time: new Date().getTime(),
  62. 		    action: "click",
  63. 		    id: self.id,
  64. 		    rating: currentRating
  65. 		});
  66. 	    }
  67. 	});
  69. 	ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  71.         wc.groupEnd();
  72.     };
  74.     /**
  75.      * Publish all events of interest
  76.      * @private
  77.      * @_publish
  78.      */
  79.     _publish() {
  80. 	wc.group("Rating.publish");
  82. 	let self = this;
  84. 	this.addEventListener("click", e => {
  85. 	    ga('send', {'hitType': 'event','eventCategory': 'wc-publish','eventAction': 'click','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  87. 	    wc.publish("wc-rating", {
  88. 		time: new Date().getTime(),
  89. 		action: "click",
  90. 		id: this.id,
  91. 		uparam: this.getAttribute("uparam")
  92. 	    });
  93. 	});
  95. 	wc.groupEnd();
  96.     }
  98.     /**
  99.      * Called with .setAttribute(...) function call
  100.      * @attributeChangedCallback
  101.      */
  102.     attributeChangedCallback(attr, oldval, newval) {
  103.         wc.group("Rating.attributeChangedCallback:", attr, oldval, newval);
  105. 	this.properties = this.properties || [];
  107. 	let obs = Rating.observedAttributes;
  109. 	for (let i = 0; i < obs.length; i++) {
  110. 	    if (newval) {
  111. 		this.properties[obs[i]] = newval;
  112. 	    }
  113. 	}
  114. 	
  115. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  116. 	try {
  117. 	    switch(attr) 
  118. 	    {
  119. 		case "header":
  120. 		//this.querySelector("h1").innerHTML = newval;
  121. 		break;
  122. 		
  123. 		default:
  124. 		break;
  125. 	    }
  126. 	} catch(e) {
  127. 	    wc.warn(e.name + ' > ' + e.message);
  128. 	}
  130.         wc.groupEnd();
  131.     };
  133.     /**
  134.      * Stores DOM elements of interest for future use
  135.      * @private
  136.      * @_fetchElements
  137.      */
  138.     _fetchElements() {
  139. 	wc.group("Rating._fetchElements");
  140. 	
  141. 	this.dom = this.dom || [];
  142. 	this.dom.content = this.innerHTML;
  144. 	wc.groupEnd();
  145.     };
  147.     /**
  148.      * Component attributes are _fetched and defaults are set if undefined
  149.      * @private
  150.      * @_fetchAttributes
  151.      */
  152.     _fetchAttributes() {
  153. 	wc.group("Rating._fetchAttributes");
  154. 	
  155. 	this.properties = {
  156. 	    uparam	: "",
  157. 	    cname	: "Rating",
  158. 	    author	: "Mel M. Heravi, Ph.D.",
  159. 	    version	: "1.0"
  160. 	};
  161. 	
  162. 	// SAVE WIDGET SPECIFIC PROPERTIES
  163. 	this.propertiesW = [];
  164. 	
  165. 	// SAVE ALL OTHER PROPERTIES
  166. 	let attrs = wc.getAttributes(this)
  167. 	
  168.  	for (var key in attrs) {
  169. 	    let attr = this.getAttribute(key) || this.properties.key;
  170. 	    this.properties[key]  = this.getAttribute(key);
  171. 	    this.propertiesW[key] = this.getAttribute(key);
  172. 	    wc.log(key + ": " + attrs[key]);
  173. 	}
  175. 	// SET ALL INITIAL ATTRIBUTES
  176.  	for (var key in this.properties) {
  177. 	    switch(key) 
  178. 	    {
  179. 		case "header":
  180. 		break;
  181. 		
  182. 		default:
  183. 		break;
  184. 	    }
  185. 	}
  187. 	wc.log("ATTRIBUTES: ", this.properties);
  189. 	wc.groupEnd();
  190.     };
  192.     /**
  193.      * configure the instance object and artifacts
  194.      * @configure
  195.      * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  196.      */
  197.     configure(data) {
  198. 	wc.group("Rating.configure:", data);
  200. 	// IF JSON VARIABLE (data) IS PROVIDED
  201. 	if (data) {
  202. 	    this._process(data);
  203. 	} else {
  204. 	    let self = this;
  206. 	    $.getJSON(this.properties.cfg, function(data) {
  207. 		self._process(data);
  208. 	    }).fail(function(jqXHR, textStatus, errorThrown) {
  209. 		alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  210. 	    });
  211. 	}
  213. 	wc.groupEnd();
  214.     };
  216.     /**
  217.      * _process the instance object and artifacts
  218.      * @private
  219.      * @_process
  220.      */
  221.     _process(data) {
  222. 	wc.group("Rating._process:", data);
  223. 	
  224. 	// DO WHATEVER WITH THE DATA
  225. 	
  226. 	wc.groupEnd();
  227.     };
  229.     /**
  230.      * Initialize component
  231.      * @private
  232.      * @_initialize
  233.      */
  234.     _initialize() {
  235. 	wc.group("Rating._initialize:", this.id);
  237. 	// FETCH ALL INTERESTING ELEMENTS
  238. 	this._fetchElements();
  240. 	// FETCH ALL ATTRIBUTES
  241. 	this._fetchAttributes();
  242. 	
  243. 	wc.groupEnd();
  244.     };
  246.     /**
  247.      * Save data for analytics and final wrap up
  248.      * @private
  249.      * @_finalize
  250.      */
  251.     _finalize() {
  252. 	wc.group("Rating._finalize:", this.id);
  254. 	this.classList.add("wc");
  256. 	// ADD ANALYTICS HERE
  257. 	wc.setStats(this, this.properties.cname, this.properties.version);
  258. 	
  259. 	// SHOW IT NOW (NO FLICKERS) 
  260. 	this.style.visibility = "visible";
  262. 	wc.groupEnd();
  263.     };
  265.     /**
  266.      * Invoked When component is removed. Usually with a .remove() function call
  267.      * @disconnectedCallback
  268.      */
  269.     disconnectedCallback() {
  270.         wc.group("Rating.disconnectedCallback")
  272. 	ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  274.         wc.groupEnd();
  275.     };
  277.     /**
  278.      * Destroy the instance object and artifacts
  279.      * @destroy
  280.      */
  281.     destroy() {
  282. 	wc.group("Rating.destroy");
  284. 	// FREE ALL MEMORY
  285. 	// you should delete all created objects here
  286. 	
  287. 	// FREE POINTER
  288. 	delete this;
  289. 	
  290. 	// REMOVE ITEM FROM DOM
  291. 	this.parentNode.removeChild(this);
  293. 	ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  295. 	wc.groupEnd();
  296.     };
  297. }
  299. window.customElements.define('wc-rating', Rating);