15 Commits

Author SHA1 Message Date
b625afe92d Bump terser from 4.8.0 to 4.8.1
Bumps [terser](https://github.com/terser/terser) from 4.8.0 to 4.8.1.
- [Release notes](https://github.com/terser/terser/releases)
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/commits)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
2022-07-21 04:04:25 +00:00
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
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
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
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
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
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
406d9a7ef6 Update FUNDING.yml 2021-02-15 11:54:01 +01:00
e57d19fb84 Update CDNs 2020-12-22 11:08:54 +01:00
136dc60db0 Add is-scroll-up. Update test. Update version 1.5.0 2020-12-22 11:00:48 +01:00
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
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
fbe4aabdf9 Create FUNDING.yml 2020-11-03 22:48:42 +01:00
d90d907629 Update README.md 2020-11-03 10:18:55 +01:00
5d1a61e714 Update README.md 2020-08-03 17:20:33 +02:00
8 changed files with 115 additions and 32 deletions

2
.github/FUNDING.yml vendored Normal file
View File

@ -0,0 +1,2 @@
github: tanrax
ko_fi: androsfenollosa

View File

@ -40,7 +40,7 @@ Simple utility to **avoid writing Javascript** when working with **classes**. It
Add to your `<head>` the following tag. Add to your `<head>` the following tag.
```html ```html
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.4.0/dist/ffnm.min.js" integrity="sha384-WsAoFj8H5Jl3+nG7ON5XXiozrADpSLshx/XdN7xu2GUVkJEZB5C3AGrFtdi6tARh" crossorigin="anonymous"></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 ### Examples
@ -114,6 +114,21 @@ Add to your `<head>` the following tag.
<nav is-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>
```
#### Hover #### Hover
##### Add the class `show` to `div` when hover. ##### Add the class `show` to `div` when hover.
@ -138,7 +153,7 @@ Add to your `<head>` the following tag.
```html ```html
<div is-hover="class:toggle('show', '#button')"></div> <div is-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</div> <button id="button">Hi</button>
``` ```
#### Visible #### Visible
@ -165,7 +180,7 @@ Add to your `<head>` the following tag.
```html ```html
<div is-visible="class:toggle('show', '#button')"></div> <div is-visible="class:toggle('show', '#button')"></div>
<button id="button">Hi</div> <button id="button">Hi</button>
``` ```
#### Not visible #### Not visible
@ -195,8 +210,6 @@ Add to your `<head>` the following tag.
<input id="name"> <input id="name">
``` ```
--- ---
## Spanish/Español ## Spanish/Español
@ -206,7 +219,7 @@ Add to your `<head>` the following tag.
Añade a tu `<head>` la siguiente etiqueta. Añade a tu `<head>` la siguiente etiqueta.
```html ```html
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.4.0/dist/ffnm.min.js" integrity="sha384-lAUBI0wOuUBOb4gGjqjeuJlFgrl1YixuQdG/OngLda/8+ZPThlN2xk+EJAkl7gEd" crossorigin="anonymous"></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 ### Ejemplos de uso
@ -280,6 +293,20 @@ Añade a tu `<head>` la siguiente etiqueta.
<nav is-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 #### Hover
##### Añade la clase `show` al `div` cuando sea hover. ##### Añade la clase `show` al `div` cuando sea hover.
@ -304,7 +331,7 @@ Añade a tu `<head>` la siguiente etiqueta.
```html ```html
<div is-hover="class:toggle('show', '#button')"></div> <div is-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</div> <button id="button">Hi</button>
``` ```
#### Visible #### Visible
@ -331,7 +358,7 @@ Añade a tu `<head>` la siguiente etiqueta.
```html ```html
<div is-visible="class:toggle('ver', '#boton')"></div> <div is-visible="class:toggle('ver', '#boton')"></div>
<button id="boton">Hi</div> <button id="boton">Hi</button>
``` ```
#### No visible #### No visible
@ -358,7 +385,7 @@ Añade a tu `<head>` la siguiente etiqueta.
```html ```html
<div is-not-visible="class:toggle('ver', '#boton')"></div> <div is-not-visible="class:toggle('ver', '#boton')"></div>
<button id="boton">Hi</div> <button id="boton">Hi</button>
``` ```

2
dist/ffnm.min.js vendored
View File

@ -1,2 +1,2 @@
const EVENTS=["is-click","is-scroll-up","is-scroll-down","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],n=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:a,functionChild:l,value:i,target:null!==n.exec(s)?n.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");window.addEventListener("scroll",()=>{let s=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(s>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(s<=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=s<=0?0:s},!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()}); 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 //# sourceMappingURL=ffnm.min.js.map

32
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "ffnm", "name": "ffnm",
"version": "1.0.0", "version": "1.5.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -1327,9 +1327,9 @@
} }
}, },
"hosted-git-info": { "hosted-git-info": {
"version": "2.8.8", "version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
"integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==" "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
}, },
"inflight": { "inflight": {
"version": "1.0.6", "version": "1.0.6",
@ -1346,9 +1346,9 @@
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.8",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
}, },
"interpret": { "interpret": {
"version": "1.4.0", "version": "1.4.0",
@ -2006,9 +2006,9 @@
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
}, },
"path-parse": { "path-parse": {
"version": "1.0.6", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
}, },
"path-root": { "path-root": {
"version": "0.1.1", "version": "0.1.1",
@ -2563,9 +2563,9 @@
} }
}, },
"terser": { "terser": {
"version": "4.8.0", "version": "4.8.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz", "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz",
"integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==", "integrity": "sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==",
"dev": true, "dev": true,
"requires": { "requires": {
"commander": "^2.20.0", "commander": "^2.20.0",
@ -2899,9 +2899,9 @@
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==" "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
}, },
"y18n": { "y18n": {
"version": "3.2.1", "version": "3.2.2",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
"integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=" "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ=="
}, },
"yargs": { "yargs": {
"version": "7.1.1", "version": "7.1.1",

View File

@ -1,6 +1,6 @@
{ {
"name": "ffnm", "name": "ffnm",
"version": "1.3.0", "version": "1.5.0",
"description": "Simple plugin to avoid writing Javascript in trivial tasks.", "description": "Simple plugin to avoid writing Javascript in trivial tasks.",
"main": "gulpfile.js", "main": "gulpfile.js",
"dependencies": { "dependencies": {

View File

@ -8,13 +8,17 @@
* return void * return void
*/ */
function addEventScroll() { function addEventScroll() {
let eventScrollDown = 'is-scroll-down'; const eventScrollDown = 'is-scroll-down';
let eventScrollUp = 'is-scroll-up'; const eventScrollUp = 'is-scroll-up';
const eventScrollTop = 'is-scroll-top';
let elementsDown = getElementsValidatesByEvent(eventScrollDown); let elementsDown = getElementsValidatesByEvent(eventScrollDown);
let elementsUp = getElementsValidatesByEvent(eventScrollUp); let elementsUp = getElementsValidatesByEvent(eventScrollUp);
let elementsTop = getElementsValidatesByEvent(eventScrollTop);
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
let posScroll = window.pageYOffset || document.documentElement.scrollTop; let posScroll = window.pageYOffset || document.documentElement.scrollTop;
// Scroll down
// Scroll down - is-scroll-down
elementsDown.forEach((element) => { elementsDown.forEach((element) => {
if (posScroll > lastScrollTop) { if (posScroll > lastScrollTop) {
let params = splitParams(element, eventScrollDown); let params = splitParams(element, eventScrollDown);
@ -32,7 +36,8 @@ function addEventScroll() {
} }
} }
}); });
// Scroll up
// Scroll up - is-scroll-up
elementsUp.forEach((element) => { elementsUp.forEach((element) => {
if (posScroll <= lastScrollTop) { if (posScroll <= lastScrollTop) {
let params = splitParams(element, eventScrollUp); let params = splitParams(element, eventScrollUp);
@ -51,6 +56,38 @@ function addEventScroll() {
} }
}); });
lastScrollTop = posScroll <= 0 ? 0 : posScroll; // For Mobile or negative scrolling 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); }, false);
} }

View File

@ -2,7 +2,7 @@
//=== //===
// VARIABLES // VARIABLES
//=== //===
const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-hover', 'is-visible', 'is-not-visible']; const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-scroll-top', 'is-hover', 'is-visible', 'is-not-visible'];
const FUNCTION_TREE = { const FUNCTION_TREE = {
'class': ['add', 'remove', 'toggle'] 'class': ['add', 'remove', 'toggle']
}; };

View File

@ -15,6 +15,22 @@
transition: 1s; transition: 1s;
transform: translateY(10rem); 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 { .show {
transform: translateY(0); transform: translateY(0);
} }
@ -22,6 +38,7 @@
</head> </head>
<body> <body>
<nav is-scroll-down="class:remove('show')" is-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav> <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')"> <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. 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>