Add test class
This commit is contained in:
Andros Fenollosa
parent
8d01489fd6
commit
21f73ea37f
7
.gitignore
vendored
7
.gitignore
vendored
@ -1,7 +1,6 @@
|
||||
|
||||
test.html
|
||||
node_modules/
|
||||
dist/ffnm.min.js.map
|
||||
package-lock.json
|
||||
dist/.DS_Store
|
||||
src/.#core.js
|
||||
**/.DS_Store
|
||||
*/.#*
|
||||
.idea/
|
||||
|
||||
2
dist/ffnm.min.js
vendored
2
dist/ffnm.min.js
vendored
@ -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
|
||||
|
||||
37
src/core.js
37
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':
|
||||
switch(params.functionChild) {
|
||||
case 'add':
|
||||
[...document.querySelectorAll(params.target)].forEach((item) => item.classList.add(params.value));
|
||||
break;
|
||||
case 'remove':
|
||||
[...document.querySelectorAll(params.target)].forEach((item) => item.classList.remove(params.value));
|
||||
break;
|
||||
case 'toggle':
|
||||
[...document.querySelectorAll(params.target)].forEach((item) => item.classList.toggle(params.value));
|
||||
break;
|
||||
}
|
||||
[...document.querySelectorAll(params.target)].forEach((item) => {
|
||||
element.addEventListener('click', () => {
|
||||
switch(params.functionChild) {
|
||||
case 'add':
|
||||
item.classList.add(params.value);
|
||||
break;
|
||||
case 'remove':
|
||||
item.classList.remove(params.value);
|
||||
break;
|
||||
case 'toggle':
|
||||
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};
|
||||
}
|
||||
|
||||
|
||||
|
||||
29
test/i-click.html
Normal file
29
test/i-click.html
Normal 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
103
test/validate.html
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user