@furman1331/page-scroller
Version:
Amazing plugin for creating smooth scroll on your website
3 lines (2 loc) • 12.2 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});const e=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 n=new class{onSectionChange;onBeforeSectionChange};var t,o;function i(){document.querySelector("html").classList.add(t.html);document.querySelector("body").classList.add(t.body),e.container.classList.add(t.container);const n=`transform ${e.scrollingSpeed}ms ${e.transitionTimingFunction}`;e.container.style.transition=n,e.sections=Array.from(e.container.children).map((n=>{const i=n,s=Array.from(i.children).filter((n=>n.hasAttribute(e.slidesIdentifyAttribute)));if(s.forEach((e=>e.classList.add(t.slide))),!s.length)return{element:i,slides:null};const c=function(n,i){const s=document.createElement("div");s.classList.add(o.wrapper);const c=`transform ${e.scrollingSpeed}ms ${e.transitionTimingFunction}`;s.style.transition=c,s.style.width=100*i.length+"%",i.forEach((e=>{e.style.width=100/i.length+"%",s.appendChild(e)}));const r=document.createElement("div");return r.classList.add(t.sectionWithSlides),r.appendChild(s),n.appendChild(r),s}(i,s);return{element:i,slides:{container:c,elements:s}}})),e.sections.forEach((e=>e.element.classList.add(t.section))),"automatic"===e.scrollMode?s():c()}function s(){const n=document.querySelector("body");n.style.overflow="hidden",n.style.height="100%";const t=document.querySelector("html");t.style.overflow="hidden",t.style.height="100%";const o=`transform ${e.scrollingSpeed}ms ${e.transitionTimingFunction}`;e.container.style.transition=o}function c(){const n=document.querySelector("body");n.style.overflow="auto",n.style.height="initial";const t=document.querySelector("html");t.style.overflow="auto",t.style.height="initial",e.container.style.transition="",e.container.style.transform="none",e.container.style.webkitTransform="none"}function r(){return{info:function(n){e.isDebug},error:function(n){e.isDebug},warn:function(n){e.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"}(t||(t={})),function(e){e.wrapper="page-scroller-slide-wrapper",e.active="page-scroller-slide-active"}(o||(o={}));function l(e,n){const t=e.slice(Math.max(e.length-n,0)).reduce(((e,n)=>e+n),0);return Math.ceil(t/n)}function a(n){!function(n){if(!e.isAllowToScrollThroughSlides)return!1;if(!(e.sections[e.activeSection].slides?.elements.length>0))return!1;const t=e.sections[e.activeSection].slides,o="down"===n?e.activeSlide+1===t.elements.length:e.activeSlide-1==-1;return!o}(n)?u(n):d("down"===n?"right":"left")}function d(n){if(e.isScrolling)return;e.isScrolling=!0;const t=e.activeSlide;e.activeSlide="right"===n?t+1:t-1,function(n,t){_.emit(Y.onBeforeSlideChange,{beforeIndex:n,afterIndex:t});const i=e.sections[e.activeSection];i.slides.elements[n]?.classList.remove(o.active);const s=`translate3d(-${i.slides.elements[t].offsetLeft}px, 0px, 0px)`;i.slides.container.style.transform=s,i.slides.container.style.webkitTransform=s,e.sections[e.activeSection].slides.elements[t].classList.add(o.active),setTimeout((()=>{e.isScrolling=!1,_.emit(Y.onSlideChange,{beforeIndex:n,afterIndex:t})}),e.scrollingSpeed)}(t,e.activeSlide)}function u(n){if(e.isScrolling)return;e.isScrolling=!0;const t=e.activeSection;if(!function(n){return"down"===n?e.sections.length!=e.activeSection+1:e.activeSection-1!=-1}(n))return e.isScrolling=!1;e.activeSection="down"===n?t+1:t-1,f(t,e.activeSection)}function g(n){if(e.isScrolling)return;e.isScrolling=!0;const o=e.activeSection;if(!function(n){return n>=0&&n<e.sections.length}(n))return e.isScrolling=!1;e.sections[o].element.classList.remove(t.activeSection),e.activeSection=n,f(o,e.activeSection)}function f(n,o){_.emit(Y.onBeforeSectionChange,{beforeIndex:n,afterIndex:o}),e.sections[n].element.classList.remove(t.activeSection);const i=`translate3d(0px, -${e.sections[o].element.offsetTop}px, 0px)`;e.container.style.transform=i,e.container.style.webkitTransform=i,e.sections[o].element.classList.add(t.activeSection),setTimeout((()=>{e.isScrolling=!1,_.emit(Y.onSectionChange,{beforeIndex:n,afterIndex:o})}),700)}const h="automatic",m=700,S="ease",p="page-scroller-slide",v=!1,b=!1,y=!0,w=!0,x=!0;const C=r();function E(t){C.info("Initializing Page Scroller..."),t&&(function(n){e.scrollMode=n.scrollMode??h,e.scrollingSpeed=n.scrollingSpeed??m,e.transitionTimingFunction=n.transitionTimingFunction??S,e.isDebug=n.isDebug??b,e.isWheelEnabled=n.isWheelEnabled??y,e.isKeyboardEnabled=n.isKeyboardEnabled??w,e.isTouchEnabled=n.isTouchEnabled??x,e.slidesIdentifyAttribute=n.slidesIdentifyAttribute??p,e.isAllowToScrollThroughSlides=n.isAllowToScrollThroughSlides??v}(t),function(e){e.onSectionChange&&(n.onSectionChange=e.onSectionChange,_.on(Y.onSectionChange,(e=>n.onSectionChange(e)))),e.onBeforeSectionChange&&(n.onBeforeSectionChange=e.onBeforeSectionChange,_.on(Y.onBeforeSectionChange,(e=>n.onBeforeSectionChange(e))))}(t)),i(),U(),_.on(Y.onPageScrollModeAutomatic,(()=>{s(),U()})),_.on(Y.onPageScrollModeManual,(()=>{c(),j()})),e.isInitialized=!0,C.info("Initialized Page Scroller.")}let M,T=[];const L=r();function A(e){L.info("Wheel event detected"),clearTimeout(M),M=setTimeout((()=>{T=[]}),200);const n=-e.deltaY||e.detail,t=(o=n,Math.max(-1,Math.min(1,o))<0?"down":"up");var o;if(T.length>100&&T.shift(),T.push(Math.abs(n)),function(){const e=l(T,5),n=l(T,50);return e>=n}())return a(t)}const P=r();let I=null;function B(n){P.info("Keydown event detected");const t=n.key;if(!function(){const e=document.activeElement;return["input","textarea"].includes(e.tagName.toLowerCase())}())switch(t){case" ":case"ArrowDown":case"PageDown":a("down");break;case"ArrowUp":case"PageUp":a("up");break;case"ArrowRight":d("right");case"ArrowLeft":d("left");case"End":g(e.sections.length-1);break;case"Home":g(0);break;case"Tab":!function(n){const t=n.shiftKey,o=document.activeElement,i=D(e.sections[e.activeSection].element),s=o===i[0],c=o===i[i.length-1];if(t&&s||!t&&c){n.preventDefault();const e=t&&s?"up":"down";I="up"===e?"last":"first",a(e)}}(n)}}function z(){if(!I)return;const n=D(e.sections[e.activeSection].element);n["first"===I?0:n.length-1].focus(),I=null}function D(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 k=r();let $={};function q(e){const n=F(e);$={x:n.x,y:n.y}}function W(e){k.info("Touch move event detected");const n=F(e),t=Math.abs(n.y-$.y)>window.innerHeight/100*5,o=$.y>n.y?"down":"up";t&&a(o)}function F(e){return{x:e.touches[0].pageX,y:e.touches[0].pageY}}const K=r();let H,R=!1;function N(){K.info("Resize event has been triggered."),R||O(),R=!0,clearTimeout(H),H=setTimeout((()=>{e.isResizing=!0,O(),function(){if("manual"===e.scrollMode)return;const n=`translate3d(0px, -${e.sections[e.activeSection].element.offsetTop}px, 0px)`;e.container.style.transform=n,e.container.style.webkitTransform=n}(),R=!1}),400)}function O(){!function(n){e.sections.forEach((e=>e.element.style.height=`${n}px`))}(window?window.innerHeight:document.documentElement.offsetHeight)}function U(){"manual"!==e.scrollMode&&(e.isWheelEnabled&&(L.info("Wheel event registered"),document.body.addEventListener("wheel",A)),e.isKeyboardEnabled&&(document.addEventListener("keydown",B),_.on(Y.onSectionChange,z)),e.isTouchEnabled&&(document.addEventListener("touchstart",q),e.container.addEventListener("touchmove",W,{passive:!1})),N(),window.addEventListener("resize",N))}function j(){document.removeEventListener("keydown",B),_.off(Y.onSectionChange),L.info("Wheel event registered"),document.body.removeEventListener("wheel",A),document.removeEventListener("touchstart",q),e.container.removeEventListener("touchmove",W),O(),clearTimeout(H),window.removeEventListener("resize",N)}var Y;!function(e){e.onSectionChange="onSectionChange",e.onBeforeSectionChange="onBeforeSectionChange",e.onSlideChange="onSlideChange",e.onBeforeSlideChange="onBeforeSlideChange",e.onPageScrollStatusChanged="onPageScrollStatusChanged",e.onPageScrollModeAutomatic="onPageScrollModeAutomatic",e.onPageScrollModeManual="onPageScrollModeManual"}(Y||(Y={}));const _={all:X=X||new Map,on(e,n){const t=X.get(e);t?t.push(n):X.set(e,[n])},off(e,n){const t=X.get(e);t&&(n?t.splice(t.indexOf(n)>>>0,1):X.set(e,[]))},emit(e,n){let t=X.get(e);t&&t.slice().map((e=>{e(n)})),t=X.get("*"),t&&t.slice().map((t=>{t(e,n)}))}};var X;!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 G=r();exports.changeScrollingMode=function(n){e.scrollMode!==n&&(e.scrollMode=n,_.emit("automatic"===n?Y.onPageScrollModeAutomatic:Y.onPageScrollModeManual))},exports.changeSectionByDirection=u,exports.changeSectionBySpecificIndex=g,exports.changeSectionOrSlideByDirection=a,exports.changeSlideByDirection=d,exports.getActiveSection=()=>e.activeSection,exports.isAutomaticScrollingMode=()=>"automatic"===e.scrollMode,exports.isManualScrollingMode=()=>"manual"===e.scrollMode,exports.onDestroy=function(){C.warn("Destroying Page Scroller..."),document.querySelector("html").classList.remove(t.html),document.querySelector("body").classList.remove(t.body),e.container.classList.remove(t.container),e.container.style.transition="",e.container.style.transform="none",e.container.style.webkitTransform="none",e.sections.forEach((e=>e.element.classList.remove(t.section))),j(),_.off(Y.onPageScrollModeManual),_.off(Y.onPageScrollModeAutomatic),e.container=null,e.sections=null,e.activeSlide=0,e.activeSection=0,e.transitionTimingFunction=S,e.scrollingSpeed=m,e.slidesIdentifyAttribute=p,e.isAllowToScrollThroughSlides=v,e.isDebug=b,e.isScrolling=!1,e.isInitialized=!1,e.isWheelEnabled=y,e.isKeyboardEnabled=w,e.isTouchEnabled=x,n.onSectionChange=()=>{},_.off(Y.onSectionChange),n.onBeforeSectionChange=()=>{},_.off(Y.onBeforeSectionChange),e.isInitialized=!1,C.warn("Destroyed Page Scroller.")},exports.usePageScroller=function(n){return{initPageScroller:function(t){if(G.info("Initializing page scroller..."),e.isInitialized)throw new Error(G.createMessage("Page scroller is already initialized."));if(void 0===t)throw new Error(G.createMessage("Please provide a valid selector."));if(e.container=document.querySelector(t),!e.container)throw new Error(G.createMessage("Container not found. Please provide a valid selector."));E(n)},changeSectionByDirection:u,changeSectionBySpecificIndex:g}};
//# sourceMappingURL=index.cjs.js.map