Source: textarea.js

  1. /**
  2.  * Textarea Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/textarea.png width=50% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/textarea.html">DEMO</a>
  5.  */
  6. class Textarea extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Textarea.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("Textarea.observedAttributes");
  22. 	this.observables = ["columns"];
  24.         wc.groupEnd();
  25.         return this.observables;
  26.     };
  28.     /**
  29.      * This function is called when this is attached to DOM
  30.      * @connectedCallback. 
  31.      */
  32.     connectedCallback() {
  33.         wc.group("Textarea.connectedCallback")
  34. 	
  35. 	let self = this;
  37. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  38. 	this._initialize();
  40. 	let cols = this.properties.columns.split(',');
  42. 	let id  = this.id;
  43. 	let c1  = "col-md-" + cols[0];
  44. 	let c2  = "col-md-" + cols[1];
  46. 	let lbl = this.properties.label || "";
  47. 	let val = this.properties.value || "";
  48. 	let hlp = this.properties.help  || "";
  49. 	let cls = this.properties.class || "";
  51. 	let name = $(this).attr("name");
  52. 	if (typeof name === "undefined") {name = id;}
  54. 	// REPLACE CONTENT IF NECESSARY WITH NEW STUFF
  55. 	this.innerHTML = `
  56. 	    <div class="form-group has-feedback clearfix">
  57. 		<div class="row">
  58. 		    <div class="${c1}">
  59. 		        <label id="${this.id}-label" for="${this.id}-label" class="btn-control col-form-label">${lbl}</label>
  60. 		    </div>
  61. 		    <div class="${c2}">
  62. 		        <textarea name="${this.id}" name="${name}"class="form-control ${cls}" id="${this.id}-input" aria-describedby="${this.id}-help" rows="3"></textarea>
  63. 		        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
  64. 		        <small id='${this.id}-help' class='form-text help-block with-errors text-muted'>${hlp}</small>
  65. 		    </div>
  66. 		</div>
  67. 	    </div>`
  68. 	
  69. 	// TRANSFER ALL ATTRIBUTES NOW (below is an example)
  70. 	// -------------------------------------------------
  71. 	let widget = this.querySelector("textarea");
  73.  	for (var key in this.propertiesW) {
  74. 	    if (key != "class" && key != "id") {
  75. 		this.removeAttribute(key);
  76. 		widget.setAttribute(key, this.properties[key]);
  77. 	    }
  78. 	}	
  80. 	// ADD STATS AND OTHER FINAL STUFF
  81. 	this._finalize();
  83. 	// PUBLISH INTERESTING EVENTS
  84. 	this._publish();
  85. 	
  86.         wc.groupEnd();
  87.     };
  89.     /**
  90.      * Publish all events
  91.      * @private
  92.      * @_publish
  93.      */
  94.     _publish() {
  95. 	wc.group("Textarea.publish");
  97. 	let widget = this.querySelector("textarea");
  99. 	widget.addEventListener("change", e => {
  100. 	    let id = $(widget).attr("id");
  102. 	    this._change(id);
  103. 	});
  104. 	
  105. 	wc.groupEnd();
  106. 	return true;
  107.     }
  109.     /**
  110.      * A sample callback usage function - see connectedCallback()
  111.      * @private
  112.      * @_onClick
  113.      */
  114.     _change(id) {
  115. 	wc.group("Textarea._change:", id);
  117. 	let val = $("#" + id).val();
  119. 	wc.publish("wc-text", {
  120. 	    time: new Date().getTime(),
  121. 	    action: "change",
  122. 	    id: id,
  123. 	    val: val,
  124. 	    uparam: this.properties.uparam
  125. 	});
  127. 	wc.groupEnd();
  128.     };
  130.     /**
  131.      * Invoked When component is removed. Usually with a .remove() function call
  132.      * @disconnectedCallback
  133.      */
  134.     disconnectedCallback() {
  135.         wc.group("Textarea.disconnectedCallback")
  137. 	/* CLEAN UP NOW */
  139.         wc.groupEnd();
  140.     };
  142.     /**
  143.      * Called with .setAttribute(...) function call
  144.      * @attributeChangedCallback
  145.      */
  146.     attributeChangedCallback(attr, oldval, newval) {
  147.         wc.group("Textarea.attributeChangedCallback:", attr, oldval, newval);
  149. 	this.properties = this.properties || [];
  151. 	let obs = Textarea.observedAttributes;
  153. 	for (let i = 0; i < obs.length; i++) {
  154. 	    this.properties[obs[i]] = newval;
  155. 	    // YOUR CODE FOR CHANGES GO HERE 
  156. 	}
  157. 	
  158.         wc.groupEnd();
  159.     };
  161.     /**
  162.      * Stores DOM elements of interest for future use
  163.      * @private
  164.      * @_fetchElements
  165.      */
  166.     _fetchElements() {
  167. 	wc.group("Textarea._fetchElements");
  168. 	
  169. 	this.dom = this.dom || [];
  170. 	this.dom.content = this.innerHTML;
  172. 	wc.groupEnd();
  173.     };
  175.     /**
  176.      * Component attributes are _fetched and defaults are set if undefined
  177.      * @private
  178.      * @_fetchAttributes
  179.      * @param {string} [modal=true] mode for our textarea
  180.      */
  181.     _fetchAttributes() {
  182. 	wc.group("Textarea._fetchAttributes");
  183. 	
  184. 	this.properties = {
  185. 	    cname      : "Textarea",
  186. 	    author     : "Mel Heravi",
  187. 	    version    : "1.0",
  188. 	    columns    : "12,12"
  189. 	};
  190. 	
  191. 	// SAVE WIDGET SPECIFIC PROPERTIES
  192. 	this.propertiesW = [];
  194. 	// SAVE ALL OTHER PROPERTIES
  195. 	let attrs = wc.getAttributes(this)
  196. 	
  197.  	for (var key in attrs) {
  198. 	    this.properties[key]  = this.getAttribute(key);
  199. 	    this.propertiesW[key] = this.getAttribute(key);
  200. 	    wc.log(key + ": " + attrs[key]);
  201. 	}
  203. 	wc.log("attributes: ", this.properties);
  205. 	// PROCESS ALL PROPERTIES (example below);
  207. 	wc.groupEnd();
  208.     };
  210.     /**
  211.      * A sample callback usage function - see connectedCallback()
  212.      * @private
  213.      * @_onClick
  214.      */
  215.     _onClick() {
  216. 	wc.group("Textarea._onClick:", this.id);
  218. 	wc.publish("wc-textarea", {
  219. 	    action: "click",
  220. 	    id: this.id,
  221. 	    uparam: this.properties.uparam
  222. 	});
  224. 	wc.groupEnd();
  225.     };
  227.     /**
  228.      * Destroy the instance object and artifacts
  229.      * @private
  230.      * @_destroy
  231.      */
  232.     destroy() {
  233. 	wc.group("Textarea.destroy:", this.id);
  235. 	// FREE ALL MEMORY
  236. 	// you should delete all created objects here
  238. 	// FREE POINTER
  239. 	delete this;
  241. 	// REMOVE ITEM FROM DOM
  242. 	this.parentNode.removeChild(this);
  244. 	wc.groupEnd();
  245.     };
  247.     /**
  248.      * configure the instance object and artifacts
  249.      * @private
  250.      * @_configure
  251.      */
  252.     configure(options) {
  253. 	wc.group("Textarea.configure:", JSON.stringify(options));
  255. 	// PROCESS ALL OPTIONS HERE
  257. 	wc.groupEnd();
  258.     };
  260.     /**
  261.      * SAVE DATA FOR ANALYTICS
  262.      * @private
  263.      * @_initialize
  264.      */
  265.     _initialize() {
  266. 	wc.group("Textarea._initialize:", this.id);
  268. 	// FETCH ALL INTERESTING ELEMENTS
  269. 	this._fetchElements();
  271. 	// FETCH ALL ATTRIBUTES
  272. 	this._fetchAttributes();
  273. 	
  274. 	wc.groupEnd();
  275.     };
  277.     /**
  278.      * SAVE DATA FOR ANALYTICS
  279.      * @private
  280.      * @_finalize
  281.      */
  282.     _finalize() {
  283. 	wc.group("Textarea._finalize:", this.id);
  285. 	this.classList.add("wc");
  287. 	// ADD ANALYTICS HERE
  288. 	wc.setStats(this, this.properties.cname, this.properties.version);
  289. 	
  290. 	// SHOW IT NOW (NO FLICKERS) 
  291. 	this.style.visibility = "visible";
  293. 	wc.groupEnd();
  294.     };
  295. }
  297. window.customElements.define('wc-textarea', Textarea);