Performance improvements in other events

Improved scroll performance
Remove media
2020-07-21 16:35:00 +02:00 · 2020-07-21 16:21:58 +02:00 · 2020-07-17 18:05:44 +02:00 · 2020-07-17 18:04:01 +02:00 · 2020-07-17 18:01:33 +02:00 · 2020-07-17 18:01:17 +02:00
11 changed files with 27 additions and 12 deletions
--- a/README.md
+++ b/README.md
@ -1,14 +1,18 @@
 # FFNM (Front-End for the next master)

 ``` html
-<button i-click="class:add('press')">open</button>
+<button i-click="class:add('open', 'article')">open</button>
+
+<article></article>
 ```
 👇 🖱 **Click!** 👇
 ``` html
-<button class="press" i-click="class:add('press')">open</button>
+<button i-click="class:add('open', 'article')">open</button>
+
+<article class="open"></article>
 ```

-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**.

@ -18,7 +22,7 @@ Simple utility to **avoid writing Javascript** when working with **classes**. It

 ## DEMOS

-[Click](https://codepen.io/androsfenollosa/pen/dyGdRVE)
+[Click](https://codepen.io/androsfenollosa/pen/dyGdRVE) | [Scroll](https://codepen.io/androsfenollosa/pen/xxZQxNV)

 ## Documentation

@ -34,7 +38,7 @@ Simple utility to **avoid writing Javascript** when working with **classes**. It
 Add to your `<head>` the following tag.

 ```html
-<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.2/dist/ffnm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.3/dist/ffnm.min.js"></script>
 ```

 ### Examples
@ -145,7 +149,7 @@ Add to your `<head>` the following tag.
 Añade a tu `<head>` la siguiente etiqueta.

 ```html
-<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.2/dist/ffnm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.3/dist/ffnm.min.js"></script>
 ```

 ### Ejemplos de uso
--- 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],a=RegExp(":(\\w+)\\(").exec(c)[1],l=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(c)[1],o=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:s,functionChild:a,value:l,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 a=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 a?t.push(s):(console.error("FFNM: Bad syntax"),console.error(s)),a}).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)}})})}}),window.addEventListener("scroll",()=>{let e=window.pageYOffset||document.documentElement.scrollTop;[...document.querySelectorAll("[i-scroll-down]")].forEach(t=>{if(e>c){let e=s(t,"i-scroll-down");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(t=>{if(e<=c){let e=s(t,"i-scroll-up");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}}),c=e<=0?0:e},!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
--- a/media/carbon-config.json
+++ b/media/carbon-config.json
@ -1 +0,0 @@
-{"paddingVertical":"56px","paddingHorizontal":"56px","backgroundImage":null,"backgroundImageSelection":null,"backgroundMode":"color","backgroundColor":"rgba(171,184,195,0)","dropShadow":true,"dropShadowOffsetY":"20px","dropShadowBlurRadius":"68px","theme":"monokai","windowTheme":"none","language":"htmlmixed","fontFamily":"Hack","fontSize":"14px","lineHeight":"133%","windowControls":true,"widthAdjustment":true,"lineNumbers":false,"firstLineNumber":1,"exportSize":"2x","watermark":false,"squaredImage":false,"hiddenCharacters":false,"name":"","width":680}
--- a/media/other-click.png
+++ b/media/other-click.png
--- a/media/other-clicked.png
+++ b/media/other-clicked.png
--- a/media/scroll-down.png
+++ b/media/scroll-down.png
--- a/media/scroll-up.png
+++ b/media/scroll-up.png
--- a/media/scroll.png
+++ b/media/scroll.png
--- a/media/self-click.png
+++ b/media/self-click.png
--- a/media/self-clicked.png
+++ b/media/self-clicked.png
--- 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,10 +109,12 @@ document.addEventListener('DOMContentLoaded', () => {
    function addEventScroll() {
        let eventScrollDown = 'i-scroll-down';
        let eventScrollUp = 'i-scroll-up';
+        let elementsDown = getElementsValidatesByEvent(eventScrollDown);
+        let elementsUp = getElementsValidatesByEvent(eventScrollUp);
        window.addEventListener("scroll", () => {
            let posScroll = window.pageYOffset || document.documentElement.scrollTop;
            // Scroll down
-            [...document.querySelectorAll(`[${eventScrollDown}]`)].forEach((element) => {
+            elementsDown.forEach((element) => {
                if (posScroll > lastScrollTop) {
                    let params = splitParams(element, eventScrollDown);
                    switch(params.functionParent) {
@ -120,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) {
@ -148,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':
Author	SHA1	Message	Date
Andros Fenollosa	3fc6ff1c78	Performance improvements in other events	2020-07-21 16:35:00 +02:00
Andros Fenollosa	dac40e8d61	Improved scroll performance	2020-07-21 16:21:58 +02:00
Andros Fenollosa	6f965ce6c3	Remove media	2020-07-17 18:05:44 +02:00
Andros Fenollosa	988c7c15dd	Update README.md	2020-07-17 18:04:01 +02:00
Andros Fenollosa	b5fe682764	Update README.md	2020-07-17 18:01:33 +02:00
Andros Fenollosa	732dcfca57	Update README.md	2020-07-17 18:01:17 +02:00
				`@ -1 +0,0 @@`
				{"paddingVertical":"56px","paddingHorizontal":"56px","backgroundImage":null,"backgroundImageSelection":null,"backgroundMode":"color","backgroundColor":"rgba(171,184,195,0)","dropShadow":true,"dropShadowOffsetY":"20px","dropShadowBlurRadius":"68px","theme":"monokai","windowTheme":"none","language":"htmlmixed","fontFamily":"Hack","fontSize":"14px","lineHeight":"133%","windowControls":true,"widthAdjustment":true,"lineNumbers":false,"firstLineNumber":1,"exportSize":"2x","watermark":false,"squaredImage":false,"hiddenCharacters":false,"name":"","width":680}