Compare commits
47 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
79735380e7 | ||
|
|
32e756ee6e | ||
|
|
86897b193a | ||
|
26f5397544 | ||
|
|
f22109f427 | ||
|
|
f3f5f8893c | ||
|
|
406d9a7ef6 | ||
|
e57d19fb84 | ||
|
|
136dc60db0 | ||
|
|
2b9eedbdd0 | ||
|
|
2b66cd672b | ||
|
|
fbe4aabdf9 | ||
|
|
d90d907629 | ||
|
|
5d1a61e714 | ||
|
|
e3e100c437 | ||
|
|
b9bb0d694b | ||
|
|
e02334b46e | ||
|
|
a6efdf85d4 | ||
|
|
b306334ca5 | ||
|
|
e8cbe46659 | ||
|
|
ea2e148395 | ||
|
|
5b06ffd174 | ||
|
|
3fc6ff1c78 | ||
|
|
dac40e8d61 | ||
|
|
6f965ce6c3 | ||
|
|
988c7c15dd | ||
|
|
b5fe682764 | ||
|
|
732dcfca57 | ||
|
|
4b01ca94bb | ||
|
|
91338f9185 | ||
|
|
0284ebc9c4 | ||
|
|
3aa327bad6 | ||
|
|
a30f4023d2 | ||
|
|
ae1c78da16 | ||
|
|
37820b5bb4 | ||
|
|
2c306485d4 | ||
|
|
605a4463b6 | ||
|
|
cd75682160 | ||
|
|
facde1d9db | ||
|
|
ef3388ee5e | ||
|
|
9aff506298 | ||
|
|
dd5377d732 | ||
|
|
10a7731ac5 | ||
|
|
6a75e27e8e | ||
|
|
8145a19b54 | ||
|
|
6b8f95fb98 | ||
|
|
663a6124b0 |
2
.github/FUNDING.yml
vendored
Normal file
2
.github/FUNDING.yml
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
github: tanrax
|
||||
ko_fi: androsfenollosa
|
||||
333
README.md
333
README.md
@ -1,6 +1,30 @@
|
||||
# FFNM (Front-End for the next master)
|
||||
|
||||
Simple utility to avoid writing Javascript when working with classes.
|
||||
``` html
|
||||
<button is-click="class:add('open', 'article')">open</button>
|
||||
|
||||
<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) | [Scroll](https://codepen.io/androsfenollosa/pen/xxZQxNV) | [Visible](https://codepen.io/androsfenollosa/pen/YzwBLGW)
|
||||
|
||||
## Documentation
|
||||
|
||||
@ -16,49 +40,174 @@ Simple utility to avoid writing Javascript when working with classes.
|
||||
Add to your `<head>` the following tag.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
#### Classes without events
|
||||
#### Scroll up
|
||||
|
||||
##### Add the class `show` to the `#nav` selector
|
||||
##### Add the class `show` to `nav` when the scroll goes up.
|
||||
|
||||
```javascript
|
||||
class:add('show', '#nav')
|
||||
```html
|
||||
<nav is-scroll-up="class:add('show')"></nav>
|
||||
```
|
||||
|
||||
##### Remove the `show` class from the `#nav` selector
|
||||
##### Remove the `show` class from `nav` when the scroll goes up.
|
||||
|
||||
```javascript
|
||||
class:remove('show', '#nav')
|
||||
```html
|
||||
<nav is-scroll-up="class:remove('show')"></nav>
|
||||
```
|
||||
|
||||
##### Switch the class `show` to the `#nav` selector
|
||||
#### Scroll down
|
||||
|
||||
```javascript
|
||||
class:toggle('show', '#nav')
|
||||
##### Add the class `show` to `nav` when the scroll down.
|
||||
|
||||
```html
|
||||
<nav is-scroll-down="class:add('show')"></nav>
|
||||
```
|
||||
|
||||
##### Remove the `show` class from `nav` when the scroll down.
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
#### Hover
|
||||
|
||||
##### Add the class `show` to `div` when hover.
|
||||
|
||||
```html
|
||||
<div is-hover="class:add('show')"></div>
|
||||
```
|
||||
|
||||
##### Remove the `show` class from `div` when hover.
|
||||
|
||||
```html
|
||||
<div is-hover="class:remove('show')"></div>
|
||||
```
|
||||
|
||||
##### Toggle the `show` class from `div` when hover.
|
||||
|
||||
```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">
|
||||
```
|
||||
|
||||
---
|
||||
@ -70,50 +219,176 @@ 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>
|
||||
```
|
||||
|
||||
#### Clases sin eventos
|
||||
#### Subir scroll
|
||||
|
||||
##### Añadir la clase `show` al selector `#menu`
|
||||
##### Añadir la clase `show` al selector `nav` cuando el scroll sube.
|
||||
|
||||
```javascript
|
||||
class:add('show', '#menu')
|
||||
```html
|
||||
<nav is-scroll-up="class:add('show')"></nav>
|
||||
```
|
||||
|
||||
##### Quitar la clase `show` al selector `#menu`
|
||||
##### Quitar la clase `show` al selector `nav` cuando el scroll sube.
|
||||
|
||||
```javascript
|
||||
class:remove('show', '#menu')
|
||||
```html
|
||||
<nav is-scroll-up="class:remove('show')"></nav>
|
||||
```
|
||||
|
||||
##### Intercambiar la clase `show` al selector `#menu`
|
||||
#### Bajar scroll
|
||||
|
||||
```javascript
|
||||
class:toggle('show', '#menu')
|
||||
##### Añadir la clase `show` al selector `nav` cuando el scroll baja.
|
||||
|
||||
```html
|
||||
<nav is-scroll-down="class:add('show')"></nav>
|
||||
```
|
||||
|
||||
##### Quitar la clase `show` al selector `nav` cuando el scroll baja.
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Development
|
||||
|
||||
2
dist/ffnm.min.js
vendored
2
dist/ffnm.min.js
vendored
@ -1,2 +1,2 @@
|
||||
document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[];t=[],["i-click","i-scroll-up","i-scroll-down"].map(c=>[...document.querySelectorAll(`[${c}]`)].map(l=>{let r=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('\\w+', *'[#,.,a-zA-Z]\\w*'\\)$`).test(l.getAttribute(c))).some(e=>e)).every(e=>e);return r?t.push(l):(console.error("FFNM: Bad syntax"),console.error(l)),r}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let t=function(e,t){let c=e.getAttribute(t),l=RegExp("^(\\w+):").exec(c)[1],r=RegExp(":(\\w+)\\(").exec(c)[1],a=RegExp("\\('(\\w+)',").exec(c)[1],o=RegExp(", *'([#,.,a-zA-Z]\\w*)'\\)").exec(c)[1];return{functionParent:l,functionChild:r,value:a,target:o}}(e,"i-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].forEach(c=>{e.addEventListener("click",()=>{switch(t.functionChild){case"add":c.classList.add(t.value);break;case"remove":c.classList.remove(t.value);break;case"toggle":c.classList.toggle(t.value)}})})}})});
|
||||
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
|
||||
|
||||
12
gulpfile.js
12
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
|
||||
|
||||
26
package-lock.json
generated
26
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
96
src/core.js
96
src/core.js
@ -1,97 +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 = [];
|
||||
|
||||
//===
|
||||
// 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 add events 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 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 value = RegExp(`\\(\'(\\w+)\',`).exec(params)[1];
|
||||
let target = RegExp(`, *\'([#,.,a-zA-Z]\\w*)\'\\)`).exec(params)[1];
|
||||
return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target};
|
||||
}
|
||||
|
||||
|
||||
//===
|
||||
// INIT
|
||||
//===
|
||||
|
||||
// Syntax
|
||||
validateSyntax();
|
||||
// Events
|
||||
addEventClick();
|
||||
addEventScroll();
|
||||
addEventHover();
|
||||
addEventVisible();
|
||||
|
||||
});
|
||||
|
||||
36
src/events/click.js
Normal file
36
src/events/click.js
Normal file
@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
57
src/events/hover.js
Normal file
57
src/events/hover.js
Normal file
@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
93
src/events/scroll.js
Normal file
93
src/events/scroll.js
Normal file
@ -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);
|
||||
}
|
||||
|
||||
69
src/events/visible.js
Normal file
69
src/events/visible.js
Normal file
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
10
src/globals.js
Normal file
10
src/globals.js
Normal file
@ -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;
|
||||
61
src/syntax.js
Normal file
61
src/syntax.js
Normal file
@ -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);
|
||||
});
|
||||
}
|
||||
@ -2,8 +2,8 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Test syntax</title>
|
||||
<script src="../dist/FFNM.min.js"></script>
|
||||
<title>Test is-click</title>
|
||||
<script src="../dist/ffnm.min.js"></script>
|
||||
<style>
|
||||
.nav {
|
||||
position: fixed;
|
||||
@ -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>
|
||||
31
test/is-hover.html
Normal file
31
test/is-hover.html
Normal file
@ -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>
|
||||
343
test/is-scroll.html
Normal file
343
test/is-scroll.html
Normal file
@ -0,0 +1,343 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Test is-scroll</title>
|
||||
<script src="../dist/ffnm.min.js"></script>
|
||||
<style>
|
||||
.nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 10rem;
|
||||
background: orange;
|
||||
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 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>
|
||||
Praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris. Pellentesque habitant morbi tristique senectus et?
|
||||
</p>
|
||||
<p>
|
||||
Tempor nec feugiat nisl pretium fusce id velit ut tortor pretium. At elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing tristique risus nec.
|
||||
</p>
|
||||
<p>
|
||||
Ultrices vitae, auctor eu augue ut lectus arcu, bibendum at varius vel, pharetra vel turpis nunc eget lorem dolor, sed! Aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros.
|
||||
</p>
|
||||
<p>
|
||||
Laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit! Mauris, in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in!
|
||||
</p>
|
||||
<p>
|
||||
Massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra? Euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante!
|
||||
</p>
|
||||
<p>
|
||||
Feugiat scelerisque varius morbi enim nunc, faucibus a pellentesque sit amet, porttitor eget dolor morbi non arcu risus, quis varius quam quisque id diam? Pellentesque id nibh tortor, id aliquet!
|
||||
</p>
|
||||
<p>
|
||||
Tempus, urna et pharetra pharetra, massa massa ultricies mi, quis hendrerit dolor magna eget est lorem ipsum dolor sit amet, consectetur adipiscing? Venenatis, lectus magna fringilla urna, porttitor rhoncus dolor.
|
||||
</p>
|
||||
<p>
|
||||
In ante metus, dictum at tempor commodo, ullamcorper a lacus? Hendrerit gravida rutrum quisque non tellus orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci.
|
||||
</p>
|
||||
<p>
|
||||
Id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus! Nec dui nunc mattis enim ut tellus elementum sagittis vitae et.
|
||||
</p>
|
||||
<p>
|
||||
Faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus, sed.
|
||||
</p>
|
||||
<p>
|
||||
Leo vel orci porta non pulvinar. Sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus?
|
||||
</p>
|
||||
<p>
|
||||
Pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus!
|
||||
</p>
|
||||
<p>
|
||||
Nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet? Nunc sed velit dignissim sodales ut eu sem integer.
|
||||
</p>
|
||||
<p>
|
||||
Sed vulputate mi sit amet mauris commodo quis imperdiet massa! Senectus et netus et malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi leo urna, molestie at elementum eu!
|
||||
</p>
|
||||
<p>
|
||||
Eu mi bibendum neque egestas congue quisque egestas diam in. Id interdum velit laoreet id donec ultrices tincidunt arcu, non sodales neque sodales ut etiam sit amet nisl purus, in!
|
||||
</p>
|
||||
<p>
|
||||
Id venenatis a, condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed tempus, urna et pharetra pharetra. Eros donec ac odio tempor.
|
||||
</p>
|
||||
<p>
|
||||
Tortor aliquam nulla facilisi cras fermentum? Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante.
|
||||
</p>
|
||||
<p>
|
||||
Nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod elementum nisi, quis eleifend quam adipiscing vitae!
|
||||
</p>
|
||||
<p>
|
||||
Curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo! Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum posuere urna nec tincidunt praesent.
|
||||
</p>
|
||||
<p>
|
||||
Ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus! Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
|
||||
</p>
|
||||
<p>
|
||||
Egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc? Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis.
|
||||
</p>
|
||||
<p>
|
||||
Nibh tellus molestie nunc, non blandit massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et! Mauris nunc congue nisi, vitae suscipit tellus mauris a diam maecenas.
|
||||
</p>
|
||||
<p>
|
||||
Faucibus purus in massa tempor nec? Tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Donec adipiscing tristique risus nec feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Consectetur a erat nam at lectus urna duis convallis!
|
||||
</p>
|
||||
<p>
|
||||
Enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat.
|
||||
</p>
|
||||
<p>
|
||||
Ac, feugiat sed lectus vestibulum mattis ullamcorper velit? Magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim?
|
||||
</p>
|
||||
<p>
|
||||
Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur! Neque sodales ut etiam sit amet nisl purus, in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non?
|
||||
</p>
|
||||
<p>
|
||||
Et malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit! Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien.
|
||||
</p>
|
||||
<p>
|
||||
Ipsum consequat nisl, vel pretium lectus quam id leo in vitae turpis massa sed elementum tempus egestas sed sed risus pretium. Mauris pharetra et ultrices neque ornare aenean euismod elementum.
|
||||
</p>
|
||||
<p>
|
||||
Neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Dolor sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla.
|
||||
</p>
|
||||
<p>
|
||||
Aliquet enim tortor, at auctor. Orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla!
|
||||
</p>
|
||||
<p>
|
||||
Risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris, cursus mattis molestie a, iaculis at erat pellentesque adipiscing commodo elit, at. Aenean vel elit scelerisque mauris pellentesque!
|
||||
</p>
|
||||
<p>
|
||||
Nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed libero enim, sed faucibus turpis in eu mi bibendum? Venenatis tellus in metus vulputate!
|
||||
</p>
|
||||
<p>
|
||||
Ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices vitae, auctor eu augue ut lectus arcu, bibendum at. Ut enim blandit volutpat maecenas volutpat blandit aliquam.
|
||||
</p>
|
||||
<p>
|
||||
Neque, vitae tempus quam pellentesque nec nam aliquam sem et tortor consequat id? Nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed libero.
|
||||
</p>
|
||||
<p>
|
||||
Elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum posuere? Nibh praesent tristique magna sit amet purus gravida?
|
||||
</p>
|
||||
<p>
|
||||
Sit amet justo donec enim diam, vulputate ut pharetra? Ornare arcu odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed.
|
||||
</p>
|
||||
<p>
|
||||
Amet justo donec enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris! Pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros, in.
|
||||
</p>
|
||||
<p>
|
||||
Faucibus et molestie ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra? Libero volutpat sed cras ornare arcu dui vivamus arcu?
|
||||
</p>
|
||||
<p>
|
||||
Tortor posuere ac ut consequat semper viverra nam libero justo, laoreet sit amet? Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed?
|
||||
</p>
|
||||
<p>
|
||||
Porttitor lacus, luctus accumsan tortor posuere ac ut consequat semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet. Arcu dictum varius duis at consectetur lorem!
|
||||
</p>
|
||||
<p>
|
||||
Purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet! Enim, facilisis gravida neque convallis a cras semper auctor neque, vitae tempus quam pellentesque.
|
||||
</p>
|
||||
<p>
|
||||
Proin sed libero enim, sed faucibus turpis in eu mi bibendum neque egestas? Sagittis, nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed.
|
||||
</p>
|
||||
<p>
|
||||
Massa, eget egestas purus viverra accumsan in nisl. Cras fermentum, odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo in vitae turpis massa sed elementum!
|
||||
</p>
|
||||
<p>
|
||||
Quam elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet, consectetur! Orci eu lobortis elementum, nibh tellus molestie nunc, non blandit massa enim nec?
|
||||
</p>
|
||||
<p>
|
||||
Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante metus, dictum at tempor commodo, ullamcorper a. Eget est lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque habitant?
|
||||
</p>
|
||||
<p>
|
||||
Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sed blandit libero volutpat sed cras ornare arcu dui vivamus arcu felis, bibendum?
|
||||
</p>
|
||||
<p>
|
||||
Neque egestas congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc, sed blandit libero volutpat sed cras ornare arcu! Vel eros donec ac odio!
|
||||
</p>
|
||||
<p>
|
||||
Viverra vitae congue eu, consequat ac felis. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus nulla at volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Est velit egestas dui, id ornare arcu odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum?
|
||||
</p>
|
||||
<p>
|
||||
Dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet! At auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci?
|
||||
</p>
|
||||
<p>
|
||||
Magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo? Cras adipiscing enim eu turpis egestas pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros.
|
||||
</p>
|
||||
<p>
|
||||
Eget felis eget nunc lobortis mattis aliquam faucibus purus in massa tempor nec feugiat nisl! Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat!
|
||||
</p>
|
||||
<p>
|
||||
Mi tempus imperdiet nulla malesuada pellentesque elit eget? In eu mi bibendum neque egestas congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc, sed!
|
||||
</p>
|
||||
<p>
|
||||
Accumsan sit amet nulla facilisi morbi. Gravida rutrum quisque non tellus orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus.
|
||||
</p>
|
||||
<p>
|
||||
Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante? Sit amet facilisis magna etiam tempor, orci eu lobortis elementum, nibh tellus molestie nunc, non blandit massa!
|
||||
</p>
|
||||
<p>
|
||||
Sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor orci dapibus ultrices in iaculis? Auctor eu augue ut lectus.
|
||||
</p>
|
||||
<p>
|
||||
Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis? Eros donec ac odio tempor orci dapibus ultrices in iaculis nunc sed augue.
|
||||
</p>
|
||||
<p>
|
||||
Risus, quis varius quam quisque id diam vel quam elementum pulvinar etiam non quam! Non pulvinar neque laoreet suspendisse interdum consectetur libero, id faucibus nisl tincidunt eget nullam non nisi.
|
||||
</p>
|
||||
<p>
|
||||
Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae?
|
||||
</p>
|
||||
<p>
|
||||
Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et! Mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum, faucibus vitae aliquet nec, ullamcorper!
|
||||
</p>
|
||||
<p>
|
||||
Eu augue ut lectus arcu? Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc?
|
||||
</p>
|
||||
<p>
|
||||
Eu ultrices vitae, auctor eu augue ut lectus arcu, bibendum at varius vel? Et ligula ullamcorper malesuada proin libero nunc, consequat interdum varius sit amet, mattis vulputate enim nulla aliquet.
|
||||
</p>
|
||||
<p>
|
||||
Viverra mauris, in aliquam sem fringilla ut morbi tincidunt? Nulla facilisi morbi tempus iaculis urna, id volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean et tortor?
|
||||
</p>
|
||||
<p>
|
||||
Sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris. Ipsum dolor sit amet, consectetur adipiscing elit duis.
|
||||
</p>
|
||||
<p>
|
||||
Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Nulla facilisi morbi tempus iaculis urna, id volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean et.
|
||||
</p>
|
||||
<p>
|
||||
Lacus, sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus! Eros, in cursus turpis massa tincidunt dui ut ornare.
|
||||
</p>
|
||||
<p>
|
||||
Tellus cras adipiscing enim eu? Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris vitae ultricies?
|
||||
</p>
|
||||
<p>
|
||||
Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo eget magna? Eu scelerisque felis imperdiet proin.
|
||||
</p>
|
||||
<p>
|
||||
Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet! Amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim!
|
||||
</p>
|
||||
<p>
|
||||
Eget nunc scelerisque viverra mauris, in aliquam sem fringilla ut. Morbi leo urna, molestie at elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing?
|
||||
</p>
|
||||
<p>
|
||||
Ut placerat orci nulla pellentesque. Aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat?
|
||||
</p>
|
||||
<p>
|
||||
Mi sit amet mauris commodo quis! Viverra mauris, in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id.
|
||||
</p>
|
||||
<p>
|
||||
Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo?
|
||||
</p>
|
||||
<p>
|
||||
Integer quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet massa? Viverra vitae congue eu, consequat ac felis donec et odio pellentesque diam volutpat commodo sed egestas?
|
||||
</p>
|
||||
<p>
|
||||
Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet. Dignissim sodales ut eu sem integer vitae justo eget magna fermentum iaculis eu non diam phasellus vestibulum lorem sed risus ultricies?
|
||||
</p>
|
||||
<p>
|
||||
Integer quis auctor elit sed vulputate? Adipiscing enim eu turpis egestas pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros, in cursus turpis massa tincidunt dui ut ornare.
|
||||
</p>
|
||||
<p>
|
||||
Nam aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget velit. Libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam.
|
||||
</p>
|
||||
<p>
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis? Pretium lectus quam id leo?
|
||||
</p>
|
||||
<p>
|
||||
Accumsan in nisl nisi, scelerisque eu ultrices vitae, auctor eu! Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus eget.
|
||||
</p>
|
||||
<p>
|
||||
Malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse? Maecenas pharetra convallis posuere morbi leo urna?
|
||||
</p>
|
||||
<p>
|
||||
Mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor. Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi.
|
||||
</p>
|
||||
<p>
|
||||
Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Ac tortor dignissim convallis aenean.
|
||||
</p>
|
||||
<p>
|
||||
Non arcu risus, quis varius quam quisque id diam vel. Ut consequat semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam?
|
||||
</p>
|
||||
<p>
|
||||
Vitae, auctor eu augue ut lectus arcu, bibendum at! Aliquam vestibulum morbi blandit cursus risus, at ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus.
|
||||
</p>
|
||||
<p>
|
||||
Urna, molestie at elementum eu, facilisis sed odio morbi quis commodo odio! Hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus?
|
||||
</p>
|
||||
<p>
|
||||
Vitae tortor condimentum lacinia quis vel eros donec ac odio. Praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui.
|
||||
</p>
|
||||
<p>
|
||||
Sed nisi lacus, sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat? Viverra accumsan in nisl nisi, scelerisque eu ultrices!
|
||||
</p>
|
||||
<p>
|
||||
Cursus turpis massa tincidunt dui ut ornare lectus sit amet est placerat. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo?
|
||||
</p>
|
||||
<p>
|
||||
Pellentesque id nibh tortor, id aliquet lectus proin nibh nisl, condimentum id venenatis a, condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et. Semper quis lectus nulla at!
|
||||
</p>
|
||||
<p>
|
||||
Elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes. Arcu dui vivamus arcu felis, bibendum ut tristique et, egestas quis ipsum suspendisse ultrices gravida dictum fusce ut.
|
||||
</p>
|
||||
<p>
|
||||
Aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit, scelerisque in dictum non, consectetur a.
|
||||
</p>
|
||||
<p>
|
||||
Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec massa sapien, faucibus.
|
||||
</p>
|
||||
<p>
|
||||
Egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris, cursus mattis molestie a, iaculis at erat pellentesque. Maecenas volutpat blandit aliquam etiam erat velit.
|
||||
</p>
|
||||
<p>
|
||||
Sit amet purus gravida quis blandit turpis cursus? Platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus mauris a diam maecenas sed enim.
|
||||
</p>
|
||||
<p>
|
||||
Etiam tempor, orci eu lobortis. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec massa sapien, faucibus et molestie!
|
||||
</p>
|
||||
<p>
|
||||
Aenean pharetra, magna ac placerat vestibulum, lectus mauris? Faucibus purus in massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae.
|
||||
</p>
|
||||
<p>
|
||||
Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi! Dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus eget.
|
||||
</p>
|
||||
<p>
|
||||
Nunc sed velit dignissim sodales ut eu sem integer vitae justo eget magna fermentum iaculis eu non diam phasellus vestibulum lorem! A diam maecenas sed enim ut sem viverra aliquet!
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
47
test/is-visible.html
Normal file
47
test/is-visible.html
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user