Source: dragndrop.js

  1. /**
  2.  * Dragndrop Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/dragndrop.png width=30% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/dragndrop.html">DEMO</a>
  5.  */
  6. class Dragndrop extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Dragndrop.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("Dragndrop.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("Dragndrop.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. 	// TRANSFER ALL ATTRIBUTES NOW (below is an example)
  49. 	// -------------------------------------------------
  50. 	if (0) {
  51. 	    let widget = this.querySelector("input[type=text]");
  53.  	    for (var key in this.propertiesW) {
  54. 		if (key != "class" && key != "id") {
  55. 		    this.removeAttribute(key);
  56. 		    widget.setAttribute(key, this.properties[key]);
  57. 		}
  58. 	    }	
  59. 	}
  60. 	
  61. 	// ADD STATS AND OTHER FINAL STUFF
  62. 	this._finalize();
  64. 	ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  66.         wc.groupEnd();
  67.     };
  69.     /**
  70.      * Initial Markup
  71.      * @private
  72.      * @_template
  73.      */
  74.     _template() {
  75.         wc.group("Dragndrop.template");
  76. 	
  77. 	var temp = this.dom.content;
  79.         wc.groupEnd();
  80.         return temp;
  81.     };
  83.     /**
  84.      * Called with .setAttribute(...) function call
  85.      * @attributeChangedCallback
  86.      */
  87.     attributeChangedCallback(attr, oldval, newval) {
  88.         wc.group("Dragndrop.attributeChangedCallback:", attr, oldval, newval);
  90. 	this.properties = this.properties || [];
  92. 	let obs = Dragndrop.observedAttributes;
  94. 	for (let i = 0; i < obs.length; i++) {
  95. 	    if (newval) {
  96. 		this.properties[obs[i]] = newval;
  97. 	    }
  98. 	}
  99. 	
  100. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  101. 	try {
  102. 	    switch(attr) 
  103. 	    {
  104. 		case "header":
  105. 		//this.querySelector("h1").innerHTML = newval;
  106. 		break;
  107. 		
  108. 		default:
  109. 		break;
  110. 	    }
  111. 	} catch(e) {
  112. 	    wc.warn(e.name + ' > ' + e.message);
  113. 	}
  115.         wc.groupEnd();
  116.     };
  118.     /**
  119.      * Stores DOM elements of interest for future use
  120.      * @private
  121.      * @_fetchElements
  122.      */
  123.     _fetchElements() {
  124. 	wc.group("Dragndrop._fetchElements");
  125. 	
  126. 	this.dom = this.dom || [];
  127. 	this.dom.content = this.innerHTML;
  129. 	wc.groupEnd();
  130.     };
  132.     /**
  133.      * Component attributes are _fetched and defaults are set if undefined
  134.      * @private
  135.      * @_fetchAttributes
  136.      */
  137.     _fetchAttributes() {
  138. 	wc.group("Dragndrop._fetchAttributes");
  139. 	
  140. 	this.properties = {
  141. 	    uparam	: "",
  142. 	    cname	: "Dragndrop",
  143. 	    author	: "Mel M. Heravi, Ph.D.",
  144. 	    version	: "1.0"
  145. 	};
  146. 	
  147. 	// SAVE WIDGET SPECIFIC PROPERTIES
  148. 	this.propertiesW = [];
  149. 	
  150. 	// SAVE ALL OTHER PROPERTIES
  151. 	let attrs = wc.getAttributes(this)
  152. 	
  153.  	for (var key in attrs) {
  154. 	    let attr = this.getAttribute(key) || this.properties.key;
  155. 	    this.properties[key]  = this.getAttribute(key);
  156. 	    this.propertiesW[key] = this.getAttribute(key);
  157. 	    wc.log(key + ": " + attrs[key]);
  158. 	}
  160. 	// SET ALL INITIAL ATTRIBUTES
  161.  	for (var key in this.properties) {
  162. 	    switch(key) 
  163. 	    {
  164. 		case "header":
  165. 		break;
  166. 		
  167. 		default:
  168. 		break;
  169. 	    }
  170. 	}
  172. 	wc.log("ATTRIBUTES: ", this.properties);
  174. 	wc.groupEnd();
  175.     };
  177.     /**
  178.      * configure the instance object and artifacts
  179.      * @configure
  180.      * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  181.      */
  182.     configure(data) {
  183. 	wc.group("Dragndrop.configure:", data);
  185. 	// IF JSON VARIABLE (data) IS PROVIDED
  186. 	if (data) {
  187. 	    this._process(data);
  188. 	} else {
  189. 	    let self = this;
  191. 	    $.getJSON(this.properties.cfg, function(data) {
  192. 		self._process(data);
  193. 	    }).fail(function(jqXHR, textStatus, errorThrown) {
  194. 		alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  195. 	    });
  196. 	}
  198. 	wc.groupEnd();
  199.     };
  201.     /**
  202.      * _process the instance object and artifacts
  203.      * @private
  204.      * @_process
  205.      */
  206.     _process(data) {
  207. 	wc.group("Dragndrop._process:", data);
  208. 	
  209. 	// DO WHATEVER WITH THE DATA
  210. 	
  211. 	wc.groupEnd();
  212.     };
  214.     /**
  215.      * Initialize component
  216.      * @private
  217.      * @_initialize
  218.      */
  219.     _initialize() {
  220. 	wc.group("Dragndrop._initialize:", this.id);
  222. 	// FETCH ALL INTERESTING ELEMENTS
  223. 	this._fetchElements();
  225. 	// FETCH ALL ATTRIBUTES
  226. 	this._fetchAttributes();
  227. 	
  228. 	wc.groupEnd();
  229.     };
  231.     /**
  232.      * Save data for analytics and final wrap up
  233.      * @private
  234.      * @_finalize
  235.      */
  236.     _finalize() {
  237. 	wc.group("Dragndrop._finalize:", this.id);
  239. 	this.classList.add("wc");
  241. 	// ADD ANALYTICS HERE
  242. 	wc.setStats(this, this.properties.cname, this.properties.version);
  243. 	
  244. 	// SHOW IT NOW (NO FLICKERS) 
  245. 	this.style.visibility = "visible";
  247. 	wc.groupEnd();
  248.     };
  250.     /**
  251.      * Invoked When component is removed. Usually with a .remove() function call
  252.      * @disconnectedCallback
  253.      */
  254.     disconnectedCallback() {
  255.         wc.group("Dragndrop.disconnectedCallback")
  257. 	ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  259.         wc.groupEnd();
  260.     };
  262.     /**
  263.      * Destroy the instance object and artifacts
  264.      * @destroy
  265.      */
  266.     destroy() {
  267. 	wc.group("Dragndrop.destroy");
  269. 	// FREE ALL MEMORY
  270. 	// you should delete all created objects here
  271. 	
  272. 	// FREE POINTER
  273. 	delete this;
  274. 	
  275. 	// REMOVE ITEM FROM DOM
  276. 	this.parentNode.removeChild(this);
  278. 	ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  280. 	wc.groupEnd();
  281.     };
  283.     /**
  284.      * @_publish
  285.      */
  286.     _publish(type) {
  287. 	wc.group("Dragndrop._publish:", type);
  289. 	wc.publish("wc-dragndrop", {
  290. 	    time: new Date().getTime(),
  291. 	    action: type,
  292. 	    id: this.id
  293. 	});
  295. 	wc.groupEnd();
  296. 	return true;
  297.     };
  299.     /**
  300.      * @_request
  301.      */
  302.     _request(e) {
  303. 	wc.group("Dragndrop._request:", this.id, JSON.stringify(e.detail));
  304. 	
  305. 	switch(e.detail.request) 
  306. 	{
  307. 	    case "label":
  308. 	    let h1 = this.querySelector("h1");
  309. 	    h1.innerHTML = e.detail.str;
  310. 	    this._publish("labelChanged");
  311. 	    break;
  313. 	    default:
  314. 	    alert("DO NOT HAVE SUCH REQUEST: " + e.detail.request);
  315. 	    break;
  316. 	}
  318. 	wc.groupEnd();
  319. 	return true;
  320.     };
  322.     /**
  323.      * @test
  324.      */
  325.     static test(what) {
  326. 	wc.group("Dragndrop.test:", what);
  328. 	switch(what) 
  329. 	{
  330. 	    case "label":
  331. 	    wc.publish("my-dragndrop", {time:new Date().getTime(), requestor:"my-dragndrop", request:"label", str:"Hello Mel !"})
  332. 	    break;
  333. 	}
  334. 	
  335. 	wc.groupEnd();
  336. 	return true;
  337.     }
  338. }
  340. window.customElements.define('wc-dragndrop', Dragndrop);