2020-06-29 19:55:01 +02:00
|
|
|
# FFNM (Front-End for the next master)
|
|
|
|
|
|
2020-07-17 16:29:34 +02:00
|
|
|
``` html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:add('open', 'article')">open</button>
|
2020-07-17 18:04:01 +02:00
|
|
|
|
|
|
|
|
<article></article>
|
2020-07-17 16:29:34 +02:00
|
|
|
```
|
|
|
|
|
👇 🖱 **Click!** 👇
|
|
|
|
|
``` html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:add('open', 'article')">open</button>
|
2020-07-17 18:04:01 +02:00
|
|
|
|
|
|
|
|
<article class="open"></article>
|
2020-07-17 16:29:34 +02:00
|
|
|
```
|
|
|
|
|
|
2020-08-03 17:03:02 +02:00
|
|
|
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **3.8Kb**!
|
2020-06-29 19:55:01 +02:00
|
|
|
|
2020-07-17 16:29:34 +02:00
|
|
|
- Simplifies the **click**.
|
2020-07-16 11:23:05 +02:00
|
|
|
|
2020-07-17 16:25:00 +02:00
|
|
|
- Simplifies the **scroll**.
|
2020-07-16 11:23:05 +02:00
|
|
|
|
2020-07-17 16:25:00 +02:00
|
|
|
- Simplifies **hover**.
|
2020-07-17 11:11:53 +02:00
|
|
|
|
2020-07-22 19:31:19 +02:00
|
|
|
- Simplifies when the elements are **visible** or not.
|
|
|
|
|
|
2020-07-05 11:01:25 +02:00
|
|
|
## DEMOS
|
|
|
|
|
|
2020-07-22 19:31:19 +02:00
|
|
|
[Click](https://codepen.io/androsfenollosa/pen/dyGdRVE) | [Scroll](https://codepen.io/androsfenollosa/pen/xxZQxNV) | [Visible](https://codepen.io/androsfenollosa/pen/YzwBLGW)
|
2020-07-05 11:01:25 +02:00
|
|
|
|
2020-06-29 20:03:05 +02:00
|
|
|
## Documentation
|
|
|
|
|
|
2020-06-29 20:03:31 +02:00
|
|
|
- [English](#user-content-english)
|
|
|
|
|
- [Spanish/Español](#user-content-spanishespañol)
|
2020-06-29 19:58:17 +02:00
|
|
|
|
2020-06-29 19:55:01 +02:00
|
|
|
---
|
|
|
|
|
|
2020-07-05 10:44:00 +02:00
|
|
|
## English
|
|
|
|
|
|
|
|
|
|
### Install
|
|
|
|
|
|
|
|
|
|
Add to your `<head>` the following tag.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-12-22 11:08:54 +01:00
|
|
|
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.5.0/dist/ffnm.min.js" integrity="sha384-qlI8XJcMcJMh52x4w9HA9ItB8KmW6pKaJXijVQFl6UvT1nGCH+U6Y7sbbc11HkCH" crossorigin="anonymous"></script>
|
2020-07-05 10:44:00 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Examples
|
|
|
|
|
|
|
|
|
|
#### Click
|
|
|
|
|
|
2020-07-16 01:06:48 +02:00
|
|
|
##### Add the class `press` to `button` when the button is pressed.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:add('press')">open</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Remove the class `press` to `button` when the button is pressed.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:remove('press')">close</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Switch the classs `show` to `button` when the button is pressed.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:toggle('show')">view</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
```
|
|
|
|
|
|
2020-07-05 10:44:00 +02:00
|
|
|
##### Add the class `show` to the `#nav` selector when the button is pressed.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:add('show', '#nav')">open</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
<nav id="nav"></nav>
|
2020-07-05 10:44:00 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Remove the `show` class from the `#nav` selector when the button is pressed.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:remove('show', '#nav')">close</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
<nav id="nav" class="show"></nav>
|
2020-07-05 10:44:00 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Switch the `show` class to the `#nav` selector when the button is pressed.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:toggle('show', '#nav')">view</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
<nav id="nav" class="show"></nav>
|
2020-07-05 10:44:00 +02:00
|
|
|
```
|
|
|
|
|
|
2020-07-16 00:44:52 +02:00
|
|
|
#### Scroll up
|
|
|
|
|
|
|
|
|
|
##### Add the class `show` to `nav` when the scroll goes up.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<nav is-scroll-up="class:add('show')"></nav>
|
2020-07-16 00:44:52 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Remove the `show` class from `nav` when the scroll goes up.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<nav is-scroll-up="class:remove('show')"></nav>
|
2020-07-16 00:44:52 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### Scroll down
|
|
|
|
|
|
|
|
|
|
##### Add the class `show` to `nav` when the scroll down.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<nav is-scroll-down="class:add('show')"></nav>
|
2020-07-16 00:44:52 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Remove the `show` class from `nav` when the scroll down.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<nav is-scroll-down="class:remove('show')"></nav>
|
2020-07-16 00:44:52 +02:00
|
|
|
```
|
|
|
|
|
|
2020-12-22 11:00:48 +01:00
|
|
|
#### Scroll top
|
|
|
|
|
|
|
|
|
|
##### Add the class `show` to `nav` when the scroll is top of the page.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<nav is-scroll-top="class:add('show')"></nav>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Remove the `show` class from `nav` when the scroll top of the page.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<nav is-scroll-top="class:remove('show')"></nav>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
2020-07-17 11:11:53 +02:00
|
|
|
#### Hover
|
|
|
|
|
|
|
|
|
|
##### Add the class `show` to `div` when hover.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<div is-hover="class:add('show')"></div>
|
2020-07-17 11:11:53 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Remove the `show` class from `div` when hover.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<div is-hover="class:remove('show')"></div>
|
2020-07-17 11:11:53 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Toggle the `show` class from `div` when hover.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<div is-hover="class:toggle('show')"></div>
|
2020-07-17 11:11:53 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Add the class `show` to `#button` when `div` hover.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<div is-hover="class:toggle('show', '#button')"></div>
|
2020-08-03 17:20:33 +02:00
|
|
|
<button id="button">Hi</button>
|
2020-07-22 19:31:19 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### 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>
|
2020-08-03 17:20:33 +02:00
|
|
|
<button id="button">Hi</button>
|
2020-07-17 11:11:53 +02:00
|
|
|
```
|
|
|
|
|
|
2020-07-22 19:31:19 +02:00
|
|
|
#### 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">
|
|
|
|
|
```
|
|
|
|
|
|
2020-07-05 10:44:00 +02:00
|
|
|
---
|
|
|
|
|
|
2020-06-29 19:55:01 +02:00
|
|
|
## Spanish/Español
|
|
|
|
|
|
|
|
|
|
### Instalar
|
|
|
|
|
|
|
|
|
|
Añade a tu `<head>` la siguiente etiqueta.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-12-22 11:08:54 +01:00
|
|
|
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.5.0/dist/ffnm.min.js" integrity="sha384-qlI8XJcMcJMh52x4w9HA9ItB8KmW6pKaJXijVQFl6UvT1nGCH+U6Y7sbbc11HkCH" crossorigin="anonymous"></script>
|
2020-06-29 19:55:01 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Ejemplos de uso
|
|
|
|
|
|
|
|
|
|
#### Clic
|
|
|
|
|
|
2020-07-16 01:06:48 +02:00
|
|
|
##### Añadir la clase `apretado` a `button` cuando sea pulsado.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:add('apretado')">Apreta</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quitar la clase `apretado` a `button` cuando sea pulsado.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:remove('apretado')">cerrar</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Intercambiar la clase `apretado` a `button` cuando sea pulsado.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:toggle('apretado')">ver</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
```
|
|
|
|
|
|
2020-06-29 19:55:01 +02:00
|
|
|
##### Añadir la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:add('show', '#menu')">abrir</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
<nav id="menu"></nav>
|
2020-06-29 19:55:01 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quitar la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:remove('show', '#menu')">cerrar</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
<nav id="menu" class="show"></nav>
|
2020-06-29 19:55:01 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Intercambiar la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<button is-click="class:toggle('show', '#menu')">ver</button>
|
2020-07-16 01:06:48 +02:00
|
|
|
<nav id="menu" class="show"></nav>
|
2020-06-29 19:55:01 +02:00
|
|
|
```
|
|
|
|
|
|
2020-07-16 00:44:52 +02:00
|
|
|
#### Subir scroll
|
|
|
|
|
|
|
|
|
|
##### Añadir la clase `show` al selector `nav` cuando el scroll sube.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<nav is-scroll-up="class:add('show')"></nav>
|
2020-07-16 00:44:52 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quitar la clase `show` al selector `nav` cuando el scroll sube.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<nav is-scroll-up="class:remove('show')"></nav>
|
2020-07-16 00:44:52 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### Bajar scroll
|
|
|
|
|
|
|
|
|
|
##### Añadir la clase `show` al selector `nav` cuando el scroll baja.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<nav is-scroll-down="class:add('show')"></nav>
|
2020-07-16 00:44:52 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quitar la clase `show` al selector `nav` cuando el scroll baja.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<nav is-scroll-down="class:remove('show')"></nav>
|
2020-07-16 00:44:52 +02:00
|
|
|
```
|
|
|
|
|
|
2020-12-22 11:00:48 +01:00
|
|
|
#### Scroll esta arriba de la pagina (principio)
|
|
|
|
|
|
|
|
|
|
##### Añadir la clase `show` al selector `nav` cuando el scroll esta al inicio.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<nav is-scroll-top="class:add('show')"></nav>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quitar la clase `show` al selector `nav` cuando el scroll esta al inicio.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<nav is-scroll-top="class:remove('show')"></nav>
|
|
|
|
|
```
|
|
|
|
|
|
2020-07-17 11:11:53 +02:00
|
|
|
#### Hover
|
|
|
|
|
|
|
|
|
|
##### Añade la clase `show` al `div` cuando sea hover.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<div is-hover="class:add('show')"></div>
|
2020-07-17 11:11:53 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quita la clase `show` al `div` cuando sea hover.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<div is-hover="class:remove('show')"></div>
|
2020-07-17 11:11:53 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Intercambia la clase `show` al `div` cuando sea hover.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<div is-hover="class:toggle('show')"></div>
|
2020-07-17 11:11:53 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Añade la clase `show` a `#button` cuando `div` sea hover.
|
|
|
|
|
|
|
|
|
|
```html
|
2020-07-22 19:31:19 +02:00
|
|
|
<div is-hover="class:toggle('show', '#button')"></div>
|
2020-08-03 17:20:33 +02:00
|
|
|
<button id="button">Hi</button>
|
2020-07-17 11:11:53 +02:00
|
|
|
```
|
|
|
|
|
|
2020-07-22 20:09:56 +02:00
|
|
|
#### Visible
|
|
|
|
|
|
|
|
|
|
##### Añade la clase `ver` en el `div` cuando es visible.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<div is-visible="class:add('ver')"></div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quita la clase `ver` en el `div` cuando es visible.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<div is-visible="class:remove('ver')"></div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Intercambia la clase `ver` cuando el `div` es visible.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<div is-visible="class:toggle('ver')"></div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Añade la clase `ver` en `#boton` cuando el `div` es visible.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<div is-visible="class:toggle('ver', '#boton')"></div>
|
2020-08-03 17:20:33 +02:00
|
|
|
<button id="boton">Hi</button>
|
2020-07-22 20:09:56 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### No visible
|
|
|
|
|
|
|
|
|
|
##### Añade la clase `ver` en el `div` cuando no es visible.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<div is-not-visible="class:add('ver')"></div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quita la clase `ver` en el `div` cuando no es visible.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<div is-not-visible="class:remove('ver')"></div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Intercambia la clase `ver` cuando el `div` no es visible.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<div is-not-visible="class:toggle('ver')"></div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Añade la clase `ver` en `#boton` cuando el `div` no es visible.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<div is-not-visible="class:toggle('ver', '#boton')"></div>
|
2020-08-03 17:20:33 +02:00
|
|
|
<button id="boton">Hi</button>
|
2020-07-22 20:09:56 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
2020-07-05 10:44:00 +02:00
|
|
|
---
|
2020-06-30 10:12:43 +02:00
|
|
|
|
|
|
|
|
## Development
|
|
|
|
|
|
2020-07-02 10:40:34 +02:00
|
|
|
### Install
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
npm i
|
|
|
|
|
```
|
|
|
|
|
|
2020-06-30 10:12:43 +02:00
|
|
|
### Build
|
|
|
|
|
|
|
|
|
|
```javascript
|
2020-07-02 10:40:34 +02:00
|
|
|
gulp
|
2020-06-30 10:12:43 +02:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Watch mode
|
|
|
|
|
|
|
|
|
|
```javascript
|
2020-07-02 10:40:34 +02:00
|
|
|
gulp dev
|
2020-06-30 10:12:43 +02:00
|
|
|
```
|
