/**
* Slide Component<BR>
* <BR><BR><img src=/tk/lib/components/w/img/slide.png width=80% style="border:1px lime dashed;padding:20px">
* <BR><BR><a href="/tk/lib/components/w/html/slide.html">DEMO</a>
*/
class Slide extends HTMLElement {
constructor() {
wc.group("Slide.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("Slide.observedAttributes");
this.observables = ["toggle", "search", "title"];
wc.groupEnd();
return this.observables;
};
/**
* This function is called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("Slide.connectedCallback")
let self = this;
// GET PROPERTIES AND INTERESTING ELEMENTS
this._initialize();
if (this.properties.search == "true") {
var display = `block`;
} else {
var display = `none`;
}
// REPLACE CONTENT IF NECESSARY WITH NEW STUFF
this.innerHTML = `
<wc-slide-menus>
<wc-slide-title>
${this.properties.title}
</wc-slide-title>
<wc-slide-search style="display:${display}">
<input type="text" placeholder="Search for names.." autocomplete='off' />
</wc-slide-search>
<wc-slide-menus>
${this.dom.menus.innerHTML}
</wc-slide-menus>
</wc-slide-menus>`;
let search = document.querySelector("wc-slide-search input");
search.addEventListener("keyup", this.search);
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
// PUBLISH INTERESTING EVENTS
this._publish();
wc.groupEnd();
};
/**
* Publish all events
* @private
* @_publish
*/
_publish() {
wc.group("Slide.publish");
self = this;
$("wc-slide-menus a").on("click", function() {
self._click(this);
});
wc.groupEnd();
return true;
}
/**
* A sample callback usage function - see connectedCallback()
* @private
* @_onClick
*/
_click(self) {
wc.group("Slide._click:", self.id);
wc.publish("my-slide", {
time: new Date().getTime(),
action: "click",
id: self.id,
});
wc.groupEnd();
};
/**
* Invoked When component is removed. Usually with a .remove() function call
* @disconnectedCallback
*/
disconnectedCallback() {
wc.group("Slide.disconnectedCallback")
/* CLEAN UP NOW */
wc.groupEnd();
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("Slide.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Slide.observedAttributes;
for (let i = 0; i < obs.length; i++) {
if (newval) {
this.properties[obs[i]] = newval;
}
}
// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
try {
switch(attr)
{
case "title":
break;
case "search":
break;
case "toggle":
break;
}
}
catch(e) {
wc.warn(e.name + ' > ' + e.message);
}
wc.groupEnd();
};
/**
* Stores DOM elements of interest for future use
* @private
* @_fetchElements
*/
_fetchElements() {
wc.group("Slide._fetchElements");
this.dom = this.dom || [];
this.dom.menus = this.querySelector("wc-slide-menus");
wc.groupEnd();
};
/**
* Component attributes are _fetched and defaults are set if undefined
* @private
* @_fetchAttributes
* @param {string} [modal=true] mode for our slide
*/
_fetchAttributes() {
wc.group("Slide._fetchAttributes");
this.properties = {
cname : "Slide",
author : "Mel Heravi",
version : "1.0",
title : "",
search : "true"
};
// SAVE WIDGET SPECIFIC PROPERTIES
this.propertiesW = [];
// SAVE ALL OTHER PROPERTIES
let attrs = wc.getAttributes(this)
for (var key in attrs) {
let attr = this.getAttribute(key) || this.properties.key;
this.properties[key] = this.getAttribute(key);
this.propertiesW[key] = this.getAttribute(key);
wc.log(key + ": " + attrs[key]);
}
// SET ALL INITIAL ATTRIBUTES
for (var key in this.properties) {
switch(key)
{
case "title":
break;
case "search":
break;
case "title":
break;
}
}
wc.log("ATTRIBUTES: ", this.properties);
wc.groupEnd();
};
/**
* A sample callback usage function - see connectedCallback()
* @private
* @_onClick
*/
_onClick() {
wc.group("Slide._onClick:", this.id);
wc.publish("wc-slide", {
action: "click",
id: this.id,
uparam: this.properties.uparam
});
wc.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @private
* @_destroy
*/
destroy() {
wc.group("Slide.destroy:", this.id);
// FREE ALL MEMORY
// you should delete all created objects here
// FREE POINTER
delete this;
// REMOVE ITEM FROM DOM
this.parentNode.removeChild(this);
wc.groupEnd();
};
/**
* configure the instance object and artifacts
* @private
* @_configure
*/
configure(options) {
wc.group("Slide.configure:", JSON.stringify(options));
// PROCESS ALL OPTIONS HERE
wc.groupEnd();
};
/**
* SAVE DATA FOR ANALYTICS
* @private
* @_initialize
*/
_initialize() {
wc.group("Slide._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("Slide._finalize:", this.id);
this.classList.add("wc");
// ADD ANALYTICS HERE
wc.setStats(this, this.properties.cname, this.properties.version);
// SHOW IT NOW (NO FLICKERS)
this.style.visibility = "visible";
let toggler = this.getAttribute("toggler");
let speed = this.getAttribute("speed");
// MAKE IT HAPPEN
$('#' + toggler).sidr({
name: 'my-slide',
side: 'left',
timing: 'ease-in-out',
speed: speed
});
wc.groupEnd();
};
/**
* SAVE DATA FOR ANALYTICS
* @search
*/
search() {
wc.group("Slide.search");
let root = this.parentNode.parentNode.parentNode;
// Declare variables
var input, filter, ul, li, a, i;
var input = root.querySelector('wc-slide-search input');
var list = root.querySelector('wc-slide-menus');
wc.log($(input).val())
filter = input.value.toUpperCase();
if(input.value) {
// HIDE THE ONES NOT CONTAINING THE INPUT
$(list).find("ul li > a:not(:Contains(" + filter + "))").parent().slideUp();
// SHOW THE ONES THAT DO
$(list).find("ul li > a:Contains(" + filter + ")").parent().slideDown();
} else {
// RETURN TO DEFAULT
$(list).find("ul li").slideDown();
}
wc.groupEnd();
}
/**
* SAVE DATA FOR ANALYTICS
* @search
*/
search() {
wc.group("Slide.search");
//let root = this.parentNode.parentNode.parentNode;
let slide = wc.getClosest(this, "wc-slide");
// Declare variables
var input, filter, ul, li, a, i;
input = slide.querySelector('wc-slide-search input');
wc.log($(input).val())
filter = input.value.toUpperCase();
li = slide.querySelectorAll("wc-slide-menus ul li");
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
$(li[i]).slideDown();
} else {
if($(li[i]).find("ul").length == 0) {
$(li[i]).slideUp();
}
}
}
wc.groupEnd();
}
}
window.customElements.define('wc-slide', Slide);