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