From 3fc6ff1c78f6c6a6a3ed0d227cab66b3b2c08587 Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Tue, 21 Jul 2020 16:35:00 +0200 Subject: [PATCH] Performance improvements in other events --- README.md | 6 +++--- dist/ffnm.min.js | 2 +- src/core.js | 21 ++++++++++++++++----- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ce09a7b..bcb265a 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@
``` -Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **2Kb**! +Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **2.5Kb**! - Simplifies the **click**. @@ -38,7 +38,7 @@ Simple utility to **avoid writing Javascript** when working with **classes**. It Add to your `` the following tag. ```html - + ``` ### Examples @@ -149,7 +149,7 @@ Add to your `` the following tag. Añade a tu `` la siguiente etiqueta. ```html - + ``` ### Ejemplos de uso diff --git a/dist/ffnm.min.js b/dist/ffnm.min.js index 8217498..a15e105 100644 --- a/dist/ffnm.min.js +++ b/dist/ffnm.min.js @@ -1,2 +1,2 @@ -document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[],c=void 0;function s(e,t){let c=e.getAttribute(t),s=RegExp("^(\\w+):").exec(c)[1],l=RegExp(":(\\w+)\\(").exec(c)[1],a=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(c)[1],o=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:s,functionChild:l,value:a,target:null!==o.exec(c)?o.exec(c)[1]:void 0}}t=[],["i-click","i-scroll-up","i-scroll-down","i-hover"].map(c=>[...document.querySelectorAll(`[${c}]`)].map(s=>{let l=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(s.getAttribute(c))).some(e=>e)).every(e=>e);return l?t.push(s):(console.error("FFNM: Bad syntax"),console.error(s)),l}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let t=s(e,"i-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(c=>{void 0!==c&&e.addEventListener("click",()=>{switch(t.functionChild){case"add":c.classList.add(t.value);break;case"remove":c.classList.remove(t.value);break;case"toggle":c.classList.toggle(t.value)}})})}}),function(){let e=[...document.querySelectorAll("[i-scroll-down]")];window.addEventListener("scroll",()=>{let t=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(t>c){let t=s(e,"i-scroll-down");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(e=>{if(t<=c){let t=s(e,"i-scroll-up");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),c=t<=0?0:t},!1)}(),[...document.querySelectorAll("[i-hover]")].forEach(e=>{let t=s(e,"i-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(c=>{if(void 0!==c)switch(t.functionChild){case"add":e.addEventListener("mouseenter",()=>{c.classList.add(t.value)}),e.addEventListener("mouseout",()=>{c.classList.remove(t.value)});break;case"remove":e.addEventListener("mouseenter",()=>{c.classList.remove(t.value)}),e.addEventListener("mouseout",()=>{c.classList.add(t.value)});break;case"toggle":e.addEventListener("mouseenter",()=>{c.classList.toggle(t.value)}),e.addEventListener("mouseout",()=>{c.classList.toggle(t.value)})}})}})}); +document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[],s=void 0;function a(e,t){let s=e.getAttribute(t),a=RegExp("^(\\w+):").exec(s)[1],c=RegExp(":(\\w+)\\(").exec(s)[1],o=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],l=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:a,functionChild:c,value:o,target:null!==l.exec(s)?l.exec(s)[1]:void 0}}function c(e){return[...t].filter(t=>t.hasAttribute(e))}t=[],["i-click","i-scroll-up","i-scroll-down","i-hover"].map(s=>[...document.querySelectorAll(`[${s}]`)].map(a=>{let c=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(a.getAttribute(s))).some(e=>e)).every(e=>e);return c?t.push(a):(console.error("FFNM: Bad syntax"),console.error(a)),c}).every(e=>e)).every(e=>e),c("i-click").forEach(e=>{let t=a(e,"i-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{void 0!==s&&e.addEventListener("click",()=>{switch(t.functionChild){case"add":s.classList.add(t.value);break;case"remove":s.classList.remove(t.value);break;case"toggle":s.classList.toggle(t.value)}})})}}),function(){let e=c("i-scroll-down"),t=c("i-scroll-up");window.addEventListener("scroll",()=>{let c=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(c>s){let t=a(e,"i-scroll-down");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),t.forEach(e=>{if(c<=s){let t=a(e,"i-scroll-up");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),s=c<=0?0:c},!1)}(),c("i-hover").forEach(e=>{let t=a(e,"i-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{if(void 0!==s)switch(t.functionChild){case"add":e.addEventListener("mouseenter",()=>{s.classList.add(t.value)}),e.addEventListener("mouseout",()=>{s.classList.remove(t.value)});break;case"remove":e.addEventListener("mouseenter",()=>{s.classList.remove(t.value)}),e.addEventListener("mouseout",()=>{s.classList.add(t.value)});break;case"toggle":e.addEventListener("mouseenter",()=>{s.classList.toggle(t.value)}),e.addEventListener("mouseout",()=>{s.classList.toggle(t.value)})}})}})}); //# sourceMappingURL=ffnm.min.js.map diff --git a/src/core.js b/src/core.js index 921e2d0..f5e04eb 100644 --- a/src/core.js +++ b/src/core.js @@ -60,13 +60,23 @@ document.addEventListener('DOMContentLoaded', () => { return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target}; } + /** + * Method that returns all validated elements filtered by an event + * return Array + */ + function getElementsValidatesByEvent(nameEvent) { + return [...elementsValidates].filter(element => { + return element.hasAttribute(nameEvent); + }); + } + /** * Method add events i-click * return void */ function addEventClick() { let eventClick = 'i-click'; - return [...document.querySelectorAll(`[${eventClick}]`)].forEach((element) => { + return getElementsValidatesByEvent(eventClick).forEach((element) => { let params = splitParams(element, eventClick); switch(params.functionParent) { case 'class': @@ -99,11 +109,12 @@ document.addEventListener('DOMContentLoaded', () => { function addEventScroll() { let eventScrollDown = 'i-scroll-down'; let eventScrollUp = 'i-scroll-up'; - let elements = [...document.querySelectorAll(`[${eventScrollDown}]`)]; + let elementsDown = getElementsValidatesByEvent(eventScrollDown); + let elementsUp = getElementsValidatesByEvent(eventScrollUp); window.addEventListener("scroll", () => { let posScroll = window.pageYOffset || document.documentElement.scrollTop; // Scroll down - elements.forEach((element) => { + elementsDown.forEach((element) => { if (posScroll > lastScrollTop) { let params = splitParams(element, eventScrollDown); switch(params.functionParent) { @@ -121,7 +132,7 @@ document.addEventListener('DOMContentLoaded', () => { } }); // Scroll up - [...document.querySelectorAll(`[${eventScrollUp}]`)].forEach((element) => { + elementsUp.forEach((element) => { if (posScroll <= lastScrollTop) { let params = splitParams(element, eventScrollUp); switch(params.functionParent) { @@ -149,7 +160,7 @@ document.addEventListener('DOMContentLoaded', () => { */ function addEventHover() { let eventHover = 'i-hover'; - return [...document.querySelectorAll(`[${eventHover}]`)].forEach((element) => { + return getElementsValidatesByEvent(eventHover).forEach((element) => { let params = splitParams(element, eventHover); switch(params.functionParent) { case 'class':