From 136dc60db044e7ba6789bef4932becf180f14055 Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Tue, 22 Dec 2020 11:00:48 +0100 Subject: [PATCH] Add is-scroll-up. Update test. Update version 1.5.0 --- README.md | 31 ++++++++++++++++++++++++++++-- dist/ffnm.min.js | 2 +- package.json | 2 +- src/events/scroll.js | 45 ++++++++++++++++++++++++++++++++++++++++---- src/globals.js | 2 +- test/is-scroll.html | 17 +++++++++++++++++ 6 files changed, 90 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index a91a148..5b415a1 100644 --- a/README.md +++ b/README.md @@ -114,6 +114,21 @@ Add to your `` the following tag. ``` +#### Scroll top + +##### Add the class `show` to `nav` when the scroll is top of the page. + +```html + +``` + +##### Remove the `show` class from `nav` when the scroll top of the page. + +```html + +``` + + #### Hover ##### Add the class `show` to `div` when hover. @@ -195,8 +210,6 @@ Add to your `` the following tag. ``` - - --- ## Spanish/Español @@ -280,6 +293,20 @@ Añade a tu `` la siguiente etiqueta. ``` +#### Scroll esta arriba de la pagina (principio) + +##### Añadir la clase `show` al selector `nav` cuando el scroll esta al inicio. + +```html + +``` + +##### Quitar la clase `show` al selector `nav` cuando el scroll esta al inicio. + +```html + +``` + #### Hover ##### Añade la clase `show` al `div` cuando sea hover. diff --git a/dist/ffnm.min.js b/dist/ffnm.min.js index 29da405..985007d 100644 --- a/dist/ffnm.min.js +++ b/dist/ffnm.min.js @@ -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 diff --git a/package.json b/package.json index 894ab89..2b18225 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ffnm", - "version": "1.3.0", + "version": "1.5.0", "description": "Simple plugin to avoid writing Javascript in trivial tasks.", "main": "gulpfile.js", "dependencies": { diff --git a/src/events/scroll.js b/src/events/scroll.js index 4fae7d2..a3ccd38 100644 --- a/src/events/scroll.js +++ b/src/events/scroll.js @@ -8,13 +8,17 @@ * return void */ function addEventScroll() { - let eventScrollDown = 'is-scroll-down'; - let eventScrollUp = 'is-scroll-up'; + 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 + + // Scroll down - is-scroll-down elementsDown.forEach((element) => { if (posScroll > lastScrollTop) { let params = splitParams(element, eventScrollDown); @@ -32,7 +36,8 @@ function addEventScroll() { } } }); - // Scroll up + + // Scroll up - is-scroll-up elementsUp.forEach((element) => { if (posScroll <= lastScrollTop) { let params = splitParams(element, eventScrollUp); @@ -51,6 +56,38 @@ function addEventScroll() { } }); 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); } diff --git a/src/globals.js b/src/globals.js index 7b2ec2e..6fd439d 100644 --- a/src/globals.js +++ b/src/globals.js @@ -2,7 +2,7 @@ //=== // 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 = { 'class': ['add', 'remove', 'toggle'] }; diff --git a/test/is-scroll.html b/test/is-scroll.html index 2c8b065..4fa5258 100644 --- a/test/is-scroll.html +++ b/test/is-scroll.html @@ -15,6 +15,22 @@ 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); } @@ -22,6 +38,7 @@ +
You is top page

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.