@furman1331/page-scroller/dist/index.umd.js

Amazing plugin for creating smooth scroll on your website

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["Page Scroller"]={})}(this,(function(e){"use strict";const n=new class{container=null;sections=null;activeSlide=0;activeSection=0;scrollMode="automatic";scrollingSpeed=700;transitionTimingFunction="ease";isDebug=!1;isScrolling=!1;isResizing=!1;isInitialized=!1;isWheelEnabled=!0;isKeyboardEnabled=!0;isTouchEnabled=!0;slidesIdentifyAttribute="page-scroller-slide";isAllowToScrollThroughSlides=!0};const t=new class{onSectionChange;onBeforeSectionChange};var o,i;function s(){document.querySelector("html").classList.add(o.html);document.querySelector("body").classList.add(o.body),n.container.classList.add(o.container);const e=`transform ${n.scrollingSpeed}ms ${n.transitionTimingFunction}`;n.container.style.transition=e,n.sections=Array.from(n.container.children).map((e=>{const t=e,s=Array.from(t.children).filter((e=>e.hasAttribute(n.slidesIdentifyAttribute)));if(s.forEach((e=>e.classList.add(o.slide))),!s.length)return{element:t,slides:null};const c=function(e,t){const s=document.createElement("div");s.classList.add(i.wrapper);const c=`transform ${n.scrollingSpeed}ms ${n.transitionTimingFunction}`;s.style.transition=c,s.style.width=100*t.length+"%",t.forEach((e=>{e.style.width=100/t.length+"%",s.appendChild(e)}));const l=document.createElement("div");return l.classList.add(o.sectionWithSlides),l.appendChild(s),e.appendChild(l),s}(t,s);return{element:t,slides:{container:c,elements:s}}})),n.sections.forEach((e=>e.element.classList.add(o.section))),"automatic"===n.scrollMode?c():l()}function c(){const e=document.querySelector("body");e.style.overflow="hidden",e.style.height="100%";const t=document.querySelector("html");t.style.overflow="hidden",t.style.height="100%";const o=`transform ${n.scrollingSpeed}ms ${n.transitionTimingFunction}`;n.container.style.transition=o}function l(){const e=document.querySelector("body");e.style.overflow="auto",e.style.height="initial";const t=document.querySelector("html");t.style.overflow="auto",t.style.height="initial",n.container.style.transition="",n.container.style.transform="none",n.container.style.webkitTransform="none"}function r(){return{info:function(e){n.isDebug},error:function(e){n.isDebug},warn:function(e){n.isDebug},createMessage:function(e,n){return`[Page-Scroller]${n?`[${n.toUpperCase()}]`:""}: ${e}`}}}!function(e){e.html="page-scroller-enabled",e.body="page-scoller-body",e.container="page-scroller-wrapper",e.section="page-scroller-section",e.sectionWithSlides="page-scroller-section-with-slides",e.activeSection="page-scroller-section-active",e.slide="page-scroller-slide"}(o||(o={})),function(e){e.wrapper="page-scroller-slide-wrapper",e.active="page-scroller-slide-active"}(i||(i={}));function a(e,n){const t=e.slice(Math.max(e.length-n,0)).reduce(((e,n)=>e+n),0);return Math.ceil(t/n)}function d(e){!function(e){if(!n.isAllowToScrollThroughSlides)return!1;if(!(n.sections[n.activeSection].slides?.elements.length>0))return!1;const t=n.sections[n.activeSection].slides,o="down"===e?n.activeSlide+1===t.elements.length:n.activeSlide-1==-1;return!o}(e)?f(e):u("down"===e?"right":"left")}function u(e){if(n.isScrolling)return;n.isScrolling=!0;const t=n.activeSlide;n.activeSlide="right"===e?t+1:t-1,function(e,t){X.emit(_.onBeforeSlideChange,{beforeIndex:e,afterIndex:t});const o=n.sections[n.activeSection];o.slides.elements[e]?.classList.remove(i.active);const s=`translate3d(-${o.slides.elements[t].offsetLeft}px, 0px, 0px)`;o.slides.container.style.transform=s,o.slides.container.style.webkitTransform=s,n.sections[n.activeSection].slides.elements[t].classList.add(i.active),setTimeout((()=>{n.isScrolling=!1,X.emit(_.onSlideChange,{beforeIndex:e,afterIndex:t})}),n.scrollingSpeed)}(t,n.activeSlide)}function f(e){if(n.isScrolling)return;n.isScrolling=!0;const t=n.activeSection;if(!function(e){return"down"===e?n.sections.length!=n.activeSection+1:n.activeSection-1!=-1}(e))return n.isScrolling=!1;n.activeSection="down"===e?t+1:t-1,h(t,n.activeSection)}function g(e){if(n.isScrolling)return;n.isScrolling=!0;const t=n.activeSection;if(!function(e){return e>=0&&e<n.sections.length}(e))return n.isScrolling=!1;n.sections[t].element.classList.remove(o.activeSection),n.activeSection=e,h(t,n.activeSection)}function h(e,t){X.emit(_.onBeforeSectionChange,{beforeIndex:e,afterIndex:t}),n.sections[e].element.classList.remove(o.activeSection);const i=`translate3d(0px, -${n.sections[t].element.offsetTop}px, 0px)`;n.container.style.transform=i,n.container.style.webkitTransform=i,n.sections[t].element.classList.add(o.activeSection),setTimeout((()=>{n.isScrolling=!1,X.emit(_.onSectionChange,{beforeIndex:e,afterIndex:t})}),700)}const m="automatic",S=700,p="ease",y="page-scroller-slide",b=!1,v=!1,w=!0,x=!0,T=!0;const C=r();function E(e){C.info("Initializing Page Scroller..."),e&&(function(e){n.scrollMode=e.scrollMode??m,n.scrollingSpeed=e.scrollingSpeed??S,n.transitionTimingFunction=e.transitionTimingFunction??p,n.isDebug=e.isDebug??v,n.isWheelEnabled=e.isWheelEnabled??w,n.isKeyboardEnabled=e.isKeyboardEnabled??x,n.isTouchEnabled=e.isTouchEnabled??T,n.slidesIdentifyAttribute=e.slidesIdentifyAttribute??y,n.isAllowToScrollThroughSlides=e.isAllowToScrollThroughSlides??b}(e),function(e){e.onSectionChange&&(t.onSectionChange=e.onSectionChange,X.on(_.onSectionChange,(e=>t.onSectionChange(e)))),e.onBeforeSectionChange&&(t.onBeforeSectionChange=e.onBeforeSectionChange,X.on(_.onBeforeSectionChange,(e=>t.onBeforeSectionChange(e))))}(e)),s(),U(),X.on(_.onPageScrollModeAutomatic,(()=>{c(),U()})),X.on(_.onPageScrollModeManual,(()=>{l(),Y()})),n.isInitialized=!0,C.info("Initialized Page Scroller.")}let M,L=[];const A=r();function P(e){A.info("Wheel event detected"),clearTimeout(M),M=setTimeout((()=>{L=[]}),200);const n=-e.deltaY||e.detail,t=(o=n,Math.max(-1,Math.min(1,o))<0?"down":"up");var o;if(L.length>100&&L.shift(),L.push(Math.abs(n)),function(){const e=a(L,5),n=a(L,50);return e>=n}())return d(t)}const I=r();let B=null;function z(e){I.info("Keydown event detected");const t=e.key;if(!function(){const e=document.activeElement;return["input","textarea"].includes(e.tagName.toLowerCase())}())switch(t){case" ":case"ArrowDown":case"PageDown":d("down");break;case"ArrowUp":case"PageUp":d("up");break;case"ArrowRight":u("right");case"ArrowLeft":u("left");case"End":g(n.sections.length-1);break;case"Home":g(0);break;case"Tab":!function(e){const t=e.shiftKey,o=document.activeElement,i=k(n.sections[n.activeSection].element),s=o===i[0],c=o===i[i.length-1];if(t&&s||!t&&c){e.preventDefault();const n=t&&s?"up":"down";B="up"===n?"last":"first",d(n)}}(e)}}function D(){if(!B)return;const e=k(n.sections[n.activeSection].element);e["first"===B?0:e.length-1].focus(),B=null}function k(e){return[].slice.call(e.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], summary:not([disabled]), [contenteditable]')).filter((e=>"-1"!==e.getAttribute("tabindex")&&null!==e.offsetParent))}const $=r();let q={};function W(e){const n=K(e);q={x:n.x,y:n.y}}function F(e){$.info("Touch move event detected");const n=K(e),t=Math.abs(n.y-q.y)>window.innerHeight/100*5,o=q.y>n.y?"down":"up";t&&d(o)}function K(e){return{x:e.touches[0].pageX,y:e.touches[0].pageY}}const H=r();let R,j=!1;function N(){H.info("Resize event has been triggered."),j||O(),j=!0,clearTimeout(R),R=setTimeout((()=>{n.isResizing=!0,O(),function(){if("manual"===n.scrollMode)return;const e=`translate3d(0px, -${n.sections[n.activeSection].element.offsetTop}px, 0px)`;n.container.style.transform=e,n.container.style.webkitTransform=e}(),j=!1}),400)}function O(){!function(e){n.sections.forEach((n=>n.element.style.height=`${e}px`))}(window?window.innerHeight:document.documentElement.offsetHeight)}function U(){"manual"!==n.scrollMode&&(n.isWheelEnabled&&(A.info("Wheel event registered"),document.body.addEventListener("wheel",P)),n.isKeyboardEnabled&&(document.addEventListener("keydown",z),X.on(_.onSectionChange,D)),n.isTouchEnabled&&(document.addEventListener("touchstart",W),n.container.addEventListener("touchmove",F,{passive:!1})),N(),window.addEventListener("resize",N))}function Y(){document.removeEventListener("keydown",z),X.off(_.onSectionChange),A.info("Wheel event registered"),document.body.removeEventListener("wheel",P),document.removeEventListener("touchstart",W),n.container.removeEventListener("touchmove",F),O(),clearTimeout(R),window.removeEventListener("resize",N)}var _;!function(e){e.onSectionChange="onSectionChange",e.onBeforeSectionChange="onBeforeSectionChange",e.onSlideChange="onSlideChange",e.onBeforeSlideChange="onBeforeSlideChange",e.onPageScrollStatusChanged="onPageScrollStatusChanged",e.onPageScrollModeAutomatic="onPageScrollModeAutomatic",e.onPageScrollModeManual="onPageScrollModeManual"}(_||(_={}));const X={all:G=G||new Map,on(e,n){const t=G.get(e);t?t.push(n):G.set(e,[n])},off(e,n){const t=G.get(e);t&&(n?t.splice(t.indexOf(n)>>>0,1):G.set(e,[]))},emit(e,n){let t=G.get(e);t&&t.slice().map((e=>{e(n)})),t=G.get("*"),t&&t.slice().map((t=>{t(e,n)}))}};var G;!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("html.page-scroller-enabled, .page-scroller-enabled body {\n    margin: 0;\n    padding: 0;\n    -webkit-tap-highlight-color: rgba(0,0,0,0);\n}\n\n.page-scoller-body {\n    height: 100%;\n    position: relative;\n}\n\n.page-scroller-wrapper {\n    height: 100%;\n    width: 100%;\n    position: relative;\n}\n\n.page-scroller-section {\n    height: 100%;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n}\n\n.page-scroller-section-with-slides {\n    z-index: 1;\n    height: 100%;\n    overflow: hidden;\n    position: relative;\n    -webkit-transition: all .3s ease-out;\n    transition: all .3s ease-out;\n}\n\n.page-scroller-slide-wrapper {\n    height: 100%;\n    display: flex;\n    float: left;\n    position: relative;\n}\n");const J=r();e.changeScrollingMode=function(e){n.scrollMode!==e&&(n.scrollMode=e,X.emit("automatic"===e?_.onPageScrollModeAutomatic:_.onPageScrollModeManual))},e.changeSectionByDirection=f,e.changeSectionBySpecificIndex=g,e.changeSectionOrSlideByDirection=d,e.changeSlideByDirection=u,e.getActiveSection=()=>n.activeSection,e.isAutomaticScrollingMode=()=>"automatic"===n.scrollMode,e.isManualScrollingMode=()=>"manual"===n.scrollMode,e.onDestroy=function(){C.warn("Destroying Page Scroller..."),document.querySelector("html").classList.remove(o.html),document.querySelector("body").classList.remove(o.body),n.container.classList.remove(o.container),n.container.style.transition="",n.container.style.transform="none",n.container.style.webkitTransform="none",n.sections.forEach((e=>e.element.classList.remove(o.section))),Y(),X.off(_.onPageScrollModeManual),X.off(_.onPageScrollModeAutomatic),n.container=null,n.sections=null,n.activeSlide=0,n.activeSection=0,n.transitionTimingFunction=p,n.scrollingSpeed=S,n.slidesIdentifyAttribute=y,n.isAllowToScrollThroughSlides=b,n.isDebug=v,n.isScrolling=!1,n.isInitialized=!1,n.isWheelEnabled=w,n.isKeyboardEnabled=x,n.isTouchEnabled=T,t.onSectionChange=()=>{},X.off(_.onSectionChange),t.onBeforeSectionChange=()=>{},X.off(_.onBeforeSectionChange),n.isInitialized=!1,C.warn("Destroyed Page Scroller.")},e.usePageScroller=function(e){return{initPageScroller:function(t){if(J.info("Initializing page scroller..."),n.isInitialized)throw new Error(J.createMessage("Page scroller is already initialized."));if(void 0===t)throw new Error(J.createMessage("Please provide a valid selector."));if(n.container=document.querySelector(t),!n.container)throw new Error(J.createMessage("Container not found. Please provide a valid selector."));E(e)},changeSectionByDirection:f,changeSectionBySpecificIndex:g}},Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=index.umd.js.map