Source: avatar.js

  1. /**
  2.  * Avatar Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/avatar.png width=30% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/avatar.html">DEMO</a>
  5.  */
  6. class Avatar extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Avatar.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("Avatar.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("Avatar.connectedCallback")
  34. 	
  35. 	// ADD A RANDOM ID IF NONE EXIST
  36. 	if (!this.id) {
  37. 	    this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
  38. 	}
  40. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  41. 	this._initialize();
  43. 	// ADD COMPONENT MARKTOP
  44. 	this.innerHTML = this._template()
  46. 	// TRANSFER ALL ATTRIBUTES NOW (below is an example)
  47. 	// -------------------------------------------------
  48. 	// let widget = this.querySelector("input[type=text]");
  50.  	// for (var key in this.propertiesW) {
  51. 	//     if (key != "class" && key != "id") {
  52. 	// 	this.removeAttribute(key);
  53. 	// 	widget.setAttribute(key, this.properties[key]);
  54. 	//     }
  55. 	// }	
  57. 	// PUBLISH ALL EVENTS OF INTEREST
  58. 	this._publish();
  59. 	
  60. 	// ADD STATS AND OTHER FINAL STUFF
  61. 	this._finalize();
  63. 	ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  65.         wc.groupEnd();
  66.     };
  68.     /**
  69.      * Initial Markup
  70.      * @private
  71.      * @_template
  72.      */
  73.     _template() {
  74.         wc.group("Avatar.template");
  75. 	
  76. 	let self = this;
  78. 	var temp = `
  79. 		    <div class="wc-avatar-container" style="width:${this.properties.width};height:${this.properties.height};background:${this.properties.background}">
  80. 			<div class="wc-avatar-image">
  81. 			    <img src="${this.properties.img}" width="100%">
  82. 			</div>
  84. 			<div class="wc-avatar-label">
  85. 			    ${this.properties.title}
  86. 			</div>
  87. 		    </div>`;
  89.         wc.groupEnd();
  90.         return temp;
  91.     };
  93.     /**
  94.      * Publish all events of interest
  95.      * @private
  96.      * @_publish
  97.      */
  98.     _publish() {
  99. 	wc.group("Avatar.publish");
  101. 	let self = this;
  103. 	this.addEventListener("click", e => {
  104. 	    ga('send', {'hitType': 'event','eventCategory': 'wc-publish','eventAction': 'click','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  106. 	    wc.publish("wc-avatar", {
  107. 		time: new Date().getTime(),
  108. 		action: "click",
  109. 		id: this.id,
  110. 		uparam: this.getAttribute("uparam")
  111. 	    });
  112. 	});
  114. 	wc.groupEnd();
  115.     }
  117.     /**
  118.      * Called with .setAttribute(...) function call
  119.      * @attributeChangedCallback
  120.      */
  121.     attributeChangedCallback(attr, oldval, newval) {
  122.         wc.group("Avatar.attributeChangedCallback:", attr, oldval, newval);
  124. 	this.properties = this.properties || [];
  126. 	let obs = Avatar.observedAttributes;
  128. 	for (let i = 0; i < obs.length; i++) {
  129. 	    if (newval) {
  130. 		this.properties[obs[i]] = newval;
  131. 	    }
  132. 	}
  133. 	
  134. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  135. 	try {
  136. 	    switch(attr) 
  137. 	    {
  138. 		case "header":
  139. 		//this.querySelector("h1").innerHTML = newval;
  140. 		break;
  141. 		
  142. 		default:
  143. 		break;
  144. 	    }
  145. 	} catch(e) {
  146. 	    wc.warn(e.name + ' > ' + e.message);
  147. 	}
  149.         wc.groupEnd();
  150.     };
  152.     /**
  153.      * Stores DOM elements of interest for future use
  154.      * @private
  155.      * @_fetchElements
  156.      */
  157.     _fetchElements() {
  158. 	wc.group("Avatar._fetchElements");
  159. 	
  160. 	this.dom = this.dom || [];
  161. 	this.dom.content = this.innerHTML;
  163. 	wc.groupEnd();
  164.     };
  166.     /**
  167.      * Component attributes are _fetched and defaults are set if undefined
  168.      * @private
  169.      * @_fetchAttributes
  170.      */
  171.     _fetchAttributes() {
  172. 	wc.group("Avatar._fetchAttributes");
  173. 	
  174. 	this.properties = {
  175. 	    uparam	: "",
  176. 	    cname	: "Avatar",
  177. 	    author	: "Mel M. Heravi, Ph.D.",
  178. 	    version	: "1.0"
  179. 	};
  180. 	
  181. 	// SAVE WIDGET SPECIFIC PROPERTIES
  182. 	this.propertiesW = [];
  183. 	
  184. 	// SAVE ALL OTHER PROPERTIES
  185. 	let attrs = wc.getAttributes(this)
  186. 	
  187.  	for (var key in attrs) {
  188. 	    let attr = this.getAttribute(key) || this.properties.key;
  189. 	    this.properties[key]  = this.getAttribute(key);
  190. 	    this.propertiesW[key] = this.getAttribute(key);
  191. 	    wc.log(key + ": " + attrs[key]);
  192. 	}
  194. 	// SET ALL INITIAL ATTRIBUTES
  195.  	for (var key in this.properties) {
  196. 	    switch(key) 
  197. 	    {
  198. 		case "header":
  199. 		break;
  200. 		
  201. 		default:
  202. 		break;
  203. 	    }
  204. 	}
  206. 	wc.log("ATTRIBUTES: ", this.properties);
  208. 	wc.groupEnd();
  209.     };
  211.     /**
  212.      * configure the instance object and artifacts
  213.      * @configure
  214.      * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  215.      */
  216.     configure(data) {
  217. 	wc.group("Avatar.configure:", data);
  219. 	// IF JSON VARIABLE (data) IS PROVIDED
  220. 	if (data) {
  221. 	    this._process(data);
  222. 	} else {
  223. 	    let self = this;
  225. 	    $.getJSON(this.properties.cfg, function(data) {
  226. 		self._process(data);
  227. 	    }).fail(function(jqXHR, textStatus, errorThrown) {
  228. 		alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  229. 	    });
  230. 	}
  232. 	wc.groupEnd();
  233.     };
  235.     /**
  236.      * _process the instance object and artifacts
  237.      * @private
  238.      * @_process
  239.      */
  240.     _process(data) {
  241. 	wc.group("Avatar._process:", data);
  242. 	
  243. 	// DO WHATEVER WITH THE DATA
  244. 	
  245. 	wc.groupEnd();
  246.     };
  248.     /**
  249.      * Initialize component
  250.      * @private
  251.      * @_initialize
  252.      */
  253.     _initialize() {
  254. 	wc.group("Avatar._initialize:", this.id);
  256. 	// FETCH ALL INTERESTING ELEMENTS
  257. 	this._fetchElements();
  259. 	// FETCH ALL ATTRIBUTES
  260. 	this._fetchAttributes();
  261. 	
  262. 	wc.groupEnd();
  263.     };
  265.     /**
  266.      * Save data for analytics and final wrap up
  267.      * @private
  268.      * @_finalize
  269.      */
  270.     _finalize() {
  271. 	wc.group("Avatar._finalize:", this.id);
  273. 	this.classList.add("wc");
  275. 	// ADD ANALYTICS HERE
  276. 	wc.setStats(this, this.properties.cname, this.properties.version);
  277. 	
  278. 	// SHOW IT NOW (NO FLICKERS) 
  279. 	this.style.visibility = "visible";
  281. 	wc.groupEnd();
  282.     };
  284.     /**
  285.      * Invoked When component is removed. Usually with a .remove() function call
  286.      * @disconnectedCallback
  287.      */
  288.     disconnectedCallback() {
  289.         wc.group("Avatar.disconnectedCallback")
  291. 	ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  293.         wc.groupEnd();
  294.     };
  296.     /**
  297.      * Destroy the instance object and artifacts
  298.      * @destroy
  299.      */
  300.     destroy() {
  301. 	wc.group("Avatar.destroy");
  303. 	// FREE ALL MEMORY
  304. 	// you should delete all created objects here
  305. 	
  306. 	// FREE POINTER
  307. 	delete this;
  308. 	
  309. 	// REMOVE ITEM FROM DOM
  310. 	this.parentNode.removeChild(this);
  312. 	ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  314. 	wc.groupEnd();
  315.     };
  316. }
  318. window.customElements.define('wc-avatar', Avatar);