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