andros/FFNM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add class events

Browse Source
This commit is contained in:
Andros Fenollosa 2020-07-04 17:24:45 +02:00
parent eb6f74f532
commit 8d01489fd6
3 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -40,27 +40,6 @@ Añade a tu `<head>` la siguiente etiqueta.
```html
<button i-click="class:toggle('show', '#menu')">ver</button>
```
#### Scroll
##### Añadir la clase `down` al `nav` cuando el usuario haga scroll hacia abajo.
```html
<nav i-scroll-down="class:add('down', this)"></nav>
```
##### Quitar la clase `down` al `nav` cuando el usuario haga scroll hacia arriba.
```html
<nav i-scroll-up="class:remove('down', this)"></nav>
```
#### Hover
##### Añadir la clase `tadam` al selector `#menu` cuando el usuario haga `hover` sobre el botón.
```html
<button i-hover="class:toggle('tadam', '#menu')">sorpresa!</button>
```
#### Clases sin eventos

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(o=>[...document.querySelectorAll(`[${o}]`)].map(r=>{let l=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('\\w+', *'[#,.,a-zA-Z]\\w*'\\)$`).test(r.getAttribute(o))).some(e=>e)).every(e=>e);return l?t.push(r):(console.error("FFNM: Bad syntax"),console.error(r)),l}).every(e=>e)).every(e=>e)});
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")}}}))})});
//# sourceMappingURL=ffnm.min.js.map

32
src/core.js
View File

@ -48,6 +48,35 @@ document.addEventListener('DOMContentLoaded', () => {
* return void
*/
function addEventClick() {
let eventClick = 'i-click';
return [...document.querySelectorAll(`[${eventClick}]`)].forEach((element) => {
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;
}
break;
}
};
}
/**
* 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) {
return {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''};
}
@ -55,6 +84,5 @@ document.addEventListener('DOMContentLoaded', () => {
// INIT
//===
validateSyntax();
addEventClick();
});