Update README.md

Fix regex check
Add hover
2020-07-17 12:12:22 +02:00 · 2020-07-17 12:12:02 +02:00 · 2020-07-17 11:11:53 +02:00 · 2020-07-16 11:30:47 +02:00 · 2020-07-16 11:23:05 +02:00 · 2020-07-16 11:15:38 +02:00
15 changed files with 634 additions and 42 deletions
--- a/README.md
+++ b/README.md
@ -1,6 +1,23 @@
 # FFNM (Front-End for the next master)
-Simple utility to avoid writing Javascript when working with classes.
+Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **2Kb**!
 Simplifies the click
 Modify others
 Simplifies the scroll
 Scroll up
 Scroll down
 Simplifies Hover
 ## DEMOS
 [Click](https://codepen.io/androsfenollosa/pen/dyGdRVE)
 ## Documentation
@ -16,51 +33,108 @@ Simple utility to avoid writing Javascript when working with classes.
 Add to your `<head>` the following tag.
 ```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.2.1/dist/ffnm.min.js"></script>
 ```
 ### Examples
 #### Click
 ##### Add the class `press` to `button` when the button is pressed.
 ```html
 <button i-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>
 ```
 ##### Switch the classs `show` to `button` when the button is pressed.
 ```html
 <button i-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>
 <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>
 <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>
 <nav id="nav" class="show"></nav>
 ```
-#### Classes without events
+#### Scroll up
-##### Add the class `show` to the `#nav` selector
+##### Add the class `show` to `nav` when the scroll goes up.
-```javascript
+```html
-class:add('show', '#nav')
+<nav i-scroll-up="class:add('show')"></nav>
 ```
-##### Remove the `show` class from the `#nav` selector
+##### Remove the `show` class from `nav` when the scroll goes up.
-```javascript
+```html
-class:remove('show', '#nav')
+<nav i-scroll-up="class:remove('show')"></nav>
 ```
-##### Switch the class `show` to the `#nav` selector
+#### Scroll down
-```javascript
+##### Add the class `show` to `nav` when the scroll down.
-class:toggle('show', '#nav')
+
 ```html
 <nav i-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>
 ```
 #### Hover
 ##### Add the class `show` to `div` when hover.
 ```html
 <div i-hover="class:add('show')"></div>
 ```
 ##### Remove the `show` class from `div` when hover.
 ```html
 <div i-hover="class:remove('show')"></div>
 ```
 ##### Toggle the `show` class from `div` when hover.
 ```html
 <div i-hover="class:toggle('show')"></div>
 ```
 ##### Add the class `show` to `#button` when `div` hover.
 ```html
 <div i-hover="class:toggle('show', '#button')"></div>
 <button id="button">Hi</div>
 ```
 ---
 ## Spanish/Español
@ -70,50 +144,107 @@ 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.2.1/dist/ffnm.min.js"></script>
 ```
 ### Ejemplos de uso
 #### Clic
 ##### Añadir la clase `apretado` a `button` cuando sea pulsado.
 ```html
 <button i-click="class:add('apretado')">Apreta</button>
 ```
 ##### Quitar la clase `apretado` a `button` cuando sea pulsado.
 ```html
 <button i-click="class:remove('apretado')">cerrar</button>
 ```
 ##### Intercambiar la clase `apretado` a `button` cuando sea pulsado.
 ```html
 <button i-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>
 <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>
 <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>
 <nav id="menu" class="show"></nav>
 ```
-#### Clases sin eventos
+#### Subir scroll
-##### Añadir la clase `show` al selector `#menu`
+##### Añadir la clase `show` al selector `nav` cuando el scroll sube.
-```javascript
+```html
-class:add('show', '#menu')
+<nav i-scroll-up="class:add('show')"></nav>
 ```
-##### Quitar la clase `show` al selector `#menu`
+##### Quitar la clase `show` al selector `nav` cuando el scroll sube.
-```javascript
+```html
-class:remove('show', '#menu')
+<nav i-scroll-up="class:remove('show')"></nav>
 ```
-##### Intercambiar la clase `show` al selector `#menu`
+#### Bajar scroll
-```javascript
+##### Añadir la clase `show` al selector `nav` cuando el scroll baja.
-class:toggle('show', '#menu')
+
 ```html
 <nav i-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>
 ```
 #### Hover
 ##### Añade la clase `show` al `div` cuando sea hover.
 ```html
 <div i-hover="class:add('show')"></div>
 ```
 ##### Quita la clase `show` al `div` cuando sea hover.
 ```html
 <div i-hover="class:remove('show')"></div>
 ```
 ##### Intercambia la clase `show` al `div` cuando sea hover.
 ```html
 <div i-hover="class:toggle('show')"></div>
 ```
 ##### Añade la clase `show` a `#button` cuando `div` sea hover.
 ```html
 <div i-hover="class:toggle('show', '#button')"></div>
 <button id="button">Hi</div>
 ```
 ---
 ## 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 t=[];t=[],["i-click","i-scroll-up","i-scroll-down"].map(c=>[...document.querySelectorAll(`[${c}]`)].map(l=>{let r=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('\\w+', *'[#,.,a-zA-Z]\\w*'\\)$`).test(l.getAttribute(c))).some(e=>e)).every(e=>e);return r?t.push(l):(console.error("FFNM: Bad syntax"),console.error(l)),r}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let t=function(e,t){let c=e.getAttribute(t),l=RegExp("^(\\w+):").exec(c)[1],r=RegExp(":(\\w+)\\(").exec(c)[1],a=RegExp("\\('(\\w+)',").exec(c)[1],o=RegExp(", *'([#,.,a-zA-Z]\\w*)'\\)").exec(c)[1];return{functionParent:l,functionChild:r,value:a,target:o}}(e,"i-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].forEach(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)}})})}})});
+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+)',?").exec(c)[1],o=RegExp(", *'([#,.,a-zA-Z]\\w*)'\\)");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(e).forEach(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(e).forEach(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)})}})}})});
 //# sourceMappingURL=ffnm.min.js.map
--- a/media/carbon-config.json
+++ b/media/carbon-config.json
@ -0,0 +1 @@
 {"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
@ -3,11 +3,12 @@ document.addEventListener('DOMContentLoaded', () => {
    //===
    // VARIABLES
    //===
-    const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down'];
+    const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down', 'i-hover'];
    const FUNCTION_TREE = {
        'class': ['add', 'remove', 'toggle']
    };
    let elementsValidates = [];
    let lastScrollTop = undefined;
    //===
    // FUNCTIONS
@ -27,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) {
@ -44,7 +45,23 @@ document.addEventListener('DOMContentLoaded', () => {
    }
    /**
-     * Method add events click
+     * Method return params
     * return JSON - {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''}
     * example - i-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 functionChild = RegExp(`:(\\w+)\\(`).exec(params)[1];
        let value = RegExp(`\\(\'(\\w+)\',?`).exec(params)[1];
        let resultTarget = RegExp(`, *\'([#,.,a-zA-Z]\\w*)\'\\)`);
        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
     * return void
     */
    function addEventClick() {
@ -53,7 +70,7 @@ document.addEventListener('DOMContentLoaded', () => {
            let params = splitParams(element, eventClick);
            switch(params.functionParent) {
                case 'class':
-                    [...document.querySelectorAll(params.target)].forEach((item) => {
+                [...document.querySelectorAll(params.target)].concat(element).forEach((item) => {
                        element.addEventListener('click', () => {
                            switch(params.functionChild) {
                                case 'add':
@ -74,24 +91,110 @@ document.addEventListener('DOMContentLoaded', () => {
    }
    /**
-     * Method return params
+     * Method add events i-scroll
-     * return JSON - {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''}
+     * return void
     * example - i-click="class:add('show', '#menu')"
     * return {'functionParent': 'class', 'functionChild': 'add', 'value': 'show', 'target': '#menu'}
     */
-    function splitParams(element, attribute) {
+    function addEventScroll() {
-        let params = element.getAttribute(attribute);
+        let eventScrollDown = 'i-scroll-down';
-        let functionParent = RegExp(`^(\\w+):`).exec(params)[1];
+        let eventScrollUp = 'i-scroll-up';
-        let functionChild = RegExp(`:(\\w+)\\(`).exec(params)[1];
+        window.addEventListener("scroll", () => {
-        let value = RegExp(`\\(\'(\\w+)\',`).exec(params)[1];
+            let posScroll = window.pageYOffset || document.documentElement.scrollTop;
-        let target = RegExp(`, *\'([#,.,a-zA-Z]\\w*)\'\\)`).exec(params)[1];
+            // Scroll down
-        return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target};
+            [...document.querySelectorAll(`[${eventScrollDown}]`)].forEach((element) => {
                if (posScroll > lastScrollTop) {
                    let params = splitParams(element, eventScrollDown);
                    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;
                    }
                }
            });
            // Scroll up
            [...document.querySelectorAll(`[${eventScrollUp}]`)].forEach((element) => {
                if (posScroll <= lastScrollTop) {
                    let params = splitParams(element, eventScrollUp);
                    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;
                    }
                }
            });
            lastScrollTop = posScroll <= 0 ? 0 : posScroll; // For Mobile or negative scrolling
        }, false);
    }
    /**
     * Method add events i-hover
     * return void
     */
    function addEventHover() {
        let eventHover = 'i-hover';
        return [...document.querySelectorAll(`[${eventHover}]`)].forEach((element) => {
            let params = splitParams(element, eventHover);
            switch(params.functionParent) {
                case 'class':
                [...document.querySelectorAll(params.target)].concat(element).forEach((item) => {
                    // 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;
            }
       });
    }
    //===
    // INIT
    //===
    validateSyntax();
    addEventClick();
    addEventScroll();
    addEventHover();
 });
--- a/test/i-click.html
+++ b/test/i-click.html
@ -3,7 +3,7 @@
    <head>
        <meta charset="UTF-8"/>
        <title>Test syntax</title>
-        <script src="../dist/FFNM.min.js"></script>
+        <script src="../dist/ffnm.min.js"></script>
        <style>
         .nav {
             position: fixed;
@ -21,7 +21,7 @@
        </style>
    </head>
    <body>
-        <nav class="nav" id="nav">Mi nav</nav>
+        <nav class="nav" id="nav" i-click="class:remove('show')">Mi nav</nav>
        <button i-click="class:add('show', '#nav')">add</button>
        <button i-click="class:remove('show', '#nav')">remove</button>
        <button i-click="class:toggle('show', '#nav')">toggle</button>
--- a/test/i-hover.html
+++ b/test/i-hover.html
@ -0,0 +1,31 @@
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Test i-hover</title>
        <script src="../dist/ffnm.min.js"></script>
        <style>
         .uppercase {
             text-transform: uppercase;
         }
        </style>
    </head>
    <body>
        <p i-hover="class:add('uppercase', '.text__-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" i-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/i-scroll.html
+++ b/test/i-scroll.html
@ -0,0 +1,326 @@
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Test i-scroll</title>
        <script src="../dist/ffnm.min.js"></script>
        <style>
         .nav {
             position: fixed;
             bottom: 0;
             left: 0;
             right: 0;
             height: 10rem;
             background: orange;
             transition: 1s;
             transform: translateY(10rem);
         }
         .show {
             transform: translateY(0);
         }
        </style>
    </head>
    <body>
        <nav i-scroll-down="class:remove('show')" i-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
        <p i-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>
            Praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris. Pellentesque habitant morbi tristique senectus et?
        </p>
        <p>
            Tempor nec feugiat nisl pretium fusce id velit ut tortor pretium. At elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing tristique risus nec.
        </p>
        <p>
            Ultrices vitae, auctor eu augue ut lectus arcu, bibendum at varius vel, pharetra vel turpis nunc eget lorem dolor, sed! Aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros.
        </p>
        <p>
            Laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit! Mauris, in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in!
        </p>
        <p>
            Massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra? Euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante!
        </p>
        <p>
            Feugiat scelerisque varius morbi enim nunc, faucibus a pellentesque sit amet, porttitor eget dolor morbi non arcu risus, quis varius quam quisque id diam? Pellentesque id nibh tortor, id aliquet!
        </p>
        <p>
            Tempus, urna et pharetra pharetra, massa massa ultricies mi, quis hendrerit dolor magna eget est lorem ipsum dolor sit amet, consectetur adipiscing? Venenatis, lectus magna fringilla urna, porttitor rhoncus dolor.
        </p>
        <p>
            In ante metus, dictum at tempor commodo, ullamcorper a lacus? Hendrerit gravida rutrum quisque non tellus orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci.
        </p>
        <p>
            Id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus! Nec dui nunc mattis enim ut tellus elementum sagittis vitae et.
        </p>
        <p>
            Faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus, sed.
        </p>
        <p>
            Leo vel orci porta non pulvinar. Sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus?
        </p>
        <p>
            Pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus!
        </p>
        <p>
            Nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet? Nunc sed velit dignissim sodales ut eu sem integer.
        </p>
        <p>
            Sed vulputate mi sit amet mauris commodo quis imperdiet massa! Senectus et netus et malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi leo urna, molestie at elementum eu!
        </p>
        <p>
            Eu mi bibendum neque egestas congue quisque egestas diam in. Id interdum velit laoreet id donec ultrices tincidunt arcu, non sodales neque sodales ut etiam sit amet nisl purus, in!
        </p>
        <p>
            Id venenatis a, condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed tempus, urna et pharetra pharetra. Eros donec ac odio tempor.
        </p>
        <p>
            Tortor aliquam nulla facilisi cras fermentum? Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante.
        </p>
        <p>
            Nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod elementum nisi, quis eleifend quam adipiscing vitae!
        </p>
        <p>
            Curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo! Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum posuere urna nec tincidunt praesent.
        </p>
        <p>
            Ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus! Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
        </p>
        <p>
            Egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc? Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis.
        </p>
        <p>
            Nibh tellus molestie nunc, non blandit massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et! Mauris nunc congue nisi, vitae suscipit tellus mauris a diam maecenas.
        </p>
        <p>
            Faucibus purus in massa tempor nec? Tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat.
        </p>
        <p>
            Donec adipiscing tristique risus nec feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Consectetur a erat nam at lectus urna duis convallis!
        </p>
        <p>
            Enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat.
        </p>
        <p>
            Ac, feugiat sed lectus vestibulum mattis ullamcorper velit? Magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim?
        </p>
        <p>
            Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur! Neque sodales ut etiam sit amet nisl purus, in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non?
        </p>
        <p>
            Et malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit! Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien.
        </p>
        <p>
            Ipsum consequat nisl, vel pretium lectus quam id leo in vitae turpis massa sed elementum tempus egestas sed sed risus pretium. Mauris pharetra et ultrices neque ornare aenean euismod elementum.
        </p>
        <p>
            Neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Dolor sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla.
        </p>
        <p>
            Aliquet enim tortor, at auctor. Orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla!
        </p>
        <p>
            Risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris, cursus mattis molestie a, iaculis at erat pellentesque adipiscing commodo elit, at. Aenean vel elit scelerisque mauris pellentesque!
        </p>
        <p>
            Nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed libero enim, sed faucibus turpis in eu mi bibendum? Venenatis tellus in metus vulputate!
        </p>
        <p>
            Ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices vitae, auctor eu augue ut lectus arcu, bibendum at. Ut enim blandit volutpat maecenas volutpat blandit aliquam.
        </p>
        <p>
            Neque, vitae tempus quam pellentesque nec nam aliquam sem et tortor consequat id? Nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed libero.
        </p>
        <p>
            Elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum posuere? Nibh praesent tristique magna sit amet purus gravida?
        </p>
        <p>
            Sit amet justo donec enim diam, vulputate ut pharetra? Ornare arcu odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed.
        </p>
        <p>
            Amet justo donec enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris! Pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros, in.
        </p>
        <p>
            Faucibus et molestie ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra? Libero volutpat sed cras ornare arcu dui vivamus arcu?
        </p>
        <p>
            Tortor posuere ac ut consequat semper viverra nam libero justo, laoreet sit amet? Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed?
        </p>
        <p>
            Porttitor lacus, luctus accumsan tortor posuere ac ut consequat semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet. Arcu dictum varius duis at consectetur lorem!
        </p>
        <p>
            Purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet! Enim, facilisis gravida neque convallis a cras semper auctor neque, vitae tempus quam pellentesque.
        </p>
        <p>
            Proin sed libero enim, sed faucibus turpis in eu mi bibendum neque egestas? Sagittis, nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed.
        </p>
        <p>
            Massa, eget egestas purus viverra accumsan in nisl. Cras fermentum, odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo in vitae turpis massa sed elementum!
        </p>
        <p>
            Quam elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet, consectetur! Orci eu lobortis elementum, nibh tellus molestie nunc, non blandit massa enim nec?
        </p>
        <p>
            Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante metus, dictum at tempor commodo, ullamcorper a. Eget est lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque habitant?
        </p>
        <p>
            Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sed blandit libero volutpat sed cras ornare arcu dui vivamus arcu felis, bibendum?
        </p>
        <p>
            Neque egestas congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc, sed blandit libero volutpat sed cras ornare arcu! Vel eros donec ac odio!
        </p>
        <p>
            Viverra vitae congue eu, consequat ac felis. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus nulla at volutpat.
        </p>
        <p>
            Est velit egestas dui, id ornare arcu odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum?
        </p>
        <p>
            Dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet! At auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci?
        </p>
        <p>
            Magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo? Cras adipiscing enim eu turpis egestas pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros.
        </p>
        <p>
            Eget felis eget nunc lobortis mattis aliquam faucibus purus in massa tempor nec feugiat nisl! Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat!
        </p>
        <p>
            Mi tempus imperdiet nulla malesuada pellentesque elit eget? In eu mi bibendum neque egestas congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc, sed!
        </p>
        <p>
            Accumsan sit amet nulla facilisi morbi. Gravida rutrum quisque non tellus orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus.
        </p>
        <p>
            Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante? Sit amet facilisis magna etiam tempor, orci eu lobortis elementum, nibh tellus molestie nunc, non blandit massa!
        </p>
        <p>
            Sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor orci dapibus ultrices in iaculis? Auctor eu augue ut lectus.
        </p>
        <p>
            Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis? Eros donec ac odio tempor orci dapibus ultrices in iaculis nunc sed augue.
        </p>
        <p>
            Risus, quis varius quam quisque id diam vel quam elementum pulvinar etiam non quam! Non pulvinar neque laoreet suspendisse interdum consectetur libero, id faucibus nisl tincidunt eget nullam non nisi.
        </p>
        <p>
            Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae?
        </p>
        <p>
            Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et! Mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum, faucibus vitae aliquet nec, ullamcorper!
        </p>
        <p>
            Eu augue ut lectus arcu? Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc?
        </p>
        <p>
            Eu ultrices vitae, auctor eu augue ut lectus arcu, bibendum at varius vel? Et ligula ullamcorper malesuada proin libero nunc, consequat interdum varius sit amet, mattis vulputate enim nulla aliquet.
        </p>
        <p>
            Viverra mauris, in aliquam sem fringilla ut morbi tincidunt? Nulla facilisi morbi tempus iaculis urna, id volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean et tortor?
        </p>
        <p>
            Sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris. Ipsum dolor sit amet, consectetur adipiscing elit duis.
        </p>
        <p>
            Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Nulla facilisi morbi tempus iaculis urna, id volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean et.
        </p>
        <p>
            Lacus, sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus! Eros, in cursus turpis massa tincidunt dui ut ornare.
        </p>
        <p>
            Tellus cras adipiscing enim eu? Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris vitae ultricies?
        </p>
        <p>
            Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo eget magna? Eu scelerisque felis imperdiet proin.
        </p>
        <p>
            Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet! Amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim!
        </p>
        <p>
            Eget nunc scelerisque viverra mauris, in aliquam sem fringilla ut. Morbi leo urna, molestie at elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing?
        </p>
        <p>
            Ut placerat orci nulla pellentesque. Aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat?
        </p>
        <p>
            Mi sit amet mauris commodo quis! Viverra mauris, in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id.
        </p>
        <p>
            Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo?
        </p>
        <p>
            Integer quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet massa? Viverra vitae congue eu, consequat ac felis donec et odio pellentesque diam volutpat commodo sed egestas?
        </p>
        <p>
            Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet. Dignissim sodales ut eu sem integer vitae justo eget magna fermentum iaculis eu non diam phasellus vestibulum lorem sed risus ultricies?
        </p>
        <p>
            Integer quis auctor elit sed vulputate? Adipiscing enim eu turpis egestas pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros, in cursus turpis massa tincidunt dui ut ornare.
        </p>
        <p>
            Nam aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget velit. Libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam.
        </p>
        <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis? Pretium lectus quam id leo?
        </p>
        <p>
            Accumsan in nisl nisi, scelerisque eu ultrices vitae, auctor eu! Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus eget.
        </p>
        <p>
            Malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse? Maecenas pharetra convallis posuere morbi leo urna?
        </p>
        <p>
            Mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor. Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi.
        </p>
        <p>
            Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Ac tortor dignissim convallis aenean.
        </p>
        <p>
            Non arcu risus, quis varius quam quisque id diam vel. Ut consequat semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam?
        </p>
        <p>
            Vitae, auctor eu augue ut lectus arcu, bibendum at! Aliquam vestibulum morbi blandit cursus risus, at ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus.
        </p>
        <p>
            Urna, molestie at elementum eu, facilisis sed odio morbi quis commodo odio! Hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus?
        </p>
        <p>
            Vitae tortor condimentum lacinia quis vel eros donec ac odio. Praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui.
        </p>
        <p>
            Sed nisi lacus, sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat? Viverra accumsan in nisl nisi, scelerisque eu ultrices!
        </p>
        <p>
            Cursus turpis massa tincidunt dui ut ornare lectus sit amet est placerat. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo?
        </p>
        <p>
            Pellentesque id nibh tortor, id aliquet lectus proin nibh nisl, condimentum id venenatis a, condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et. Semper quis lectus nulla at!
        </p>
        <p>
            Elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes. Arcu dui vivamus arcu felis, bibendum ut tristique et, egestas quis ipsum suspendisse ultrices gravida dictum fusce ut.
        </p>
        <p>
            Aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit, scelerisque in dictum non, consectetur a.
        </p>
        <p>
            Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec massa sapien, faucibus.
        </p>
        <p>
            Egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris, cursus mattis molestie a, iaculis at erat pellentesque. Maecenas volutpat blandit aliquam etiam erat velit.
        </p>
        <p>
            Sit amet purus gravida quis blandit turpis cursus? Platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus mauris a diam maecenas sed enim.
        </p>
        <p>
            Etiam tempor, orci eu lobortis. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec massa sapien, faucibus et molestie!
        </p>
        <p>
            Aenean pharetra, magna ac placerat vestibulum, lectus mauris? Faucibus purus in massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae.
        </p>
        <p>
            Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi! Dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus eget.
        </p>
        <p>
            Nunc sed velit dignissim sodales ut eu sem integer vitae justo eget magna fermentum iaculis eu non diam phasellus vestibulum lorem! A diam maecenas sed enim ut sem viverra aliquet!
        </p>
    </body>
 </html>
--- a/test/validate.html
+++ b/test/validate.html
@ -3,7 +3,7 @@
    <head>
        <meta charset="UTF-8"/>
        <title>Test syntax</title>
-        <script src="../dist/FFNM.min.js"></script>
+        <script src="../dist/ffnm.min.js"></script>
    </head>
    <body>
        <!-- Class with ID -->
Author	SHA1	Message	Date
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
Andros Fenollosa	ef3388ee5e	Update validate.html	2020-07-16 01:08:13 +02:00
Andros Fenollosa	9aff506298	Update README.md	2020-07-16 01:06:48 +02:00
Andros Fenollosa	dd5377d732	Optional second param	2020-07-16 00:58:17 +02:00
Andros Fenollosa	10a7731ac5	Add event	2020-07-16 00:44:52 +02:00
Andros Fenollosa	6a75e27e8e	Update README.md	2020-07-05 13:04:55 +02:00
Andros Fenollosa	8145a19b54	add example image	2020-07-05 13:04:03 +02:00
Andros Fenollosa	6b8f95fb98	Update README.md	2020-07-05 11:01:25 +02:00
Andros Fenollosa	663a6124b0	Update README.md	2020-07-05 10:48:26 +02:00
`@ -1,2 +1,2 @@`
	document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[];t=[],["i-click","i-scroll-up","i-scroll-down"].map(c=>[...document.querySelectorAll(`[${c}]`)].map(l=>{let r=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('\\w+', '[#,.,a-zA-Z]\\w'\\)$`).test(l.getAttribute(c))).some(e=>e)).every(e=>e);return r?t.push(l):(console.error("FFNM: Bad syntax"),console.error(l)),r}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let t=function(e,t){let c=e.getAttribute(t),l=RegExp("^(\\w+):").exec(c)[1],r=RegExp(":(\\w+)\\(").exec(c)[1],a=RegExp("\\('(\\w+)',").exec(c)[1],o=RegExp(", '([#,.,a-zA-Z]\\w)'\\)").exec(c)[1];return{functionParent:l,functionChild:r,value:a,target:o}}(e,"i-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].forEach(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)}})})}})});	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+)',?").exec(c)[1],o=RegExp(", '([#,.,a-zA-Z]\\w)'\\)");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(e).forEach(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(e).forEach(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)})}})}})});
	`//# sourceMappingURL=ffnm.min.js.map`	`//# sourceMappingURL=ffnm.min.js.map`
		`@ -0,0 +1 @@`
							{"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}