2020-06-29 19:55:01 +02:00
|
|
|
# FFNM (Front-End for the next master)
|
|
|
|
|
|
|
|
|
|
Simple plugin to avoid writing Javascript in trivial tasks.
|
|
|
|
|
|
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
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Spanish/Español
|
|
|
|
|
|
|
|
|
|
### Instalar
|
|
|
|
|
|
|
|
|
|
Añade a tu `<head>` la siguiente etiqueta.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<script defer src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.0.0/ffnm.min.js"></script>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Ejemplos de uso
|
|
|
|
|
|
|
|
|
|
#### Clic
|
|
|
|
|
|
|
|
|
|
##### Añadir la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<button i-click="class:add('show', '#menu')">abrir</button>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quitar la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<button i-click="class:remove('show', '#menu')">cerrar</button>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Intercambiar la clase `show` al selector `#menu` cuando sea pulsado el botón.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<button i-click="class:toggle('show', '#menu')">ver</button>
|
|
|
|
|
```
|
|
|
|
|
#### Scroll
|
|
|
|
|
|
|
|
|
|
##### Añadir la clase `down` al `nav` cuando el usuario haga scroll hacia abajo.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<nav i-scroll-down="class:add('down', this)"></nav>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quitar la clase `down` al `nav` cuando el usuario haga scroll hacia arriba.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<nav i-scroll-up="class:remove('down', this)"></nav>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### Hover
|
|
|
|
|
|
|
|
|
|
##### Añadir la clase `tadam` al selector `#menu` cuando el usuario haga `hover` sobre el botón.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<button i-hover="class:toggle('tadam', '#menu')">sorpresa!</button>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### Clases sin eventos
|
|
|
|
|
|
|
|
|
|
##### Añadir la clase `show` al selector `#menu`
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
class:add('show', '#menu')
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Quitar la clase `show` al selector `#menu`
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
class:remove('show', '#menu')
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
##### Intercambiar la clase `show` al selector `#menu`
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
class:toggle('show', '#menu')
|
|
|
|
|
```
|
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
|
|
|
```
|
