@studiometa/ui 0.2.12 → 0.2.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -178,6 +178,7 @@ var Slider = class extends import_js_toolkit.Base {
|
|
|
178
178
|
}
|
|
179
179
|
onSliderDragStart() {
|
|
180
180
|
this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
|
|
181
|
+
this.__distanceX = this.__initialX;
|
|
181
182
|
}
|
|
182
183
|
onSliderDragDrag(props) {
|
|
183
184
|
if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Base as d}from"@studiometa/js-toolkit";import{clamp as c,inertiaFinalValue as u,nextFrame as
|
|
1
|
+
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};
|