@studiometa/ui 0.2.11 → 0.2.13

package/molecules/Slider/Slider.cjs

@@ -156,7 +156,7 @@ var Slider = class extends import_js_toolkit.Base {
     }
     this.goTo(this.currentIndex - 1);
   }
-  goTo(index) {
+  goTo(index, { withInstantMove = true } = {}) {
     if (index < 0 || index > this.indexMax) {
       throw new Error("Index out of bound.");
     }
@@ -165,7 +165,7 @@ var Slider = class extends import_js_toolkit.Base {
     const itemsToMove = this.getVisibleItems(state);
     const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);
     itemsToMove.forEach((item) => {
-      if (currentState !== state) {
+      if (currentState !== state && withInstantMove) {
         item.moveInstantly(currentState);
       }
       (0, import_utils.nextFrame)(() => item.move(state));
@@ -178,6 +178,7 @@ var Slider = class extends import_js_toolkit.Base {
   }
   onSliderDragStart() {
     this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
+    this.__distanceX = this.__initialX;
   }
   onSliderDragDrag(props) {
     if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
@@ -197,7 +198,7 @@ var Slider = class extends import_js_toolkit.Base {
     const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);
     const closestIndex = absoluteDifferencesBetweenDistanceAndState.findIndex((number) => number === minimumDifference);
     if (this.$options.fitBounds) {
-      this.goTo(closestIndex);
+      this.goTo(closestIndex, { withInstantMove: false });
     } else {
       if (this.$options.contain) {
         finalX = Math.min(this.containMinState, finalX);

package/molecules/Slider/Slider.d.ts

@@ -182,9 +182,12 @@ export default class Slider extends Base {
      *
      * @this  {SliderInterface}
      * @param {number} index
+     * @param {{ withInstantMove?: boolean }} [options]
      * @returns {void}
      */
-    goTo(this: SliderInterface, index: number): void;
+    goTo(this: SliderInterface, index: number, { withInstantMove }?: {
+        withInstantMove?: boolean;
+    }): void;
     /**
      * Listen to the Draggable `start` event.
      *

package/molecules/Slider/Slider.js

@@ -1 +1 @@
-import{Base as d}from"@studiometa/js-toolkit";import{clamp as c,inertiaFinalValue as u,nextFrame as h,isDev as f}from"@studiometa/js-toolkit/utils";import x from"./SliderDrag.js";import g from"./SliderItem.js";class I extends d{static config={name:"Slider",refs:["wrapper","debug"],emits:["goto","index"],components:{SliderItem:g,SliderDrag:x},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1},dropSensitivity:{type:Number,default:2}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(e){this.currentSliderItem.disactivate(),this.$emit("index",e),this.__currentIndex=e,this.currentSliderItem.activate()}states=[];origins={left:0,center:0,right:0};hasFocus=!1;get currentState(){return this.states[this.currentIndex]}get firstState(){return this.states[0]}get lastState(){return this.states[this.states.length-1]}get containMinState(){return this.getStateValueByMode(this.firstState.x,"left")}get containMaxState(){return this.getStateValueByMode(this.lastState.x,"right")}get indexMax(){return this.$children.SliderItem.length-1}get currentSliderItem(){return this.$children.SliderItem[this.currentIndex]}getStates(){const{wrapper:e}=this.$refs,t=e.getBoundingClientRect();this.origins={left:t.left,center:t.x+t.width/2,right:t.x+t.width};const i=this.$children.SliderItem.map(s=>({x:{left:(s.rect.x-this.origins.left)*-1,center:(s.rect.x+s.rect.width/2-this.origins.center)*-1,right:(s.rect.x+s.rect.width-this.origins.right)*-1}}));if(this.$options.contain){const{mode:s}=this.$options;if(s==="left"){const n=this.$children.SliderItem.at(-1),r=i.find(a=>{const o=n.rect.x-this.origins.left+n.rect.width+a.x.left,l=t.width-o;return l>0?(a.x.left=Math.min(a.x.left+l,0),!0):!1});if(r)return i.map(a=>(a.x.left=Math.max(a.x.left,r.x.left),a))}if(s==="right"){const n=i.findIndex(a=>a.x.right<=0),r=n<0?i.at(-1):i[n-1];return i.map(a=>(a.x.right=n<0?r.x.right:Math.min(a.x.right,0),a))}s==="center"&&f&&console.warn(`[${this.$id}]`,"The `center` mode is not yet compatible with the `contain` mode.")}return i}getOriginByMode(e){return this.origins[e??this.$options.mode]}getStateValueByMode(e,t){return e[t??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){h(()=>{this.states=this.getStates(),h(()=>{this.prepareInvisibleItems(),this.goTo(this.currentIndex)})})}goNext(){this.currentIndex+1>this.indexMax||this.goTo(this.currentIndex+1)}goPrev(){this.currentIndex-1<0||this.goTo(this.currentIndex-1)}goTo(e){if(e<0||e>this.indexMax)throw new Error("Index out of bound.");const t=this.getStateValueByMode(this.currentState.x),i=this.getStateValueByMode(this.states[e].x),s=this.getVisibleItems(i),n=this.getInvisibleItems(i);s.forEach(r=>{t!==i&&r.moveInstantly(t),h(()=>r.move(i))}),n.forEach(r=>{r.moveInstantly(i)}),this.currentIndex=e,this.$emit("goto",e)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0}onSliderDragDrag(e){Math.abs(e.delta.y)>Math.abs(e.delta.x)||(this.__distanceX=this.__initialX+e.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(t=>{t.moveInstantly(this.__distanceX)}))}onSliderDragDrop(e){if(Math.abs(e.delta.y)>Math.abs(e.delta.x))return;let t=c(u(this.__distanceX,e.delta.x*this.$options.dropSensitivity),0,this.getStateValueByMode(this.lastState.x));const i=this.states.map(r=>Math.abs(t-this.getStateValueByMode(r.x))),s=Math.min(...i),n=i.findIndex(r=>r===s);this.$options.fitBounds?this.goTo(n):(this.$options.contain&&(t=Math.min(this.containMinState,t),t=Math.max(this.containMaxState,t)),this.$children.SliderItem.forEach(r=>{r.move(t)}),this.currentIndex=n)}onWrapperFocus(){this.hasFocus=!0}onWrapperBlur(){this.hasFocus=!1}keyed({LEFT:e,RIGHT:t,isDown:i}){this.hasFocus&&i&&(e?this.goPrev():t&&this.goNext())}prepareInvisibleItems(){const e=this.states[this.currentIndex],t=[],i=[];this.getInvisibleItems(this.getStateValueByMode(e.x)).forEach((s,n)=>{if(n>this.currentIndex){t.push(s);return}n<this.currentIndex&&i.push(s)}),t.forEach(s=>{const n=this.getStateWhereItemWillBeInvisible(s);n&&s.moveInstantly(this.getStateValueByMode(n.x))}),i.forEach(s=>{const n=this.getStateWhereItemWillBeInvisible(s,{reversed:!0});n&&s.moveInstantly(this.getStateValueByMode(n.x))})}getStateWhereItemWillBeInvisible(e,{reversed:t=!1}={}){const i=this.states.filter(o=>e.willBeVisible(this.getStateValueByMode(o.x))),s=i[0],n=i[i.length-1],r=this.states.findIndex(o=>this.getStateValueByMode(o.x)===this.getStateValueByMode(s.x)),a=this.states.findIndex(o=>o.x===n.x);return t?this.states[a+1]:this.states[r-1]}getVisibleItems(e){return this.$children.SliderItem.filter(t=>t.isVisible||t.willBeVisible(e))}getInvisibleItems(e){return this.$children.SliderItem.filter(t=>!t.isVisible&&!t.willBeVisible(e))}}export{I as default};
+import{Base as d}from"@studiometa/js-toolkit";import{clamp as c,inertiaFinalValue as u,nextFrame as o,isDev as f}from"@studiometa/js-toolkit/utils";import x from"./SliderDrag.js";import g from"./SliderItem.js";class I extends d{static config={name:"Slider",refs:["wrapper","debug"],emits:["goto","index"],components:{SliderItem:g,SliderDrag:x},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1},dropSensitivity:{type:Number,default:2}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(t){this.currentSliderItem.disactivate(),this.$emit("index",t),this.__currentIndex=t,this.currentSliderItem.activate()}states=[];origins={left:0,center:0,right:0};hasFocus=!1;get currentState(){return this.states[this.currentIndex]}get firstState(){return this.states[0]}get lastState(){return this.states[this.states.length-1]}get containMinState(){return this.getStateValueByMode(this.firstState.x,"left")}get containMaxState(){return this.getStateValueByMode(this.lastState.x,"right")}get indexMax(){return this.$children.SliderItem.length-1}get currentSliderItem(){return this.$children.SliderItem[this.currentIndex]}getStates(){const{wrapper:t}=this.$refs,e=t.getBoundingClientRect();this.origins={left:e.left,center:e.x+e.width/2,right:e.x+e.width};const s=this.$children.SliderItem.map(i=>({x:{left:(i.rect.x-this.origins.left)*-1,center:(i.rect.x+i.rect.width/2-this.origins.center)*-1,right:(i.rect.x+i.rect.width-this.origins.right)*-1}}));if(this.$options.contain){const{mode:i}=this.$options;if(i==="left"){const n=this.$children.SliderItem.at(-1),a=s.find(r=>{const h=n.rect.x-this.origins.left+n.rect.width+r.x.left,l=e.width-h;return l>0?(r.x.left=Math.min(r.x.left+l,0),!0):!1});if(a)return s.map(r=>(r.x.left=Math.max(r.x.left,a.x.left),r))}if(i==="right"){const n=s.findIndex(r=>r.x.right<=0),a=n<0?s.at(-1):s[n-1];return s.map(r=>(r.x.right=n<0?a.x.right:Math.min(r.x.right,0),r))}i==="center"&&f&&console.warn(`[${this.$id}]`,"The `center` mode is not yet compatible with the `contain` mode.")}return s}getOriginByMode(t){return this.origins[t??this.$options.mode]}getStateValueByMode(t,e){return t[e??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){o(()=>{this.states=this.getStates(),o(()=>{this.prepareInvisibleItems(),this.goTo(this.currentIndex)})})}goNext(){this.currentIndex+1>this.indexMax||this.goTo(this.currentIndex+1)}goPrev(){this.currentIndex-1<0||this.goTo(this.currentIndex-1)}goTo(t,{withInstantMove:e=!0}={}){if(t<0||t>this.indexMax)throw new Error("Index out of bound.");const s=this.getStateValueByMode(this.currentState.x),i=this.getStateValueByMode(this.states[t].x),n=this.getVisibleItems(i),a=this.getInvisibleItems(i);n.forEach(r=>{s!==i&&e&&r.moveInstantly(s),o(()=>r.move(i))}),a.forEach(r=>{r.moveInstantly(i)}),this.currentIndex=t,this.$emit("goto",t)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0,this.__distanceX=this.__initialX}onSliderDragDrag(t){Math.abs(t.delta.y)>Math.abs(t.delta.x)||(this.__distanceX=this.__initialX+t.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(e=>{e.moveInstantly(this.__distanceX)}))}onSliderDragDrop(t){if(Math.abs(t.delta.y)>Math.abs(t.delta.x))return;let e=c(u(this.__distanceX,t.delta.x*this.$options.dropSensitivity),0,this.getStateValueByMode(this.lastState.x));const s=this.states.map(a=>Math.abs(e-this.getStateValueByMode(a.x))),i=Math.min(...s),n=s.findIndex(a=>a===i);this.$options.fitBounds?this.goTo(n,{withInstantMove:!1}):(this.$options.contain&&(e=Math.min(this.containMinState,e),e=Math.max(this.containMaxState,e)),this.$children.SliderItem.forEach(a=>{a.move(e)}),this.currentIndex=n)}onWrapperFocus(){this.hasFocus=!0}onWrapperBlur(){this.hasFocus=!1}keyed({LEFT:t,RIGHT:e,isDown:s}){this.hasFocus&&s&&(t?this.goPrev():e&&this.goNext())}prepareInvisibleItems(){const t=this.states[this.currentIndex],e=[],s=[];this.getInvisibleItems(this.getStateValueByMode(t.x)).forEach((i,n)=>{if(n>this.currentIndex){e.push(i);return}n<this.currentIndex&&s.push(i)}),e.forEach(i=>{const n=this.getStateWhereItemWillBeInvisible(i);n&&i.moveInstantly(this.getStateValueByMode(n.x))}),s.forEach(i=>{const n=this.getStateWhereItemWillBeInvisible(i,{reversed:!0});n&&i.moveInstantly(this.getStateValueByMode(n.x))})}getStateWhereItemWillBeInvisible(t,{reversed:e=!1}={}){const s=this.states.filter(h=>t.willBeVisible(this.getStateValueByMode(h.x))),i=s[0],n=s[s.length-1],a=this.states.findIndex(h=>this.getStateValueByMode(h.x)===this.getStateValueByMode(i.x)),r=this.states.findIndex(h=>h.x===n.x);return e?this.states[r+1]:this.states[a-1]}getVisibleItems(t){return this.$children.SliderItem.filter(e=>e.isVisible||e.willBeVisible(t))}getInvisibleItems(t){return this.$children.SliderItem.filter(e=>!e.isVisible&&!e.willBeVisible(t))}}export{I as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"