Source: crypto.js

  1. /**
  2.  * Crypto Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/Crypto.png width=30% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/Crypto.html">DEMO</a>
  5.  */
  6. class Crypto extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Crypto.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("Crypto.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("Crypto.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 = this._template()
  48. 	// PUBLISH ALL EVENTS OF INTEREST
  49. 	this._publish();
  50. 	
  51. 	// SUBSCRIBE TO ALL EVENTS OF INTEREST
  52. 	this._subscribe();
  54. 	this._chart();
  56. 	// ADD STATS AND OTHER FINAL STUFF
  57. 	this._finalize();
  59. 	ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  61.         wc.groupEnd();
  62.     };
  64.     /**
  65.      * Initial Markup
  66.      * @private
  67.      * @_template
  68.      */
  69.     _template() {
  70.         wc.group("Crypto.template");
  71. 	
  72. 	let self = this;
  74. 	var temp = `
  75. <span class="crypto-container">
  76.     <div class="crypto-logo-container">
  77. 	<span class="crypto-logo float-left">
  78. 	    <img src="/tk/img/common/crypto/${this.properties.asset}.png" alt="${this.properties.asset}" />
  79. 	</span>
  81. 	<span class="crypto-asset float-left">
  82. 	    <h1 class="wc-font-b">${this.properties.asset}</h1>
  83. 	    <h3 class="wc-font-m">${this.properties.assetname}</h3>
  84. 	</span>
  85.     </div>
  86.     
  87.     <div class="crypto-chart-container" id="crypto-chart-container-${this.id}"></div>
  88. </span>`
  90. 	setTimeout(function(){
  91. 	    document.querySelectorAll(`#${self.id} .sparkline`).forEach(function (svg) {
  92. 		sparkline.sparkline(svg, JSON.parse(self.properties.data));
  93. 	    });
  94. 	}, 10);
  96.         wc.groupEnd();
  97.         return temp;
  98.     };
  100.     /**
  101.      * Called with .setAttribute(...) function call
  102.      * @attributeChangedCallback
  103.      */
  104.     attributeChangedCallback(attr, oldval, newval) {
  105.         wc.group("Crypto.attributeChangedCallback:", attr, oldval, newval);
  107. 	this.properties = this.properties || [];
  109. 	let obs = Crypto.observedAttributes;
  111. 	for (let i = 0; i < obs.length; i++) {
  112. 	    if (newval) {
  113. 		this.properties[obs[i]] = newval;
  114. 	    }
  115. 	}
  116. 	
  117. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  118. 	try {
  119. 	    switch(attr) 
  120. 	    {
  121. 		case "header":
  122. 		//this.querySelector("h1").innerHTML = newval;
  123. 		break;
  124. 		
  125. 		default:
  126. 		break;
  127. 	    }
  128. 	} catch(e) {
  129. 	    wc.warn(e.name + ' > ' + e.message);
  130. 	}
  132.         wc.groupEnd();
  133.     };
  135.     /**
  136.      * Stores DOM elements of interest for future use
  137.      * @private
  138.      * @_fetchElements
  139.      */
  140.     _fetchElements() {
  141. 	wc.group("Crypto._fetchElements");
  142. 	
  143. 	this.dom = this.dom || [];
  144. 	this.dom.content = this.innerHTML;
  146. 	wc.groupEnd();
  147.     };
  149.     /**
  150.      * Component attributes are _fetched and defaults are set if undefined
  151.      * @private
  152.      * @_fetchAttributes
  153.      */
  154.     _fetchAttributes() {
  155. 	wc.group("Crypto._fetchAttributes");
  156. 	
  157. 	this.properties = {
  158. 	    uparam	: "",
  159. 	    cname	: "Crypto",
  160. 	    author	: "Mel M. Heravi, Ph.D.",
  161. 	    version	: "1.0"
  162. 	};
  163. 	
  164. 	// SAVE WIDGET SPECIFIC PROPERTIES
  165. 	this.propertiesW = [];
  166. 	
  167. 	// SAVE ALL OTHER PROPERTIES
  168. 	let attrs = wc.getAttributes(this)
  169. 	
  170.  	for (var key in attrs) {
  171. 	    let attr = this.getAttribute(key) || this.properties.key;
  172. 	    this.properties[key]  = this.getAttribute(key);
  173. 	    this.propertiesW[key] = this.getAttribute(key);
  174. 	    wc.log(key + ": " + attrs[key]);
  175. 	}
  177. 	// SET ALL INITIAL ATTRIBUTES
  178.  	for (var key in this.properties) {
  179. 	    switch(key) 
  180. 	    {
  181. 		case "header":
  182. 		break;
  183. 		
  184. 		default:
  185. 		break;
  186. 	    }
  187. 	}
  189. 	wc.log("ATTRIBUTES: ", this.properties);
  191. 	wc.groupEnd();
  192.     };
  194.     /**
  195.      * configure the instance object and artifacts
  196.      * @configure
  197.      * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  198.      */
  199.     configure(data) {
  200. 	wc.group("Crypto.configure:", data);
  202. 	// IF JSON VARIABLE (data) IS PROVIDED
  203. 	if (data) {
  204. 	    this._process(data);
  205. 	} else {
  206. 	    let self = this;
  208. 	    $.getJSON(this.properties.cfg, function(data) {
  209. 		self._process(data);
  210. 	    }).fail(function(jqXHR, textStatus, errorThrown) {
  211. 		alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  212. 	    });
  213. 	}
  215. 	wc.groupEnd();
  216.     };
  218.     /**
  219.      * _process the instance object and artifacts
  220.      * @private
  221.      * @_process
  222.      */
  223.     _process(data) {
  224. 	wc.group("Crypto._process:", data);
  225. 	
  226. 	// DO WHATEVER WITH THE DATA
  227. 	
  228. 	wc.groupEnd();
  229.     };
  231.     /**
  232.      * Initialize component
  233.      * @private
  234.      * @_initialize
  235.      */
  236.     _initialize() {
  237. 	wc.group("Crypto._initialize:", this.id);
  239. 	// FETCH ALL INTERESTING ELEMENTS
  240. 	this._fetchElements();
  242. 	// FETCH ALL ATTRIBUTES
  243. 	this._fetchAttributes();
  244. 	
  245. 	wc.groupEnd();
  246.     };
  248.     /**
  249.      * Save data for analytics and final wrap up
  250.      * @private
  251.      * @_finalize
  252.      */
  253.     _finalize() {
  254. 	wc.group("Crypto._finalize:", this.id);
  256. 	this.classList.add("wc");
  258. 	// ADD ANALYTICS HERE
  259. 	wc.setStats(this, this.properties.cname, this.properties.version);
  260. 	
  261. 	// SHOW IT NOW (NO FLICKERS) 
  262. 	this.style.visibility = "visible";
  264. 	wc.groupEnd();
  265.     };
  267.     /**
  268.      * Invoked When component is removed. Usually with a .remove() function call
  269.      * @disconnectedCallback
  270.      */
  271.     disconnectedCallback() {
  272.         wc.group("Crypto.disconnectedCallback")
  274. 	ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  276.         wc.groupEnd();
  277.     };
  279.     /**
  280.      * Destroy the instance object and artifacts
  281.      * @destroy
  282.      */
  283.     destroy() {
  284. 	wc.group("Crypto.destroy");
  286. 	// FREE ALL MEMORY
  287. 	// you should delete all created objects here
  288. 	
  289. 	// FREE POINTER
  290. 	delete this;
  291. 	
  292. 	// REMOVE ITEM FROM DOM
  293. 	this.parentNode.removeChild(this);
  295. 	ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  297. 	wc.groupEnd();
  298.     };
  300.     /**
  301.      * @_publish
  302.      */
  303.     _publish() {
  304. 	wc.group("Crypto._publish");
  306. 	let self = this;
  308. 	// PUBLISH CLICK EVENTS
  309. 	$(this).on("click", () => {
  310. 	    wc.publish("wc-crypto", {
  311. 		id: self.id,
  312. 		time: new Date().getTime(),
  313. 		action: "click"
  314. 	    });
  316. 	    ga('send', {'hitType': 'event','eventCategory': 'wc-Crypto','eventAction': 'click','eventLabel': self.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  317. 	});
  319. 	wc.groupEnd();
  320. 	return true;
  321.     };
  323.     /**
  324.      * Subscribe all to events of interest
  325.      * @private
  326.      * @_subscribe
  327.      */
  328.     _subscribe() {
  329. 	wc.group("Crypto._subscribe:", this.id);
  330. 	
  331. 	let self = this;
  333. 	wc.subscribe("wc-crypto", function(msg, e) {
  334. 	    if (e.id == self.id && e.action == "update") {
  335. 		self._update(e.id, e.data);
  336. 	    }
  338. 	    wc.info("'wc-crypto-update' subscription was triggered:", JSON.stringify(e));
  339. 	});
  341. 	wc.groupEnd();
  342.     }
  344.     /**
  345.      * @private
  346.      * @_update
  347.      */
  348.     _update(id, data) {
  349. 	wc.group("Crypto._update:", id, JSON.stringify(data));
  350. 	
  351. 	let self = this;
  353. 	document.querySelectorAll(`#${id} .sparkline`).forEach(function (svg) {
  354. 	    sparkline.sparkline(svg, JSON.parse(data));
  355. 	});
  357. 	wc.groupEnd();
  358.     }
  360.     /**
  361.      * @_request
  362.      */
  363.     _request(e) {
  364. 	wc.group("Crypto._request:", this.id, JSON.stringify(e.detail));
  365. 	
  366. 	switch(e.detail.request) 
  367. 	{
  368. 	    case "label":
  369. 	    let h1 = this.querySelector("h1");
  370. 	    h1.innerHTML = e.detail.str;
  371. 	    this._publish("labelChanged");
  372. 	    break;
  374. 	    default:
  375. 	    alert("DO NOT HAVE SUCH REQUEST: " + e.detail.request);
  376. 	    break;
  377. 	}
  379. 	wc.groupEnd();
  380. 	return true;
  381.     };
  383.     /**
  384.      * @_chart
  385.      */
  386.     _chart() {
  387. 	wc.group("Crypto._chart");
  388. 	
  389. 	let self = this;
  391. 	this.chart = new Highcharts.Chart({
  392. 	    chart: {
  393. 		margin: 0,
  394. 		renderTo: `crypto-chart-container-${self.id}`,
  395. 		backgroundColor: null,
  396. 		defaultSeriesType: 'spline',
  397. 		events: {
  398. 		    load: function(event) {
  399. 			event.target.reflow();
  400. 		    }
  401. 		}
  402. 	    },
  403. 	    
  404. 	    title: {
  405. 		text: ''
  406. 	    },
  407. 	    credits: {
  408. 		enabled: false
  409. 	    },
  410. 	    xAxis: {
  411. 		labels: {
  412. 		    enabled: false
  413. 		},
  414. 		title: {
  415. 		    text: null
  416. 		},
  417. 		startOnTick: false,
  418. 		endOnTick: false,
  419. 		tickPositions: []
  420. 	    },
  421. 	    yAxis: {
  422. 		endOnTick: false,
  423. 		startOnTick: false,
  424. 		labels: {
  425. 		    enabled: false
  426. 		},
  427. 		title: {
  428. 		    text: null
  429. 		},
  430. 		tickPositions: [0]
  431. 	    },
  432. 	    legend: {
  433. 		enabled: false
  434. 	    },
  435. 	    tooltip: {enabled: false},
  436. 	    marker: {enabled: false},
  437. 	    plotOptions: {
  438. 		line: {
  439. 		    marker: {
  440. 			enabled: false
  441. 		    }
  442. 		},
  443. 		series: {
  444. 		    states: {
  445. 			hover: {
  446. 			    enabled: false
  447. 			}
  448. 		    },
  449. 		    animation: false,
  450. 		    shadow: false,
  451. 		    fillOpacity: 0
  452. 		}
  453. 	    },
  455. 	    series: [{
  456. 		data: JSON.parse(self.properties.data),
  457. 		
  458. 		tooltip: {enabled: false},
  459. 		marker: {enabled: false},
  460. 		
  461. 		color: self.properties.color,
  462. 		fillOpacity: 0,
  463. 		lineWidth: 5
  464. 	    }]
  465. 	});
  467. 	wc.groupEnd();
  468. 	return true;
  469.     };
  471.     /**
  472.      * @test
  473.      */
  474.     static test(what) {
  475. 	wc.group("Crypto.test:", what);
  477. 	switch(what) 
  478. 	{
  479. 	    case "label":
  480. 	    wc.publish("my-Crypto", {time:new Date().getTime(), requestor:"my-Crypto", request:"label", str:"Hello Mel !"})
  481. 	    break;
  482. 	}
  483. 	
  484. 	wc.groupEnd();
  485. 	return true;
  486.     }
  487. }
  489. window.customElements.define('wc-crypto', Crypto);