Add test class

This commit is contained in:
Andros Fenollosa 2020-07-05 10:35:36 +02:00
parent 8d01489fd6
commit 21f73ea37f
5 changed files with 159 additions and 19 deletions

7
.gitignore vendored
View File

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

2
dist/ffnm.min.js vendored
View File

@ -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 //# sourceMappingURL=ffnm.min.js.map

View File

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

29
test/i-click.html Normal file
View File

@ -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>

103
test/validate.html Normal file
View File

@ -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>