Update syntax and Add visible
This commit is contained in:
Andros Fenollosa
parent
3fc6ff1c78
commit
5b06ffd174
125
README.md
125
README.md
@ -1,18 +1,18 @@
|
||||
# FFNM (Front-End for the next master)
|
||||
|
||||
``` html
|
||||
<button i-click="class:add('open', 'article')">open</button>
|
||||
<button is-click="class:add('open', 'article')">open</button>
|
||||
|
||||
<article></article>
|
||||
```
|
||||
👇 🖱 **Click!** 👇
|
||||
``` html
|
||||
<button i-click="class:add('open', 'article')">open</button>
|
||||
<button is-click="class:add('open', 'article')">open</button>
|
||||
|
||||
<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**.
|
||||
|
||||
@ -20,9 +20,11 @@ Simple utility to **avoid writing Javascript** when working with **classes**. It
|
||||
|
||||
- Simplifies **hover**.
|
||||
|
||||
- Simplifies when the elements are **visible** or not.
|
||||
|
||||
## 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
|
||||
|
||||
@ -38,7 +40,7 @@ Simple utility to **avoid writing Javascript** when working with **classes**. It
|
||||
Add to your `<head>` the following tag.
|
||||
|
||||
```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
|
||||
@ -48,39 +50,39 @@ Add to your `<head>` the following tag.
|
||||
##### Add the class `press` to `button` when the button is pressed.
|
||||
|
||||
```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.
|
||||
|
||||
```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.
|
||||
|
||||
```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.
|
||||
|
||||
```html
|
||||
<button i-click="class:add('show', '#nav')">open</button>
|
||||
<button is-click="class:add('show', '#nav')">open</button>
|
||||
<nav id="nav"></nav>
|
||||
```
|
||||
|
||||
##### Remove the `show` class from the `#nav` selector when the button is pressed.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
##### Switch the `show` class to the `#nav` selector when the button is pressed.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
@ -89,13 +91,13 @@ Add to your `<head>` the following tag.
|
||||
##### Add the class `show` to `nav` when the scroll goes up.
|
||||
|
||||
```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.
|
||||
|
||||
```html
|
||||
<nav i-scroll-up="class:remove('show')"></nav>
|
||||
<nav is-scroll-up="class:remove('show')"></nav>
|
||||
```
|
||||
|
||||
#### Scroll down
|
||||
@ -103,13 +105,13 @@ Add to your `<head>` the following tag.
|
||||
##### Add the class `show` to `nav` when the scroll down.
|
||||
|
||||
```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.
|
||||
|
||||
```html
|
||||
<nav i-scroll-down="class:remove('show')"></nav>
|
||||
<nav is-scroll-down="class:remove('show')"></nav>
|
||||
```
|
||||
|
||||
#### Hover
|
||||
@ -117,28 +119,83 @@ Add to your `<head>` the following tag.
|
||||
##### Add the class `show` to `div` when hover.
|
||||
|
||||
```html
|
||||
<div i-hover="class:add('show')"></div>
|
||||
<div is-hover="class:add('show')"></div>
|
||||
```
|
||||
|
||||
##### Remove the `show` class from `div` when hover.
|
||||
|
||||
```html
|
||||
<div i-hover="class:remove('show')"></div>
|
||||
<div is-hover="class:remove('show')"></div>
|
||||
```
|
||||
|
||||
##### Toggle the `show` class from `div` when hover.
|
||||
|
||||
```html
|
||||
<div i-hover="class:toggle('show')"></div>
|
||||
<div is-hover="class:toggle('show')"></div>
|
||||
```
|
||||
|
||||
##### Add the class `show` to `#button` when `div` hover.
|
||||
|
||||
```html
|
||||
<div i-hover="class:toggle('show', '#button')"></div>
|
||||
<div is-hover="class:toggle('show', '#button')"></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.
|
||||
|
||||
```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
|
||||
@ -159,39 +216,39 @@ Añade a tu `<head>` la siguiente etiqueta.
|
||||
##### Añadir la clase `apretado` a `button` cuando sea pulsado.
|
||||
|
||||
```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.
|
||||
|
||||
```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.
|
||||
|
||||
```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.
|
||||
|
||||
```html
|
||||
<button i-click="class:add('show', '#menu')">abrir</button>
|
||||
<button is-click="class:add('show', '#menu')">abrir</button>
|
||||
<nav id="menu"></nav>
|
||||
```
|
||||
|
||||
##### Quitar la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
##### Intercambiar la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
@ -200,13 +257,13 @@ Añade a tu `<head>` la siguiente etiqueta.
|
||||
##### Añadir la clase `show` al selector `nav` cuando el scroll sube.
|
||||
|
||||
```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.
|
||||
|
||||
```html
|
||||
<nav i-scroll-up="class:remove('show')"></nav>
|
||||
<nav is-scroll-up="class:remove('show')"></nav>
|
||||
```
|
||||
|
||||
#### 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.
|
||||
|
||||
```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.
|
||||
|
||||
```html
|
||||
<nav i-scroll-down="class:remove('show')"></nav>
|
||||
<nav is-scroll-down="class:remove('show')"></nav>
|
||||
```
|
||||
|
||||
#### Hover
|
||||
@ -228,25 +285,25 @@ Añade a tu `<head>` la siguiente etiqueta.
|
||||
##### Añade la clase `show` al `div` cuando sea hover.
|
||||
|
||||
```html
|
||||
<div i-hover="class:add('show')"></div>
|
||||
<div is-hover="class:add('show')"></div>
|
||||
```
|
||||
|
||||
##### Quita la clase `show` al `div` cuando sea hover.
|
||||
|
||||
```html
|
||||
<div i-hover="class:remove('show')"></div>
|
||||
<div is-hover="class:remove('show')"></div>
|
||||
```
|
||||
|
||||
##### Intercambia la clase `show` al `div` cuando sea hover.
|
||||
|
||||
```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.
|
||||
|
||||
```html
|
||||
<div i-hover="class:toggle('show', '#button')"></div>
|
||||
<div is-hover="class:toggle('show', '#button')"></div>
|
||||
<button id="button">Hi</div>
|
||||
```
|
||||
|
||||
|
||||
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=[],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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ffnm",
|
||||
"version": "1.0.0",
|
||||
"version": "1.3.0",
|
||||
"description": "Simple plugin to avoid writing Javascript in trivial tasks.",
|
||||
"main": "gulpfile.js",
|
||||
"dependencies": {
|
||||
|
||||
81
src/core.js
81
src/core.js
@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
//===
|
||||
// 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 = {
|
||||
'class': ['add', 'remove', 'toggle']
|
||||
};
|
||||
@ -47,7 +47,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
/**
|
||||
* Method return params
|
||||
* 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'}
|
||||
*/
|
||||
function splitParams(element, attribute) {
|
||||
@ -71,11 +71,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* Method add events i-click
|
||||
* Method add events is-click
|
||||
* return void
|
||||
*/
|
||||
function addEventClick() {
|
||||
let eventClick = 'i-click';
|
||||
let eventClick = 'is-click';
|
||||
return getElementsValidatesByEvent(eventClick).forEach((element) => {
|
||||
let params = splitParams(element, eventClick);
|
||||
switch(params.functionParent) {
|
||||
@ -103,12 +103,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* Method add events i-scroll
|
||||
* Method add events is-scroll
|
||||
* return void
|
||||
*/
|
||||
function addEventScroll() {
|
||||
let eventScrollDown = 'i-scroll-down';
|
||||
let eventScrollUp = 'i-scroll-up';
|
||||
let eventScrollDown = 'is-scroll-down';
|
||||
let eventScrollUp = 'is-scroll-up';
|
||||
let elementsDown = getElementsValidatesByEvent(eventScrollDown);
|
||||
let elementsUp = getElementsValidatesByEvent(eventScrollUp);
|
||||
window.addEventListener("scroll", () => {
|
||||
@ -155,11 +155,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
|
||||
/**
|
||||
* Method add events i-hover
|
||||
* Method add events is-hover
|
||||
* return void
|
||||
*/
|
||||
function addEventHover() {
|
||||
let eventHover = 'i-hover';
|
||||
let eventHover = 'is-hover';
|
||||
return getElementsValidatesByEvent(eventHover).forEach((element) => {
|
||||
let params = splitParams(element, eventHover);
|
||||
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
|
||||
//===
|
||||
@ -213,4 +275,5 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
addEventClick();
|
||||
addEventScroll();
|
||||
addEventHover();
|
||||
addEventVisible();
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Test syntax</title>
|
||||
<title>Test is-click</title>
|
||||
<script src="../dist/ffnm.min.js"></script>
|
||||
<style>
|
||||
.nav {
|
||||
@ -21,9 +21,9 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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:remove('show', '#nav')">remove</button>
|
||||
<button i-click="class:toggle('show', '#nav')">toggle</button>
|
||||
<nav class="nav" id="nav" is-click="class:remove('show')">Mi nav</nav>
|
||||
<button is-click="class:add('show', '#nav')">add</button>
|
||||
<button is-click="class:remove('show', '#nav')">remove</button>
|
||||
<button is-click="class:toggle('show', '#nav')">toggle</button>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Test i-hover</title>
|
||||
<title>Test is-hover</title>
|
||||
<script src="../dist/ffnm.min.js"></script>
|
||||
<style>
|
||||
.uppercase {
|
||||
@ -11,14 +11,14 @@
|
||||
</style>
|
||||
</head>
|
||||
<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">
|
||||
Quisque id diam vel quam elementum pulvinar etiam non quam?
|
||||
</p>
|
||||
<p class="text__1--hover">
|
||||
Ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
|
||||
</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.
|
||||
</p>
|
||||
<p class="text__1--hover">
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Test i-scroll</title>
|
||||
<title>Test is-scroll</title>
|
||||
<script src="../dist/ffnm.min.js"></script>
|
||||
<style>
|
||||
.nav {
|
||||
@ -21,8 +21,8 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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')">
|
||||
<nav is-scroll-down="class:remove('show')" is-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
|
||||
<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.
|
||||
</p>
|
||||
<p>
|
||||
47
test/is-visible.html
Normal file
47
test/is-visible.html
Normal 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>
|
||||
@ -7,97 +7,110 @@
|
||||
</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>
|
||||
<div is-click="class:add('show1', '#menu1')">add</div>
|
||||
<div is-click="class:remove('show2', '#menu2')">remove</div>
|
||||
<div is-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>
|
||||
<div is-click="class:add('show1', '.menu1')">add</div>
|
||||
<div is-click="class:remove('show2', '.menu2')">remove</div>
|
||||
<div is-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>
|
||||
<div is-click="class:add('show1', 'a')">add</div>
|
||||
<div is-click="class:remove('show2', 'li')">remove</div>
|
||||
<div is-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>
|
||||
<div is-scroll-up="class:add('show1', '#menu1')">add</div>
|
||||
<div is-scroll-up="class:remove('show2', '#menu2')">remove</div>
|
||||
<div is-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>
|
||||
<div is-scroll-up="class:add('show1', '.menu1')">add</div>
|
||||
<div is-scroll-up="class:remove('show2', '.menu2')">remove</div>
|
||||
<div is-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>
|
||||
<div is-scroll-up="class:add('show1', 'a')">add</div>
|
||||
<div is-scroll-up="class:remove('show2', 'li')">remove</div>
|
||||
<div is-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>
|
||||
<div is-scroll-down="class:add('show1', '#menu1')">add</div>
|
||||
<div is-scroll-down="class:remove('show2', '#menu2')">remove</div>
|
||||
<div is-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>
|
||||
<div is-scroll-down="class:add('show1', '.menu1')">add</div>
|
||||
<div is-scroll-down="class:remove('show2', '.menu2')">remove</div>
|
||||
<div is-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>
|
||||
<div is-scroll-down="class:add('show1', 'a')">add</div>
|
||||
<div is-scroll-down="class:remove('show2', 'li')">remove</div>
|
||||
<div is-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>
|
||||
<div is-hover="class:add('show1', '#menu1')">add</div>
|
||||
<div is-hover="class:remove('show2', '#menu2')">remove</div>
|
||||
<div is-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>
|
||||
<div is-hover="class:add('show1', '.menu1')">add</div>
|
||||
<div is-hover="class:remove('show2', '.menu2')">remove</div>
|
||||
<div is-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>
|
||||
<div is-hover="class:add('show1', 'a')">add</div>
|
||||
<div is-hover="class:remove('show2', 'li')">remove</div>
|
||||
<div is-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>
|
||||
<div is-visible="class:add('show1', '#menu1')">add</div>
|
||||
<div is-visible="class:remove('show2', '#menu2')">remove</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>
|
||||
<div is-visible="class:add('show1', '.menu1')">add</div>
|
||||
<div is-visible="class:remove('show2', '.menu2')">remove</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>
|
||||
<div is-visible="class:add('show1', 'a')">add</div>
|
||||
<div is-visible="class:remove('show2', 'li')">remove</div>
|
||||
<!-- 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 -->
|
||||
<div i-click="class:dd('show1', '.menu1')">add</div>
|
||||
<div is-click="class:dd('show1', '.menu1')">add</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user