Compare commits
3 Commits
add-scroll
...
v1.1.0
| Author | SHA1 | Date | |
|---|---|---|---|
| ef3388ee5e | |||
| 9aff506298 | |||
| dd5377d732 |
44
README.md
44
README.md
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **1Kb**!
|
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **1,7 Kb**!
|
||||||
|
|
||||||
## DEMOS
|
## DEMOS
|
||||||
|
|
||||||
@ -29,22 +29,43 @@ Add to your `<head>` the following tag.
|
|||||||
|
|
||||||
#### Click
|
#### 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.
|
##### Add the class `show` to the `#nav` selector when the button is pressed.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button i-click="class:add('show', '#nav')">open</button>
|
<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.
|
##### Remove the `show` class from the `#nav` selector when the button is pressed.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button i-click="class:remove('show', '#nav')">close</button>
|
<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.
|
##### Switch the `show` class to the `#nav` selector when the button is pressed.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button i-click="class:toggle('show', '#nav')">view</button>
|
<button i-click="class:toggle('show', '#nav')">view</button>
|
||||||
|
<nav id="nav" class="show"></nav>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Scroll up
|
#### Scroll up
|
||||||
@ -112,22 +133,43 @@ Añade a tu `<head>` la siguiente etiqueta.
|
|||||||
|
|
||||||
#### Clic
|
#### 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.
|
##### Añadir la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button i-click="class:add('show', '#menu')">abrir</button>
|
<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.
|
##### Quitar la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button i-click="class:remove('show', '#menu')">cerrar</button>
|
<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.
|
##### Intercambiar la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button i-click="class:toggle('show', '#menu')">ver</button>
|
<button i-click="class:toggle('show', '#menu')">ver</button>
|
||||||
|
<nav id="menu" class="show"></nav>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Subir scroll
|
#### Subir scroll
|
||||||
|
|||||||
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 c=[],t=void 0;function l(e,c){let t=e.getAttribute(c),l=RegExp("^(\\w+):").exec(t)[1],s=RegExp(":(\\w+)\\(").exec(t)[1],a=RegExp("\\('(\\w+)',").exec(t),o=null!==a?a.exec(t)[1]:void 0,r=RegExp(", *'([#,.,a-zA-Z]\\w*)'\\)").exec(t);return{functionParent:l,functionChild:s,value:o,target:null!==r?r.exec(t)[1]:void 0}}c=[],["i-click","i-scroll-up","i-scroll-down"].map(t=>[...document.querySelectorAll(`[${t}]`)].map(l=>{let s=Object.keys(e).map(c=>e[c].map(e=>RegExp(`^${c}:${e}\\('\\w+', *'[#,.,a-zA-Z]\\w*'\\)$`).test(l.getAttribute(t))).some(e=>e)).every(e=>e);return s?c.push(l):(console.error("FFNM: Bad syntax"),console.error(l)),s}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let c=l(e,"i-click");switch(c.functionParent){case"class":[...document.querySelectorAll(c.target)].forEach(t=>{e.addEventListener("click",()=>{switch(c.functionChild){case"add":t.classList.add(c.value);break;case"remove":t.classList.remove(c.value);break;case"toggle":t.classList.toggle(c.value)}})})}}),window.addEventListener("scroll",()=>{let e=window.pageYOffset||document.documentElement.scrollTop;[...document.querySelectorAll("[i-scroll-down]")].forEach(c=>{if(e>t){let e=l(c,"i-scroll-down");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(c=>{if(e<=t){let e=l(c,"i-scroll-up");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),t=e<=0?0:e},!1)});
|
document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let c=[],t=void 0;function l(e,c){let t=e.getAttribute(c),l=RegExp("^(\\w+):").exec(t)[1],s=RegExp(":(\\w+)\\(").exec(t)[1],a=RegExp("\\('(\\w+)',?").exec(t)[1],o=RegExp(", *'([#,.,a-zA-Z]\\w*)'\\)");return{functionParent:l,functionChild:s,value:a,target:null!==o.exec(t)?o.exec(t)[1]:void 0}}c=[],["i-click","i-scroll-up","i-scroll-down"].map(t=>[...document.querySelectorAll(`[${t}]`)].map(l=>{let s=Object.keys(e).map(c=>e[c].map(e=>RegExp(`^${c}:${e}\\('\\w+'(, *'[#,.,a-zA-Z]\\w*')?\\)$`).test(l.getAttribute(t))).some(e=>e)).every(e=>e);return s?c.push(l):(console.error("FFNM: Bad syntax"),console.error(l)),s}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let c=l(e,"i-click");switch(c.functionParent){case"class":[...document.querySelectorAll(c.target)].concat(e).forEach(t=>{e.addEventListener("click",()=>{switch(c.functionChild){case"add":t.classList.add(c.value);break;case"remove":t.classList.remove(c.value);break;case"toggle":t.classList.toggle(c.value)}})})}}),window.addEventListener("scroll",()=>{let e=window.pageYOffset||document.documentElement.scrollTop;[...document.querySelectorAll("[i-scroll-down]")].forEach(c=>{if(e>t){let e=l(c,"i-scroll-down");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(c=>{if(e<=t){let e=l(c,"i-scroll-up");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),t=e<=0?0:e},!1)});
|
||||||
//# sourceMappingURL=ffnm.min.js.map
|
//# sourceMappingURL=ffnm.min.js.map
|
||||||
|
|||||||
11
src/core.js
11
src/core.js
@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
let checked = Object.keys(FUNCTION_TREE).map((key) => {
|
let checked = Object.keys(FUNCTION_TREE).map((key) => {
|
||||||
// Check METHODS FUNCTION_TREE
|
// Check METHODS FUNCTION_TREE
|
||||||
return FUNCTION_TREE[key].map((method) => {
|
return FUNCTION_TREE[key].map((method) => {
|
||||||
return RegExp(`^${key}:${method}\\('\\w+', *'[#,.,a-zA-Z]\\w*'\\)$`).test(element.getAttribute(event));
|
return RegExp(`^${key}:${method}\\('\\w+'(, *'[#,.,a-zA-Z]\\w*')?\\)$`).test(element.getAttribute(event));
|
||||||
}).some(method => method);
|
}).some(method => method);
|
||||||
}).every(key => key);
|
}).every(key => key);
|
||||||
if(checked) {
|
if(checked) {
|
||||||
@ -54,10 +54,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
let params = element.getAttribute(attribute);
|
let params = element.getAttribute(attribute);
|
||||||
let functionParent = RegExp(`^(\\w+):`).exec(params)[1];
|
let functionParent = RegExp(`^(\\w+):`).exec(params)[1];
|
||||||
let functionChild = RegExp(`:(\\w+)\\(`).exec(params)[1];
|
let functionChild = RegExp(`:(\\w+)\\(`).exec(params)[1];
|
||||||
let resultValue = RegExp(`\\(\'(\\w+)\',`).exec(params);
|
let value = RegExp(`\\(\'(\\w+)\',?`).exec(params)[1];
|
||||||
let value = resultValue !== null ? resultValue.exec(params)[1] : undefined;
|
let resultTarget = RegExp(`, *\'([#,.,a-zA-Z]\\w*)\'\\)`);
|
||||||
let resultTarget = RegExp(`, *\'([#,.,a-zA-Z]\\w*)\'\\)`).exec(params);
|
let target = resultTarget.exec(params) !== null ? resultTarget.exec(params)[1] : undefined;
|
||||||
let target = resultTarget !== null ? resultTarget.exec(params)[1] : undefined;
|
|
||||||
return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target};
|
return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -71,7 +70,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
let params = splitParams(element, eventClick);
|
let params = splitParams(element, eventClick);
|
||||||
switch(params.functionParent) {
|
switch(params.functionParent) {
|
||||||
case 'class':
|
case 'class':
|
||||||
[...document.querySelectorAll(params.target)].forEach((item) => {
|
[...document.querySelectorAll(params.target)].concat(element).forEach((item) => {
|
||||||
element.addEventListener('click', () => {
|
element.addEventListener('click', () => {
|
||||||
switch(params.functionChild) {
|
switch(params.functionChild) {
|
||||||
case 'add':
|
case 'add':
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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:add('show', '#nav')">add</button>
|
||||||
<button i-click="class:remove('show', '#nav')">remove</button>
|
<button i-click="class:remove('show', '#nav')">remove</button>
|
||||||
<button i-click="class:toggle('show', '#nav')">toggle</button>
|
<button i-click="class:toggle('show', '#nav')">toggle</button>
|
||||||
|
|||||||
@ -22,7 +22,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav i-scroll-down="class:remove('show')" i-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
|
<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', 'p')">
|
<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.
|
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>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<title>Test syntax</title>
|
<title>Test syntax</title>
|
||||||
<script src="../dist/FFNM.min.js"></script>
|
<script src="../dist/ffnm.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Class with ID -->
|
<!-- Class with ID -->
|
||||||
|
|||||||
Reference in New Issue
Block a user