Update README.md

Remove old code
Update README.md
2020-07-22 20:27:42 +02:00 · 2020-07-22 20:27:10 +02:00 · 2020-07-22 20:09:56 +02:00 · 2020-07-22 19:31:19 +02:00 · 2020-07-21 16:35:00 +02:00 · 2020-07-21 16:21:58 +02:00
10 changed files with 498 additions and 135 deletions
--- a/README.md
+++ b/README.md
@ -1,12 +1,30 @@
 # FFNM (Front-End for the next master)
-![example](media/example.png)
+``` html
 <button is-click="class:add('open', 'article')">open</button>
-Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **1,7 Kb**!
+<article></article>
 ```
 👇 🖱 **Click!** 👇
 ``` html
 <button is-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 **3.2Kb**!
 - Simplifies the **click**.
 - Simplifies the **scroll**.
 - Simplifies **hover**.
 - Simplifies when the elements are **visible** or not.
 ## DEMOS
-[Click](https://codepen.io/androsfenollosa/pen/dyGdRVE)
+[Click](https://codepen.io/androsfenollosa/pen/dyGdRVE) | [Scroll](https://codepen.io/androsfenollosa/pen/xxZQxNV) | [Visible](https://codepen.io/androsfenollosa/pen/YzwBLGW)
 ## Documentation
@ -22,7 +40,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.0.0/dist/ffnm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.3.1/dist/ffnm.min.js"></script>
 ```
 ### Examples
@ -32,39 +50,39 @@ Add to your `<head>` the following tag.
 ##### Add the class `press` to `button` when the button is pressed.
 ```html
-<button i-click="class:add('press')">open</button>
+<button is-click="class:add('press')">open</button>
 ```
 ##### Remove the class `press` to `button` when the button is pressed.
 ```html
-<button i-click="class:remove('press')">close</button>
+<button is-click="class:remove('press')">close</button>
 ```
 ##### Switch the classs `show` to `button` when the button is pressed.
 ```html
-<button i-click="class:toggle('show')">view</button>
+<button is-click="class:toggle('show')">view</button>
 ```
 ##### Add the class `show` to the `#nav` selector when the button is pressed.
 ```html
-<button i-click="class:add('show', '#nav')">open</button>
+<button is-click="class:add('show', '#nav')">open</button>
 <nav id="nav"></nav>
 ```
 ##### Remove the `show` class from the `#nav` selector when the button is pressed.
 ```html
-<button i-click="class:remove('show', '#nav')">close</button>
+<button is-click="class:remove('show', '#nav')">close</button>
 <nav id="nav" class="show"></nav>
 ```
 ##### Switch the `show` class to the `#nav` selector when the button is pressed.
 ```html
-<button i-click="class:toggle('show', '#nav')">view</button>
+<button is-click="class:toggle('show', '#nav')">view</button>
 <nav id="nav" class="show"></nav>
 ```
@ -73,13 +91,13 @@ Add to your `<head>` the following tag.
 ##### Add the class `show` to `nav` when the scroll goes up.
 ```html
-<nav i-scroll-up="class:add('show')"></nav>
+<nav is-scroll-up="class:add('show')"></nav>
 ```
 ##### Remove the `show` class from `nav` when the scroll goes up.
 ```html
-<nav i-scroll-up="class:remove('show')"></nav>
+<nav is-scroll-up="class:remove('show')"></nav>
 ```
 #### Scroll down
@ -87,35 +105,97 @@ Add to your `<head>` the following tag.
 ##### Add the class `show` to `nav` when the scroll down.
 ```html
-<nav i-scroll-down="class:add('show')"></nav>
+<nav is-scroll-down="class:add('show')"></nav>
 ```
 ##### Remove the `show` class from `nav` when the scroll down.
 ```html
-<nav i-scroll-down="class:remove('show')"></nav>
+<nav is-scroll-down="class:remove('show')"></nav>
 ```
 #### Hover
 ##### Add the class `show` to `div` when hover.
 ```html
 <div is-hover="class:add('show')"></div>
 ```
 ##### Remove the `show` class from `div` when hover.
 ```html
 <div is-hover="class:remove('show')"></div>
 ```
 ##### Toggle the `show` class from `div` when hover.
 ```html
 <div is-hover="class:toggle('show')"></div>
 ```
 ##### Add the class `show` to `#button` when `div` hover.
 ```html
 <div is-hover="class:toggle('show', '#button')"></div>
 <button id="button">Hi</div>
 ```
 #### Visible
 ##### Add the class `show` to `div` when is visible.
 ```html
 <div is-visible="class:add('show')"></div>
 ```
 ##### Remove the `show` class from `div` when is visible.
 ```html
 <div is-visible="class:remove('show')"></div>
 ```
 ##### Toggle the `show` class from `div` when is visible.
 ```html
 <div is-visible="class:toggle('show')"></div>
 ```
 ##### Add the class `show` to `#button` when `div` is visible.
 ```html
 <div is-visible="class:toggle('show', '#button')"></div>
 <button id="button">Hi</div>
 ```
 #### Not visible
 ##### Add the class `show` to `div` when is not visible.
 ```html
 <div is-not-visible="class:add('show')"></div>
 ```
 ##### Remove the `show` class from `div` when is not visible.
 ```html
 <div is-not-visible="class:remove('show')"></div>
 ```
 ##### Toggle the `show` class from `div` when is not visible.
 ```html
 <div is-not-visible="class:toggle('show')"></div>
 ```
 ##### Add the class `show` to `#name` when `div` is not visible.
 ```html
 <div is-not-visible="class:toggle('show', '#button')"></div>
 <input id="name">
 ```
 #### Classes without events
 ##### Add the class `show` to the `#nav` selector
 ```javascript
 class:add('show', '#nav')
 ```
 ##### Remove the `show` class from the `#nav` selector
 ```javascript
 class:remove('show', '#nav')
 ```
 ##### Switch the class `show` to the `#nav` selector
 ```javascript
 class:toggle('show', '#nav')
 ```
 ---
@ -126,7 +206,7 @@ class:toggle('show', '#nav')
 Añade a tu `<head>` la siguiente etiqueta.
 ```html
-<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.0.0/ffnm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.3.1/dist/ffnm.min.js"></script>
 ```
 ### Ejemplos de uso
@ -136,39 +216,39 @@ Añade a tu `<head>` la siguiente etiqueta.
 ##### Añadir la clase `apretado` a `button` cuando sea pulsado.
 ```html
-<button i-click="class:add('apretado')">Apreta</button>
+<button is-click="class:add('apretado')">Apreta</button>
 ```
 ##### Quitar la clase `apretado` a `button` cuando sea pulsado.
 ```html
-<button i-click="class:remove('apretado')">cerrar</button>
+<button is-click="class:remove('apretado')">cerrar</button>
 ```
 ##### Intercambiar la clase `apretado` a `button` cuando sea pulsado.
 ```html
-<button i-click="class:toggle('apretado')">ver</button>
+<button is-click="class:toggle('apretado')">ver</button>
 ```
 ##### Añadir la clase `show` al selector `#menu` cuando sea pulsado el botón.
 ```html
-<button i-click="class:add('show', '#menu')">abrir</button>
+<button is-click="class:add('show', '#menu')">abrir</button>
 <nav id="menu"></nav>
 ```
 ##### Quitar la clase `show` al selector `#menu` cuando sea pulsado el botón.
 ```html
-<button i-click="class:remove('show', '#menu')">cerrar</button>
+<button is-click="class:remove('show', '#menu')">cerrar</button>
 <nav id="menu" class="show"></nav>
 ```
 ##### Intercambiar la clase `show` al selector `#menu` cuando sea pulsado el botón.
 ```html
-<button i-click="class:toggle('show', '#menu')">ver</button>
+<button is-click="class:toggle('show', '#menu')">ver</button>
 <nav id="menu" class="show"></nav>
 ```
@ -177,13 +257,13 @@ Añade a tu `<head>` la siguiente etiqueta.
 ##### Añadir la clase `show` al selector `nav` cuando el scroll sube.
 ```html
-<nav i-scroll-up="class:add('show')"></nav>
+<nav is-scroll-up="class:add('show')"></nav>
 ```
 ##### Quitar la clase `show` al selector `nav` cuando el scroll sube.
 ```html
-<nav i-scroll-up="class:remove('show')"></nav>
+<nav is-scroll-up="class:remove('show')"></nav>
 ```
 #### Bajar scroll
@ -191,35 +271,97 @@ Añade a tu `<head>` la siguiente etiqueta.
 ##### Añadir la clase `show` al selector `nav` cuando el scroll baja.
 ```html
-<nav i-scroll-down="class:add('show')"></nav>
+<nav is-scroll-down="class:add('show')"></nav>
 ```
 ##### Quitar la clase `show` al selector `nav` cuando el scroll baja.
 ```html
-<nav i-scroll-down="class:remove('show')"></nav>
+<nav is-scroll-down="class:remove('show')"></nav>
 ```
 #### Hover
 ##### Añade la clase `show` al `div` cuando sea hover.
 ```html
 <div is-hover="class:add('show')"></div>
 ```
 ##### Quita la clase `show` al `div` cuando sea hover.
 ```html
 <div is-hover="class:remove('show')"></div>
 ```
 ##### Intercambia la clase `show` al `div` cuando sea hover.
 ```html
 <div is-hover="class:toggle('show')"></div>
 ```
 ##### Añade la clase `show` a `#button` cuando `div` sea hover.
 ```html
 <div is-hover="class:toggle('show', '#button')"></div>
 <button id="button">Hi</div>
 ```
 #### Visible
 ##### Añade la clase `ver` en el `div` cuando es visible.
 ```html
 <div is-visible="class:add('ver')"></div>
 ```
 ##### Quita la clase `ver` en el `div` cuando es visible.
 ```html
 <div is-visible="class:remove('ver')"></div>
 ```
 ##### Intercambia la clase `ver` cuando el `div` es visible.
 ```html
 <div is-visible="class:toggle('ver')"></div>
 ```
 ##### Añade la clase `ver` en `#boton` cuando el `div` es visible.
 ```html
 <div is-visible="class:toggle('ver', '#boton')"></div>
 <button id="boton">Hi</div>
 ```
 #### No visible
 ##### Añade la clase `ver` en el `div` cuando no es visible.
 ```html
 <div is-not-visible="class:add('ver')"></div>
 ```
 ##### Quita la clase `ver` en el `div` cuando no es visible.
 ```html
 <div is-not-visible="class:remove('ver')"></div>
 ```
 ##### Intercambia la clase `ver` cuando el `div` no es visible.
 ```html
 <div is-not-visible="class:toggle('ver')"></div>
 ```
 ##### Añade la clase `ver` en `#boton` cuando el `div` no es visible.
 ```html
 <div is-not-visible="class:toggle('ver', '#boton')"></div>
 <button id="boton">Hi</div>
 ```
 #### Clases sin eventos
 ##### Añadir la clase `show` al selector `#menu`
 ```javascript
 class:add('show', '#menu')
 ```
 ##### Quitar la clase `show` al selector `#menu`
 ```javascript
 class:remove('show', '#menu')
 ```
 ##### Intercambiar la clase `show` al selector `#menu`
 ```javascript
 class:toggle('show', '#menu')
 ```
 ---
 ## Development
--- a/dist/ffnm.min.js
+++ b/dist/ffnm.min.js
@ -1,2 +1,2 @@
-document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let c=[],t=void 0;function l(e,c){let t=e.getAttribute(c),l=RegExp("^(\\w+):").exec(t)[1],s=RegExp(":(\\w+)\\(").exec(t)[1],a=RegExp("\\('(\\w+)',?").exec(t)[1],o=RegExp(", *'([#,.,a-zA-Z]\\w*)'\\)");return{functionParent:l,functionChild:s,value:a,target:null!==o.exec(t)?o.exec(t)[1]:void 0}}c=[],["i-click","i-scroll-up","i-scroll-down"].map(t=>[...document.querySelectorAll(`[${t}]`)].map(l=>{let s=Object.keys(e).map(c=>e[c].map(e=>RegExp(`^${c}:${e}\\('\\w+'(, *'[#,.,a-zA-Z]\\w*')?\\)$`).test(l.getAttribute(t))).some(e=>e)).every(e=>e);return s?c.push(l):(console.error("FFNM: Bad syntax"),console.error(l)),s}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let c=l(e,"i-click");switch(c.functionParent){case"class":[...document.querySelectorAll(c.target)].concat(e).forEach(t=>{e.addEventListener("click",()=>{switch(c.functionChild){case"add":t.classList.add(c.value);break;case"remove":t.classList.remove(c.value);break;case"toggle":t.classList.toggle(c.value)}})})}}),window.addEventListener("scroll",()=>{let e=window.pageYOffset||document.documentElement.scrollTop;[...document.querySelectorAll("[i-scroll-down]")].forEach(c=>{if(e>t){let e=l(c,"i-scroll-down");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(c=>{if(e<=t){let e=l(c,"i-scroll-up");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),t=e<=0?0:e},!1)});
+document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[],s=void 0;function i(e,t){let s=e.getAttribute(t),i=RegExp("^(\\w+):").exec(s)[1],c=RegExp(":(\\w+)\\(").exec(s)[1],a=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],o=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:i,functionChild:c,value:a,target:null!==o.exec(s)?o.exec(s)[1]:void 0}}function c(e){return[...t].filter(t=>t.hasAttribute(e))}function a(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}t=[],["is-click","is-scroll-up","is-scroll-down","is-hover","is-view","is-visible","is-not-visible"].map(s=>[...document.querySelectorAll(`[${s}]`)].map(i=>{let c=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(i.getAttribute(s))).some(e=>e)).every(e=>e);return c?t.push(i):(console.error("FFNM: Bad syntax"),console.error(i)),c}).every(e=>e)).every(e=>e),c("is-click").forEach(e=>{let t=i(e,"is-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("is-scroll-down"),t=c("is-scroll-up");window.addEventListener("scroll",()=>{let c=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(c>s){let t=i(e,"is-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=i(e,"is-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("is-hover").forEach(e=>{let t=i(e,"is-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)})}})}}),function(){let e=c("is-visible"),t=c("is-not-visible");window.addEventListener("scroll",()=>{e.forEach(e=>{if(a(e)){let t=i(e,"is-visible");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(!a(e)){let t=i(e,"is-not-visible");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value),console.log("date");break;case"remove":e.classList.remove(t.value)}}}})},!1)}()});
 //# sourceMappingURL=ffnm.min.js.map
--- a/media/example.png
+++ b/media/example.png
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "ffnm",
-  "version": "1.0.0",
+  "version": "1.3.0",
  "description": "Simple plugin to avoid writing Javascript in trivial tasks.",
  "main": "gulpfile.js",
  "dependencies": {
--- a/src/core.js
+++ b/src/core.js
@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
    //===
    // VARIABLES
    //===
-    const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down'];
+    const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-hover', 'is-visible', 'is-not-visible'];
    const FUNCTION_TREE = {
        'class': ['add', 'remove', 'toggle']
    };
@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
                let checked = Object.keys(FUNCTION_TREE).map((key) => {
                    // Check METHODS FUNCTION_TREE
                    return FUNCTION_TREE[key].map((method) => {
-                        return RegExp(`^${key}:${method}\\('\\w+'(, *'[#,.,a-zA-Z]\\w*')?\\)$`).test(element.getAttribute(event));
+                        return RegExp(`^${key}:${method}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(element.getAttribute(event));
                    }).some(method => method);
                }).every(key => key);
                if(checked) {
@ -47,30 +47,41 @@ document.addEventListener('DOMContentLoaded', () => {
    /**
     * Method return params
     * return JSON - {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''}
-     * example - i-click="class:add('show', '#menu')"
+     * example - is-click="class:add('show', '#menu')"
     * return {'functionParent': 'class', 'functionChild': 'add', 'value': 'show', 'target': '#menu'}
     */
    function splitParams(element, attribute) {
        let params = element.getAttribute(attribute);
-        let functionParent = RegExp(`^(\\w+):`).exec(params)[1];
+        let functionParent = RegExp("^(\\w+):").exec(params)[1];
-        let functionChild = RegExp(`:(\\w+)\\(`).exec(params)[1];
+        let functionChild = RegExp(":(\\w+)\\(").exec(params)[1];
-        let value = RegExp(`\\(\'(\\w+)\',?`).exec(params)[1];
+        let value = RegExp("\\(\'(\\w[_-\\w0-9]+)\',?").exec(params)[1];
-        let resultTarget = RegExp(`, *\'([#,.,a-zA-Z]\\w*)\'\\)`);
+        let resultTarget = RegExp(", ?\'([.#i\\w][_-\\w0-9]+)\'\\)");
        let target = resultTarget.exec(params) !== null ? resultTarget.exec(params)[1] : undefined;
        return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target};
    }
    /**
-     * Method add events i-click
+     * 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 is-click
     * return void
     */
    function addEventClick() {
-        let eventClick = 'i-click';
+        let eventClick = 'is-click';
-        return [...document.querySelectorAll(`[${eventClick}]`)].forEach((element) => {
+        return getElementsValidatesByEvent(eventClick).forEach((element) => {
            let params = splitParams(element, eventClick);
            switch(params.functionParent) {
                case 'class':
-                [...document.querySelectorAll(params.target)].concat(element).forEach((item) => {
+                [...document.querySelectorAll(params.target)].concat(params.target === undefined ? element : undefined).forEach((item) => {
                    if (item !== undefined) {
                        element.addEventListener('click', () => {
                            switch(params.functionChild) {
                                case 'add':
@ -84,6 +95,7 @@ document.addEventListener('DOMContentLoaded', () => {
                                    break;
                            }
                        });
                    }
                    });
                break;
            }
@ -91,16 +103,18 @@ document.addEventListener('DOMContentLoaded', () => {
    }
    /**
-     * Method add events i-scroll
+     * Method add events is-scroll
     * return void
     */
    function addEventScroll() {
-        let eventScrollDown = 'i-scroll-down';
+        let eventScrollDown = 'is-scroll-down';
-        let eventScrollUp = 'i-scroll-up';
+        let eventScrollUp = 'is-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) {
@ -118,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) {
@ -139,10 +153,126 @@ document.addEventListener('DOMContentLoaded', () => {
        }, false);
    }
    /**
     * Method add events is-hover
     * return void
     */
    function addEventHover() {
        let eventHover = 'is-hover';
        return getElementsValidatesByEvent(eventHover).forEach((element) => {
            let params = splitParams(element, eventHover);
            switch(params.functionParent) {
                case 'class':
                [...document.querySelectorAll(params.target)].concat(params.target === undefined ? element : undefined).forEach((item) => {
                    if (item !== undefined) {
                        // Enter
                        switch(params.functionChild) {
                            case 'add':
                                // Enter
                                element.addEventListener('mouseenter', () => {
                                    item.classList.add(params.value);
                                });
                                // Out
                                element.addEventListener('mouseout', () => {
                                    item.classList.remove(params.value);
                                });
                                break;
                            case 'remove':
                                // Enter
                                element.addEventListener('mouseenter', () => {
                                    item.classList.remove(params.value);
                                });
                                // Out
                                element.addEventListener('mouseout', () => {
                                    item.classList.add(params.value);
                                });
                                break;
                            case 'toggle':
                                // Enter
                                element.addEventListener('mouseenter', () => {
                                    item.classList.toggle(params.value);
                                });
                                // Out
                                element.addEventListener('mouseout', () => {
                                    item.classList.toggle(params.value);
                                });
                                break;
                        }
                    }
                });
                break;
            }
       });
    }
    /**
     * Method that checks if an element is visible in the viewport
     * return bool
     */
    function isInViewport (element) {
 	      let distance = element.getBoundingClientRect();
 	      return distance.top >= 0 &&
 		           distance.left >= 0 &&
 		           distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
 		           distance.right <= (window.innerWidth || document.documentElement.clientWidth);
    };
    /**
     * Method that manages the events is-visible and is-not-visible
     * return void
     */
    function addEventVisible() {
        let eventVisible = 'is-visible';
        let eventNotVisible = 'is-not-visible';
        let elementsVisibles = getElementsValidatesByEvent(eventVisible);
        let elementsNotVisibles = getElementsValidatesByEvent(eventNotVisible);
        window.addEventListener("scroll", () => {
            // Visible
            elementsVisibles.forEach((element) => {
                if (isInViewport(element)) {
                    let params = splitParams(element, eventVisible);
                    switch(params.functionParent) {
                    case 'class':
                        switch(params.functionChild) {
                        case 'add':
                            element.classList.add(params.value);
                            break;
                        case 'remove':
                            element.classList.remove(params.value);
                            break;
                        }
                        break;
                    }
                }
            });
            // Not visible
            elementsNotVisibles.forEach((element) => {
                if (!isInViewport(element)) {
                    let params = splitParams(element, eventNotVisible);
                    switch(params.functionParent) {
                    case 'class':
                        switch(params.functionChild) {
                        case 'add':
                            element.classList.add(params.value);
                            break;
                        case 'remove':
                            element.classList.remove(params.value);
                            break;
                        }
                        break;
                    }
                }
            });
        }, false);
    }
    //===
    // INIT
    //===
    validateSyntax();
    addEventClick();
    addEventScroll();
    addEventHover();
    addEventVisible();
 });
--- a/test/is-click.html
+++ b/test/is-click.html
@ -2,7 +2,7 @@
 <html lang="en">
    <head>
        <meta charset="UTF-8"/>
-        <title>Test syntax</title>
+        <title>Test is-click</title>
        <script src="../dist/ffnm.min.js"></script>
        <style>
         .nav {
@ -21,9 +21,9 @@
        </style>
    </head>
    <body>
-        <nav class="nav" id="nav" i-click="class:remove('show')">Mi nav</nav>
+        <nav class="nav" id="nav" is-click="class:remove('show')">Mi nav</nav>
-        <button i-click="class:add('show', '#nav')">add</button>
+        <button is-click="class:add('show', '#nav')">add</button>
-        <button i-click="class:remove('show', '#nav')">remove</button>
+        <button is-click="class:remove('show', '#nav')">remove</button>
-        <button i-click="class:toggle('show', '#nav')">toggle</button>
+        <button is-click="class:toggle('show', '#nav')">toggle</button>
    </body>
 </html>
--- a/test/is-hover.html
+++ b/test/is-hover.html
@ -0,0 +1,31 @@
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Test is-hover</title>
        <script src="../dist/ffnm.min.js"></script>
        <style>
         .uppercase {
             text-transform: uppercase;
         }
        </style>
    </head>
    <body>
        <p is-hover="class:add('uppercase', '.text__1--hover')">Place the cursor over this text</p>
        <p class="text__1--hover">
            Quisque id diam vel quam elementum pulvinar etiam non quam?
        </p>
        <p class="text__1--hover">
            Ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
        </p>
        <p class="text__1--hover" is-hover="class:add('uppercase')">
            Nunc aliquet bibendum enim, facilisis gravida neque convallis a cras.
        </p>
        <p class="text__1--hover">
            Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
        </p>
        <p class="text__1--hover">
            Volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus mauris.
        </p>
    </body>
 </html>
--- a/test/is-scroll.html
+++ b/test/is-scroll.html
@ -2,7 +2,7 @@
 <html lang="en">
    <head>
        <meta charset="UTF-8"/>
-        <title>Test i-scroll</title>
+        <title>Test is-scroll</title>
        <script src="../dist/ffnm.min.js"></script>
        <style>
         .nav {
@ -21,8 +21,8 @@
        </style>
    </head>
    <body>
-        <nav i-scroll-down="class:remove('show')" i-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
+        <nav is-scroll-down="class:remove('show')" is-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
-        <p i-scroll-down="class:toggle('ala')">
+        <p is-scroll-down="class:toggle('ala')">
            Ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices. Sapien et ligula ullamcorper malesuada proin libero nunc, consequat interdum varius sit amet, mattis.
        </p>
        <p>
--- a/test/is-visible.html
+++ b/test/is-visible.html
@ -0,0 +1,47 @@
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Test is-visible</title>
        <script src="../dist/ffnm.min.js"></script>
        <link href="https://unpkg.com/spectre.css/dist/spectre.min.css" rel="stylesheet"/>
        <style>
         .image-1 {
             transition: 1s;
             transform: translateY(-2rem);
             opacity: 0;
         }
         .image-2 {
             transform: scale(.5);
             transition: 1s;
             opacity: 0;
         }
         .show {
             transform: scale(1) translateY(0);
             opacity: 1;
         }
        </style>
    </head>
    <body>
        <div class="hero hero-lg">
            <div class="hero-body">
                <h1 class="text-center">Please scroll down</h1>
            </div>
        </div>
        <p class="text-center">
            <img is-visible="class:add('show')" class="image-1" src="https://source.unsplash.com/random/500x300?cat" alt="Image 1">
        </p>
        <p class="text-center">
            <img is-visible="class:add('show')" is-not-visible="class:remove('show')" class="image-2" src="https://source.unsplash.com/random/500x300?dog" alt="Image 2">
        </p>
        <p class="text-center">
            <img is-visible="class:add('show')" is-not-visible="class:remove('show')" class="image-1" src="https://source.unsplash.com/random/500x300?koala" alt="Image 1">
        </p>
    </body>
 </html>
--- a/test/validate.html
+++ b/test/validate.html
@ -7,97 +7,110 @@
    </head>
    <body>
        <!-- Class with ID -->
-        <div i-click="class:add('show1', '#menu1')">add</div>
+        <div is-click="class:add('show1', '#menu1')">add</div>
-        <div i-click="class:remove('show2', '#menu2')">remove</div>
+        <div is-click="class:remove('show2', '#menu2')">remove</div>
-        <div i-click="class:toggle('show3', '#menu3')">toggle</div>
+        <div is-click="class:toggle('show3', '#menu3')">toggle</div>
        <!-- End Class with ID -->
        <!-- Class with class -->
-        <div i-click="class:add('show1', '.menu1')">add</div>
+        <div is-click="class:add('show1', '.menu1')">add</div>
-        <div i-click="class:remove('show2', '.menu2')">remove</div>
+        <div is-click="class:remove('show2', '.menu2')">remove</div>
-        <div i-click="class:toggle('show3', '.menu3')">toggle</div>
+        <div is-click="class:toggle('show3', '.menu3')">toggle</div>
        <!-- End Class with class -->
        <!-- Class with tag -->
-        <div i-click="class:add('show1', 'a')">add</div>
+        <div is-click="class:add('show1', 'a')">add</div>
-        <div i-click="class:remove('show2', 'li')">remove</div>
+        <div is-click="class:remove('show2', 'li')">remove</div>
-        <div i-click="class:toggle('show3', 'button')">toggle</div>
+        <div is-click="class:toggle('show3', 'button')">toggle</div>
        <!-- End Class with tag -->
        <!-- Class with ID -->
-        <div i-scroll-up="class:add('show1', '#menu1')">add</div>
+        <div is-scroll-up="class:add('show1', '#menu1')">add</div>
-        <div i-scroll-up="class:remove('show2', '#menu2')">remove</div>
+        <div is-scroll-up="class:remove('show2', '#menu2')">remove</div>
-        <div i-scroll-up="class:toggle('show3', '#menu3')">toggle</div>
+        <div is-scroll-up="class:toggle('show3', '#menu3')">toggle</div>
        <!-- End Class with ID -->
        <!-- Class with class -->
-        <div i-scroll-up="class:add('show1', '.menu1')">add</div>
+        <div is-scroll-up="class:add('show1', '.menu1')">add</div>
-        <div i-scroll-up="class:remove('show2', '.menu2')">remove</div>
+        <div is-scroll-up="class:remove('show2', '.menu2')">remove</div>
-        <div i-scroll-up="class:toggle('show3', '.menu3')">toggle</div>
+        <div is-scroll-up="class:toggle('show3', '.menu3')">toggle</div>
        <!-- End Class with class -->
        <!-- Class with tag -->
-        <div i-scroll-up="class:add('show1', 'a')">add</div>
+        <div is-scroll-up="class:add('show1', 'a')">add</div>
-        <div i-scroll-up="class:remove('show2', 'li')">remove</div>
+        <div is-scroll-up="class:remove('show2', 'li')">remove</div>
-        <div i-scroll-up="class:toggle('show3', 'button')">toggle</div>
+        <div is-scroll-up="class:toggle('show3', 'button')">toggle</div>
        <!-- End Class with tag -->
        <!-- Class with ID -->
-        <div i-scroll-down="class:add('show1', '#menu1')">add</div>
+        <div is-scroll-down="class:add('show1', '#menu1')">add</div>
-        <div i-scroll-down="class:remove('show2', '#menu2')">remove</div>
+        <div is-scroll-down="class:remove('show2', '#menu2')">remove</div>
-        <div i-scroll-down="class:toggle('show3', '#menu3')">toggle</div>
+        <div is-scroll-down="class:toggle('show3', '#menu3')">toggle</div>
        <!-- End Class with ID -->
        <!-- Class with class -->
-        <div i-scroll-down="class:add('show1', '.menu1')">add</div>
+        <div is-scroll-down="class:add('show1', '.menu1')">add</div>
-        <div i-scroll-down="class:remove('show2', '.menu2')">remove</div>
+        <div is-scroll-down="class:remove('show2', '.menu2')">remove</div>
-        <div i-scroll-down="class:toggle('show3', '.menu3')">toggle</div>
+        <div is-scroll-down="class:toggle('show3', '.menu3')">toggle</div>
        <!-- End Class with class -->
        <!-- Class with tag -->
-        <div i-scroll-down="class:add('show1', 'a')">add</div>
+        <div is-scroll-down="class:add('show1', 'a')">add</div>
-        <div i-scroll-down="class:remove('show2', 'li')">remove</div>
+        <div is-scroll-down="class:remove('show2', 'li')">remove</div>
-        <div i-scroll-down="class:toggle('show3', 'button')">toggle</div>
+        <div is-scroll-down="class:toggle('show3', 'button')">toggle</div>
        <!-- End Class with tag -->
        <!-- Class with ID -->
-        <div i-hover="class:add('show1', '#menu1')">add</div>
+        <div is-hover="class:add('show1', '#menu1')">add</div>
-        <div i-hover="class:remove('show2', '#menu2')">remove</div>
+        <div is-hover="class:remove('show2', '#menu2')">remove</div>
-        <div i-hover="class:toggle('show3', '#menu3')">toggle</div>
+        <div is-hover="class:toggle('show3', '#menu3')">toggle</div>
        <!-- End Class with ID -->
        <!-- Class with class -->
-        <div i-hover="class:add('show1', '.menu1')">add</div>
+        <div is-hover="class:add('show1', '.menu1')">add</div>
-        <div i-hover="class:remove('show2', '.menu2')">remove</div>
+        <div is-hover="class:remove('show2', '.menu2')">remove</div>
-        <div i-hover="class:toggle('show3', '.menu3')">toggle</div>
+        <div is-hover="class:toggle('show3', '.menu3')">toggle</div>
        <!-- End Class with class -->
        <!-- Class with tag -->
-        <div i-hover="class:add('show1', 'a')">add</div>
+        <div is-hover="class:add('show1', 'a')">add</div>
-        <div i-hover="class:remove('show2', 'li')">remove</div>
+        <div is-hover="class:remove('show2', 'li')">remove</div>
-        <div i-hover="class:toggle('show3', 'button')">toggle</div>
+        <div is-hover="class:toggle('show3', 'button')">toggle</div>
        <!-- End Class with tag -->
        <!-- Class with ID -->
-        <div i-view="class:add('show1', '#menu1')">add</div>
+        <div is-visible="class:add('show1', '#menu1')">add</div>
-        <div i-view="class:remove('show2', '#menu2')">remove</div>
+        <div is-visible="class:remove('show2', '#menu2')">remove</div>
        <div i-view="class:toggle('show3', '#menu3')">toggle</div>
        <!-- End Class with ID -->
        <!-- Class with class -->
-        <div i-view="class:add('show1', '.menu1')">add</div>
+        <div is-visible="class:add('show1', '.menu1')">add</div>
-        <div i-view="class:remove('show2', '.menu2')">remove</div>
+        <div is-visible="class:remove('show2', '.menu2')">remove</div>
        <div i-view="class:toggle('show3', '.menu3')">toggle</div>
        <!-- End Class with class -->
        <!-- Class with tag -->
-        <div i-view="class:add('show1', 'a')">add</div>
+        <div is-visible="class:add('show1', 'a')">add</div>
-        <div i-view="class:remove('show2', 'li')">remove</div>
+        <div is-visible="class:remove('show2', 'li')">remove</div>
        <div i-view="class:toggle('show3', 'button')">toggle</div>
        <!-- End Class with tag -->
        <!-- Class with ID -->
        <div is-not-visible="class:add('show1', '#menu1')">add</div>
        <div is-not-visible="class:remove('show2', '#menu2')">remove</div>
        <!-- End Class with ID -->
        <!-- Class with class -->
        <div is-not-visible="class:add('show1', '.menu1')">add</div>
        <div is-not-visible="class:remove('show2', '.menu2')">remove</div>
        <!-- End Class with class -->
        <!-- Class with tag -->
        <div is-not-visible="class:add('show1', 'a')">add</div>
        <div is-not-visible="class:remove('show2', 'li')">remove</div>
        <!-- End Class with tag -->
        <!-- Errors -->
-        <div i-click="class:dd('show1', '.menu1')">add</div>
+        <div is-click="class:dd('show1', '.menu1')">add</div>
    </body>
 </html>
Author	SHA1	Message	Date
Andros Fenollosa	b306334ca5	Update README.md	2020-07-22 20:27:42 +02:00
Andros Fenollosa	e8cbe46659	Remove old code	2020-07-22 20:27:10 +02:00
Andros Fenollosa	ea2e148395	Update README.md	2020-07-22 20:09:56 +02:00
Andros Fenollosa	5b06ffd174	Update syntax and Add visible	2020-07-22 19:31:19 +02:00
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
Andros Fenollosa	4b01ca94bb	Fix dash	2020-07-17 17:50:20 +02:00
Andros Fenollosa	91338f9185	Update README.md	2020-07-17 16:29:34 +02:00
Andros Fenollosa	0284ebc9c4	Update README.md	2020-07-17 16:25:00 +02:00
Andros Fenollosa	3aa327bad6	Update README.md	2020-07-17 12:12:22 +02:00
Andros Fenollosa	a30f4023d2	Fix regex check	2020-07-17 12:12:02 +02:00
Andros Fenollosa	ae1c78da16	Add hover	2020-07-17 11:11:53 +02:00
Andros Fenollosa	37820b5bb4	Fix images	2020-07-16 11:30:47 +02:00
Andros Fenollosa	2c306485d4	Update README.md	2020-07-16 11:23:05 +02:00
Andros Fenollosa	605a4463b6	Update media	2020-07-16 11:15:38 +02:00
Andros Fenollosa	cd75682160	Delete example.png	2020-07-16 11:09:17 +02:00
Andros Fenollosa	facde1d9db	Update README.md	2020-07-16 01:12:36 +02:00
`@ -1,2 +1,2 @@`
	document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let c=[],t=void 0;function l(e,c){let t=e.getAttribute(c),l=RegExp("^(\\w+):").exec(t)[1],s=RegExp(":(\\w+)\\(").exec(t)[1],a=RegExp("\\('(\\w+)',?").exec(t)[1],o=RegExp(", '([#,.,a-zA-Z]\\w)'\\)");return{functionParent:l,functionChild:s,value:a,target:null!==o.exec(t)?o.exec(t)[1]:void 0}}c=[],["i-click","i-scroll-up","i-scroll-down"].map(t=>[...document.querySelectorAll(`[${t}]`)].map(l=>{let s=Object.keys(e).map(c=>e[c].map(e=>RegExp(`^${c}:${e}\\('\\w+'(, '[#,.,a-zA-Z]\\w')?\\)$`).test(l.getAttribute(t))).some(e=>e)).every(e=>e);return s?c.push(l):(console.error("FFNM: Bad syntax"),console.error(l)),s}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let c=l(e,"i-click");switch(c.functionParent){case"class":[...document.querySelectorAll(c.target)].concat(e).forEach(t=>{e.addEventListener("click",()=>{switch(c.functionChild){case"add":t.classList.add(c.value);break;case"remove":t.classList.remove(c.value);break;case"toggle":t.classList.toggle(c.value)}})})}}),window.addEventListener("scroll",()=>{let e=window.pageYOffset\|\|document.documentElement.scrollTop;[...document.querySelectorAll("[i-scroll-down]")].forEach(c=>{if(e>t){let e=l(c,"i-scroll-down");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(c=>{if(e<=t){let e=l(c,"i-scroll-up");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),t=e<=0?0:e},!1)});	document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[],s=void 0;function i(e,t){let s=e.getAttribute(t),i=RegExp("^(\\w+):").exec(s)[1],c=RegExp(":(\\w+)\\(").exec(s)[1],a=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],o=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:i,functionChild:c,value:a,target:null!==o.exec(s)?o.exec(s)[1]:void 0}}function c(e){return[...t].filter(t=>t.hasAttribute(e))}function a(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight\|\|document.documentElement.clientHeight)&&t.right<=(window.innerWidth\|\|document.documentElement.clientWidth)}t=[],["is-click","is-scroll-up","is-scroll-down","is-hover","is-view","is-visible","is-not-visible"].map(s=>[...document.querySelectorAll(`[${s}]`)].map(i=>{let c=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(i.getAttribute(s))).some(e=>e)).every(e=>e);return c?t.push(i):(console.error("FFNM: Bad syntax"),console.error(i)),c}).every(e=>e)).every(e=>e),c("is-click").forEach(e=>{let t=i(e,"is-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("is-scroll-down"),t=c("is-scroll-up");window.addEventListener("scroll",()=>{let c=window.pageYOffset\|\|document.documentElement.scrollTop;e.forEach(e=>{if(c>s){let t=i(e,"is-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=i(e,"is-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("is-hover").forEach(e=>{let t=i(e,"is-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)})}})}}),function(){let e=c("is-visible"),t=c("is-not-visible");window.addEventListener("scroll",()=>{e.forEach(e=>{if(a(e)){let t=i(e,"is-visible");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(!a(e)){let t=i(e,"is-not-visible");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value),console.log("date");break;case"remove":e.classList.remove(t.value)}}}})},!1)}()});
	`//# sourceMappingURL=ffnm.min.js.map`	`//# sourceMappingURL=ffnm.min.js.map`