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. 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("Crypto.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("Crypto.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 = this._template()
  37. // PUBLISH ALL EVENTS OF INTEREST
  38. this._publish();
  39. // SUBSCRIBE TO ALL EVENTS OF INTEREST
  40. this._subscribe();
  41. this._chart();
  42. // ADD STATS AND OTHER FINAL STUFF
  43. this._finalize();
  44. ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  45. wc.groupEnd();
  46. };
  47. /**
  48. * Initial Markup
  49. * @private
  50. * @_template
  51. */
  52. _template() {
  53. wc.group("Crypto.template");
  54. let self = this;
  55. var temp = `
  56. <span class="crypto-container">
  57. <div class="crypto-logo-container">
  58. <span class="crypto-logo float-left">
  59. <img src="/tk/img/common/crypto/${this.properties.asset}.png" alt="${this.properties.asset}" />
  60. </span>
  61. <span class="crypto-asset float-left">
  62. <h1 class="wc-font-b">${this.properties.asset}</h1>
  63. <h3 class="wc-font-m">${this.properties.assetname}</h3>
  64. </span>
  65. </div>
  66. <div class="crypto-chart-container" id="crypto-chart-container-${this.id}"></div>
  67. </span>`
  68. setTimeout(function(){
  69. document.querySelectorAll(`#${self.id} .sparkline`).forEach(function (svg) {
  70. sparkline.sparkline(svg, JSON.parse(self.properties.data));
  71. });
  72. }, 10);
  73. wc.groupEnd();
  74. return temp;
  75. };
  76. /**
  77. * Called with .setAttribute(...) function call
  78. * @attributeChangedCallback
  79. */
  80. attributeChangedCallback(attr, oldval, newval) {
  81. wc.group("Crypto.attributeChangedCallback:", attr, oldval, newval);
  82. this.properties = this.properties || [];
  83. let obs = Crypto.observedAttributes;
  84. for (let i = 0; i < obs.length; i++) {
  85. if (newval) {
  86. this.properties[obs[i]] = newval;
  87. }
  88. }
  89. // YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  90. try {
  91. switch(attr)
  92. {
  93. case "header":
  94. //this.querySelector("h1").innerHTML = newval;
  95. break;
  96. default:
  97. break;
  98. }
  99. } catch(e) {
  100. wc.warn(e.name + ' > ' + e.message);
  101. }
  102. wc.groupEnd();
  103. };
  104. /**
  105. * Stores DOM elements of interest for future use
  106. * @private
  107. * @_fetchElements
  108. */
  109. _fetchElements() {
  110. wc.group("Crypto._fetchElements");
  111. this.dom = this.dom || [];
  112. this.dom.content = this.innerHTML;
  113. wc.groupEnd();
  114. };
  115. /**
  116. * Component attributes are _fetched and defaults are set if undefined
  117. * @private
  118. * @_fetchAttributes
  119. */
  120. _fetchAttributes() {
  121. wc.group("Crypto._fetchAttributes");
  122. this.properties = {
  123. uparam : "",
  124. cname : "Crypto",
  125. author : "Mel M. Heravi, Ph.D.",
  126. version : "1.0"
  127. };
  128. // SAVE WIDGET SPECIFIC PROPERTIES
  129. this.propertiesW = [];
  130. // SAVE ALL OTHER PROPERTIES
  131. let attrs = wc.getAttributes(this)
  132. for (var key in attrs) {
  133. let attr = this.getAttribute(key) || this.properties.key;
  134. this.properties[key] = this.getAttribute(key);
  135. this.propertiesW[key] = this.getAttribute(key);
  136. wc.log(key + ": " + attrs[key]);
  137. }
  138. // SET ALL INITIAL ATTRIBUTES
  139. for (var key in this.properties) {
  140. switch(key)
  141. {
  142. case "header":
  143. break;
  144. default:
  145. break;
  146. }
  147. }
  148. wc.log("ATTRIBUTES: ", this.properties);
  149. wc.groupEnd();
  150. };
  151. /**
  152. * configure the instance object and artifacts
  153. * @configure
  154. * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  155. */
  156. configure(data) {
  157. wc.group("Crypto.configure:", data);
  158. // IF JSON VARIABLE (data) IS PROVIDED
  159. if (data) {
  160. this._process(data);
  161. } else {
  162. let self = this;
  163. $.getJSON(this.properties.cfg, function(data) {
  164. self._process(data);
  165. }).fail(function(jqXHR, textStatus, errorThrown) {
  166. alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  167. });
  168. }
  169. wc.groupEnd();
  170. };
  171. /**
  172. * _process the instance object and artifacts
  173. * @private
  174. * @_process
  175. */
  176. _process(data) {
  177. wc.group("Crypto._process:", data);
  178. // DO WHATEVER WITH THE DATA
  179. wc.groupEnd();
  180. };
  181. /**
  182. * Initialize component
  183. * @private
  184. * @_initialize
  185. */
  186. _initialize() {
  187. wc.group("Crypto._initialize:", this.id);
  188. // FETCH ALL INTERESTING ELEMENTS
  189. this._fetchElements();
  190. // FETCH ALL ATTRIBUTES
  191. this._fetchAttributes();
  192. wc.groupEnd();
  193. };
  194. /**
  195. * Save data for analytics and final wrap up
  196. * @private
  197. * @_finalize
  198. */
  199. _finalize() {
  200. wc.group("Crypto._finalize:", this.id);
  201. this.classList.add("wc");
  202. // ADD ANALYTICS HERE
  203. wc.setStats(this, this.properties.cname, this.properties.version);
  204. // SHOW IT NOW (NO FLICKERS)
  205. this.style.visibility = "visible";
  206. wc.groupEnd();
  207. };
  208. /**
  209. * Invoked When component is removed. Usually with a .remove() function call
  210. * @disconnectedCallback
  211. */
  212. disconnectedCallback() {
  213. wc.group("Crypto.disconnectedCallback")
  214. ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  215. wc.groupEnd();
  216. };
  217. /**
  218. * Destroy the instance object and artifacts
  219. * @destroy
  220. */
  221. destroy() {
  222. wc.group("Crypto.destroy");
  223. // FREE ALL MEMORY
  224. // you should delete all created objects here
  225. // FREE POINTER
  226. delete this;
  227. // REMOVE ITEM FROM DOM
  228. this.parentNode.removeChild(this);
  229. ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  230. wc.groupEnd();
  231. };
  232. /**
  233. * @_publish
  234. */
  235. _publish() {
  236. wc.group("Crypto._publish");
  237. let self = this;
  238. // PUBLISH CLICK EVENTS
  239. $(this).on("click", () => {
  240. wc.publish("wc-crypto", {
  241. id: self.id,
  242. time: new Date().getTime(),
  243. action: "click"
  244. });
  245. ga('send', {'hitType': 'event','eventCategory': 'wc-Crypto','eventAction': 'click','eventLabel': self.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  246. });
  247. wc.groupEnd();
  248. return true;
  249. };
  250. /**
  251. * Subscribe all to events of interest
  252. * @private
  253. * @_subscribe
  254. */
  255. _subscribe() {
  256. wc.group("Crypto._subscribe:", this.id);
  257. let self = this;
  258. wc.subscribe("wc-crypto", function(msg, e) {
  259. if (e.id == self.id && e.action == "update") {
  260. self._update(e.id, e.data);
  261. }
  262. wc.info("'wc-crypto-update' subscription was triggered:", JSON.stringify(e));
  263. });
  264. wc.groupEnd();
  265. }
  266. /**
  267. * @private
  268. * @_update
  269. */
  270. _update(id, data) {
  271. wc.group("Crypto._update:", id, JSON.stringify(data));
  272. let self = this;
  273. document.querySelectorAll(`#${id} .sparkline`).forEach(function (svg) {
  274. sparkline.sparkline(svg, JSON.parse(data));
  275. });
  276. wc.groupEnd();
  277. }
  278. /**
  279. * @_request
  280. */
  281. _request(e) {
  282. wc.group("Crypto._request:", this.id, JSON.stringify(e.detail));
  283. switch(e.detail.request)
  284. {
  285. case "label":
  286. let h1 = this.querySelector("h1");
  287. h1.innerHTML = e.detail.str;
  288. this._publish("labelChanged");
  289. break;
  290. default:
  291. alert("DO NOT HAVE SUCH REQUEST: " + e.detail.request);
  292. break;
  293. }
  294. wc.groupEnd();
  295. return true;
  296. };
  297. /**
  298. * @_chart
  299. */
  300. _chart() {
  301. wc.group("Crypto._chart");
  302. let self = this;
  303. this.chart = new Highcharts.Chart({
  304. chart: {
  305. margin: 0,
  306. renderTo: `crypto-chart-container-${self.id}`,
  307. backgroundColor: null,
  308. defaultSeriesType: 'spline',
  309. events: {
  310. load: function(event) {
  311. event.target.reflow();
  312. }
  313. }
  314. },
  315. title: {
  316. text: ''
  317. },
  318. credits: {
  319. enabled: false
  320. },
  321. xAxis: {
  322. labels: {
  323. enabled: false
  324. },
  325. title: {
  326. text: null
  327. },
  328. startOnTick: false,
  329. endOnTick: false,
  330. tickPositions: []
  331. },
  332. yAxis: {
  333. endOnTick: false,
  334. startOnTick: false,
  335. labels: {
  336. enabled: false
  337. },
  338. title: {
  339. text: null
  340. },
  341. tickPositions: [0]
  342. },
  343. legend: {
  344. enabled: false
  345. },
  346. tooltip: {enabled: false},
  347. marker: {enabled: false},
  348. plotOptions: {
  349. line: {
  350. marker: {
  351. enabled: false
  352. }
  353. },
  354. series: {
  355. states: {
  356. hover: {
  357. enabled: false
  358. }
  359. },
  360. animation: false,
  361. shadow: false,
  362. fillOpacity: 0
  363. }
  364. },
  365. series: [{
  366. data: JSON.parse(self.properties.data),
  367. tooltip: {enabled: false},
  368. marker: {enabled: false},
  369. color: self.properties.color,
  370. fillOpacity: 0,
  371. lineWidth: 5
  372. }]
  373. });
  374. wc.groupEnd();
  375. return true;
  376. };
  377. /**
  378. * @test
  379. */
  380. static test(what) {
  381. wc.group("Crypto.test:", what);
  382. switch(what)
  383. {
  384. case "label":
  385. wc.publish("my-Crypto", {time:new Date().getTime(), requestor:"my-Crypto", request:"label", str:"Hello Mel !"})
  386. break;
  387. }
  388. wc.groupEnd();
  389. return true;
  390. }
  391. }
  392. window.customElements.define('wc-crypto', Crypto);