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

Update syntax and Add visible

Browse Source
This commit is contained in:
Andros Fenollosa 2020-07-22 19:31:19 +02:00
parent 3fc6ff1c78
commit 5b06ffd174
9 changed files with 282 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
README.md
View File

@ -1,18 +1,18 @@
# FFNM (Front-End for the next master) # FFNM (Front-End for the next master)
``` html ``` html
<button i-click="class:add('open', 'article')">open</button> <button is-click="class:add('open', 'article')">open</button>
<article></article> <article></article>
``` ```
👇 🖱 **Click!** 👇 👇 🖱 **Click!** 👇
``` html ``` html
<button i-click="class:add('open', 'article')">open</button> <button is-click="class:add('open', 'article')">open</button>
<article class="open"></article> <article class="open"></article>
``` ```
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **2.5Kb**! Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **3.2Kb**!
- Simplifies the **click**. - Simplifies the **click**.
@ -20,9 +20,11 @@ Simple utility to **avoid writing Javascript** when working with **classes**. It
- Simplifies **hover**. - Simplifies **hover**.
- Simplifies when the elements are **visible** or not.
## DEMOS ## DEMOS
[Click](https://codepen.io/androsfenollosa/pen/dyGdRVE) | [Scroll](https://codepen.io/androsfenollosa/pen/xxZQxNV) [Click](https://codepen.io/androsfenollosa/pen/dyGdRVE) | [Scroll](https://codepen.io/androsfenollosa/pen/xxZQxNV) | [Visible](https://codepen.io/androsfenollosa/pen/YzwBLGW)
## Documentation ## Documentation
@ -38,7 +40,7 @@ Simple utility to **avoid writing Javascript** when working with **classes**. It
Add to your `<head>` the following tag. Add to your `<head>` the following tag.
```html ```html
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.3/dist/ffnm.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.3.0/dist/ffnm.min.js"></script>
``` ```
### Examples ### Examples
@ -48,39 +50,39 @@ Add to your `<head>` the following tag.
##### Add the class `press` to `button` when the button is pressed. ##### Add the class `press` to `button` when the button is pressed.
```html ```html
<button i-click="class:add('press')">open</button> <button is-click="class:add('press')">open</button>
``` ```
##### Remove the class `press` to `button` when the button is pressed. ##### Remove the class `press` to `button` when the button is pressed.
```html ```html
<button i-click="class:remove('press')">close</button> <button is-click="class:remove('press')">close</button>
``` ```
##### Switch the classs `show` to `button` when the button is pressed. ##### Switch the classs `show` to `button` when the button is pressed.
```html ```html
<button i-click="class:toggle('show')">view</button> <button is-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 is-click="class:add('show', '#nav')">open</button>
<nav id="nav"></nav> <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 is-click="class:remove('show', '#nav')">close</button>
<nav id="nav" class="show"></nav> <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 is-click="class:toggle('show', '#nav')">view</button>
<nav id="nav" class="show"></nav> <nav id="nav" class="show"></nav>
``` ```
@ -89,13 +91,13 @@ Add to your `<head>` the following tag.
##### Add the class `show` to `nav` when the scroll goes up. ##### Add the class `show` to `nav` when the scroll goes up.
```html ```html
<nav i-scroll-up="class:add('show')"></nav> <nav is-scroll-up="class:add('show')"></nav>
``` ```
##### Remove the `show` class from `nav` when the scroll goes up. ##### Remove the `show` class from `nav` when the scroll goes up.
```html ```html
<nav i-scroll-up="class:remove('show')"></nav> <nav is-scroll-up="class:remove('show')"></nav>
``` ```
#### Scroll down #### Scroll down
@ -103,13 +105,13 @@ Add to your `<head>` the following tag.
##### Add the class `show` to `nav` when the scroll down. ##### Add the class `show` to `nav` when the scroll down.
```html ```html
<nav i-scroll-down="class:add('show')"></nav> <nav is-scroll-down="class:add('show')"></nav>
``` ```
##### Remove the `show` class from `nav` when the scroll down. ##### Remove the `show` class from `nav` when the scroll down.
```html ```html
<nav i-scroll-down="class:remove('show')"></nav> <nav is-scroll-down="class:remove('show')"></nav>
``` ```
#### Hover #### Hover
@ -117,28 +119,83 @@ Add to your `<head>` the following tag.
##### Add the class `show` to `div` when hover. ##### Add the class `show` to `div` when hover.
```html ```html
<div i-hover="class:add('show')"></div> <div is-hover="class:add('show')"></div>
``` ```
##### Remove the `show` class from `div` when hover. ##### Remove the `show` class from `div` when hover.
```html ```html
<div i-hover="class:remove('show')"></div> <div is-hover="class:remove('show')"></div>
``` ```
##### Toggle the `show` class from `div` when hover. ##### Toggle the `show` class from `div` when hover.
```html ```html
<div i-hover="class:toggle('show')"></div> <div is-hover="class:toggle('show')"></div>
``` ```
##### Add the class `show` to `#button` when `div` hover. ##### Add the class `show` to `#button` when `div` hover.
```html ```html
<div i-hover="class:toggle('show', '#button')"></div> <div is-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</div> <button id="button">Hi</div>
``` ```
#### Visible
##### Add the class `show` to `div` when is visible.
```html
<div is-visible="class:add('show')"></div>
```
##### Remove the `show` class from `div` when is visible.
```html
<div is-visible="class:remove('show')"></div>
```
##### Toggle the `show` class from `div` when is visible.
```html
<div is-visible="class:toggle('show')"></div>
```
##### Add the class `show` to `#button` when `div` is visible.
```html
<div is-visible="class:toggle('show', '#button')"></div>
<button id="button">Hi</div>
```
#### Not visible
##### Add the class `show` to `div` when is not visible.
```html
<div is-not-visible="class:add('show')"></div>
```
##### Remove the `show` class from `div` when is not visible.
```html
<div is-not-visible="class:remove('show')"></div>
```
##### Toggle the `show` class from `div` when is not visible.
```html
<div is-not-visible="class:toggle('show')"></div>
```
##### Add the class `show` to `#name` when `div` is not visible.
```html
<div is-not-visible="class:toggle('show', '#button')"></div>
<input id="name">
```
--- ---
@ -149,7 +206,7 @@ Add to your `<head>` the following tag.
Añade a tu `<head>` la siguiente etiqueta. Añade a tu `<head>` la siguiente etiqueta.
```html ```html
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.3/dist/ffnm.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.3.0/dist/ffnm.min.js"></script>
``` ```
### Ejemplos de uso ### Ejemplos de uso
@ -159,39 +216,39 @@ Añade a tu `<head>` la siguiente etiqueta.
##### Añadir la clase `apretado` a `button` cuando sea pulsado. ##### Añadir la clase `apretado` a `button` cuando sea pulsado.
```html ```html
<button i-click="class:add('apretado')">Apreta</button> <button is-click="class:add('apretado')">Apreta</button>
``` ```
##### Quitar la clase `apretado` a `button` cuando sea pulsado. ##### Quitar la clase `apretado` a `button` cuando sea pulsado.
```html ```html
<button i-click="class:remove('apretado')">cerrar</button> <button is-click="class:remove('apretado')">cerrar</button>
``` ```
##### Intercambiar la clase `apretado` a `button` cuando sea pulsado. ##### Intercambiar la clase `apretado` a `button` cuando sea pulsado.
```html ```html
<button i-click="class:toggle('apretado')">ver</button> <button is-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 is-click="class:add('show', '#menu')">abrir</button>
<nav id="menu"></nav> <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 is-click="class:remove('show', '#menu')">cerrar</button>
<nav id="menu" class="show"></nav> <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 is-click="class:toggle('show', '#menu')">ver</button>
<nav id="menu" class="show"></nav> <nav id="menu" class="show"></nav>
``` ```
@ -200,13 +257,13 @@ Añade a tu `<head>` la siguiente etiqueta.
##### Añadir la clase `show` al selector `nav` cuando el scroll sube. ##### Añadir la clase `show` al selector `nav` cuando el scroll sube.
```html ```html
<nav i-scroll-up="class:add('show')"></nav> <nav is-scroll-up="class:add('show')"></nav>
``` ```
##### Quitar la clase `show` al selector `nav` cuando el scroll sube. ##### Quitar la clase `show` al selector `nav` cuando el scroll sube.
```html ```html
<nav i-scroll-up="class:remove('show')"></nav> <nav is-scroll-up="class:remove('show')"></nav>
``` ```
#### Bajar scroll #### Bajar scroll
@ -214,13 +271,13 @@ Añade a tu `<head>` la siguiente etiqueta.
##### Añadir la clase `show` al selector `nav` cuando el scroll baja. ##### Añadir la clase `show` al selector `nav` cuando el scroll baja.
```html ```html
<nav i-scroll-down="class:add('show')"></nav> <nav is-scroll-down="class:add('show')"></nav>
``` ```
##### Quitar la clase `show` al selector `nav` cuando el scroll baja. ##### Quitar la clase `show` al selector `nav` cuando el scroll baja.
```html ```html
<nav i-scroll-down="class:remove('show')"></nav> <nav is-scroll-down="class:remove('show')"></nav>
``` ```
#### Hover #### Hover
@ -228,25 +285,25 @@ Añade a tu `<head>` la siguiente etiqueta.
##### Añade la clase `show` al `div` cuando sea hover. ##### Añade la clase `show` al `div` cuando sea hover.
```html ```html
<div i-hover="class:add('show')"></div> <div is-hover="class:add('show')"></div>
``` ```
##### Quita la clase `show` al `div` cuando sea hover. ##### Quita la clase `show` al `div` cuando sea hover.
```html ```html
<div i-hover="class:remove('show')"></div> <div is-hover="class:remove('show')"></div>
``` ```
##### Intercambia la clase `show` al `div` cuando sea hover. ##### Intercambia la clase `show` al `div` cuando sea hover.
```html ```html
<div i-hover="class:toggle('show')"></div> <div is-hover="class:toggle('show')"></div>
``` ```
##### Añade la clase `show` a `#button` cuando `div` sea hover. ##### Añade la clase `show` a `#button` cuando `div` sea hover.
```html ```html
<div i-hover="class:toggle('show', '#button')"></div> <div is-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</div> <button id="button">Hi</div>
``` ```

2
dist/ffnm.min.js vendored
View File

@ -1,2 +1,2 @@
document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[],s=void 0;function a(e,t){let s=e.getAttribute(t),a=RegExp("^(\\w+):").exec(s)[1],c=RegExp(":(\\w+)\\(").exec(s)[1],o=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],l=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:a,functionChild:c,value:o,target:null!==l.exec(s)?l.exec(s)[1]:void 0}}function c(e){return[...t].filter(t=>t.hasAttribute(e))}t=[],["i-click","i-scroll-up","i-scroll-down","i-hover"].map(s=>[...document.querySelectorAll(`[${s}]`)].map(a=>{let c=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(a.getAttribute(s))).some(e=>e)).every(e=>e);return c?t.push(a):(console.error("FFNM: Bad syntax"),console.error(a)),c}).every(e=>e)).every(e=>e),c("i-click").forEach(e=>{let t=a(e,"i-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{void 0!==s&&e.addEventListener("click",()=>{switch(t.functionChild){case"add":s.classList.add(t.value);break;case"remove":s.classList.remove(t.value);break;case"toggle":s.classList.toggle(t.value)}})})}}),function(){let e=c("i-scroll-down"),t=c("i-scroll-up");window.addEventListener("scroll",()=>{let c=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(c>s){let t=a(e,"i-scroll-down");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),t.forEach(e=>{if(c<=s){let t=a(e,"i-scroll-up");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),s=c<=0?0:c},!1)}(),c("i-hover").forEach(e=>{let t=a(e,"i-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{if(void 0!==s)switch(t.functionChild){case"add":e.addEventListener("mouseenter",()=>{s.classList.add(t.value)}),e.addEventListener("mouseout",()=>{s.classList.remove(t.value)});break;case"remove":e.addEventListener("mouseenter",()=>{s.classList.remove(t.value)}),e.addEventListener("mouseout",()=>{s.classList.add(t.value)});break;case"toggle":e.addEventListener("mouseenter",()=>{s.classList.toggle(t.value)}),e.addEventListener("mouseout",()=>{s.classList.toggle(t.value)})}})}})}); document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[],s=void 0;function i(e,t){let s=e.getAttribute(t),i=RegExp("^(\\w+):").exec(s)[1],c=RegExp(":(\\w+)\\(").exec(s)[1],a=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],o=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:i,functionChild:c,value:a,target:null!==o.exec(s)?o.exec(s)[1]:void 0}}function c(e){return[...t].filter(t=>t.hasAttribute(e))}function a(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}t=[],["is-click","is-scroll-up","is-scroll-down","is-hover","is-view","is-visible","is-not-visible"].map(s=>[...document.querySelectorAll(`[${s}]`)].map(i=>{let c=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(i.getAttribute(s))).some(e=>e)).every(e=>e);return c?t.push(i):(console.error("FFNM: Bad syntax"),console.error(i)),c}).every(e=>e)).every(e=>e),c("is-click").forEach(e=>{let t=i(e,"is-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{void 0!==s&&e.addEventListener("click",()=>{switch(t.functionChild){case"add":s.classList.add(t.value);break;case"remove":s.classList.remove(t.value);break;case"toggle":s.classList.toggle(t.value)}})})}}),function(){let e=c("is-scroll-down"),t=c("is-scroll-up");window.addEventListener("scroll",()=>{let c=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(c>s){let t=i(e,"is-scroll-down");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),t.forEach(e=>{if(c<=s){let t=i(e,"is-scroll-up");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),s=c<=0?0:c},!1)}(),c("is-hover").forEach(e=>{let t=i(e,"is-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{if(void 0!==s)switch(t.functionChild){case"add":e.addEventListener("mouseenter",()=>{s.classList.add(t.value)}),e.addEventListener("mouseout",()=>{s.classList.remove(t.value)});break;case"remove":e.addEventListener("mouseenter",()=>{s.classList.remove(t.value)}),e.addEventListener("mouseout",()=>{s.classList.add(t.value)});break;case"toggle":e.addEventListener("mouseenter",()=>{s.classList.toggle(t.value)}),e.addEventListener("mouseout",()=>{s.classList.toggle(t.value)})}})}}),function(){let e=c("is-visible"),t=c("is-not-visible");window.addEventListener("scroll",()=>{e.forEach(e=>{if(a(e)){let t=i(e,"is-visible");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),t.forEach(e=>{if(!a(e)){let t=i(e,"is-not-visible");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value),console.log("date");break;case"remove":e.classList.remove(t.value)}}}})},!1)}()});
//# sourceMappingURL=ffnm.min.js.map //# sourceMappingURL=ffnm.min.js.map

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ffnm", "name": "ffnm",
"version": "1.0.0", "version": "1.3.0",
"description": "Simple plugin to avoid writing Javascript in trivial tasks.", "description": "Simple plugin to avoid writing Javascript in trivial tasks.",
"main": "gulpfile.js", "main": "gulpfile.js",
"dependencies": { "dependencies": {

81
src/core.js
View File

@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
//=== //===
// VARIABLES // VARIABLES
//=== //===
const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down', 'i-hover']; const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-hover', 'is-view', 'is-visible', 'is-not-visible'];
const FUNCTION_TREE = { const FUNCTION_TREE = {
'class': ['add', 'remove', 'toggle'] 'class': ['add', 'remove', 'toggle']
}; };
@ -47,7 +47,7 @@ document.addEventListener('DOMContentLoaded', () => {
/** /**
* Method return params * Method return params
* return JSON - {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''} * return JSON - {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''}
* example - i-click="class:add('show', '#menu')" * example - is-click="class:add('show', '#menu')"
* 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) {
@ -71,11 +71,11 @@ document.addEventListener('DOMContentLoaded', () => {
} }
/** /**
* Method add events i-click * Method add events is-click
* return void * return void
*/ */
function addEventClick() { function addEventClick() {
let eventClick = 'i-click'; let eventClick = 'is-click';
return getElementsValidatesByEvent(eventClick).forEach((element) => { return getElementsValidatesByEvent(eventClick).forEach((element) => {
let params = splitParams(element, eventClick); let params = splitParams(element, eventClick);
switch(params.functionParent) { switch(params.functionParent) {
@ -103,12 +103,12 @@ document.addEventListener('DOMContentLoaded', () => {
} }
/** /**
* Method add events i-scroll * Method add events is-scroll
* return void * return void
*/ */
function addEventScroll() { function addEventScroll() {
let eventScrollDown = 'i-scroll-down'; let eventScrollDown = 'is-scroll-down';
let eventScrollUp = 'i-scroll-up'; let eventScrollUp = 'is-scroll-up';
let elementsDown = getElementsValidatesByEvent(eventScrollDown); let elementsDown = getElementsValidatesByEvent(eventScrollDown);
let elementsUp = getElementsValidatesByEvent(eventScrollUp); let elementsUp = getElementsValidatesByEvent(eventScrollUp);
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
@ -155,11 +155,11 @@ document.addEventListener('DOMContentLoaded', () => {
/** /**
* Method add events i-hover * Method add events is-hover
* return void * return void
*/ */
function addEventHover() { function addEventHover() {
let eventHover = 'i-hover'; let eventHover = 'is-hover';
return getElementsValidatesByEvent(eventHover).forEach((element) => { return getElementsValidatesByEvent(eventHover).forEach((element) => {
let params = splitParams(element, eventHover); let params = splitParams(element, eventHover);
switch(params.functionParent) { switch(params.functionParent) {
@ -206,6 +206,68 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
} }
/**
* Method that checks if an element is visible in the viewport
* return bool
*/
function isInViewport (element) {
let distance = element.getBoundingClientRect();
return distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
distance.right <= (window.innerWidth || document.documentElement.clientWidth);
};
/**
* Method that manages the events is-visible and is-not-visible
* return void
*/
function addEventVisible() {
let eventVisible = 'is-visible';
let eventNotVisible = 'is-not-visible';
let elementsVisibles = getElementsValidatesByEvent(eventVisible);
let elementsNotVisibles = getElementsValidatesByEvent(eventNotVisible);
window.addEventListener("scroll", () => {
// Visible
elementsVisibles.forEach((element) => {
if (isInViewport(element)) {
let params = splitParams(element, eventVisible);
switch(params.functionParent) {
case 'class':
switch(params.functionChild) {
case 'add':
element.classList.add(params.value);
break;
case 'remove':
element.classList.remove(params.value);
break;
}
break;
}
}
});
// Not visible
elementsNotVisibles.forEach((element) => {
if (!isInViewport(element)) {
let params = splitParams(element, eventNotVisible);
switch(params.functionParent) {
case 'class':
switch(params.functionChild) {
case 'add':
element.classList.add(params.value);
console.log('date')
break;
case 'remove':
element.classList.remove(params.value);
break;
}
break;
}
}
});
}, false);
}
//=== //===
// INIT // INIT
//=== //===
@ -213,4 +275,5 @@ document.addEventListener('DOMContentLoaded', () => {
addEventClick(); addEventClick();
addEventScroll(); addEventScroll();
addEventHover(); addEventHover();
addEventVisible();
}); });

10
test/i-click.html → test/is-click.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Test syntax</title> <title>Test is-click</title>
<script src="../dist/ffnm.min.js"></script> <script src="../dist/ffnm.min.js"></script>
<style> <style>
.nav { .nav {
@ -21,9 +21,9 @@
</style> </style>
</head> </head>
<body> <body>
<nav class="nav" id="nav" i-click="class:remove('show')">Mi nav</nav> <nav class="nav" id="nav" is-click="class:remove('show')">Mi nav</nav>
<button i-click="class:add('show', '#nav')">add</button> <button is-click="class:add('show', '#nav')">add</button>
<button i-click="class:remove('show', '#nav')">remove</button> <button is-click="class:remove('show', '#nav')">remove</button>
<button i-click="class:toggle('show', '#nav')">toggle</button> <button is-click="class:toggle('show', '#nav')">toggle</button>
</body> </body>
</html> </html>

6
test/i-hover.html → test/is-hover.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Test i-hover</title> <title>Test is-hover</title>
<script src="../dist/ffnm.min.js"></script> <script src="../dist/ffnm.min.js"></script>
<style> <style>
.uppercase { .uppercase {
@ -11,14 +11,14 @@
</style> </style>
</head> </head>
<body> <body>
<p i-hover="class:add('uppercase', '.text__1--hover')">Place the cursor over this text</p> <p is-hover="class:add('uppercase', '.text__1--hover')">Place the cursor over this text</p>
<p class="text__1--hover"> <p class="text__1--hover">
Quisque id diam vel quam elementum pulvinar etiam non quam? Quisque id diam vel quam elementum pulvinar etiam non quam?
</p> </p>
<p class="text__1--hover"> <p class="text__1--hover">
Ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p> </p>
<p class="text__1--hover" i-hover="class:add('uppercase')"> <p class="text__1--hover" is-hover="class:add('uppercase')">
Nunc aliquet bibendum enim, facilisis gravida neque convallis a cras. Nunc aliquet bibendum enim, facilisis gravida neque convallis a cras.
</p> </p>
<p class="text__1--hover"> <p class="text__1--hover">

6
test/i-scroll.html → test/is-scroll.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Test i-scroll</title> <title>Test is-scroll</title>
<script src="../dist/ffnm.min.js"></script> <script src="../dist/ffnm.min.js"></script>
<style> <style>
.nav { .nav {
@ -21,8 +21,8 @@
</style> </style>
</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 is-scroll-down="class:remove('show')" is-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
<p i-scroll-down="class:toggle('ala')"> <p is-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>

47
test/is-visible.html Normal file
View File

@ -0,0 +1,47 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Test is-visible</title>
<script src="../dist/ffnm.min.js"></script>
<link href="https://unpkg.com/spectre.css/dist/spectre.min.css" rel="stylesheet"/>
<style>
.image-1 {
transition: 1s;
transform: translateY(-2rem);
opacity: 0;
}
.image-2 {
transform: scale(.5);
transition: 1s;
opacity: 0;
}
.show {
transform: scale(1) translateY(0);
opacity: 1;
}
</style>
</head>
<body>
<div class="hero hero-lg">
<div class="hero-body">
<h1 class="text-center">Please scroll down</h1>
</div>
</div>
<p class="text-center">
<img is-visible="class:add('show')" class="image-1" src="https://source.unsplash.com/random/500x300?cat" alt="Image 1">
</p>
<p class="text-center">
<img is-visible="class:add('show')" is-not-visible="class:remove('show')" class="image-2" src="https://source.unsplash.com/random/500x300?dog" alt="Image 2">
</p>
<p class="text-center">
<img is-visible="class:add('show')" is-not-visible="class:remove('show')" class="image-1" src="https://source.unsplash.com/random/500x300?koala" alt="Image 1">
</p>
</body>
</html>

105
test/validate.html
View File

@ -7,97 +7,110 @@
</head> </head>
<body> <body>
<!-- Class with ID --> <!-- Class with ID -->
<div i-click="class:add('show1', '#menu1')">add</div> <div is-click="class:add('show1', '#menu1')">add</div>
<div i-click="class:remove('show2', '#menu2')">remove</div> <div is-click="class:remove('show2', '#menu2')">remove</div>
<div i-click="class:toggle('show3', '#menu3')">toggle</div> <div is-click="class:toggle('show3', '#menu3')">toggle</div>
<!-- End Class with ID --> <!-- End Class with ID -->
<!-- Class with class --> <!-- Class with class -->
<div i-click="class:add('show1', '.menu1')">add</div> <div is-click="class:add('show1', '.menu1')">add</div>
<div i-click="class:remove('show2', '.menu2')">remove</div> <div is-click="class:remove('show2', '.menu2')">remove</div>
<div i-click="class:toggle('show3', '.menu3')">toggle</div> <div is-click="class:toggle('show3', '.menu3')">toggle</div>
<!-- End Class with class --> <!-- End Class with class -->
<!-- Class with tag --> <!-- Class with tag -->
<div i-click="class:add('show1', 'a')">add</div> <div is-click="class:add('show1', 'a')">add</div>
<div i-click="class:remove('show2', 'li')">remove</div> <div is-click="class:remove('show2', 'li')">remove</div>
<div i-click="class:toggle('show3', 'button')">toggle</div> <div is-click="class:toggle('show3', 'button')">toggle</div>
<!-- End Class with tag --> <!-- End Class with tag -->
<!-- Class with ID --> <!-- Class with ID -->
<div i-scroll-up="class:add('show1', '#menu1')">add</div> <div is-scroll-up="class:add('show1', '#menu1')">add</div>
<div i-scroll-up="class:remove('show2', '#menu2')">remove</div> <div is-scroll-up="class:remove('show2', '#menu2')">remove</div>
<div i-scroll-up="class:toggle('show3', '#menu3')">toggle</div> <div is-scroll-up="class:toggle('show3', '#menu3')">toggle</div>
<!-- End Class with ID --> <!-- End Class with ID -->
<!-- Class with class --> <!-- Class with class -->
<div i-scroll-up="class:add('show1', '.menu1')">add</div> <div is-scroll-up="class:add('show1', '.menu1')">add</div>
<div i-scroll-up="class:remove('show2', '.menu2')">remove</div> <div is-scroll-up="class:remove('show2', '.menu2')">remove</div>
<div i-scroll-up="class:toggle('show3', '.menu3')">toggle</div> <div is-scroll-up="class:toggle('show3', '.menu3')">toggle</div>
<!-- End Class with class --> <!-- End Class with class -->
<!-- Class with tag --> <!-- Class with tag -->
<div i-scroll-up="class:add('show1', 'a')">add</div> <div is-scroll-up="class:add('show1', 'a')">add</div>
<div i-scroll-up="class:remove('show2', 'li')">remove</div> <div is-scroll-up="class:remove('show2', 'li')">remove</div>
<div i-scroll-up="class:toggle('show3', 'button')">toggle</div> <div is-scroll-up="class:toggle('show3', 'button')">toggle</div>
<!-- End Class with tag --> <!-- End Class with tag -->
<!-- Class with ID --> <!-- Class with ID -->
<div i-scroll-down="class:add('show1', '#menu1')">add</div> <div is-scroll-down="class:add('show1', '#menu1')">add</div>
<div i-scroll-down="class:remove('show2', '#menu2')">remove</div> <div is-scroll-down="class:remove('show2', '#menu2')">remove</div>
<div i-scroll-down="class:toggle('show3', '#menu3')">toggle</div> <div is-scroll-down="class:toggle('show3', '#menu3')">toggle</div>
<!-- End Class with ID --> <!-- End Class with ID -->
<!-- Class with class --> <!-- Class with class -->
<div i-scroll-down="class:add('show1', '.menu1')">add</div> <div is-scroll-down="class:add('show1', '.menu1')">add</div>
<div i-scroll-down="class:remove('show2', '.menu2')">remove</div> <div is-scroll-down="class:remove('show2', '.menu2')">remove</div>
<div i-scroll-down="class:toggle('show3', '.menu3')">toggle</div> <div is-scroll-down="class:toggle('show3', '.menu3')">toggle</div>
<!-- End Class with class --> <!-- End Class with class -->
<!-- Class with tag --> <!-- Class with tag -->
<div i-scroll-down="class:add('show1', 'a')">add</div> <div is-scroll-down="class:add('show1', 'a')">add</div>
<div i-scroll-down="class:remove('show2', 'li')">remove</div> <div is-scroll-down="class:remove('show2', 'li')">remove</div>
<div i-scroll-down="class:toggle('show3', 'button')">toggle</div> <div is-scroll-down="class:toggle('show3', 'button')">toggle</div>
<!-- End Class with tag --> <!-- End Class with tag -->
<!-- Class with ID --> <!-- Class with ID -->
<div i-hover="class:add('show1', '#menu1')">add</div> <div is-hover="class:add('show1', '#menu1')">add</div>
<div i-hover="class:remove('show2', '#menu2')">remove</div> <div is-hover="class:remove('show2', '#menu2')">remove</div>
<div i-hover="class:toggle('show3', '#menu3')">toggle</div> <div is-hover="class:toggle('show3', '#menu3')">toggle</div>
<!-- End Class with ID --> <!-- End Class with ID -->
<!-- Class with class --> <!-- Class with class -->
<div i-hover="class:add('show1', '.menu1')">add</div> <div is-hover="class:add('show1', '.menu1')">add</div>
<div i-hover="class:remove('show2', '.menu2')">remove</div> <div is-hover="class:remove('show2', '.menu2')">remove</div>
<div i-hover="class:toggle('show3', '.menu3')">toggle</div> <div is-hover="class:toggle('show3', '.menu3')">toggle</div>
<!-- End Class with class --> <!-- End Class with class -->
<!-- Class with tag --> <!-- Class with tag -->
<div i-hover="class:add('show1', 'a')">add</div> <div is-hover="class:add('show1', 'a')">add</div>
<div i-hover="class:remove('show2', 'li')">remove</div> <div is-hover="class:remove('show2', 'li')">remove</div>
<div i-hover="class:toggle('show3', 'button')">toggle</div> <div is-hover="class:toggle('show3', 'button')">toggle</div>
<!-- End Class with tag --> <!-- End Class with tag -->
<!-- Class with ID --> <!-- Class with ID -->
<div i-view="class:add('show1', '#menu1')">add</div> <div is-visible="class:add('show1', '#menu1')">add</div>
<div i-view="class:remove('show2', '#menu2')">remove</div> <div is-visible="class:remove('show2', '#menu2')">remove</div>
<div i-view="class:toggle('show3', '#menu3')">toggle</div>
<!-- End Class with ID --> <!-- End Class with ID -->
<!-- Class with class --> <!-- Class with class -->
<div i-view="class:add('show1', '.menu1')">add</div> <div is-visible="class:add('show1', '.menu1')">add</div>
<div i-view="class:remove('show2', '.menu2')">remove</div> <div is-visible="class:remove('show2', '.menu2')">remove</div>
<div i-view="class:toggle('show3', '.menu3')">toggle</div>
<!-- End Class with class --> <!-- End Class with class -->
<!-- Class with tag --> <!-- Class with tag -->
<div i-view="class:add('show1', 'a')">add</div> <div is-visible="class:add('show1', 'a')">add</div>
<div i-view="class:remove('show2', 'li')">remove</div> <div is-visible="class:remove('show2', 'li')">remove</div>
<div i-view="class:toggle('show3', 'button')">toggle</div>
<!-- End Class with tag --> <!-- End Class with tag -->
<!-- Class with ID -->
<div is-not-visible="class:add('show1', '#menu1')">add</div>
<div is-not-visible="class:remove('show2', '#menu2')">remove</div>
<!-- End Class with ID -->
<!-- Class with class -->
<div is-not-visible="class:add('show1', '.menu1')">add</div>
<div is-not-visible="class:remove('show2', '.menu2')">remove</div>
<!-- End Class with class -->
<!-- Class with tag -->
<div is-not-visible="class:add('show1', 'a')">add</div>
<div is-not-visible="class:remove('show2', 'li')">remove</div>
<!-- End Class with tag -->
<!-- Errors --> <!-- Errors -->
<div i-click="class:dd('show1', '.menu1')">add</div> <div is-click="class:dd('show1', '.menu1')">add</div>
</body> </body>
</html> </html>