/**
* Select Dropdown Component
* <BR><BR><img src=/tk/lib/components/w/img/select.png width=70% style="border:1px lime dashed";>
* <BR><BR><a href="/tk/lib/components/w/html/select.html">DEMO</a>
*/
class Select extends HTMLElement {
constructor() {
wc.group("Select.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("Select.observedAttributes");
this.observables = ["searchable"];
wc.groupEnd();
return this.observables;
};
/**
* This function is called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("Select.connectedCallback")
let self = this;
// GET PROPERTIES AND INTERESTING ELEMENTS
this._initialize();
let cols = this.properties.columns.split(',');
let id = this.id;
let c1 = "col-md-" + cols[0];
let c2 = "col-md-" + cols[1];
let lbl = this.properties.label || "";
let hlp = this.properties.help || "";
let name = $(this).attr("name");
if (typeof name === "undefined") {name = id;}
let tmp = id.toCamelCase()
// REPLACE CONTENT IF NECESSARY WITH NEW STUFF
this.innerHTML = `
<div class="form-group clearfix">
<div class="row">
<div class="${c1}">
<label id="${this.id}-label" for="${this.id}-label" class="btn-control col-form-label">${lbl}</label>
</div>
<div class="${c2}">
<select name="${name}" class="form-control ${this.properties.class}" id="${tmp}-input">
${this.dom.content}>
</select>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<small id='${this.id}-help' class='help-block with-errors text-muted'>${hlp}</small>
</div>
</div>
</div>`
// TRANSFER ALL ATTRIBUTES NOW (below is an example)
let widget = this.querySelector("select");
for (var key in this.propertiesW) {
if (key != "class" && key != "id") {
this.removeAttribute(key);
widget.setAttribute(key, this.properties[key]);
}
}
this.select = this.querySelector("select");
if(this.properties.searchable == "true") {
var search = 1
} else {
var search = Infinity
}
$(this.select).select2({
minimumResultsForSearch: search, // HIDE SEARCH
theme: 'bootstrap4',
width: 'style',
placeholder: $(this).attr('placeholder'),
allowClear: false,
});
//containerCssClass: "wc-select2-container-class",
//dropdownCssClass: "wc-select2-dropdown-class"
// USE THIS CLASS TO CUSTOMIZE
let s2 = $(this.select).next(".select2")
$(s2).addClass("wc-select2-custom");
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
// PUBLISH INTERESTING EVENTS
this._publish();
// SHOW IT NOW (NO FLICKERS)
this.style.visibility = "visible";
wc.groupEnd();
};
/**
* Publish all events
* @private
* @_publish
*/
_publish() {
wc.group("Select._publish");
let widget = this.querySelector("select");
let id = $(widget).attr("id");
$("#" + id).on("change", e => {
this._change(id)
});
// NOT WORKING
// widget.addEventListener("change", e => {
// this._change(id);
// });
wc.groupEnd();
return true;
}
/**
* A sample callback usage function - see connectedCallback()
* @private
* @_onChange
*/
_change(id) {
wc.group("Select._change:", id);
let val = $("#" + id).val();
wc.publish("wc-select", {
time: new Date().getTime(),
action: "change",
id: id,
val: val,
uparam: this.properties.uparam
});
wc.groupEnd();
};
/**
* Invoked When component is removed. Usually with a .remove() function call
* @disconnectedCallback
*/
disconnectedCallback() {
wc.group("Select.disconnectedCallback")
/* CLEAN UP NOW */
wc.groupEnd();
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("Select.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Select.observedAttributes;
for (let i = 0; i < obs.length; i++) {
if (newval) {
this.properties[obs[i]] = newval;
// YOUR CODE FOR CHANGES GO HERE
}
}
wc.log("=====", this.properties);
wc.groupEnd();
};
/**
* Stores DOM elements of interest for future use
* @private
* @_fetchElements
*/
_fetchElements() {
wc.group("Select._fetchElements");
this.dom = this.dom || [];
this.dom.content = this.innerHTML;
wc.groupEnd();
};
/**
* Component attributes are _fetched and defaults are set if undefined
* @private
* @_fetchAttributes
* @param {string} [searchable=false]
*/
_fetchAttributes() {
wc.group("Select._fetchAttributes");
this.properties = {
"cname" : "Select",
"author" : "Mel Heravi",
"version" : "1.0",
"columns" : "12,12",
"searchable" : "false"
};
// SAVE WIDGET SPECIFIC PROPERTIES
this.propertiesW = [];
// SAVE ALL OTHER PROPERTIES
let attrs = wc.getAttributes(this)
for (var key in attrs) {
this.properties[key] = this.getAttribute(key);
this.propertiesW[key] = this.getAttribute(key);
wc.log(key + ": " + attrs[key]);
}
this.properties.placeholder = this.properties.placeholder || "";
wc.log("---------", this.properties);
wc.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @private
* @_destroy
*/
destroy() {
wc.group("Select.destroy:", this.id);
// FREE POINTER
delete this;
// REMOVE ITEM FROM DOM
this.parentNode.removeChild(this);
wc.groupEnd();
};
/**
* SAVE DATA FOR ANALYTICS
* @private
* @_initialize
*/
_initialize() {
wc.group("Select._initialize:", this.id);
// FETCH ALL INTERESTING ELEMENTS
this._fetchElements();
// FETCH ALL ATTRIBUTES
this._fetchAttributes();
wc.groupEnd();
};
/**
* SAVE DATA FOR ANALYTICS
* @private
* @_finalize
*/
_finalize() {
wc.group("Select._finalize:", this.id);
this.classList.add("wc");
// ADD ANALYTICS HERE
wc.setStats(this, this.properties.cname, this.properties.version);
wc.groupEnd();
};
/**
* FOR TESTING PURPOSES
* @test
*/
static test() {
wc.group("Select.test");
wc.log("testing results will be printed here...");
wc.groupEnd();
return true;
}
/**
* configure the instance object and artifacts
* @configure
* @param {string} data use data if exist else use 'this.properties.cfg' parameter
*/
configure(data) {
wc.group("Select.configure:", data);
// IF JSON VARIABLE (data) IS PROVIDED
if (data) {
this._process(data);
} else {
let self = this;
$.getJSON(this.properties.cfg, function(data) {
self._process(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
});
}
wc.groupEnd();
};
/**
* _process the instance object and artifacts
* @private
* @_process
*/
_process(data) {
wc.group("Select._process:", data);
let w = this.querySelector("select");
for (var i = 0; i < data.length; i++) {
var opt = document.createElement('option');
opt.value = data[i].value;
opt.innerHTML = data[i].name;
w.appendChild(opt);
}
wc.groupEnd();
};
}
window.customElements.define('wc-select', Select);
// SO I CAN CALL THE STATIC METHOD GLOBALLY
window.Select = Select;