andros/FFNM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Front-End for the next master
64 Commits 5 Branches 10 Tags 692 KiB
HTML 72.8%
JavaScript 27.2%
master
Go to file
Andros Fenollosa 79735380e7
Merge pull request #5 from tanrax/dependabot/npm_and_yarn/path-parse-1.0.7 
Bump path-parse from 1.0.6 to 1.0.7
2022-02-25 19:34:50 +01:00
.github Update FUNDING.yml 2021-02-15 11:54:01 +01:00
dist Add is-scroll-up. Update test. Update version 1.5.0 2020-12-22 11:00:48 +01:00
src Add is-scroll-up. Update test. Update version 1.5.0 2020-12-22 11:00:48 +01:00
test Add is-scroll-up. Update test. Update version 1.5.0 2020-12-22 11:00:48 +01:00
.gitignore Add test class 2020-07-05 10:35:36 +02:00
gulpfile.js Update version 1.4.0 2020-08-03 17:03:02 +02:00
LICENSE Initial commit 2020-06-29 19:39:58 +02:00
package-lock.json Merge pull request #5 from tanrax/dependabot/npm_and_yarn/path-parse-1.0.7 2022-02-25 19:34:50 +01:00
package.json Add is-scroll-up. Update test. Update version 1.5.0 2020-12-22 11:00:48 +01:00
README.md Update CDNs 2020-12-22 11:08:54 +01:00

README.md

FFNM (Front-End for the next master)

<button is-click="class:add('open', 'article')">open</button>

<article></article>

👇 🖱 Click! 👇

<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 3.8Kb!

  • Simplifies the click.

  • Simplifies the scroll.

  • Simplifies hover.

  • Simplifies when the elements are visible or not.

DEMOS

Click | Scroll | Visible

Documentation

English

Install

Add to your <head> the following tag.

<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.5.0/dist/ffnm.min.js" integrity="sha384-qlI8XJcMcJMh52x4w9HA9ItB8KmW6pKaJXijVQFl6UvT1nGCH+U6Y7sbbc11HkCH" crossorigin="anonymous"></script>

Examples

Click

Add the class press to button when the button is pressed.
<button is-click="class:add('press')">open</button>
Remove the class press to button when the button is pressed.
<button is-click="class:remove('press')">close</button>
Switch the classs show to button when the button is pressed.
<button is-click="class:toggle('show')">view</button>
Add the class show to the #nav selector when the button is pressed.
<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.
<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.
<button is-click="class:toggle('show', '#nav')">view</button>
<nav id="nav" class="show"></nav>

Scroll up

Add the class show to nav when the scroll goes up.
<nav is-scroll-up="class:add('show')"></nav>
Remove the show class from nav when the scroll goes up.
<nav is-scroll-up="class:remove('show')"></nav>

Scroll down

Add the class show to nav when the scroll down.
<nav is-scroll-down="class:add('show')"></nav>
Remove the show class from nav when the scroll down.
<nav is-scroll-down="class:remove('show')"></nav>

Scroll top

Add the class show to nav when the scroll is top of the page.
<nav is-scroll-top="class:add('show')"></nav>
Remove the show class from nav when the scroll top of the page.
<nav is-scroll-top="class:remove('show')"></nav>

Hover

Add the class show to div when hover.
<div is-hover="class:add('show')"></div>
Remove the show class from div when hover.
<div is-hover="class:remove('show')"></div>
Toggle the show class from div when hover.
<div is-hover="class:toggle('show')"></div>
Add the class show to #button when div hover.
<div is-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</button>

Visible

Add the class show to div when is visible.
<div is-visible="class:add('show')"></div>
Remove the show class from div when is visible.
<div is-visible="class:remove('show')"></div>
Toggle the show class from div when is visible.
<div is-visible="class:toggle('show')"></div>
Add the class show to #button when div is visible.
<div is-visible="class:toggle('show', '#button')"></div>
<button id="button">Hi</button>

Not visible

Add the class show to div when is not visible.
<div is-not-visible="class:add('show')"></div>
Remove the show class from div when is not visible.
<div is-not-visible="class:remove('show')"></div>
Toggle the show class from div when is not visible.
<div is-not-visible="class:toggle('show')"></div>
Add the class show to #name when div is not visible.
<div is-not-visible="class:toggle('show', '#button')"></div>
<input id="name">

Spanish/Español

Instalar

Añade a tu <head> la siguiente etiqueta.

<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.5.0/dist/ffnm.min.js" integrity="sha384-qlI8XJcMcJMh52x4w9HA9ItB8KmW6pKaJXijVQFl6UvT1nGCH+U6Y7sbbc11HkCH" crossorigin="anonymous"></script>

Ejemplos de uso

Clic

Añadir la clase apretado a button cuando sea pulsado.
<button is-click="class:add('apretado')">Apreta</button>
Quitar la clase apretado a button cuando sea pulsado.
<button is-click="class:remove('apretado')">cerrar</button>
Intercambiar la clase apretado a button cuando sea pulsado.
<button is-click="class:toggle('apretado')">ver</button>
Añadir la clase show al selector #menu cuando sea pulsado el botón.
<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.
<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.
<button is-click="class:toggle('show', '#menu')">ver</button>
<nav id="menu" class="show"></nav>

Subir scroll

Añadir la clase show al selector nav cuando el scroll sube.
<nav is-scroll-up="class:add('show')"></nav>
Quitar la clase show al selector nav cuando el scroll sube.
<nav is-scroll-up="class:remove('show')"></nav>

Bajar scroll

Añadir la clase show al selector nav cuando el scroll baja.
<nav is-scroll-down="class:add('show')"></nav>
Quitar la clase show al selector nav cuando el scroll baja.
<nav is-scroll-down="class:remove('show')"></nav>

Scroll esta arriba de la pagina (principio)

Añadir la clase show al selector nav cuando el scroll esta al inicio.
<nav is-scroll-top="class:add('show')"></nav>
Quitar la clase show al selector nav cuando el scroll esta al inicio.
<nav is-scroll-top="class:remove('show')"></nav>

Hover

Añade la clase show al div cuando sea hover.
<div is-hover="class:add('show')"></div>
Quita la clase show al div cuando sea hover.
<div is-hover="class:remove('show')"></div>
Intercambia la clase show al div cuando sea hover.
<div is-hover="class:toggle('show')"></div>
Añade la clase show a #button cuando div sea hover.
<div is-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</button>

Visible

Añade la clase ver en el div cuando es visible.
<div is-visible="class:add('ver')"></div>
Quita la clase ver en el div cuando es visible.
<div is-visible="class:remove('ver')"></div>
Intercambia la clase ver cuando el div es visible.
<div is-visible="class:toggle('ver')"></div>
Añade la clase ver en #boton cuando el div es visible.
<div is-visible="class:toggle('ver', '#boton')"></div>
<button id="boton">Hi</button>

No visible

Añade la clase ver en el div cuando no es visible.
<div is-not-visible="class:add('ver')"></div>
Quita la clase ver en el div cuando no es visible.
<div is-not-visible="class:remove('ver')"></div>
Intercambia la clase ver cuando el div no es visible.
<div is-not-visible="class:toggle('ver')"></div>
Añade la clase ver en #boton cuando el div no es visible.
<div is-not-visible="class:toggle('ver', '#boton')"></div>
<button id="boton">Hi</button>

Development

Install

npm i

Build

gulp

Watch mode

gulp dev