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. 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("Slide.observedAttributes");
  18. this.observables = ["toggle", "search", "title"];
  19. wc.groupEnd();
  20. return this.observables;
  21. };
  22. /**
  23. * This function is called when this is attached to DOM
  24. * @connectedCallback.
  25. */
  26. connectedCallback() {
  27. wc.group("Slide.connectedCallback")
  28. let self = this;
  29. // GET PROPERTIES AND INTERESTING ELEMENTS
  30. this._initialize();
  31. if (this.properties.search == "true") {
  32. var display = `block`;
  33. } else {
  34. var display = `none`;
  35. }
  36. // REPLACE CONTENT IF NECESSARY WITH NEW STUFF
  37. this.innerHTML = `
  38. <wc-slide-menus>
  39. <wc-slide-title>
  40. ${this.properties.title}
  41. </wc-slide-title>
  42. <wc-slide-search style="display:${display}">
  43. <input type="text" placeholder="Search for names.." autocomplete='off' />
  44. </wc-slide-search>
  45. <wc-slide-menus>
  46. ${this.dom.menus.innerHTML}
  47. </wc-slide-menus>
  48. </wc-slide-menus>`;
  49. let search = document.querySelector("wc-slide-search input");
  50. search.addEventListener("keyup", this.search);
  51. // ADD STATS AND OTHER FINAL STUFF
  52. this._finalize();
  53. // PUBLISH INTERESTING EVENTS
  54. this._publish();
  55. wc.groupEnd();
  56. };
  57. /**
  58. * Publish all events
  59. * @private
  60. * @_publish
  61. */
  62. _publish() {
  63. wc.group("Slide.publish");
  64. self = this;
  65. $("wc-slide-menus a").on("click", function() {
  66. self._click(this);
  67. });
  68. wc.groupEnd();
  69. return true;
  70. }
  71. /**
  72. * A sample callback usage function - see connectedCallback()
  73. * @private
  74. * @_onClick
  75. */
  76. _click(self) {
  77. wc.group("Slide._click:", self.id);
  78. wc.publish("my-slide", {
  79. time: new Date().getTime(),
  80. action: "click",
  81. id: self.id,
  82. });
  83. wc.groupEnd();
  84. };
  85. /**
  86. * Invoked When component is removed. Usually with a .remove() function call
  87. * @disconnectedCallback
  88. */
  89. disconnectedCallback() {
  90. wc.group("Slide.disconnectedCallback")
  91. /* CLEAN UP NOW */
  92. wc.groupEnd();
  93. };
  94. /**
  95. * Called with .setAttribute(...) function call
  96. * @attributeChangedCallback
  97. */
  98. attributeChangedCallback(attr, oldval, newval) {
  99. wc.group("Slide.attributeChangedCallback:", attr, oldval, newval);
  100. this.properties = this.properties || [];
  101. let obs = Slide.observedAttributes;
  102. for (let i = 0; i < obs.length; i++) {
  103. if (newval) {
  104. this.properties[obs[i]] = newval;
  105. }
  106. }
  107. // YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  108. try {
  109. switch(attr)
  110. {
  111. case "title":
  112. break;
  113. case "search":
  114. break;
  115. case "toggle":
  116. break;
  117. }
  118. }
  119. catch(e) {
  120. wc.warn(e.name + ' > ' + e.message);
  121. }
  122. wc.groupEnd();
  123. };
  124. /**
  125. * Stores DOM elements of interest for future use
  126. * @private
  127. * @_fetchElements
  128. */
  129. _fetchElements() {
  130. wc.group("Slide._fetchElements");
  131. this.dom = this.dom || [];
  132. this.dom.menus = this.querySelector("wc-slide-menus");
  133. wc.groupEnd();
  134. };
  135. /**
  136. * Component attributes are _fetched and defaults are set if undefined
  137. * @private
  138. * @_fetchAttributes
  139. * @param {string} [modal=true] mode for our slide
  140. */
  141. _fetchAttributes() {
  142. wc.group("Slide._fetchAttributes");
  143. this.properties = {
  144. cname : "Slide",
  145. author : "Mel Heravi",
  146. version : "1.0",
  147. title : "",
  148. search : "true"
  149. };
  150. // SAVE WIDGET SPECIFIC PROPERTIES
  151. this.propertiesW = [];
  152. // SAVE ALL OTHER PROPERTIES
  153. let attrs = wc.getAttributes(this)
  154. for (var key in attrs) {
  155. let attr = this.getAttribute(key) || this.properties.key;
  156. this.properties[key] = this.getAttribute(key);
  157. this.propertiesW[key] = this.getAttribute(key);
  158. wc.log(key + ": " + attrs[key]);
  159. }
  160. // SET ALL INITIAL ATTRIBUTES
  161. for (var key in this.properties) {
  162. switch(key)
  163. {
  164. case "title":
  165. break;
  166. case "search":
  167. break;
  168. case "title":
  169. break;
  170. }
  171. }
  172. wc.log("ATTRIBUTES: ", this.properties);
  173. wc.groupEnd();
  174. };
  175. /**
  176. * A sample callback usage function - see connectedCallback()
  177. * @private
  178. * @_onClick
  179. */
  180. _onClick() {
  181. wc.group("Slide._onClick:", this.id);
  182. wc.publish("wc-slide", {
  183. action: "click",
  184. id: this.id,
  185. uparam: this.properties.uparam
  186. });
  187. wc.groupEnd();
  188. };
  189. /**
  190. * Destroy the instance object and artifacts
  191. * @private
  192. * @_destroy
  193. */
  194. destroy() {
  195. wc.group("Slide.destroy:", this.id);
  196. // FREE ALL MEMORY
  197. // you should delete all created objects here
  198. // FREE POINTER
  199. delete this;
  200. // REMOVE ITEM FROM DOM
  201. this.parentNode.removeChild(this);
  202. wc.groupEnd();
  203. };
  204. /**
  205. * configure the instance object and artifacts
  206. * @private
  207. * @_configure
  208. */
  209. configure(options) {
  210. wc.group("Slide.configure:", JSON.stringify(options));
  211. // PROCESS ALL OPTIONS HERE
  212. wc.groupEnd();
  213. };
  214. /**
  215. * SAVE DATA FOR ANALYTICS
  216. * @private
  217. * @_initialize
  218. */
  219. _initialize() {
  220. wc.group("Slide._initialize:", this.id);
  221. // FETCH ALL INTERESTING ELEMENTS
  222. this._fetchElements();
  223. // FETCH ALL ATTRIBUTES
  224. this._fetchAttributes();
  225. wc.groupEnd();
  226. };
  227. /**
  228. * SAVE DATA FOR ANALYTICS
  229. * @private
  230. * @_finalize
  231. */
  232. _finalize() {
  233. wc.group("Slide._finalize:", this.id);
  234. this.classList.add("wc");
  235. // ADD ANALYTICS HERE
  236. wc.setStats(this, this.properties.cname, this.properties.version);
  237. // SHOW IT NOW (NO FLICKERS)
  238. this.style.visibility = "visible";
  239. let toggler = this.getAttribute("toggler");
  240. let speed = this.getAttribute("speed");
  241. // MAKE IT HAPPEN
  242. $('#' + toggler).sidr({
  243. name: 'my-slide',
  244. side: 'left',
  245. timing: 'ease-in-out',
  246. speed: speed
  247. });
  248. wc.groupEnd();
  249. };
  250. /**
  251. * SAVE DATA FOR ANALYTICS
  252. * @search
  253. */
  254. search() {
  255. wc.group("Slide.search");
  256. let root = this.parentNode.parentNode.parentNode;
  257. // Declare variables
  258. var input, filter, ul, li, a, i;
  259. var input = root.querySelector('wc-slide-search input');
  260. var list = root.querySelector('wc-slide-menus');
  261. wc.log($(input).val())
  262. filter = input.value.toUpperCase();
  263. if(input.value) {
  264. // HIDE THE ONES NOT CONTAINING THE INPUT
  265. $(list).find("ul li > a:not(:Contains(" + filter + "))").parent().slideUp();
  266. // SHOW THE ONES THAT DO
  267. $(list).find("ul li > a:Contains(" + filter + ")").parent().slideDown();
  268. } else {
  269. // RETURN TO DEFAULT
  270. $(list).find("ul li").slideDown();
  271. }
  272. wc.groupEnd();
  273. }
  274. /**
  275. * SAVE DATA FOR ANALYTICS
  276. * @search
  277. */
  278. search() {
  279. wc.group("Slide.search");
  280. //let root = this.parentNode.parentNode.parentNode;
  281. let slide = wc.getClosest(this, "wc-slide");
  282. // Declare variables
  283. var input, filter, ul, li, a, i;
  284. input = slide.querySelector('wc-slide-search input');
  285. wc.log($(input).val())
  286. filter = input.value.toUpperCase();
  287. li = slide.querySelectorAll("wc-slide-menus ul li");
  288. // Loop through all list items, and hide those who don't match the search query
  289. for (i = 0; i < li.length; i++) {
  290. a = li[i].getElementsByTagName("a")[0];
  291. if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
  292. $(li[i]).slideDown();
  293. } else {
  294. if($(li[i]).find("ul").length == 0) {
  295. $(li[i]).slideUp();
  296. }
  297. }
  298. }
  299. wc.groupEnd();
  300. }
  301. }
  302. window.customElements.define('wc-slide', Slide);