Add test class

.gitignore

@@ -1,7 +1,6 @@
-
-test.html
 node_modules/
 dist/ffnm.min.js.map
 package-lock.json
-dist/.DS_Store
+**/.DS_Store
-src/.#core.js
+*/.#*
+.idea/

dist/ffnm.min.js

@@ -1,2 +1,2 @@
-document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[];t=[],["i-click","i-view","i-scroll-up","i-scroll-down","i-hover"].map(c=>[...document.querySelectorAll(`[${c}]`)].map(s=>{let o=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('\\w+', *'[#,.,a-zA-Z]\\w*'\\)$`).test(s.getAttribute(c))).some(e=>e)).every(e=>e);return o?t.push(s):(console.error("FFNM: Bad syntax"),console.error(s)),o}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(t=>{Object.keys(e).map(c=>e[c].map(e=>{switch(c){case"class":switch(e){case"add":t.classList.add("key")}}}))})});
+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)}})})}})});
 //# sourceMappingURL=ffnm.min.js.map

src/core.js

@@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
     //===
     // VARIABLES
     //===
-    const EVENTS = ['i-click', 'i-view', 'i-scroll-up', 'i-scroll-down', 'i-hover'];
+    const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down'];
     const FUNCTION_TREE = {
         'class': ['add', 'remove', 'toggle']
     };
@@ -53,20 +53,24 @@ document.addEventListener('DOMContentLoaded', () => {
             let params = splitParams(element, eventClick);
             switch(params.functionParent) {
                 case 'class':
+                    [...document.querySelectorAll(params.target)].forEach((item) => {
+                        element.addEventListener('click', () => {
                             switch(params.functionChild) {
                                 case 'add':
-                            [...document.querySelectorAll(params.target)].forEach((item) => item.classList.add(params.value));
+                                    item.classList.add(params.value);
                                     break;
                                 case 'remove':
-                            [...document.querySelectorAll(params.target)].forEach((item) => item.classList.remove(params.value));
+                                    item.classList.remove(params.value);
                                     break;
                                 case 'toggle':
-                            [...document.querySelectorAll(params.target)].forEach((item) => item.classList.toggle(params.value));
+                                    item.classList.toggle(params.value);
                                     break;
                             }
+                        });
+                    });
                 break;
             }
-        };
+        });
     }
 
     /**
@@ -76,7 +80,12 @@ document.addEventListener('DOMContentLoaded', () => {
      * return {'functionParent': 'class', 'functionChild': 'add', 'value': 'show', 'target': '#menu'}
      */
     function splitParams(element, attribute) {
-        return {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''};
+        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 target = RegExp(`, *\'([#,.,a-zA-Z]\\w*)\'\\)`).exec(params)[1];
+        return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target};
     }
 
 

test/i-click.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Test syntax</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 class="nav" id="nav">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>
+    </body>
+</html>

test/validate.html

@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Test syntax</title>
+        <script src="../dist/FFNM.min.js"></script>
+    </head>
+    <body>
+        <!-- Class with ID -->
+        <div i-click="class:add('show1', '#menu1')">add</div>
+        <div i-click="class:remove('show2', '#menu2')">remove</div>
+        <div i-click="class:toggle('show3', '#menu3')">toggle</div>
+        <!-- End Class with ID -->
+
+        <!-- Class with class -->
+        <div i-click="class:add('show1', '.menu1')">add</div>
+        <div i-click="class:remove('show2', '.menu2')">remove</div>
+        <div i-click="class:toggle('show3', '.menu3')">toggle</div>
+        <!-- End Class with class -->
+
+        <!-- Class with tag -->
+        <div i-click="class:add('show1', 'a')">add</div>
+        <div i-click="class:remove('show2', 'li')">remove</div>
+        <div i-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 i-scroll-up="class:remove('show2', '#menu2')">remove</div>
+        <div i-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 i-scroll-up="class:remove('show2', '.menu2')">remove</div>
+        <div i-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 i-scroll-up="class:remove('show2', 'li')">remove</div>
+        <div i-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 i-scroll-down="class:remove('show2', '#menu2')">remove</div>
+        <div i-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 i-scroll-down="class:remove('show2', '.menu2')">remove</div>
+        <div i-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 i-scroll-down="class:remove('show2', 'li')">remove</div>
+        <div i-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 i-hover="class:remove('show2', '#menu2')">remove</div>
+        <div i-hover="class:toggle('show3', '#menu3')">toggle</div>
+        <!-- End Class with ID -->
+
+        <!-- Class with class -->
+        <div i-hover="class:add('show1', '.menu1')">add</div>
+        <div i-hover="class:remove('show2', '.menu2')">remove</div>
+        <div i-hover="class:toggle('show3', '.menu3')">toggle</div>
+        <!-- End Class with class -->
+
+        <!-- Class with tag -->
+        <div i-hover="class:add('show1', 'a')">add</div>
+        <div i-hover="class:remove('show2', 'li')">remove</div>
+        <div i-hover="class:toggle('show3', 'button')">toggle</div>
+        <!-- End Class with tag -->
+
+        <!-- Class with ID -->
+        <div i-view="class:add('show1', '#menu1')">add</div>
+        <div i-view="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 i-view="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 i-view="class:remove('show2', 'li')">remove</div>
+        <div i-view="class:toggle('show3', 'button')">toggle</div>
+        <!-- End Class with tag -->
+
+        <!-- Errors -->
+        <div i-click="class:dd('show1', '.menu1')">add</div>
+
+    </body>
+</html>