smooothy
Version:
**Tiny real smooth fast cool all events _bring your own tooling slider._ Framework agnostic but it's a you problem.**
4 lines (2 loc) • 18.8 kB
JavaScript
var N=Object.create;var{getPrototypeOf:i,defineProperty:q,getOwnPropertyNames:w,getOwnPropertyDescriptor:D}=Object,B=Object.prototype.hasOwnProperty;var m=(h,u,o)=>{o=h!=null?N(i(h)):{};let y=u||!h||!h.__esModule?q(o,"default",{value:h,enumerable:!0}):o;for(let _ of w(h))if(!B.call(y,_))q(y,_,{get:()=>h[_],enumerable:!0});return y},L=new WeakMap,p=(h)=>{var u=L.get(h),o;if(u)return u;if(u=q({},"__esModule",{value:!0}),h&&typeof h==="object"||typeof h==="function")w(h).map((y)=>!B.call(u,y)&&q(u,y,{get:()=>h[y],enumerable:!(o=D(h,y))||o.enumerable}));return L.set(h,u),u},R=(h,u)=>()=>(u||h((u={exports:{}}).exports,u),u.exports);var z=(h,u)=>{for(var o in u)q(h,o,{get:u[o],enumerable:!0,configurable:!0,set:(y)=>u[o]=()=>y})};var G=R((Z,$)=>{(function(h,u){typeof Z=="object"&&typeof $!="undefined"?$.exports=u():typeof define=="function"&&define.amd?define(u):(h||self).virtualScroll=u()})(Z,function(){var h=0;function u(K){return"__private_"+h+++"_"+K}function o(K,j){if(!Object.prototype.hasOwnProperty.call(K,j))throw new TypeError("attempted to use private field on non-instance");return K}function y(){}y.prototype={on:function(K,j,n){var c=this.e||(this.e={});return(c[K]||(c[K]=[])).push({fn:j,ctx:n}),this},once:function(K,j,n){var c=this;function b(){c.off(K,b),j.apply(n,arguments)}return b._=j,this.on(K,b,n)},emit:function(K){for(var j=[].slice.call(arguments,1),n=((this.e||(this.e={}))[K]||[]).slice(),c=0,b=n.length;c<b;c++)n[c].fn.apply(n[c].ctx,j);return this},off:function(K,j){var n=this.e||(this.e={}),c=n[K],b=[];if(c&&j)for(var X=0,P=c.length;X<P;X++)c[X].fn!==j&&c[X].fn._!==j&&b.push(c[X]);return b.length?n[K]=b:delete n[K],this}};var _=y;_.TinyEmitter=y;var f,E="virtualscroll",Y=u("options"),s=u("el"),M=u("emitter"),v=u("event"),k=u("touchStart"),l=u("bodyTouchAction");return function(){function K(n){var c=this;Object.defineProperty(this,Y,{writable:!0,value:void 0}),Object.defineProperty(this,s,{writable:!0,value:void 0}),Object.defineProperty(this,M,{writable:!0,value:void 0}),Object.defineProperty(this,v,{writable:!0,value:void 0}),Object.defineProperty(this,k,{writable:!0,value:void 0}),Object.defineProperty(this,l,{writable:!0,value:void 0}),this._onWheel=function(b){var X=o(c,Y)[Y],P=o(c,v)[v];P.deltaX=b.wheelDeltaX||-1*b.deltaX,P.deltaY=b.wheelDeltaY||-1*b.deltaY,f.isFirefox&&b.deltaMode===1&&(P.deltaX*=X.firefoxMultiplier,P.deltaY*=X.firefoxMultiplier),P.deltaX*=X.mouseMultiplier,P.deltaY*=X.mouseMultiplier,c._notify(b)},this._onMouseWheel=function(b){var X=o(c,v)[v];X.deltaX=b.wheelDeltaX?b.wheelDeltaX:0,X.deltaY=b.wheelDeltaY?b.wheelDeltaY:b.wheelDelta,c._notify(b)},this._onTouchStart=function(b){var X=b.targetTouches?b.targetTouches[0]:b;o(c,k)[k].x=X.pageX,o(c,k)[k].y=X.pageY},this._onTouchMove=function(b){var X=o(c,Y)[Y];X.preventTouch&&!b.target.classList.contains(X.unpreventTouchClass)&&b.preventDefault();var P=o(c,v)[v],Q=b.targetTouches?b.targetTouches[0]:b;P.deltaX=(Q.pageX-o(c,k)[k].x)*X.touchMultiplier,P.deltaY=(Q.pageY-o(c,k)[k].y)*X.touchMultiplier,o(c,k)[k].x=Q.pageX,o(c,k)[k].y=Q.pageY,c._notify(b)},this._onKeyDown=function(b){var X=o(c,v)[v];X.deltaX=X.deltaY=0;var P=window.innerHeight-40;switch(b.keyCode){case 37:case 38:X.deltaY=o(c,Y)[Y].keyStep;break;case 39:case 40:X.deltaY=-o(c,Y)[Y].keyStep;break;case 32:X.deltaY=P*(b.shiftKey?1:-1);break;default:return}c._notify(b)},o(this,s)[s]=window,n&&n.el&&(o(this,s)[s]=n.el,delete n.el),f||(f={hasWheelEvent:"onwheel"in document,hasMouseWheelEvent:"onmousewheel"in document,hasTouch:"ontouchstart"in document,hasTouchWin:navigator.msMaxTouchPoints&&navigator.msMaxTouchPoints>1,hasPointer:!!window.navigator.msPointerEnabled,hasKeyDown:"onkeydown"in document,isFirefox:navigator.userAgent.indexOf("Firefox")>-1}),o(this,Y)[Y]=Object.assign({mouseMultiplier:1,touchMultiplier:2,firefoxMultiplier:15,keyStep:120,preventTouch:!1,unpreventTouchClass:"vs-touchmove-allowed",useKeyboard:!0,useTouch:!0},n),o(this,M)[M]=new _,o(this,v)[v]={y:0,x:0,deltaX:0,deltaY:0},o(this,k)[k]={x:null,y:null},o(this,l)[l]=null,o(this,Y)[Y].passive!==void 0&&(this.listenerOptions={passive:o(this,Y)[Y].passive})}var j=K.prototype;return j._notify=function(n){var c=o(this,v)[v];c.x+=c.deltaX,c.y+=c.deltaY,o(this,M)[M].emit(E,{x:c.x,y:c.y,deltaX:c.deltaX,deltaY:c.deltaY,originalEvent:n})},j._bind=function(){f.hasWheelEvent&&o(this,s)[s].addEventListener("wheel",this._onWheel,this.listenerOptions),f.hasMouseWheelEvent&&o(this,s)[s].addEventListener("mousewheel",this._onMouseWheel,this.listenerOptions),f.hasTouch&&o(this,Y)[Y].useTouch&&(o(this,s)[s].addEventListener("touchstart",this._onTouchStart,this.listenerOptions),o(this,s)[s].addEventListener("touchmove",this._onTouchMove,this.listenerOptions)),f.hasPointer&&f.hasTouchWin&&(o(this,l)[l]=document.body.style.msTouchAction,document.body.style.msTouchAction="none",o(this,s)[s].addEventListener("MSPointerDown",this._onTouchStart,!0),o(this,s)[s].addEventListener("MSPointerMove",this._onTouchMove,!0)),f.hasKeyDown&&o(this,Y)[Y].useKeyboard&&document.addEventListener("keydown",this._onKeyDown)},j._unbind=function(){f.hasWheelEvent&&o(this,s)[s].removeEventListener("wheel",this._onWheel),f.hasMouseWheelEvent&&o(this,s)[s].removeEventListener("mousewheel",this._onMouseWheel),f.hasTouch&&(o(this,s)[s].removeEventListener("touchstart",this._onTouchStart),o(this,s)[s].removeEventListener("touchmove",this._onTouchMove)),f.hasPointer&&f.hasTouchWin&&(document.body.style.msTouchAction=o(this,l)[l],o(this,s)[s].removeEventListener("MSPointerDown",this._onTouchStart,!0),o(this,s)[s].removeEventListener("MSPointerMove",this._onTouchMove,!0)),f.hasKeyDown&&o(this,Y)[Y].useKeyboard&&document.removeEventListener("keydown",this._onKeyDown)},j.on=function(n,c){o(this,M)[M].on(E,n,c);var b=o(this,M)[M].e;b&&b[E]&&b[E].length===1&&this._bind()},j.off=function(n,c){o(this,M)[M].off(E,n,c);var b=o(this,M)[M].e;(!b[E]||b[E].length<=0)&&this._unbind()},j.destroy=function(){o(this,M)[M].off(),this._unbind()},K}()})});var T={};z(T,{symmetricMod:()=>W,lerp:()=>U,default:()=>V,damp:()=>J});module.exports=p(T);var A=m(G());function U(h,u,o){return h*(1-o)+u*o}function J(h,u,o,y){let _=1-Math.exp(-o*y);return h+(u-h)*_}function W(h,u){let o=h%u;if(Math.abs(o)>u/2)o=o>0?o-u:o+u;return o}var F={infinite:!0,snap:!0,variableWidth:!1,vertical:!1,dragSensitivity:0.005,lerpFactor:0.3,scrollSensitivity:1,snapStrength:0.1,speedDecay:0.85,bounceLimit:1,virtualScroll:{mouseMultiplier:0.5,touchMultiplier:2,firefoxMultiplier:30,useKeyboard:!1,passive:!0},setOffset:({itemWidth:h,wrapperWidth:u,itemHeight:o,wrapperHeight:y,vertical:_})=>_?o:h,scrollInput:!1};class O{speed=0;#M=0;#y=0;#Y=0;deltaTime=0;#h=!0;#o=!1;#u=0;#X=0;config;wrapper;items;viewport;itemWidths=[];itemOffsets=[];itemHeights=[];itemHeightOffsets=[];isDragging=!1;isTouching=!1;dragStart=0;dragStartTarget=0;isVisible=!1;current=0;target=0;maxScroll=0;resizeTimeout;virtualScroll;observer;touchStartY;touchStartX;touchPreviousX;touchPreviousY;scrollDirection;parallaxValues;webglValue=0;onSlideChange;onResize;onUpdate;constructor(h,u={}){if(this.config={...F,...u},u.onSlideChange)this.onSlideChange=u.onSlideChange;if(u.onResize)this.onResize=u.onResize;if(u.onUpdate)this.onUpdate=u.onUpdate;if(delete this.config.onSlideChange,delete this.config.onResize,delete this.config.onUpdate,this.wrapper=h,this.items=[...h.children],this.current=0,this.target=0,this.isDragging=!1,this.isTouching=!1,this.dragStart=0,this.dragStartTarget=0,this.isVisible=!1,this.#u=0,this.#X=0,this.#n(),this.#l(),this.#W(),this.wrapper.style.cursor="grab",this.#n(),this.#q(),this.config.variableWidth&&!this.config.infinite&&this.items.length>0){let o=this.#s(0);this.target=o,this.current=o,this.#P()}}#l(){let h={root:null,rootMargin:"50px",threshold:0};this.observer=new IntersectionObserver((u)=>{u.forEach((o)=>{this.isVisible=o.isIntersecting})},h),this.observer.observe(this.wrapper)}#n(){let h=this.items.map((s)=>s.getBoundingClientRect().width),u=this.items.map((s)=>s.getBoundingClientRect().height),o=this.wrapper.clientWidth,y=this.wrapper.clientHeight,_=h.reduce((s,M)=>s+M,0),f=u.reduce((s,M)=>s+M,0),E=0;this.itemOffsets=h.map((s)=>{let M=E;return E+=s,M}),this.itemWidths=h;let Y=0;if(this.itemHeightOffsets=u.map((s)=>{let M=Y;return Y+=s,M}),this.itemHeights=u,this.viewport={itemWidth:h[0]??0,wrapperWidth:o,totalWidth:_,itemHeight:u[0]??0,wrapperHeight:y,totalHeight:f,vertical:this.config.vertical},this.#y=this.config.setOffset(this.viewport),this.config.variableWidth)if(this.config.vertical)this.maxScroll=-(this.viewport.totalHeight-this.#y);else this.maxScroll=-(this.viewport.totalWidth-this.#y);else{let s=this.config.vertical?this.viewport.itemHeight||1:this.viewport.itemWidth||1,M=this.config.vertical?this.viewport.totalHeight:this.viewport.totalWidth;this.maxScroll=-(M-this.#y)/s}queueMicrotask(()=>{this.onResize?.(this)})}#W(){let h=(s)=>this.#c(s),u=(s)=>this.#b(s),o=()=>this.#_();this.wrapper.addEventListener("mousedown",h),window.addEventListener("mousemove",u),window.addEventListener("mouseup",o);let y=5,_=(s)=>{let M=s.touches[0];this.touchStartY=M.clientY,this.touchStartX=M.clientX,this.touchPreviousX=M.clientX,this.touchPreviousY=M.clientY,this.scrollDirection=void 0,this.isTouching=!0,this.#c(M)},f=(s)=>{if(!this.isTouching||this.#o)return;let M=s.touches[0],v=Math.abs(M.clientY-this.touchStartY),k=Math.abs(M.clientX-this.touchStartX);if(!this.scrollDirection&&(k>y||v>y))this.scrollDirection=k>v?"horizontal":"vertical";if(this.config.vertical?this.scrollDirection==="vertical":this.scrollDirection==="horizontal")if(s.preventDefault(),this.#b(M),this.config.vertical)this.touchPreviousY=M.clientY;else this.touchPreviousX=M.clientX},E=()=>{this.isTouching=!1,this.scrollDirection=void 0,this.touchPreviousX=void 0,this.touchPreviousY=void 0,this.#_()};this.wrapper.addEventListener("touchstart",_),window.addEventListener("touchmove",f,{passive:!1}),window.addEventListener("touchend",E),new ResizeObserver(()=>{if(this.resizeTimeout)clearTimeout(this.resizeTimeout);this.resizeTimeout=setTimeout(()=>this.resize(),10)}).observe(this.wrapper)}#j(h){if(!this.config.infinite){let u=this.config.vertical?this.viewport.itemHeight:this.viewport.itemWidth,o=this.config.variableWidth&&u?this.config.bounceLimit*u:this.config.bounceLimit;if(h>o)return o;else if(h<this.maxScroll-o)return this.maxScroll-o}return h}#q(){this.virtualScroll=new A.default({...this.config.virtualScroll,el:this.wrapper});let h=5;this.virtualScroll.on((u)=>{if(!this.isDragging&&!this.#o){if(u.touchDevice){let E=Math.abs(u.deltaY),Y=Math.abs(u.deltaX);if(E<h&&Y<h)return;if(this.config.vertical){if(Y>E)return}else if(E>Y)return}let o=this.config.vertical?!this.config.scrollInput?u.deltaY:Math.abs(u.deltaY)>Math.abs(u.deltaX)?u.deltaY:u.deltaX:!this.config.scrollInput?u.deltaX:Math.abs(u.deltaX)>Math.abs(u.deltaY)?u.deltaX:u.deltaY,y=this.config.variableWidth?this.config.scrollSensitivity:this.config.scrollSensitivity*0.001,_=o*y,f=this.target+_;if(!this.config.infinite){if(f>0)f=0;else if(f<this.maxScroll)f=this.maxScroll}this.target=this.#j(f),this.speed=-_*(this.config.variableWidth?0.1:10)}})}#c(h){if(this.#o)return;this.isDragging=!0,this.dragStart=this.config.vertical?h.clientY:h.clientX,this.dragStartTarget=this.target,this.wrapper.style.cursor="grabbing"}#b(h){if(!this.isDragging||this.#o)return;let u=this.config.vertical?h.clientY-this.dragStart:h.clientX-this.dragStart,o=this.config.variableWidth?1:this.config.dragSensitivity,y=this.dragStartTarget+u*o;if(this.target=this.#j(y),"movementX"in h){let _=this.config.vertical?h.movementY:h.movementX;this.speed+=_*0.01}else{let _=this.config.vertical?h.clientY:h.clientX,f=this.config.vertical?this.touchPreviousY||_:this.touchPreviousX||_,E=_-f;this.speed+=E*0.01}}#_(){if(this.isDragging=!1,this.wrapper.style.cursor="grab",this.config.variableWidth){if(!this.config.infinite){if(this.target>0)this.target=0;else if(this.target<this.maxScroll)this.target=this.maxScroll}if(this.config.snap)this.target=this.#v(this.target)}else if(!this.config.infinite){if(this.target>0)this.target=0;else if(this.target<this.maxScroll)this.target=this.maxScroll;else if(this.config.snap){let h=Math.round(this.target);this.target=Math.min(0,Math.max(this.maxScroll,h))}}else if(this.config.snap)this.target=Math.round(this.target)}update(){if(!this.isVisible||!this.#h)return;let h=performance.now();if(this.deltaTime=(h-this.#Y)/1000,this.#Y=h,this.config.snap&&!this.isDragging)if(this.config.variableWidth){let o=this.#v(this.target)-this.target;this.target+=o*this.config.snapStrength}else{let o=Math.round(this.target)-this.target;this.target+=o*this.config.snapStrength}if(this.current=J(this.current,this.target,1/this.config.lerpFactor,this.deltaTime),this.config.infinite)if(this.config.variableWidth){let u=this.config.vertical?this.viewport.wrapperHeight/2:this.viewport.wrapperWidth/2,o=this.#E(-this.current+u),y=this.#K(o);this.#f(y),this.#Z()}else{let u=Math.round(-this.current),o=this.items.length,y=(u%o+o)%o;this.#f(y),this.#Q()}else if(this.config.variableWidth){let u=this.config.vertical?this.viewport.wrapperHeight/2:this.viewport.wrapperWidth/2,o=this.config.vertical?this.viewport.totalHeight:this.viewport.totalWidth,y=Math.max(0,Math.min(-this.current+u,o));this.#f(this.#K(y)),this.#P()}else this.#f(Math.round(Math.abs(this.current))),this.#J();this.#$(),this.onUpdate?.(this)}#J(){this.parallaxValues=this.items.map((h,u)=>{let o=this.config.vertical?this.current*this.viewport.itemHeight:this.current*this.viewport.itemWidth,y=this.config.vertical?`translateY(${o}px)`:`translateX(${o}px)`;return h.style.transform=y,o})}#Q(){this.parallaxValues=this.items.map((h,u)=>{let o=this.current+u,y=W(o,this.items.length)-u,_=this.config.vertical?this.viewport.itemHeight:this.viewport.itemWidth,f=y*_,E=this.config.vertical?`translateY(${f}px)`:`translateX(${f}px)`;return h.style.transform=E,W(o,this.items.length)})}#k(h){if(this.config.vertical){let u=this.itemHeights[h]??this.viewport.itemHeight??0;return(this.itemHeightOffsets[h]??0)+u/2}else{let u=this.itemWidths[h]??this.viewport.itemWidth??0;return(this.itemOffsets[h]??0)+u/2}}#s(h){let u=this.config.vertical?this.viewport.totalHeight||1:this.viewport.totalWidth||1,o=this.config.vertical?this.viewport.wrapperHeight/2:this.viewport.wrapperWidth/2,_=-(this.#k(h)-o);if(this.config.infinite){let f=Math.round((this.target-_)/u);_+=f*u}else _=Math.min(0,Math.max(this.maxScroll,_));return _}#E(h){let u=this.config.vertical?this.viewport.totalHeight||1:this.viewport.totalWidth||1;return(h%u+u)%u}#K(h){let u=this.config.vertical?this.itemHeightOffsets:this.itemOffsets;if(!u.length)return 0;let o=this.config.vertical?this.viewport.totalHeight||1:this.viewport.totalWidth||1,y=this.config.infinite?this.#E(h):Math.max(0,Math.min(h,o)),_=0,f=Number.POSITIVE_INFINITY;return u.forEach((E,Y)=>{let s=this.#k(Y),M=Math.abs(y-s);if(M<f)f=M,_=Y}),_}#v(h){if(!(this.config.vertical?this.itemHeightOffsets:this.itemOffsets).length)return h;let o=this.config.vertical?this.viewport.totalHeight||1:this.viewport.totalWidth||1,y=this.config.vertical?this.viewport.wrapperHeight/2:this.viewport.wrapperWidth/2,_=this.config.infinite?this.#E(-h+y):Math.max(0,Math.min(-h+y,o)),f=this.#K(_);return this.#s(f)}#P(){this.parallaxValues=this.items.map((h,u)=>{let o=this.current,y=this.config.vertical?this.itemHeightOffsets:this.itemOffsets,_=this.config.vertical?`translateY(${o}px)`:`translateX(${o}px)`;return h.style.transform=_,o+y[u]})}#Z(){let h=this.config.vertical?this.viewport.totalHeight||1:this.viewport.totalWidth||1;this.parallaxValues=this.items.map((u,o)=>{let _=(this.config.vertical?this.itemHeightOffsets:this.itemOffsets)[o]??0,f=W(this.current+_,h)-_,E=this.config.vertical?`translateY(${f}px)`:`translateX(${f}px)`;return u.style.transform=E,W(this.current+_,h)})}#$(){this.#M=J(this.#M,this.speed,1/this.config.lerpFactor,this.deltaTime),this.speed*=this.config.speedDecay}goToNext(){if(this.config.variableWidth){let h=this.config.infinite?(this.currentSlide+1)%this.items.length:Math.min(this.currentSlide+1,this.items.length-1);this.target=this.#s(h)}else if(!this.config.infinite)this.target=Math.max(this.maxScroll,Math.round(this.target-1));else this.target=Math.round(this.target-1)}goToPrev(){if(this.config.variableWidth){let h=this.config.infinite?(this.currentSlide-1+this.items.length)%this.items.length:Math.max(this.currentSlide-1,0);this.target=this.#s(h)}else if(!this.config.infinite)this.target=Math.min(0,Math.round(this.target+1));else this.target=Math.round(this.target+1)}goToIndex(h){if(this.config.variableWidth){let u=this.config.infinite?(h%this.items.length+this.items.length)%this.items.length:Math.min(Math.max(h,0),this.items.length-1);this.target=this.#s(u)}else this.target=-h}set snap(h){this.config.snap=h}getProgress(){if(this.config.variableWidth){let o=this.config.vertical?this.viewport.totalHeight||1:this.viewport.totalWidth||1;return(-this.current%o+o)%o/o}let h=this.items.length;return Math.abs(this.current)%h/h}destroy(){if(this.kill(),window.removeEventListener("mousemove",(h)=>this.#b(h)),window.removeEventListener("mouseup",()=>this.#_()),window.removeEventListener("touchmove",(h)=>{let u=h.touches[0];this.#b(u)}),window.removeEventListener("touchend",()=>this.#_()),this.wrapper.removeEventListener("mousedown",(h)=>this.#c(h)),this.wrapper.removeEventListener("touchstart",(h)=>{let u=h.touches[0];this.#c(u)}),this.resizeTimeout)clearTimeout(this.resizeTimeout);if(this.virtualScroll&&this.config.scrollInput)this.virtualScroll.destroy();if(this.observer)this.observer.disconnect()}get currentSlide(){return this.#u}#f(h){if(this.#u!==h)this.#X=this.#u,this.#u=h,this.onSlideChange?.(this.#u,this.#X)}kill(){this.#h=!1,this.items.forEach((h)=>{h.style.transform=""}),this.current=0,this.target=0,this.speed=0,this.#M=0,this.touchPreviousX=void 0,this.touchPreviousY=void 0,this.isTouching=!1}init(){this.#h=!0,this.#Y=performance.now()}set paused(h){this.#o=h}get paused(){return this.#o}get progress(){if(this.config.variableWidth){let h=this.config.vertical?this.viewport.totalHeight||1:this.viewport.totalWidth||1,u=-this.target;if(this.config.infinite)return(u%h+h)%h/h;else return Math.max(0,Math.min(u,h))/h}else if(this.config.infinite){let h=-this.target,u=this.items.length;return(h%u+u)%u/(u-1)}else{let h=Math.abs(this.current),u=Math.abs(this.maxScroll);return Math.max(0,Math.min(1,h/u))}}resize(){if(this.#n(),this.config.variableWidth&&!this.config.infinite&&this.items.length>0){let o=this.currentSlide,y=this.#s(o);if(this.target=y,Math.abs(this.current-this.target)<1)this.current=y}let h=this.#h,u=this.isVisible;this.#h=!0,this.isVisible=!0,this.update(),this.#h=h,this.isVisible=u}}var V=O;
//# debugId=8F9F6C64614D5CF864756E2164756E21