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