From 5b06ffd174418651b1b949511e5d35c5e4c387ba Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Wed, 22 Jul 2020 19:31:19 +0200 Subject: [PATCH] Update syntax and Add visible --- README.md | 125 ++++++++++++++++++------- dist/ffnm.min.js | 2 +- package.json | 2 +- src/core.js | 81 ++++++++++++++-- test/{i-click.html => is-click.html} | 10 +- test/{i-hover.html => is-hover.html} | 6 +- test/{i-scroll.html => is-scroll.html} | 6 +- test/is-visible.html | 47 ++++++++++ test/validate.html | 105 ++++++++++++--------- 9 files changed, 282 insertions(+), 102 deletions(-) rename test/{i-click.html => is-click.html} (61%) rename test/{i-hover.html => is-hover.html} (81%) rename test/{i-scroll.html => is-scroll.html} (99%) create mode 100644 test/is-visible.html diff --git a/README.md b/README.md index bcb265a..f64aab8 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,18 @@ # FFNM (Front-End for the next master) ``` html - +
``` 👇 🖱 **Click!** 👇 ``` html - +
``` -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 `` the following tag. ```html - + ``` ### Examples @@ -48,39 +50,39 @@ Add to your `` the following tag. ##### Add the class `press` to `button` when the button is pressed. ```html - + ``` ##### Remove the class `press` to `button` when the button is pressed. ```html - + ``` ##### Switch the classs `show` to `button` when the button is pressed. ```html - + ``` ##### Add the class `show` to the `#nav` selector when the button is pressed. ```html - + ``` ##### Remove the `show` class from the `#nav` selector when the button is pressed. ```html - + ``` ##### Switch the `show` class to the `#nav` selector when the button is pressed. ```html - + ``` @@ -89,13 +91,13 @@ Add to your `` the following tag. ##### Add the class `show` to `nav` when the scroll goes up. ```html - + ``` ##### Remove the `show` class from `nav` when the scroll goes up. ```html - + ``` #### Scroll down @@ -103,13 +105,13 @@ Add to your `` the following tag. ##### Add the class `show` to `nav` when the scroll down. ```html - + ``` ##### Remove the `show` class from `nav` when the scroll down. ```html - + ``` #### Hover @@ -117,28 +119,83 @@ Add to your `` the following tag. ##### Add the class `show` to `div` when hover. ```html -
+
``` ##### Remove the `show` class from `div` when hover. ```html -
+
``` ##### Toggle the `show` class from `div` when hover. ```html -
+
``` ##### Add the class `show` to `#button` when `div` hover. ```html -
+
+ ``` ##### Quitar la clase `apretado` a `button` cuando sea pulsado. ```html - + ``` ##### Intercambiar la clase `apretado` a `button` cuando sea pulsado. ```html - + ``` ##### Añadir la clase `show` al selector `#menu` cuando sea pulsado el botón. ```html - + ``` ##### Quitar la clase `show` al selector `#menu` cuando sea pulsado el botón. ```html - + ``` ##### Intercambiar la clase `show` al selector `#menu` cuando sea pulsado el botón. ```html - + ``` @@ -200,13 +257,13 @@ Añade a tu `` la siguiente etiqueta. ##### Añadir la clase `show` al selector `nav` cuando el scroll sube. ```html - + ``` ##### Quitar la clase `show` al selector `nav` cuando el scroll sube. ```html - + ``` #### Bajar scroll @@ -214,13 +271,13 @@ Añade a tu `` la siguiente etiqueta. ##### Añadir la clase `show` al selector `nav` cuando el scroll baja. ```html - + ``` ##### Quitar la clase `show` al selector `nav` cuando el scroll baja. ```html - + ``` #### Hover @@ -228,25 +285,25 @@ Añade a tu `` la siguiente etiqueta. ##### Añade la clase `show` al `div` cuando sea hover. ```html -
+
``` ##### Quita la clase `show` al `div` cuando sea hover. ```html -
+
``` ##### Intercambia la clase `show` al `div` cuando sea hover. ```html -
+
``` ##### Añade la clase `show` a `#button` cuando `div` sea hover. ```html -
+
- - + + + + diff --git a/test/i-hover.html b/test/is-hover.html similarity index 81% rename from test/i-hover.html rename to test/is-hover.html index 08129ab..069ca6a 100644 --- a/test/i-hover.html +++ b/test/is-hover.html @@ -2,7 +2,7 @@ - Test i-hover + Test is-hover -

Place the cursor over this text

+

Place the cursor over this text

Quisque id diam vel quam elementum pulvinar etiam non quam?

Ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.

-

+

Nunc aliquet bibendum enim, facilisis gravida neque convallis a cras.

diff --git a/test/i-scroll.html b/test/is-scroll.html similarity index 99% rename from test/i-scroll.html rename to test/is-scroll.html index f26a896..2c8b065 100644 --- a/test/i-scroll.html +++ b/test/is-scroll.html @@ -2,7 +2,7 @@ - Test i-scroll + Test is-scroll -

-

+

+

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.

diff --git a/test/is-visible.html b/test/is-visible.html new file mode 100644 index 0000000..b3e8bea --- /dev/null +++ b/test/is-visible.html @@ -0,0 +1,47 @@ + + + + + Test is-visible + + + + + +

+
+

Please scroll down

+
+
+ +

+ Image 1 +

+ +

+ Image 2 +

+ +

+ Image 1 +

+ + + diff --git a/test/validate.html b/test/validate.html index ee46cc5..6165e2a 100644 --- a/test/validate.html +++ b/test/validate.html @@ -7,97 +7,110 @@ -
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
+
toggle
-
add
-
remove
-
toggle
+
add
+
remove
-
add
-
remove
-
toggle
+
add
+
remove
-
add
-
remove
-
toggle
+
add
+
remove
+ +
add
+
remove
+ + + +
add
+
remove
+ + + +
add
+
remove
+ + + -
add
+
add