-
Notifications
You must be signed in to change notification settings - Fork 0
/
scrollpage.min.js
1 lines (1 loc) · 13.3 KB
/
scrollpage.min.js
1
class ScrollPage{constructor(e,t=null){const n=this;n.reachTop=!0,n.reachBottom=!1,n.index=0,n.element=e,n.options=t??{},void 0===n.options.relative&&(n.options.relative=!1),void 0===n.options.triggerScrollChildren&&(n.options.triggerScrollChildren=!1),n.initEvents(),n.touchstartX=0,n.touchstartY=0,n.touchendX=0,n.touchendY=0,n.parent=document.querySelector(n.element),n.parent.setAttribute("scroll-page",!0),(n.options.relative||void 0===n.options.relative)&&(n.parent.style.position="relative");var s=[...n.parent.children],i=[];if(s.forEach((e=>{e.hasAttribute("ignore-page")||(null,i.push(e))})),n.childs=i,n.childs.forEach((e=>{e.setAttribute("scroll-page-item",!0),e.addEventListener("wheel",(function(e){n.checkScrollContent(e)&&(e.preventDefault(),n.scrollListener(e))}),{passive:t?.passive??!1}),e.addEventListener("touchstart",(function(e){n.checkScrollContent(e)&&e.preventDefault(),n.touchstartX=e.changedTouches[0].screenX,n.touchstartY=e.changedTouches[0].screenY}),{passive:!1}),e.addEventListener("touchend",(function(e){n.checkScrollContent(e)&&n.scrollListener(e)}),{passive:!0})})),n.stop=!0,t?.menu&&n.setMenu(t?.menu),n.setTagLink(),n.pageSelectedClass=t?.pageSelectedClass??"active",n.menuSelectedClass=t?.menuSelectedClass??"active",n.currentPage=t?.currentPage??1,n.currentTarget=n.childs[n.currentPage-1],t?.currentPage)n.moveTo(n.currentPage);else{if(n.options.relative)if(n.parent.scrollTop<=1)n.currentPage=t?.currentPage??1,n.currentTarget=n.childs[0],n.index=0;else{a=[];n.childs.forEach((e=>{a.push(e.offsetTop)}));o=n.parent.scrollTop,r=a.reduce((function(e,t){return Math.abs(t-o)<Math.abs(e-o)?t:e})),l=a.indexOf(r),c=n.childs[l];n.currentPage=n.pageNumber(c),n.index=l,n.currentTarget=c}else{var a=[];n.childs.forEach((e=>{a.push(e.offsetTop)}));var o=window.pageYOffset,r=a.reduce((function(e,t){return Math.abs(t-o)<Math.abs(e-o)?t:e})),l=a.indexOf(r),c=n.childs[l];n.currentPage=n.pageNumber(c),n.index=l,n.currentTarget=c}n.moveTo(n.currentPage)}n.nextPage=n.currentPage,n.nextTarget=n.currentTarget,n.options.relative?n.parent.style.overflow=t?.scrollBar?"visible":"hidden":document.body.style.overflow=t?.scrollBar?"visible":"hidden",n.updateMenuClass(),n.updatePageClass()}checkScrollContent(e){var t=this,n=e.currentTarget,s=!0;if(!this.moveHorizontalOrVertical(e))return s=!1;let i=!1;i=this.moveDownOrUp(e);var a=t.parent;let o=e.target;var r=o.scrollHeight>o.clientHeight;if(r)s=!!this.options.triggerScrollChildren&&(o.offsetHeight+o.scrollTop>=o.scrollHeight&&!i||!!(o.scrollTop<=0&&i)),o=!1;else for(;o&&"BODY"!=o.nodeName;){var l="visible"===o.style.overflow||"auto"===o.style.overflow||"scroll"===o.style.overflow;if((r=o.scrollHeight>o.clientHeight&&l)&&o!==a&&!o.hasAttribute("scroll-page")&&!o.hasAttribute("scroll-page-item")){s=!!this.options.triggerScrollChildren&&(o.offsetHeight+o.scrollTop>=o.scrollHeight&&!i||!!(o.scrollTop<=0&&i)),o=!1;break}o=o.parentElement}if(n.hasAttribute("scroll-page-item")&&n.querySelectorAll("[scroll-page]").length>0&&this.options.triggerScrollChildren){const e=n.querySelectorAll("[scroll-page]"),a=e[0];var c,h=!1;l="visible"===a.style.overflow||"auto"===a.style.overflow||"scroll"===a.style.overflow;if(a.scrollHeight>a.clientHeight&&l&&(a.offsetHeight+a.scrollTop+t.marginChild(t.childs.indexOf(t.currentTarget))>=a.scrollHeight&&!i?1==e.length&&(h=!0):a.scrollTop-1<=0&&i?c=!0:(c=!1,e.length||(h=!1))),e.length>1){const t=e[e.length-1];l="visible"===t.style.overflow||"auto"===t.style.overflow||"scroll"===t.style.overflow;h=!!(a.scrollHeight>a.clientHeight&&l)&&!!(t.offsetHeight+t.scrollTop>=t.scrollHeight&&i)}s=!(!c&&!h)}return s}initEvents(){this.scrollCallback=this.options?.scrollCallback??function(e){},this.moveCallback=this.options?.moveCallback??function(e){},this.startCallback=this.options?.startCallback??function(e){},this.finishCallback=this.options?.finishCallback??function(e){}}has(e,t){return!!e&&hasOwnProperty.call(e,t)}pageIndex(e){return this.childs.indexOf(e??this.currentTarget)}pageNumber(e){return this.pageIndex(e??this.currentTarget)+1}moveDownOrUp(e){var t=!1;if(null!=e.changedTouches&&null!=e.changedTouches){this.touchendX=e.changedTouches[0].screenX,this.touchendY=e.changedTouches[0].screenY;const n=this.touchendX-this.touchstartX,s=this.touchendY-this.touchstartY;Math.abs(n)<Math.abs(s)&&(t=s>0)}return null!=e.deltaY&&null!=e.deltaY&&(e.deltaY<0?t=!0:e.deltaY>0&&(t=!1)),t}moveLeftOrRight(e){var t=!1;if(null!=e.changedTouches&&null!=e.changedTouches){this.touchendX=e.changedTouches[0].screenX,this.touchendY=e.changedTouches[0].screenY;const n=this.touchendX-this.touchstartX,s=this.touchendY-this.touchstartY;Math.abs(n)>Math.abs(s)&&(t=n>0)}return null!=e.deltaX&&null!=e.deltaX&&(e.deltaX<0?t=!0:e.deltaX>0&&(t=!1)),t}moveHorizontalOrVertical(e){var t=!1;if(null!=e.changedTouches&&null!=e.changedTouches){this.touchendX=e.changedTouches[0].screenX,this.touchendY=e.changedTouches[0].screenY;const n=this.touchendX-this.touchstartX,s=this.touchendY-this.touchstartY;Math.abs(n)>Math.abs(s)?t=!1:Math.abs(n)<Math.abs(s)&&(t=!0)}return null!=e.deltaX&&null!=e.deltaY&&(0!=e.deltaX?t=!1:0!=e.deltaY&&(t=!0)),t}scrollListener(e){const t=this.childs;var n,s=null;this.index>0&&(n=t[this.index-1]),this.index<t.length-1&&(s=t[this.index+1]);let i=!1;if(i=this.moveDownOrUp(e),i){if(t.includes(n)&&n){this.nextPage=this.pageNumber(n),this.nextTarget=n,this.scrollCallback(this.responseCallback());const e=this.pageNumber(n),t=this.has(this.options?.pages,e)?this.options?.pages[e]:null;let s=t?.animation??this.options?.animation,i=t?.time??this.options?.time;this.moveTo(n,{animation:s,time:i,finish:t?.finish,start:t?.start,next:!1})}}else if(t.includes(s)&&s){this.nextPage=this.pageNumber(s),this.nextTarget=s,this.scrollCallback(this.responseCallback());const e=this.pageNumber(s),t=this.has(this.options?.pages,e)?this.options?.pages[e]:null;let n=t?.animation??this.options?.animation,i=t?.time??this.options?.time;this.moveTo(s,{animation:n,time:i,finish:t?.finish,start:t?.start,next:!0})}this.updateMenuClass(),this.updatePageClass()}updateMenuClass(){if(this.menu){const e=this.menu.querySelectorAll("."+this.menuSelectedClass);if(e.length>0&&e.forEach((e=>{e.classList.remove(this.menuSelectedClass)})),this.currentTarget){const e=this.menu.querySelector("[data-page='#"+this.currentTarget.getAttribute("id")+"']");e&&e.classList.add(this.menuSelectedClass)}}}updatePageClass(){if(this.currentTarget){const e=this.parent.querySelectorAll("."+this.pageSelectedClass);e.length>0&&e.forEach((e=>{e.classList.remove(this.pageSelectedClass)})),this.currentTarget.classList.add(this.pageSelectedClass)}}verticalScroll(e){const t=this;if(null==e)return!1;const n=arguments.length<=1||void 0===arguments[1]?500:arguments[1],s=arguments.length<=2||null==arguments[2]?"easeInSine":arguments[2],i=arguments[3],a=arguments[4]??null,o={easeInSine:e=>1-Math.cos(e*Math.PI/2),easeOutSine:e=>Math.sin(e*Math.PI/2),easeInOutSine:e=>-(Math.cos(Math.PI*e)-1)/2,easeInQuad:e=>e*e,easeInQuad:e=>1-(1-e)*(1-e),easeInOutQuad:e=>e<.5?2*e*e:1-Math.pow(-2*e+2,2)/2,easeInCubic:e=>e*e*e,easeOutCubic:e=>1-Math.pow(1-e,3),easeInOutCubic:e=>e<.5?4*e*e*e:1-Math.pow(-2*e+2,3)/2,easeInQuart:e=>e*e*e*e,easeOutQuart:e=>1-Math.pow(1-e,4),easeInOutQuart:e=>e<.5?8*e*e*e*e:1-Math.pow(-2*e+2,4)/2,easeInQuint:e=>e*e*e*e*e,easeOutQuint:e=>1-Math.pow(1-e,5),easeInOutQuint:e=>e<.5?16*e*e*e*e*e:1-Math.pow(-2*e+2,5)/2,easeInExpo:e=>0===e?0:Math.pow(2,10*e-10),easeOutExpo:e=>1===e?1:1-Math.pow(2,-10*e),easeInOutExpo:e=>0===e?0:1===e?1:e<.5?Math.pow(2,20*e-10)/2:(2-Math.pow(2,-20*e+10))/2,easeInCirc:e=>1-Math.sqrt(1-Math.pow(e,2)),easeOutCirc:e=>Math.sqrt(1-Math.pow(e-1,2)),easeInOutCirc:e=>e<.5?(1-Math.sqrt(1-Math.pow(2*e,2)))/2:(Math.sqrt(1-Math.pow(-2*e+2,2))+1)/2,easeInBack(e){const t=1.70158;return 2.70158*e*e*e-t*e*e},easeOutBack(e){const t=1.70158;return 1+2.70158*Math.pow(e-1,3)+t*Math.pow(e-1,2)},easeInOutBack(e){const t=2.5949095;return e<.5?Math.pow(2*e,2)*(7.189819*e-t)/2:(Math.pow(2*e-2,2)*((t+1)*(2*e-2)+t)+2)/2},easeInElastic(e){const t=2*Math.PI/3;return 0===e?0:1===e?1:-Math.pow(2,10*e-10)*Math.sin((10*e-10.75)*t)},easeOutElastic(e){const t=2*Math.PI/3;return 0===e?0:1===e?1:Math.pow(2,-10*e)*Math.sin((10*e-.75)*t)+1},easeInOutElastic(e){const t=2*Math.PI/4.5;return 0===e?0:1===e?1:e<.5?-Math.pow(2,20*e-10)*Math.sin((20*e-11.125)*t)/2:Math.pow(2,-20*e+10)*Math.sin((20*e-11.125)*t)/2+1},easeInBounce:e=>1-o.easeOutBounce(1-e),easeOutBounce(e){const t=7.5625,n=2.75;return e<1/n?t*e*e:e<2/n?t*(e-=1.5/n)*e+.75:e<2.5/n?t*(e-=2.25/n)*e+.9375:t*(e-=2.625/n)*e+.984375},easeInOutBounce:e=>e<.5?(1-o.easeOutBounce(1-2*e))/2:(1+o.easeOutBounce(2*e-1))/2};if(t.options.relative){var r=t.parent.scrollTop,l="now"in window.performance?performance.now():(new Date).getTime(),c=Math.max(t.parent.scrollHeight,t.parent.offsetHeight,t.parent.clientHeight,t.parent.scrollHeight,t.parent.offsetHeight),h=t.parent.innerHeight,u="number"==typeof e?e:e.offsetTop,d=c-(u-=this.marginChild(t.childs.indexOf(t.currentTarget)))<h?c-h:u;if(0==t.childs.indexOf(t.currentTarget)&&t.index>0?d=0:t.childs.indexOf(t.currentTarget)==t.childs.length-1&&t.index<t.childs.length-1&&!0,"requestAnimationFrame"in window==!1)return t.parent.scroll(0,d),i&&i(),void(t.stop=!0)}else{r=window.pageYOffset,l="now"in window.performance?performance.now():(new Date).getTime();var p=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight);h=window.innerHeight||document.documentElement.clientHeight||document.getElementsByTagName("body")[0].clientHeight,u="number"==typeof e?e:e.offsetTop;u-=this.marginChild(t.childs.indexOf(t.currentTarget));d=Math.round(p-u<h?p-h:u);if(0==t.childs.indexOf(t.currentTarget)&&t.index>0?d=0:t.childs.indexOf(t.currentTarget)==t.childs.length-1&&t.index<t.childs.length-1&&(!0,d=p),"requestAnimationFrame"in window==!1)return window.scroll(0,d),i&&i(),void(t.stop=!0)}t.updateMenuClass(),function c(){if(t.options.relative){var h="now"in window.performance?performance.now():(new Date).getTime(),u=Math.min(1,(h-l)/n),p="function"==typeof s?s(u):o[s](u);if(t.parent.scroll(0,Math.ceil(p*(d-r)+r)),t.parent.scrollTop===d||1==("easeInSine"==s&&t.parent.scrollTop-d)||1==u)return i&&i(),t.stop=!0,null!=a?a?t.index+=1:t.index-=1:t.index=t.pageIndex(e),t.currentPage=t.pageNumber(),t.finishCallback(t.responseCallback()),void t.updatePageClass()}else{h="now"in window.performance?performance.now():(new Date).getTime(),u=Math.min(1,(h-l)/n),p="function"==typeof s?s(u):o[s](u);if(window.scroll(0,Math.ceil(p*(d-r)+r)),window.pageYOffset===d||1==("easeInSine"==s&&window.pageYOffset-d)||1==u)return i&&i(),t.stop=!0,null!=a?a?t.index+=1:t.index-=1:t.index=t.pageIndex(e),t.currentPage=t.pageNumber(),t.finishCallback(t.responseCallback()),void t.updatePageClass()}t.moveCallback(t.responseCallback()),requestAnimationFrame(c)}()}onScroll(e){this.scrollCallback=e}onMove(e){this.moveCallback=e}onStart(e){this.startCallback=e}onFinish(e){this.finishCallback=e}moveTo(e,t=null){let n=null,s=0;if("number"==typeof e?(s=e-1,n=this.childs[s]):"string"==typeof e?(s=this.findPageByNode(document.querySelector(e)),n=this.childs[s]):-1!==this.findPageByNode(e)?(s=this.findPageByNode(e),n=this.childs[s]):n=document.querySelector(e),null==t&&(t=this.has(this.options?.pages,s+1)&&this.options?.pages[s+1]?this.options?.pages[s+1]:this.options),n){if(this.nextPage=this.pageNumber(n),this.nextTarget=n,!this.stop)return!1;this.startCallback(this.responseCallback()),this.stop=!1,t?.start&&t?.start(),this.currentTarget=n,this.verticalScroll(n,t?.time,t?.animation,t?.finish,t?.next);const e=new Event(this.currentTarget.getAttribute("id"));this.parent.dispatchEvent(e)}else console.log("page not found")}setMenu(e){const t=this;if(t.menu=document.querySelector(e),t.menu){[...t.menu.children].forEach((e=>{e.addEventListener("click",(n=>{n.preventDefault(),t.moveTo(e.getAttribute("data-page")),this.scrollCallback(this.responseCallback())})),"ontouchstart"in window&&e.addEventListener("touchstart",(function(n){t.moveTo(e.getAttribute("data-page")),this.scrollCallback(this.responseCallback())}))}))}}setTagLink(){const e=this,t=document.getElementsByTagName("a");for(let n=0;n<t.length;n++){const s=t[n];s.addEventListener("click",(t=>{var n=s.getAttribute("href");n.includes("#")&&"#"!==n&&(t.preventDefault(),e.moveTo(n),this.scrollCallback(this.responseCallback()))}))}}findPageByNode(e){return this.childs.indexOf(e)}on(e,t){const n=this;n.parent.addEventListener(e,(function(e){t(n.responseCallback())}),!1)}responseCallback(){return{sp:this,currentPage:this.currentPage,nextPage:this.nextPage,currentPageName:this.currentTarget.getAttribute("id")??this.currentPage,nextPageName:this.nextTarget.getAttribute("id")??this.nextPage,index:this.index}}marginChild(e){return this.convertCssUnit(window.getComputedStyle(this.childs[e]).marginTop)}convertCssUnit=function(e,t){t=t||document.body;const n={px:e=>e,cm:e=>38*e,mm:e=>3.8*e,q:e=>.95*e,in:e=>96*e,pc:e=>16*e,pt:e=>1.333333*e,rem:e=>e*parseFloat(getComputedStyle(document.documentElement).fontSize),em:e=>e*parseFloat(getComputedStyle(t).fontSize),vw:e=>e/100*window.innerWidth,vh:e=>e/100*window.innerHeight},s=new RegExp(`^([-+]?(?:\\d+(?:\\.\\d+)?))(${Object.keys(n).join("|")})$`,"i"),i=String.prototype.toString.apply(e).trim().match(s);if(i){const e=Number(i[1]),t=i[2].toLocaleLowerCase();if(t in n)return n[t](e)}return e}}"undefined"!=typeof module&&(module.exports=ScrollPage);