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. 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("Textarea.observedAttributes");
  18. this.observables = ["columns"];
  19. wc.groupEnd();
  20. return this.observables;
  21. };
  22. /**
  23. * This function is called when this is attached to DOM
  24. * @connectedCallback.
  25. */
  26. connectedCallback() {
  27. wc.group("Textarea.connectedCallback")
  28. let self = this;
  29. // GET PROPERTIES AND INTERESTING ELEMENTS
  30. this._initialize();
  31. let cols = this.properties.columns.split(',');
  32. let id = this.id;
  33. let c1 = "col-md-" + cols[0];
  34. let c2 = "col-md-" + cols[1];
  35. let lbl = this.properties.label || "";
  36. let val = this.properties.value || "";
  37. let hlp = this.properties.help || "";
  38. let cls = this.properties.class || "";
  39. let name = $(this).attr("name");
  40. if (typeof name === "undefined") {name = id;}
  41. // REPLACE CONTENT IF NECESSARY WITH NEW STUFF
  42. this.innerHTML = `
  43. <div class="form-group has-feedback clearfix">
  44. <div class="row">
  45. <div class="${c1}">
  46. <label id="${this.id}-label" for="${this.id}-label" class="btn-control col-form-label">${lbl}</label>
  47. </div>
  48. <div class="${c2}">
  49. <textarea name="${this.id}" name="${name}"class="form-control ${cls}" id="${this.id}-input" aria-describedby="${this.id}-help" rows="3"></textarea>
  50. <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
  51. <small id='${this.id}-help' class='form-text help-block with-errors text-muted'>${hlp}</small>
  52. </div>
  53. </div>
  54. </div>`
  55. // TRANSFER ALL ATTRIBUTES NOW (below is an example)
  56. // -------------------------------------------------
  57. let widget = this.querySelector("textarea");
  58. for (var key in this.propertiesW) {
  59. if (key != "class" && key != "id") {
  60. this.removeAttribute(key);
  61. widget.setAttribute(key, this.properties[key]);
  62. }
  63. }
  64. // ADD STATS AND OTHER FINAL STUFF
  65. this._finalize();
  66. // PUBLISH INTERESTING EVENTS
  67. this._publish();
  68. wc.groupEnd();
  69. };
  70. /**
  71. * Publish all events
  72. * @private
  73. * @_publish
  74. */
  75. _publish() {
  76. wc.group("Textarea.publish");
  77. let widget = this.querySelector("textarea");
  78. widget.addEventListener("change", e => {
  79. let id = $(widget).attr("id");
  80. this._change(id);
  81. });
  82. wc.groupEnd();
  83. return true;
  84. }
  85. /**
  86. * A sample callback usage function - see connectedCallback()
  87. * @private
  88. * @_onClick
  89. */
  90. _change(id) {
  91. wc.group("Textarea._change:", id);
  92. let val = $("#" + id).val();
  93. wc.publish("wc-text", {
  94. time: new Date().getTime(),
  95. action: "change",
  96. id: id,
  97. val: val,
  98. uparam: this.properties.uparam
  99. });
  100. wc.groupEnd();
  101. };
  102. /**
  103. * Invoked When component is removed. Usually with a .remove() function call
  104. * @disconnectedCallback
  105. */
  106. disconnectedCallback() {
  107. wc.group("Textarea.disconnectedCallback")
  108. /* CLEAN UP NOW */
  109. wc.groupEnd();
  110. };
  111. /**
  112. * Called with .setAttribute(...) function call
  113. * @attributeChangedCallback
  114. */
  115. attributeChangedCallback(attr, oldval, newval) {
  116. wc.group("Textarea.attributeChangedCallback:", attr, oldval, newval);
  117. this.properties = this.properties || [];
  118. let obs = Textarea.observedAttributes;
  119. for (let i = 0; i < obs.length; i++) {
  120. this.properties[obs[i]] = newval;
  121. // YOUR CODE FOR CHANGES GO HERE
  122. }
  123. wc.groupEnd();
  124. };
  125. /**
  126. * Stores DOM elements of interest for future use
  127. * @private
  128. * @_fetchElements
  129. */
  130. _fetchElements() {
  131. wc.group("Textarea._fetchElements");
  132. this.dom = this.dom || [];
  133. this.dom.content = this.innerHTML;
  134. wc.groupEnd();
  135. };
  136. /**
  137. * Component attributes are _fetched and defaults are set if undefined
  138. * @private
  139. * @_fetchAttributes
  140. * @param {string} [modal=true] mode for our textarea
  141. */
  142. _fetchAttributes() {
  143. wc.group("Textarea._fetchAttributes");
  144. this.properties = {
  145. cname : "Textarea",
  146. author : "Mel Heravi",
  147. version : "1.0",
  148. columns : "12,12"
  149. };
  150. // SAVE WIDGET SPECIFIC PROPERTIES
  151. this.propertiesW = [];
  152. // SAVE ALL OTHER PROPERTIES
  153. let attrs = wc.getAttributes(this)
  154. for (var key in attrs) {
  155. this.properties[key] = this.getAttribute(key);
  156. this.propertiesW[key] = this.getAttribute(key);
  157. wc.log(key + ": " + attrs[key]);
  158. }
  159. wc.log("attributes: ", this.properties);
  160. // PROCESS ALL PROPERTIES (example below);
  161. wc.groupEnd();
  162. };
  163. /**
  164. * A sample callback usage function - see connectedCallback()
  165. * @private
  166. * @_onClick
  167. */
  168. _onClick() {
  169. wc.group("Textarea._onClick:", this.id);
  170. wc.publish("wc-textarea", {
  171. action: "click",
  172. id: this.id,
  173. uparam: this.properties.uparam
  174. });
  175. wc.groupEnd();
  176. };
  177. /**
  178. * Destroy the instance object and artifacts
  179. * @private
  180. * @_destroy
  181. */
  182. destroy() {
  183. wc.group("Textarea.destroy:", this.id);
  184. // FREE ALL MEMORY
  185. // you should delete all created objects here
  186. // FREE POINTER
  187. delete this;
  188. // REMOVE ITEM FROM DOM
  189. this.parentNode.removeChild(this);
  190. wc.groupEnd();
  191. };
  192. /**
  193. * configure the instance object and artifacts
  194. * @private
  195. * @_configure
  196. */
  197. configure(options) {
  198. wc.group("Textarea.configure:", JSON.stringify(options));
  199. // PROCESS ALL OPTIONS HERE
  200. wc.groupEnd();
  201. };
  202. /**
  203. * SAVE DATA FOR ANALYTICS
  204. * @private
  205. * @_initialize
  206. */
  207. _initialize() {
  208. wc.group("Textarea._initialize:", this.id);
  209. // FETCH ALL INTERESTING ELEMENTS
  210. this._fetchElements();
  211. // FETCH ALL ATTRIBUTES
  212. this._fetchAttributes();
  213. wc.groupEnd();
  214. };
  215. /**
  216. * SAVE DATA FOR ANALYTICS
  217. * @private
  218. * @_finalize
  219. */
  220. _finalize() {
  221. wc.group("Textarea._finalize:", this.id);
  222. this.classList.add("wc");
  223. // ADD ANALYTICS HERE
  224. wc.setStats(this, this.properties.cname, this.properties.version);
  225. // SHOW IT NOW (NO FLICKERS)
  226. this.style.visibility = "visible";
  227. wc.groupEnd();
  228. };
  229. }
  230. window.customElements.define('wc-textarea', Textarea);