Source: select.js

  1. /**
  2.  * Select Dropdown Component
  3.  * <BR><BR><img src=/tk/lib/components/w/img/select.png width=70% style="border:1px lime dashed";>
  4.  * <BR><BR><a href="/tk/lib/components/w/html/select.html">DEMO</a>
  5.  */
  6. class Select extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Select.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("Select.observedAttributes");
  22. 	this.observables = ["searchable"];
  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("Select.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 hlp = this.properties.help  || "";
  49. 	let name = $(this).attr("name");
  50. 	if (typeof name === "undefined") {name = id;}
  52. 	let tmp = id.toCamelCase()
  54. 	// REPLACE CONTENT IF NECESSARY WITH NEW STUFF
  55. 	this.innerHTML = `
  56. 		<div class="form-group 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.  		            <select name="${name}" class="form-control ${this.properties.class}" id="${tmp}-input">
  63. 			    ${this.dom.content}>
  64. 			    </select>
  66. 			    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
  67. 			    <small id='${this.id}-help' class='help-block with-errors text-muted'>${hlp}</small>
  68.                         </div>
  69.                     </div>
  70. 		</div>`
  72. 	// TRANSFER ALL ATTRIBUTES NOW (below is an example)
  73. 	let widget = this.querySelector("select");
  75.  	for (var key in this.propertiesW) {
  76. 	    if (key != "class" && key != "id") {
  77. 		this.removeAttribute(key);
  78. 		widget.setAttribute(key, this.properties[key]);
  79. 	    }
  80. 	}	
  82. 	this.select = this.querySelector("select");
  84. 	if(this.properties.searchable == "true") {
  85. 	    var search = 1
  86. 	} else {
  87. 	    var search = Infinity
  88. 	}
  90. 	$(this.select).select2({
  91. 	    minimumResultsForSearch: search, // HIDE SEARCH
  92. 	    theme: 'bootstrap4',
  93. 	    width: 'style',
  94. 	    placeholder: $(this).attr('placeholder'),
  95. 	    allowClear: false,
  96. 	});
  98. 	//containerCssClass: "wc-select2-container-class",
  99. 	//dropdownCssClass: "wc-select2-dropdown-class"
  101. 	// USE THIS CLASS TO CUSTOMIZE
  102. 	let s2 = $(this.select).next(".select2")
  103. 	$(s2).addClass("wc-select2-custom");
  105. 	// ADD STATS AND OTHER FINAL STUFF
  106. 	this._finalize();
  108. 	// PUBLISH INTERESTING EVENTS
  109. 	this._publish();
  111. 	// SHOW IT NOW (NO FLICKERS) 
  112. 	this.style.visibility = "visible";
  114.         wc.groupEnd();
  115.     };
  117.     /**
  118.      * Publish all events
  119.      * @private
  120.      * @_publish
  121.      */
  122.     _publish() {
  123. 	wc.group("Select._publish");
  125. 	let widget = this.querySelector("select");
  126. 	let id = $(widget).attr("id");
  128. 	$("#" + id).on("change", e => {
  129. 	    this._change(id)
  130. 	});
  132. 	// NOT WORKING
  133. 	// widget.addEventListener("change", e => {
  134. 	//     this._change(id);
  135. 	// });
  137. 	wc.groupEnd();
  138. 	return true;
  139.     }
  141.     /**
  142.      * A sample callback usage function - see connectedCallback()
  143.      * @private
  144.      * @_onChange
  145.      */
  146.     _change(id) {
  147. 	wc.group("Select._change:", id);
  149. 	let val = $("#" + id).val();
  151. 	wc.publish("wc-select", {
  152. 	    time: new Date().getTime(),
  153. 	    action: "change",
  154. 	    id: id,
  155. 	    val: val,
  156. 	    uparam: this.properties.uparam
  157. 	});
  159. 	wc.groupEnd();
  160.     };
  162.     /**
  163.      * Invoked When component is removed. Usually with a .remove() function call
  164.      * @disconnectedCallback
  165.      */
  166.     disconnectedCallback() {
  167.         wc.group("Select.disconnectedCallback")
  169. 	/* CLEAN UP NOW */
  171.         wc.groupEnd();
  172.     };
  174.     /**
  175.      * Called with .setAttribute(...) function call
  176.      * @attributeChangedCallback
  177.      */
  178.     attributeChangedCallback(attr, oldval, newval) {
  179.         wc.group("Select.attributeChangedCallback:", attr, oldval, newval);
  181. 	this.properties = this.properties || [];
  183. 	let obs = Select.observedAttributes;
  185. 	for (let i = 0; i < obs.length; i++) {
  186. 	    if (newval) {
  187. 		this.properties[obs[i]] = newval;
  188. 		// YOUR CODE FOR CHANGES GO HERE
  189. 	    }
  190. 	}
  191. 	
  192. 	wc.log("=====", this.properties);
  194.         wc.groupEnd();
  195.     };
  197.     /**
  198.      * Stores DOM elements of interest for future use
  199.      * @private
  200.      * @_fetchElements
  201.      */
  202.     _fetchElements() {
  203. 	wc.group("Select._fetchElements");
  204. 	
  205. 	this.dom = this.dom || [];
  206. 	this.dom.content = this.innerHTML;
  208. 	wc.groupEnd();
  209.     };
  211.     /**
  212.      * Component attributes are _fetched and defaults are set if undefined
  213.      * @private
  214.      * @_fetchAttributes
  215.      * @param {string} [searchable=false]
  216.      */
  217.     _fetchAttributes() {
  218. 	wc.group("Select._fetchAttributes");
  219. 	
  220. 	this.properties = {
  221. 	    "cname"	 : "Select",
  222. 	    "author"     : "Mel Heravi",
  223. 	    "version"    : "1.0",
  224. 	    "columns"    : "12,12",
  225. 	    "searchable" : "false"
  226. 	};
  227. 	
  228. 	// SAVE WIDGET SPECIFIC PROPERTIES
  229. 	this.propertiesW = [];
  231. 	// SAVE ALL OTHER PROPERTIES
  232. 	let attrs = wc.getAttributes(this)
  233. 	
  234.  	for (var key in attrs) {
  235. 	    this.properties[key]  = this.getAttribute(key);
  236. 	    this.propertiesW[key] = this.getAttribute(key);
  237. 	    wc.log(key + ": " + attrs[key]);
  238. 	}
  240. 	this.properties.placeholder = this.properties.placeholder || "";
  242. 	wc.log("---------", this.properties);
  244. 	wc.groupEnd();
  245.     };
  247.     /**
  248.      * Destroy the instance object and artifacts
  249.      * @private
  250.      * @_destroy
  251.      */
  252.     destroy() {
  253. 	wc.group("Select.destroy:", this.id);
  255. 	// FREE POINTER
  256. 	delete this;
  258. 	// REMOVE ITEM FROM DOM
  259. 	this.parentNode.removeChild(this);
  261. 	wc.groupEnd();
  262.     };
  264.     /**
  265.      * SAVE DATA FOR ANALYTICS
  266.      * @private
  267.      * @_initialize
  268.      */
  269.     _initialize() {
  270. 	wc.group("Select._initialize:", this.id);
  272. 	// FETCH ALL INTERESTING ELEMENTS
  273. 	this._fetchElements();
  275. 	// FETCH ALL ATTRIBUTES
  276. 	this._fetchAttributes();
  277. 	
  278. 	wc.groupEnd();
  279.     };
  281.     /**
  282.      * SAVE DATA FOR ANALYTICS
  283.      * @private
  284.      * @_finalize
  285.      */
  286.     _finalize() {
  287. 	wc.group("Select._finalize:", this.id);
  289. 	this.classList.add("wc");
  291. 	// ADD ANALYTICS HERE
  292. 	wc.setStats(this, this.properties.cname, this.properties.version);
  293. 	
  294. 	wc.groupEnd();
  295.     };
  297.     /**
  298.      * FOR TESTING PURPOSES
  299.      * @test
  300.      */
  301.     static test() {
  302. 	wc.group("Select.test");
  304. 	wc.log("testing results will be printed here...");
  306. 	wc.groupEnd();
  307. 	return true;
  308.     }
  310.     /**
  311.      * configure the instance object and artifacts
  312.      * @configure
  313.      * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  314.      */
  315.     configure(data) {
  316. 	wc.group("Select.configure:", data);
  318. 	// IF JSON VARIABLE (data) IS PROVIDED
  319. 	if (data) {
  320. 	    this._process(data);
  321. 	} else {
  322. 	    let self = this;
  324. 	    $.getJSON(this.properties.cfg, function(data) {
  325. 		self._process(data);
  326. 	    }).fail(function(jqXHR, textStatus, errorThrown) {
  327. 		alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  328. 	    });
  329. 	}
  331. 	wc.groupEnd();
  332.     };
  334.     /**
  335.      * _process the instance object and artifacts
  336.      * @private
  337.      * @_process
  338.      */
  339.     _process(data) {
  340. 	wc.group("Select._process:", data);
  341. 	
  342. 	let w = this.querySelector("select");
  344. 	for (var i = 0; i < data.length; i++) {
  345. 	    var opt = document.createElement('option');
  346. 	    opt.value = data[i].value;
  347. 	    opt.innerHTML = data[i].name;
  348. 	    w.appendChild(opt);
  349. 	}
  351. 	wc.groupEnd();
  352.     };
  353. }
  355. window.customElements.define('wc-select', Select);
  357. // SO I CAN CALL THE STATIC METHOD GLOBALLY
  358. window.Select = Select;