6 Commits

Author SHA1 Message Date
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 103 additions and 19 deletions

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

@ -0,0 +1,3 @@
github: tanrax
patreon: androsfenollosa
ko_fi: androsfenollosa

View File

@ -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
@ -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

8
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "ffnm", "name": "ffnm",
"version": "1.0.0", "version": "1.3.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -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",

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>