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
Merge pull request #4 from tanrax/dependabot/npm_and_yarn/hosted-git-info-2.8.9
2022-02-25 19:34:50 +01:00 · 2022-02-25 19:34:38 +01:00 · 2022-02-25 19:34:28 +01:00 · 2021-08-12 16:35:33 +00:00 · 2021-05-11 20:30:06 +00:00 · 2021-03-31 12:38:25 +00:00
19 changed files with 781 additions and 260 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -0,0 +1,2 @@
+github: tanrax
+ko_fi: androsfenollosa
--- a/README.md
+++ b/README.md
@ -1,12 +1,30 @@
 # FFNM (Front-End for the next master)

-![example](media/example.png)
+``` html
+<button is-click="class:add('open', 'article')">open</button>

-Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **1Kb**!
+<article></article>
+```
+👇 🖱 **Click!** 👇
+``` html
+<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](https://codepen.io/androsfenollosa/pen/dyGdRVE)
+[Click](https://codepen.io/androsfenollosa/pen/dyGdRVE) | [Scroll](https://codepen.io/androsfenollosa/pen/xxZQxNV) | [Visible](https://codepen.io/androsfenollosa/pen/YzwBLGW)

 ## Documentation

@ -22,29 +40,50 @@ 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.0.0/dist/ffnm.min.js"></script>
+<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.
+
+```html
+<button is-click="class:add('press')">open</button>
+```
+
+##### Remove the class `press` to `button` when the button is pressed.
+
+```html
+<button is-click="class:remove('press')">close</button>
+```
+
+##### Switch the classs `show` to `button` when the button is pressed.
+
+```html
+<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>
 ```

 #### Scroll up
@ -52,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
@ -66,34 +105,109 @@ 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>
+```
+
+#### 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>
 ```


-#### Classes without events
+#### Hover

-##### Add the class `show` to the `#nav` selector
+##### Add the class `show` to `div` when hover.

-```javascript
-class:add('show', '#nav')
+```html
+<div is-hover="class:add('show')"></div>
 ```

-##### Remove the `show` class from the `#nav` selector
+##### Remove the `show` class from `div` when hover.

-```javascript
-class:remove('show', '#nav')
+```html
+<div is-hover="class:remove('show')"></div>
 ```

-##### Switch the class `show` to the `#nav` selector
+##### Toggle the `show` class from `div` when hover.

-```javascript
-class:toggle('show', '#nav')
+```html
+<div is-hover="class:toggle('show')"></div>
+```
+
+##### Add the class `show` to `#button` when `div` hover.
+
+```html
+<div is-hover="class:toggle('show', '#button')"></div>
+<button id="button">Hi</button>
+```
+
+#### 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</button>
+```
+
+#### 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">
 ```

 ---
@ -105,29 +219,50 @@ class:toggle('show', '#nav')
 Añade a tu `<head>` la siguiente etiqueta.

 ```html
-<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.0.0/ffnm.min.js"></script>
+<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.
+
+```html
+<button is-click="class:add('apretado')">Apreta</button>
+```
+
+##### Quitar la clase `apretado` a `button` cuando sea pulsado.
+
+```html
+<button is-click="class:remove('apretado')">cerrar</button>
+```
+
+##### Intercambiar la clase `apretado` a `button` cuando sea pulsado.
+
+```html
+<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>
 ```

 #### Subir scroll
@ -135,13 +270,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
@ -149,35 +284,111 @@ 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>
+```
+
+#### 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>
+```
+
+#### Hover
+
+##### Añade la clase `show` al `div` cuando sea hover.
+
+```html
+<div is-hover="class:add('show')"></div>
+```
+
+##### Quita la clase `show` al `div` cuando sea hover.
+
+```html
+<div is-hover="class:remove('show')"></div>
+```
+
+##### Intercambia la clase `show` al `div` cuando sea hover.
+
+```html
+<div is-hover="class:toggle('show')"></div>
+```
+
+##### Añade la clase `show` a `#button` cuando `div` sea hover.
+
+```html
+<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.
+
+```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>
+<button id="boton">Hi</button>
+```
+
+#### 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>
+<button id="boton">Hi</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')
-```
 ---

 ## Development
--- a/dist/ffnm.min.js
+++ b/dist/ffnm.min.js
@ -1,2 +1,2 @@
-document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let c=[],t=void 0;function l(e,c){let t=e.getAttribute(c),l=RegExp("^(\\w+):").exec(t)[1],s=RegExp(":(\\w+)\\(").exec(t)[1],a=RegExp("\\('(\\w+)',").exec(t),o=null!==a?a.exec(t)[1]:void 0,r=RegExp(", *'([#,.,a-zA-Z]\\w*)'\\)").exec(t);return{functionParent:l,functionChild:s,value:o,target:null!==r?r.exec(t)[1]:void 0}}c=[],["i-click","i-scroll-up","i-scroll-down"].map(t=>[...document.querySelectorAll(`[${t}]`)].map(l=>{let s=Object.keys(e).map(c=>e[c].map(e=>RegExp(`^${c}:${e}\\('\\w+', *'[#,.,a-zA-Z]\\w*'\\)$`).test(l.getAttribute(t))).some(e=>e)).every(e=>e);return s?c.push(l):(console.error("FFNM: Bad syntax"),console.error(l)),s}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let c=l(e,"i-click");switch(c.functionParent){case"class":[...document.querySelectorAll(c.target)].forEach(t=>{e.addEventListener("click",()=>{switch(c.functionChild){case"add":t.classList.add(c.value);break;case"remove":t.classList.remove(c.value);break;case"toggle":t.classList.toggle(c.value)}})})}}),window.addEventListener("scroll",()=>{let e=window.pageYOffset||document.documentElement.scrollTop;[...document.querySelectorAll("[i-scroll-down]")].forEach(c=>{if(e>t){let e=l(c,"i-scroll-down");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(c=>{if(e<=t){let e=l(c,"i-scroll-up");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),t=e<=0?0:e},!1)});
+const EVENTS=["is-click","is-scroll-up","is-scroll-down","is-scroll-top","is-hover","is-visible","is-not-visible"],FUNCTION_TREE={class:["add","remove","toggle"]};let elementsValidates=[],lastScrollTop=void 0;function validateSyntax(){return elementsValidates=[],EVENTS.map(e=>[...document.querySelectorAll(`[${e}]`)].map(t=>{let s=Object.keys(FUNCTION_TREE).map(s=>FUNCTION_TREE[s].map(a=>RegExp(`^${s}:${a}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(t.getAttribute(e))).some(e=>e)).every(e=>e);return s?elementsValidates.push(t):(console.error("FFNM: Bad syntax"),console.error(t)),s}).every(e=>e)).every(e=>e)}function splitParams(e,t){let s=e.getAttribute(t),a=RegExp("^(\\w+):").exec(s)[1],l=RegExp(":(\\w+)\\(").exec(s)[1],i=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],c=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:a,functionChild:l,value:i,target:null!==c.exec(s)?c.exec(s)[1]:void 0}}function getElementsValidatesByEvent(e){return[...elementsValidates].filter(t=>t.hasAttribute(e))}function addEventClick(){return getElementsValidatesByEvent("is-click").forEach(e=>{let t=splitParams(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 addEventScroll(){let e=getElementsValidatesByEvent("is-scroll-down"),t=getElementsValidatesByEvent("is-scroll-up"),s=getElementsValidatesByEvent("is-scroll-top");window.addEventListener("scroll",()=>{let a=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(a>lastScrollTop){let t=splitParams(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(a<=lastScrollTop){let t=splitParams(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)}}}}),lastScrollTop=a<=0?0:a,s.forEach(e=>{let t=splitParams(e,"is-scroll-top");if(a<=0)switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}else switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.remove(t.value);break;case"remove":e.classList.add(t.value)}}})},!1)}function addEventHover(){return getElementsValidatesByEvent("is-hover").forEach(e=>{let t=splitParams(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 addEventVisible(){let e=getElementsValidatesByEvent("is-visible"),t=getElementsValidatesByEvent("is-not-visible");const s=new IntersectionObserver(e=>{e.forEach(e=>{let t=e.target;if(e.isIntersecting){let e=splitParams(t,"is-visible");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}})});e.forEach(e=>{s.observe(e)});const a=new IntersectionObserver(e=>{e.forEach(e=>{let t=e.target;if(!e.isIntersecting){let e=splitParams(t,"is-not-visible");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}})});t.forEach(e=>{a.observe(e)})}document.addEventListener("DOMContentLoaded",()=>{validateSyntax(),addEventClick(),addEventScroll(),addEventHover(),addEventVisible()});
 //# sourceMappingURL=ffnm.min.js.map
--- a/gulpfile.js
+++ b/gulpfile.js
@ -19,7 +19,15 @@ const DIST_JS = 'ffnm.min.js';

 // JS concat + sourcemaps + babel + min
 function js(cb) {
-    return src([SRC_PATH + 'core.js'])
+    return src([
+        SRC_PATH + 'globals.js',
+        SRC_PATH + 'syntax.js',
+        SRC_PATH + 'events/click.js',
+        SRC_PATH + 'events/scroll.js',
+        SRC_PATH + 'events/hover.js',
+        SRC_PATH + 'events/visible.js',
+        SRC_PATH + 'core.js'
+    ])
        .pipe(sourcemaps.init())
        .pipe(concat(DIST_JS))
        .pipe(uglify())
@ -37,7 +45,7 @@ const build = series(js);
 // gulp dev
 exports.dev = function () {
    build();
-    watch(SRC_PATH + '*.js', js);
+    watch(SRC_PATH + '**/*.js', js);
 }

 // gulp
--- a/media/example.png
+++ b/media/example.png
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "ffnm",
-  "version": "1.0.0",
+  "version": "1.5.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -1327,9 +1327,9 @@
      }
    },
    "hosted-git-info": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
-      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
    },
    "inflight": {
      "version": "1.0.6",
@ -1346,9 +1346,9 @@
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
    },
    "interpret": {
      "version": "1.4.0",
@ -2006,9 +2006,9 @@
      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
    },
    "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
    },
    "path-root": {
      "version": "0.1.1",
@ -2899,9 +2899,9 @@
      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
    },
    "y18n": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
+      "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ=="
    },
    "yargs": {
      "version": "7.1.1",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "ffnm",
-  "version": "1.0.0",
+  "version": "1.5.0",
  "description": "Simple plugin to avoid writing Javascript in trivial tasks.",
  "main": "gulpfile.js",
  "dependencies": {
--- a/src/core.js
+++ b/src/core.js
@ -1,149 +1,15 @@
 document.addEventListener('DOMContentLoaded', () => {

-    //===
-    // VARIABLES
-    //===
-    const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down'];
-    const FUNCTION_TREE = {
-        'class': ['add', 'remove', 'toggle']
-    };
-    let elementsValidates = [];
-    let lastScrollTop = undefined;
-
-    //===
-    // FUNCTIONS
-    //===
-
-    /**
-     * Method that validates syntax and reports.
-     * return - Bool
-     */
-    function validateSyntax() {
-        elementsValidates = [];
-        // Check all event syntax
-        return EVENTS.map((event) => {
-            // Check element FUNCTION_TREE
-            return [...document.querySelectorAll(`[${event}]`)].map((element) => {
-                // Check KEY FUNCTION_TREE
-                let checked = Object.keys(FUNCTION_TREE).map((key) => {
-                    // Check METHODS FUNCTION_TREE
-                    return FUNCTION_TREE[key].map((method) => {
-                        return RegExp(`^${key}:${method}\\('\\w+', *'[#,.,a-zA-Z]\\w*'\\)$`).test(element.getAttribute(event));
-                    }).some(method => method);
-                }).every(key => key);
-                if(checked) {
-                    // Save element validate
-                    elementsValidates.push(element);
-                } else {
-                    // Notify error
-                    console.error('FFNM: Bad syntax');
-                    console.error(element);
-                }
-                return checked;
-            }).every(item => item);
-        }).every(event => event);
-    }
-
-    /**
-     * Method return params
-     * return JSON - {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''}
-     * example - i-click="class:add('show', '#menu')"
-     * return {'functionParent': 'class', 'functionChild': 'add', 'value': 'show', 'target': '#menu'}
-     */
-    function splitParams(element, attribute) {
-        let params = element.getAttribute(attribute);
-        let functionParent = RegExp(`^(\\w+):`).exec(params)[1];
-        let functionChild = RegExp(`:(\\w+)\\(`).exec(params)[1];
-        let resultValue = RegExp(`\\(\'(\\w+)\',`).exec(params);
-        let value = resultValue !== null ? resultValue.exec(params)[1] : undefined;
-        let resultTarget = RegExp(`, *\'([#,.,a-zA-Z]\\w*)\'\\)`).exec(params);
-        let target = resultTarget !== null ? resultTarget.exec(params)[1] : undefined;
-        return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target};
-    }
-
-    /**
-     * Method add events i-click
-     * return void
-     */
-    function addEventClick() {
-        let eventClick = 'i-click';
-        return [...document.querySelectorAll(`[${eventClick}]`)].forEach((element) => {
-            let params = splitParams(element, eventClick);
-            switch(params.functionParent) {
-                case 'class':
-                    [...document.querySelectorAll(params.target)].forEach((item) => {
-                        element.addEventListener('click', () => {
-                            switch(params.functionChild) {
-                                case 'add':
-                                    item.classList.add(params.value);
-                                    break;
-                                case 'remove':
-                                    item.classList.remove(params.value);
-                                    break;
-                                case 'toggle':
-                                    item.classList.toggle(params.value);
-                                    break;
-                            }
-                        });
-                    });
-                break;
-            }
-        });
-    }
-
-    /**
-     * Method add events i-scroll
-     * return void
-     */
-    function addEventScroll() {
-        let eventScrollDown = 'i-scroll-down';
-        let eventScrollUp = 'i-scroll-up';
-        window.addEventListener("scroll", () => {
-            let posScroll = window.pageYOffset || document.documentElement.scrollTop;
-            // Scroll down
-            [...document.querySelectorAll(`[${eventScrollDown}]`)].forEach((element) => {
-                if (posScroll > lastScrollTop) {
-                    let params = splitParams(element, eventScrollDown);
-                    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;
-                    }
-                }
-            });
-            // Scroll up
-            [...document.querySelectorAll(`[${eventScrollUp}]`)].forEach((element) => {
-                if (posScroll <= lastScrollTop) {
-                    let params = splitParams(element, eventScrollUp);
-                    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;
-                    }
-                }
-            });
-            lastScrollTop = posScroll <= 0 ? 0 : posScroll; // For Mobile or negative scrolling
-        }, false);
-    }
-
    //===
    // INIT
    //===
+
+    // Syntax
    validateSyntax();
+    // Events
    addEventClick();
    addEventScroll();
+    addEventHover();
+    addEventVisible();
+
 });
--- a/src/events/click.js
+++ b/src/events/click.js
@ -0,0 +1,36 @@
+
+//===
+// FUNCTIONS
+//===
+
+/**
+ * Method add events is-click
+ * return void
+ */
+function addEventClick() {
+    let eventClick = 'is-click';
+    return getElementsValidatesByEvent(eventClick).forEach((element) => {
+        let params = splitParams(element, eventClick);
+        switch(params.functionParent) {
+            case 'class':
+            [...document.querySelectorAll(params.target)].concat(params.target === undefined ? element : undefined).forEach((item) => {
+                if (item !== undefined) {
+                    element.addEventListener('click', () => {
+                        switch(params.functionChild) {
+                            case 'add':
+                                item.classList.add(params.value);
+                                break;
+                            case 'remove':
+                                item.classList.remove(params.value);
+                                break;
+                            case 'toggle':
+                                item.classList.toggle(params.value);
+                                break;
+                        }
+                    });
+                }
+                });
+            break;
+        }
+    });
+}
--- a/src/events/hover.js
+++ b/src/events/hover.js
@ -0,0 +1,57 @@
+
+//===
+// FUNCTIONS
+//===
+
+/**
+ * Method add events is-hover
+ * return void
+ */
+function addEventHover() {
+    let eventHover = 'is-hover';
+    return getElementsValidatesByEvent(eventHover).forEach((element) => {
+        let params = splitParams(element, eventHover);
+        switch(params.functionParent) {
+            case 'class':
+            [...document.querySelectorAll(params.target)].concat(params.target === undefined ? element : undefined).forEach((item) => {
+                if (item !== undefined) {
+                    // Enter
+                    switch(params.functionChild) {
+                        case 'add':
+                            // Enter
+                            element.addEventListener('mouseenter', () => {
+                                item.classList.add(params.value);
+                            });
+                            // Out
+                            element.addEventListener('mouseout', () => {
+                                item.classList.remove(params.value);
+                            });
+                            break;
+                        case 'remove':
+                            // Enter
+                            element.addEventListener('mouseenter', () => {
+                                item.classList.remove(params.value);
+                            });
+                            // Out
+                            element.addEventListener('mouseout', () => {
+                                item.classList.add(params.value);
+                            });
+                            break;
+                        case 'toggle':
+                            // Enter
+                            element.addEventListener('mouseenter', () => {
+                                item.classList.toggle(params.value);
+                            });
+                            // Out
+                            element.addEventListener('mouseout', () => {
+                                item.classList.toggle(params.value);
+                            });
+                            break;
+                    }
+                }
+            });
+            break;
+        }
+    });
+}
+
--- a/src/events/scroll.js
+++ b/src/events/scroll.js
@ -0,0 +1,93 @@
+
+//===
+// FUNCTIONS
+//===
+
+/**
+ * Method add events is-scroll
+ * return void
+ */
+function addEventScroll() {
+    const eventScrollDown = 'is-scroll-down';
+    const eventScrollUp = 'is-scroll-up';
+    const eventScrollTop = 'is-scroll-top';
+    let elementsDown = getElementsValidatesByEvent(eventScrollDown);
+    let elementsUp = getElementsValidatesByEvent(eventScrollUp);
+    let elementsTop = getElementsValidatesByEvent(eventScrollTop);
+    window.addEventListener("scroll", () => {
+
+        let posScroll = window.pageYOffset || document.documentElement.scrollTop;
+
+        // Scroll down - is-scroll-down
+        elementsDown.forEach((element) => {
+            if (posScroll > lastScrollTop) {
+                let params = splitParams(element, eventScrollDown);
+                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;
+                }
+            }
+        });
+
+        // Scroll up - is-scroll-up
+        elementsUp.forEach((element) => {
+            if (posScroll <= lastScrollTop) {
+                let params = splitParams(element, eventScrollUp);
+                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;
+                }
+            }
+        });
+        lastScrollTop = posScroll <= 0 ? 0 : posScroll; // For Mobile or negative scrolling
+
+        // Scroll top - is-scroll-top
+        elementsTop.forEach((element) => {
+            let params = splitParams(element, eventScrollTop);
+            if (posScroll <= 0) {
+                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;
+                }
+            } else {
+                switch(params.functionParent) {
+                case 'class':
+                    switch(params.functionChild) {
+                    case 'add':
+                        element.classList.remove(params.value);
+                        break;
+                    case 'remove':
+                        element.classList.add(params.value);
+                        break;
+                    }
+                    break;
+                }
+            }
+        });
+    }, false);
+}
+
--- a/src/events/visible.js
+++ b/src/events/visible.js
@ -0,0 +1,69 @@
+
+//===
+// FUNCTIONS
+//===
+
+/**
+ * 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);
+
+    // Visible
+    const onIntersectionVisible = (entries) => {
+        entries.forEach((entry) => {
+            let element = entry.target;
+            if (entry.isIntersecting) {
+                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;
+                }
+            }
+        });
+    };
+    const observerVisible = new IntersectionObserver(onIntersectionVisible);
+    elementsVisibles.forEach((element) => {
+        observerVisible.observe(element);
+    });
+
+    // Not visible
+    const onIntersectionNotVisible = (entries) => {
+        entries.forEach((entry) => {
+            let element = entry.target;
+            if (!entry.isIntersecting) {
+                let params = splitParams(element, eventNotVisible);
+                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;
+                }
+            }
+        });
+    };
+
+    const observerNotVisible = new IntersectionObserver(onIntersectionNotVisible);
+    elementsNotVisibles.forEach((element) => {
+        observerNotVisible.observe(element);
+    });
+}
+
--- a/src/globals.js
+++ b/src/globals.js
@ -0,0 +1,10 @@
+
+//===
+// VARIABLES
+//===
+const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-scroll-top', 'is-hover', 'is-visible', 'is-not-visible'];
+const FUNCTION_TREE = {
+    'class': ['add', 'remove', 'toggle']
+};
+let elementsValidates = [];
+let lastScrollTop = undefined;
--- a/src/syntax.js
+++ b/src/syntax.js
@ -0,0 +1,61 @@
+
+//===
+// FUNCTIONS
+//===
+
+/**
+ * Method that validates syntax and reports.
+ * return - Bool
+ */
+function validateSyntax() {
+    elementsValidates = [];
+    // Check all event syntax
+    return EVENTS.map((event) => {
+        // Check element FUNCTION_TREE
+        return [...document.querySelectorAll(`[${event}]`)].map((element) => {
+            // Check KEY FUNCTION_TREE
+            let checked = Object.keys(FUNCTION_TREE).map((key) => {
+                // Check METHODS FUNCTION_TREE
+                return FUNCTION_TREE[key].map((method) => {
+                    return RegExp(`^${key}:${method}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(element.getAttribute(event));
+                }).some(method => method);
+            }).every(key => key);
+            if(checked) {
+                // Save element validate
+                elementsValidates.push(element);
+            } else {
+                // Notify error
+                console.error('FFNM: Bad syntax');
+                console.error(element);
+            }
+            return checked;
+        }).every(item => item);
+    }).every(event => event);
+}
+
+
+/**
+ * Method return params
+ * return JSON - {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''}
+ * example - is-click="class:add('show', '#menu')"
+ * return {'functionParent': 'class', 'functionChild': 'add', 'value': 'show', 'target': '#menu'}
+ */
+function splitParams(element, attribute) {
+    let params = element.getAttribute(attribute);
+    let functionParent = RegExp("^(\\w+):").exec(params)[1];
+    let functionChild = RegExp(":(\\w+)\\(").exec(params)[1];
+    let value = RegExp("\\(\'(\\w[_-\\w0-9]+)\',?").exec(params)[1];
+    let resultTarget = RegExp(", ?\'([.#i\\w][_-\\w0-9]+)\'\\)");
+    let target = resultTarget.exec(params) !== null ? resultTarget.exec(params)[1] : undefined;
+    return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target};
+}
+
+/**
+ * Method that returns all validated elements filtered by an event
+ * return Array
+ */
+function getElementsValidatesByEvent(nameEvent) {
+    return [...elementsValidates].filter(element => {
+        return element.hasAttribute(nameEvent);
+    });
+}
--- a/test/is-click.html
+++ b/test/is-click.html
@ -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">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>
--- a/test/is-hover.html
+++ b/test/is-hover.html
@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Test is-hover</title>
+        <script src="../dist/ffnm.min.js"></script>
+        <style>
+         .uppercase {
+             text-transform: uppercase;
+         }
+        </style>
+    </head>
+    <body>
+        <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" is-hover="class:add('uppercase')">
+            Nunc aliquet bibendum enim, facilisis gravida neque convallis a cras.
+        </p>
+        <p class="text__1--hover">
+            Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
+        </p>
+        <p class="text__1--hover">
+            Volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus mauris.
+        </p>
+    </body>
+</html>
--- a/test/is-scroll.html
+++ b/test/is-scroll.html
@ -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 {
@ -15,14 +15,31 @@
             transition: 1s;
             transform: translateY(10rem);
         }
+
+         .top {
+             position: fixed;
+             top: 0;
+             left: 0;
+             right: 0;
+             height: 5rem;
+             color: white;
+             background: red;
+             transition: 1s;
+             transform: translateY(-10rem);
+             display: flex;
+             justify-content: center;
+             align-items: center;
+         }
+
         .show {
             transform: translateY(0);
         }
        </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', 'p')">
+        <nav is-scroll-down="class:remove('show')" is-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
+        <div is-scroll-top="class:add('show')" class="top show">You is top page</div>
+        <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>
--- a/test/is-visible.html
+++ b/test/is-visible.html
@ -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>
--- a/test/validate.html
+++ b/test/validate.html
@ -3,101 +3,114 @@
    <head>
        <meta charset="UTF-8"/>
        <title>Test syntax</title>
-        <script src="../dist/FFNM.min.js"></script>
+        <script src="../dist/ffnm.min.js"></script>
    </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>
Author	SHA1	Message	Date
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
Andros Fenollosa	32e756ee6e	Merge pull request #4 from tanrax/dependabot/npm_and_yarn/hosted-git-info-2.8.9 Bump hosted-git-info from 2.8.8 to 2.8.9	2022-02-25 19:34:38 +01:00
Andros Fenollosa	86897b193a	Merge pull request #3 from tanrax/dependabot/npm_and_yarn/y18n-3.2.2 Bump y18n from 3.2.1 to 3.2.2	2022-02-25 19:34:28 +01:00
dependabot[bot]	26f5397544	Bump path-parse from 1.0.6 to 1.0.7 Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7. - [Release notes](https://github.com/jbgutierrez/path-parse/releases) - [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7) --- updated-dependencies: - dependency-name: path-parse dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2021-08-12 16:35:33 +00:00
dependabot[bot]	f22109f427	Bump hosted-git-info from 2.8.8 to 2.8.9 Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.8.8 to 2.8.9. - [Release notes](https://github.com/npm/hosted-git-info/releases) - [Changelog](https://github.com/npm/hosted-git-info/blob/v2.8.9/CHANGELOG.md) - [Commits](https://github.com/npm/hosted-git-info/compare/v2.8.8...v2.8.9) Signed-off-by: dependabot[bot] <support@github.com>	2021-05-11 20:30:06 +00:00
dependabot[bot]	f3f5f8893c	Bump y18n from 3.2.1 to 3.2.2 Bumps [y18n](https://github.com/yargs/y18n) from 3.2.1 to 3.2.2. - [Release notes](https://github.com/yargs/y18n/releases) - [Changelog](https://github.com/yargs/y18n/blob/master/CHANGELOG.md) - [Commits](https://github.com/yargs/y18n/commits) Signed-off-by: dependabot[bot] <support@github.com>	2021-03-31 12:38:25 +00:00
Andros Fenollosa	406d9a7ef6	Update FUNDING.yml	2021-02-15 11:54:01 +01:00
Andros Fenollosa	e57d19fb84	Update CDNs	2020-12-22 11:08:54 +01:00
Andros Fenollosa	136dc60db0	Add is-scroll-up. Update test. Update version 1.5.0	2020-12-22 11:00:48 +01:00
Andros Fenollosa	2b9eedbdd0	Merge pull request #2 from tanrax/dependabot/npm_and_yarn/ini-1.3.8 Bump ini from 1.3.5 to 1.3.8	2020-12-14 13:34:41 +01:00
dependabot[bot]	2b66cd672b	Bump ini from 1.3.5 to 1.3.8 Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.8. - [Release notes](https://github.com/isaacs/ini/releases) - [Commits](https://github.com/isaacs/ini/compare/v1.3.5...v1.3.8) Signed-off-by: dependabot[bot] <support@github.com>	2020-12-12 23:59:25 +00:00
Andros Fenollosa	fbe4aabdf9	Create FUNDING.yml	2020-11-03 22:48:42 +01:00
Andros Fenollosa	d90d907629	Update README.md	2020-11-03 10:18:55 +01:00
Andros Fenollosa	5d1a61e714	Update README.md	2020-08-03 17:20:33 +02:00
Andros Fenollosa	e3e100c437	Update version 1.4.0	2020-08-03 17:03:02 +02:00
Andros Fenollosa	b9bb0d694b	Optimize visible with observables	2020-08-03 17:02:50 +02:00
Andros Fenollosa	e02334b46e	Order code	2020-08-03 16:43:12 +02:00
Andros Fenollosa	a6efdf85d4	Update README.md	2020-07-23 09:04:22 +02:00
Andros Fenollosa	b306334ca5	Update README.md	2020-07-22 20:27:42 +02:00
Andros Fenollosa	e8cbe46659	Remove old code	2020-07-22 20:27:10 +02:00
Andros Fenollosa	ea2e148395	Update README.md	2020-07-22 20:09:56 +02:00
Andros Fenollosa	5b06ffd174	Update syntax and Add visible	2020-07-22 19:31:19 +02:00
Andros Fenollosa	3fc6ff1c78	Performance improvements in other events	2020-07-21 16:35:00 +02:00
Andros Fenollosa	dac40e8d61	Improved scroll performance	2020-07-21 16:21:58 +02:00
Andros Fenollosa	6f965ce6c3	Remove media	2020-07-17 18:05:44 +02:00
Andros Fenollosa	988c7c15dd	Update README.md	2020-07-17 18:04:01 +02:00
Andros Fenollosa	b5fe682764	Update README.md	2020-07-17 18:01:33 +02:00
Andros Fenollosa	732dcfca57	Update README.md	2020-07-17 18:01:17 +02:00
Andros Fenollosa	4b01ca94bb	Fix dash	2020-07-17 17:50:20 +02:00
Andros Fenollosa	91338f9185	Update README.md	2020-07-17 16:29:34 +02:00
Andros Fenollosa	0284ebc9c4	Update README.md	2020-07-17 16:25:00 +02:00
Andros Fenollosa	3aa327bad6	Update README.md	2020-07-17 12:12:22 +02:00
Andros Fenollosa	a30f4023d2	Fix regex check	2020-07-17 12:12:02 +02:00
Andros Fenollosa	ae1c78da16	Add hover	2020-07-17 11:11:53 +02:00
Andros Fenollosa	37820b5bb4	Fix images	2020-07-16 11:30:47 +02:00
Andros Fenollosa	2c306485d4	Update README.md	2020-07-16 11:23:05 +02:00
Andros Fenollosa	605a4463b6	Update media	2020-07-16 11:15:38 +02:00
Andros Fenollosa	cd75682160	Delete example.png	2020-07-16 11:09:17 +02:00
Andros Fenollosa	facde1d9db	Update README.md	2020-07-16 01:12:36 +02:00
Andros Fenollosa	ef3388ee5e	Update validate.html	2020-07-16 01:08:13 +02:00
Andros Fenollosa	9aff506298	Update README.md	2020-07-16 01:06:48 +02:00
Andros Fenollosa	dd5377d732	Optional second param	2020-07-16 00:58:17 +02:00