Source: slide.js

  1. /**
  2.  * Slide Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/slide.png width=80% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/slide.html">DEMO</a>
  5.  */
  6. class Slide extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Slide.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("Slide.observedAttributes");
  22. 	this.observables = ["toggle", "search", "title"];
  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("Slide.connectedCallback")
  34. 	
  35. 	let self = this;
  37. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  38. 	this._initialize();
  40. 	if (this.properties.search == "true") {
  41. 	    var display = `block`;
  42. 	} else {
  43. 	    var display = `none`;
  44. 	}
  46. 	// REPLACE CONTENT IF NECESSARY WITH NEW STUFF
  47. 	this.innerHTML = `
  48. 		<wc-slide-menus>
  49. 		    <wc-slide-title>
  50. 			${this.properties.title}
  51. 		    </wc-slide-title>
  52. 		
  53. 		    <wc-slide-search style="display:${display}">
  54. 			<input type="text" placeholder="Search for names.." autocomplete='off' />
  55. 		    </wc-slide-search>
  56. 		
  57. 		    <wc-slide-menus>
  58. 			${this.dom.menus.innerHTML}
  59. 		    </wc-slide-menus>
  60. 		</wc-slide-menus>`;
  62. 	let search = document.querySelector("wc-slide-search input");
  64. 	search.addEventListener("keyup", this.search);
  66. 	// ADD STATS AND OTHER FINAL STUFF
  67. 	this._finalize();
  69. 	// PUBLISH INTERESTING EVENTS
  70. 	this._publish();
  71. 	
  72.         wc.groupEnd();
  73.     };
  75.     /**
  76.      * Publish all events
  77.      * @private
  78.      * @_publish
  79.      */
  80.     _publish() {
  81. 	wc.group("Slide.publish");
  83. 	self = this;
  85. 	$("wc-slide-menus a").on("click", function() {
  86. 	    self._click(this);
  87. 	});
  88. 	
  89. 	wc.groupEnd();
  90. 	return true;
  91.     }
  93.     /**
  94.      * A sample callback usage function - see connectedCallback()
  95.      * @private
  96.      * @_onClick
  97.      */
  98.     _click(self) {
  99. 	wc.group("Slide._click:", self.id);
  101. 	wc.publish("my-slide", {
  102. 	    time: new Date().getTime(),
  103. 	    action: "click",
  104. 	    id: self.id,
  105. 	});
  107. 	wc.groupEnd();
  108.     };
  110.     /**
  111.      * Invoked When component is removed. Usually with a .remove() function call
  112.      * @disconnectedCallback
  113.      */
  114.     disconnectedCallback() {
  115.         wc.group("Slide.disconnectedCallback")
  117. 	/* CLEAN UP NOW */
  119.         wc.groupEnd();
  120.     };
  122.     /**
  123.      * Called with .setAttribute(...) function call
  124.      * @attributeChangedCallback
  125.      */
  126.     attributeChangedCallback(attr, oldval, newval) {
  127.         wc.group("Slide.attributeChangedCallback:", attr, oldval, newval);
  129. 	this.properties = this.properties || [];
  131. 	let obs = Slide.observedAttributes;
  133. 	for (let i = 0; i < obs.length; i++) {
  134. 	    if (newval) {
  135. 		this.properties[obs[i]] = newval;
  136. 	    }
  137. 	}
  138. 	
  139. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  140. 	try {
  141. 	    switch(attr) 
  142. 	    {
  143. 		case "title":
  144. 		break;
  145. 		
  146. 		case "search":
  147. 		break;
  148. 		
  149. 		case "toggle":
  150. 		break;
  151. 	    }
  152. 	}
  153. 	catch(e) {
  154. 	    wc.warn(e.name + ' > ' + e.message);
  155. 	}
  157.         wc.groupEnd();
  158.     };
  160.     /**
  161.      * Stores DOM elements of interest for future use
  162.      * @private
  163.      * @_fetchElements
  164.      */
  165.     _fetchElements() {
  166. 	wc.group("Slide._fetchElements");
  167. 	
  168. 	this.dom = this.dom || [];
  169. 	this.dom.menus = this.querySelector("wc-slide-menus");
  171. 	wc.groupEnd();
  172.     };
  174.     /**
  175.      * Component attributes are _fetched and defaults are set if undefined
  176.      * @private
  177.      * @_fetchAttributes
  178.      * @param {string} [modal=true] mode for our slide
  179.      */
  180.     _fetchAttributes() {
  181. 	wc.group("Slide._fetchAttributes");
  182. 	
  183. 	this.properties = {
  184. 	    cname	: "Slide",
  185. 	    author	: "Mel Heravi",
  186. 	    version	: "1.0",
  187. 	    title	: "",
  188. 	    search	: "true"
  189. 	};
  190. 	
  191. 	// SAVE WIDGET SPECIFIC PROPERTIES
  192. 	this.propertiesW = [];
  194. 	// SAVE ALL OTHER PROPERTIES
  195. 	let attrs = wc.getAttributes(this)
  196. 	
  197.  	for (var key in attrs) {
  198. 	    let attr = this.getAttribute(key) || this.properties.key;
  199. 	    this.properties[key]  = this.getAttribute(key);
  200. 	    this.propertiesW[key] = this.getAttribute(key);
  201. 	    wc.log(key + ": " + attrs[key]);
  202. 	}
  204. 	// SET ALL INITIAL ATTRIBUTES
  205.  	for (var key in this.properties) {
  206. 	    switch(key) 
  207. 	    {
  208. 		case "title":
  209. 		break;
  210. 		
  211. 		case "search":
  212. 		break;
  213. 		
  214. 		case "title":
  215. 		break;
  216. 	    }
  217. 	}
  219. 	wc.log("ATTRIBUTES: ", this.properties);
  221. 	wc.groupEnd();
  222.     };
  224.     /**
  225.      * A sample callback usage function - see connectedCallback()
  226.      * @private
  227.      * @_onClick
  228.      */
  229.     _onClick() {
  230. 	wc.group("Slide._onClick:", this.id);
  232. 	wc.publish("wc-slide", {
  233. 	    action: "click",
  234. 	    id: this.id,
  235. 	    uparam: this.properties.uparam
  236. 	});
  238. 	wc.groupEnd();
  239.     };
  241.     /**
  242.      * Destroy the instance object and artifacts
  243.      * @private
  244.      * @_destroy
  245.      */
  246.     destroy() {
  247. 	wc.group("Slide.destroy:", this.id);
  249. 	// FREE ALL MEMORY
  250. 	// you should delete all created objects here
  252. 	// FREE POINTER
  253. 	delete this;
  255. 	// REMOVE ITEM FROM DOM
  256. 	this.parentNode.removeChild(this);
  258. 	wc.groupEnd();
  259.     };
  261.     /**
  262.      * configure the instance object and artifacts
  263.      * @private
  264.      * @_configure
  265.      */
  266.     configure(options) {
  267. 	wc.group("Slide.configure:", JSON.stringify(options));
  269. 	// PROCESS ALL OPTIONS HERE
  271. 	wc.groupEnd();
  272.     };
  274.     /**
  275.      * SAVE DATA FOR ANALYTICS
  276.      * @private
  277.      * @_initialize
  278.      */
  279.     _initialize() {
  280. 	wc.group("Slide._initialize:", this.id);
  282. 	// FETCH ALL INTERESTING ELEMENTS
  283. 	this._fetchElements();
  285. 	// FETCH ALL ATTRIBUTES
  286. 	this._fetchAttributes();
  287. 	
  288. 	wc.groupEnd();
  289.     };
  291.     /**
  292.      * SAVE DATA FOR ANALYTICS
  293.      * @private
  294.      * @_finalize
  295.      */
  296.     _finalize() {
  297. 	wc.group("Slide._finalize:", this.id);
  299. 	this.classList.add("wc");
  301. 	// ADD ANALYTICS HERE
  302. 	wc.setStats(this, this.properties.cname, this.properties.version);
  303. 	
  304. 	// SHOW IT NOW (NO FLICKERS) 
  305. 	this.style.visibility = "visible";
  307. 	let toggler = this.getAttribute("toggler");
  308. 	let speed   = this.getAttribute("speed");
  310. 	// MAKE IT HAPPEN
  311. 	$('#' + toggler).sidr({
  312. 	    name: 'my-slide',
  313. 	    side: 'left',
  314. 	    timing: 'ease-in-out',
  315. 	    speed: speed
  316.         });
  318. 	wc.groupEnd();
  319.     };
  321.     /**
  322.      * SAVE DATA FOR ANALYTICS
  323.      * @search
  324.      */
  325.     search() {
  326. 	wc.group("Slide.search");
  328. 	let root = this.parentNode.parentNode.parentNode;
  330. 	// Declare variables
  331. 	var input, filter, ul, li, a, i;
  332. 	var input = root.querySelector('wc-slide-search input');
  333. 	var list  = root.querySelector('wc-slide-menus');
  335. 	wc.log($(input).val())
  336. 	filter = input.value.toUpperCase();
  338. 	if(input.value) {
  339.             // HIDE THE ONES NOT CONTAINING THE INPUT
  340.             $(list).find("ul li > a:not(:Contains(" + filter + "))").parent().slideUp();
  342.             // SHOW THE ONES THAT DO
  343.             $(list).find("ul li > a:Contains(" + filter + ")").parent().slideDown();
  344.         } else {
  345.             // RETURN TO DEFAULT
  346.             $(list).find("ul li").slideDown();
  347.         }
  349. 	wc.groupEnd();
  350.     }
  352.     /**
  353.      * SAVE DATA FOR ANALYTICS
  354.      * @search
  355.      */
  356.     search() {
  357. 	wc.group("Slide.search");
  359. 	//let root = this.parentNode.parentNode.parentNode;
  360. 	let slide = wc.getClosest(this, "wc-slide");
  362. 	// Declare variables
  363. 	var input, filter, ul, li, a, i;
  365. 	input = slide.querySelector('wc-slide-search input');
  367. 	wc.log($(input).val())
  369. 	filter = input.value.toUpperCase();
  371. 	li = slide.querySelectorAll("wc-slide-menus ul li");
  373. 	// Loop through all list items, and hide those who don't match the search query
  374. 	for (i = 0; i < li.length; i++) {
  375.             a = li[i].getElementsByTagName("a")[0];
  377.             if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
  378. 		$(li[i]).slideDown();
  379.             } else {
  380. 		if($(li[i]).find("ul").length == 0) {
  381. 		    $(li[i]).slideUp();
  382. 		}
  383.             }
  384. 	}
  386. 	wc.groupEnd();
  387.     }
  388. }
  390. window.customElements.define('wc-slide', Slide);