Source: search.js

  1. /**
  2. * Search Component<BR>
  3. * <BR><BR><img src=/tk/lib/components/w/img/search.png width=30% style="border:1px lime dashed;padding:20px">
  4. * <BR><BR><a href="/tk/lib/components/w/html/search.html">DEMO</a>
  5. */
  6. class Search extends HTMLElement {
  7. constructor() {
  8. wc.group("Search.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("Search.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("Search.connectedCallback")
  28. // ADD A RANDOM ID IF NONE EXIST
  29. if (!this.id) {
  30. this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
  31. }
  32. // GET PROPERTIES AND INTERESTING ELEMENTS
  33. this._initialize();
  34. // ADD COMPONENT MARKTOP
  35. this.innerHTML = this._template()
  36. let text = this.querySelector("[type=text]")
  37. wc.enterKey($(text), () => {
  38. let val = $(text).val();
  39. if (val.trim() != "") {
  40. wc.publish("wc-search", {
  41. time: new Date().getTime(),
  42. action: "entered",
  43. id: this.id,
  44. val: val
  45. });
  46. }
  47. });
  48. let ddi = this.querySelectorAll('.dropdown-item');
  49. $(ddi).on('click', function(){
  50. var btnObj = $(this).parent().siblings('button,.nav-link');
  51. $(btnObj).text($(this).text());
  52. $(btnObj).val($(this).text());
  53. });
  54. // ADD STATS AND OTHER FINAL STUFF
  55. this._finalize();
  56. wc.groupEnd();
  57. };
  58. /**
  59. * Initial Markup
  60. * @private
  61. * @_template
  62. */
  63. _template() {
  64. wc.group("Search.template");
  65. var temp = `
  66. <section class="border">
  67. <div class="input-group md-form form-sm form-2 pl-0">
  68. ${this.dom.content}
  69. <input class="form-control my-0 py-1 amber-border" type="text" aria-label="Search" placeholder="${this.properties.placeholder}">
  70. <div class="input-group-append">
  71. <span class="input-group-text" id="basic-text1"><i class="fa fa-search text-grey" aria-hidden="true"></i></span>
  72. </div>
  73. </div>
  74. </section>`
  75. wc.groupEnd();
  76. return temp;
  77. };
  78. /**
  79. * Called with .setAttribute(...) function call
  80. * @attributeChangedCallback
  81. */
  82. attributeChangedCallback(attr, oldval, newval) {
  83. wc.group("Search.attributeChangedCallback:", attr, oldval, newval);
  84. this.properties = this.properties || [];
  85. let obs = Search.observedAttributes;
  86. for (let i = 0; i < obs.length; i++) {
  87. if (newval) {
  88. this.properties[obs[i]] = newval;
  89. }
  90. }
  91. // YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  92. try {
  93. switch(attr)
  94. {
  95. case "header":
  96. //this.querySelector("h1").innerHTML = newval;
  97. break;
  98. default:
  99. break;
  100. }
  101. } catch(e) {
  102. wc.warn(e.name + ' > ' + e.message);
  103. }
  104. wc.groupEnd();
  105. };
  106. /**
  107. * Stores DOM elements of interest for future use
  108. * @private
  109. * @_fetchElements
  110. */
  111. _fetchElements() {
  112. wc.group("Search._fetchElements");
  113. this.dom = this.dom || [];
  114. this.dom.content = this.innerHTML;
  115. wc.groupEnd();
  116. };
  117. /**
  118. * Component attributes are _fetched and defaults are set if undefined
  119. * @private
  120. * @_fetchAttributes
  121. */
  122. _fetchAttributes() {
  123. wc.group("Search._fetchAttributes");
  124. this.properties = {
  125. uparam : "",
  126. cname : "Search",
  127. author : "Mel M. Heravi",
  128. version : "1.0",
  129. placeholder : "Search..."
  130. };
  131. // SAVE WIDGET SPECIFIC PROPERTIES
  132. this.propertiesW = [];
  133. // SAVE ALL OTHER PROPERTIES
  134. let attrs = wc.getAttributes(this)
  135. for (var key in attrs) {
  136. let attr = this.getAttribute(key) || this.properties.key;
  137. this.properties[key] = this.getAttribute(key);
  138. this.propertiesW[key] = this.getAttribute(key);
  139. wc.log(key + ": " + attrs[key]);
  140. }
  141. // SET ALL INITIAL ATTRIBUTES
  142. for (var key in this.properties) {
  143. switch(key)
  144. {
  145. case "header":
  146. break;
  147. default:
  148. break;
  149. }
  150. }
  151. wc.log("ATTRIBUTES: ", this.properties);
  152. wc.groupEnd();
  153. };
  154. /**
  155. * configure the instance object and artifacts
  156. * @configure
  157. * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  158. */
  159. configure(data) {
  160. wc.group("Search.configure:", data);
  161. // IF JSON VARIABLE (data) IS PROVIDED
  162. if (data) {
  163. this._process(data);
  164. } else {
  165. let self = this;
  166. $.getJSON(this.properties.cfg, function(data) {
  167. self._process(data);
  168. }).fail(function(jqXHR, textStatus, errorThrown) {
  169. alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  170. });
  171. }
  172. wc.groupEnd();
  173. };
  174. /**
  175. * _process the instance object and artifacts
  176. * @private
  177. * @_process
  178. */
  179. _process(data) {
  180. wc.group("Search._process:", data);
  181. // DO WHATEVER WITH THE DATA
  182. wc.groupEnd();
  183. };
  184. /**
  185. * Initialize component
  186. * @private
  187. * @_initialize
  188. */
  189. _initialize() {
  190. wc.group("Search._initialize:", this.id);
  191. // FETCH ALL INTERESTING ELEMENTS
  192. this._fetchElements();
  193. // FETCH ALL ATTRIBUTES
  194. this._fetchAttributes();
  195. wc.groupEnd();
  196. };
  197. /**
  198. * Save data for analytics and final wrap up
  199. * @private
  200. * @_finalize
  201. */
  202. _finalize() {
  203. wc.group("Search._finalize:", this.id);
  204. this.classList.add("wc");
  205. // ADD ANALYTICS HERE
  206. wc.setStats(this, this.properties.cname, this.properties.version);
  207. // SHOW IT NOW (NO FLICKERS)
  208. this.style.visibility = "visible";
  209. wc.groupEnd();
  210. };
  211. /**
  212. * Invoked When component is removed. Usually with a .remove() function call
  213. * @disconnectedCallback
  214. */
  215. disconnectedCallback() {
  216. wc.group("Search.disconnectedCallback")
  217. // FREE MEMORY AND CLEANUP
  218. wc.groupEnd();
  219. };
  220. /**
  221. * Destroy the instance object and artifacts
  222. * @destroy
  223. */
  224. destroy() {
  225. wc.group("Search.destroy");
  226. // FREE ALL MEMORY
  227. // you should delete all created objects here
  228. // FREE POINTER
  229. delete this;
  230. // REMOVE ITEM FROM DOM
  231. this.parentNode.removeChild(this);
  232. wc.groupEnd();
  233. };
  234. }
  235. window.customElements.define('wc-search', Search);