@studiometa/ui 0.2.6 → 0.2.7
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.
|
@@ -48,6 +48,11 @@ var Slider = class extends import_js_toolkit.Base {
|
|
|
48
48
|
this.currentSliderItem.activate();
|
|
49
49
|
}
|
|
50
50
|
states = [];
|
|
51
|
+
origins = {
|
|
52
|
+
left: 0,
|
|
53
|
+
center: 0,
|
|
54
|
+
right: 0
|
|
55
|
+
};
|
|
51
56
|
get currentState() {
|
|
52
57
|
return this.states[this.currentIndex];
|
|
53
58
|
}
|
|
@@ -72,7 +77,7 @@ var Slider = class extends import_js_toolkit.Base {
|
|
|
72
77
|
getStates() {
|
|
73
78
|
const { wrapper } = this.$refs;
|
|
74
79
|
const originRect = wrapper.getBoundingClientRect();
|
|
75
|
-
|
|
80
|
+
this.origins = {
|
|
76
81
|
left: originRect.left,
|
|
77
82
|
center: originRect.x + originRect.width / 2,
|
|
78
83
|
right: originRect.x + originRect.width
|
|
@@ -80,13 +85,16 @@ var Slider = class extends import_js_toolkit.Base {
|
|
|
80
85
|
return this.$children.SliderItem.map((item) => {
|
|
81
86
|
return {
|
|
82
87
|
x: {
|
|
83
|
-
left: (item.rect.x - origins.left) * -1,
|
|
84
|
-
center: (item.rect.x + item.rect.width / 2 - origins.center) * -1,
|
|
85
|
-
right: (item.rect.x + item.rect.width - origins.right) * -1
|
|
88
|
+
left: (item.rect.x - this.origins.left) * -1,
|
|
89
|
+
center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,
|
|
90
|
+
right: (item.rect.x + item.rect.width - this.origins.right) * -1
|
|
86
91
|
}
|
|
87
92
|
};
|
|
88
93
|
});
|
|
89
94
|
}
|
|
95
|
+
getOriginByMode(mode) {
|
|
96
|
+
return this.origins[mode ?? this.$options.mode];
|
|
97
|
+
}
|
|
90
98
|
getStateValueByMode(state, mode) {
|
|
91
99
|
return state[mode ?? this.$options.mode];
|
|
92
100
|
}
|
|
@@ -75,6 +75,11 @@ export default class Slider extends Base {
|
|
|
75
75
|
* @type {SliderState[]}
|
|
76
76
|
*/
|
|
77
77
|
states: SliderState[];
|
|
78
|
+
/**
|
|
79
|
+
* Origins for the different modes.
|
|
80
|
+
* @type {Record<SliderModes, number>}
|
|
81
|
+
*/
|
|
82
|
+
origins: Record<SliderModes, number>;
|
|
78
83
|
/**
|
|
79
84
|
* Get the current state.
|
|
80
85
|
* @returns {SliderState}
|
|
@@ -127,6 +132,12 @@ export default class Slider extends Base {
|
|
|
127
132
|
right: number;
|
|
128
133
|
};
|
|
129
134
|
}[];
|
|
135
|
+
/**
|
|
136
|
+
* Get an origin by mode.
|
|
137
|
+
* @param {SliderOptions['mode']} [mode]
|
|
138
|
+
* @returns {number}
|
|
139
|
+
*/
|
|
140
|
+
getOriginByMode(mode?: SliderOptions['mode']): number;
|
|
130
141
|
/**
|
|
131
142
|
* Get a state value according to the given mode.
|
|
132
143
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Base as o}from"@studiometa/js-toolkit";import{clamp as d,inertiaFinalValue as c,nextFrame as h}from"@studiometa/js-toolkit/utils";import u from"./SliderDrag.js";import
|
|
1
|
+
import{Base as o}from"@studiometa/js-toolkit";import{clamp as d,inertiaFinalValue as c,nextFrame as h}from"@studiometa/js-toolkit/utils";import u from"./SliderDrag.js";import g from"./SliderItem.js";class x extends o{static config={name:"Slider",refs:["wrapper"],emits:["goto","index"],components:{SliderItem:g,SliderDrag:u},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1}}};__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};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();return this.origins={left:t.left,center:t.x+t.width/2,right:t.x+t.width},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}}))}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.");let t=this.getStateValueByMode(this.states[e].x);this.$options.contain&&(this.$children.SliderItem[this.indexMax].willBeFullyVisible(t)?t=this.getStateValueByMode(this.lastState.x,"right"):this.$children.SliderItem[0].willBeFullyVisible(t)&&(t=this.getStateValueByMode(this.firstState.x,"left")));const i=this.getVisibleItems(t);e<this.currentIndex&&i.reverse(),i.forEach(s=>{h(()=>s.move(t))}),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=d(c(this.__distanceX,e.delta.x*this.$options.sensitivity),0,this.getStateValueByMode(this.lastState.x));const i=this.states.map(n=>Math.abs(t-this.getStateValueByMode(n.x))),s=Math.min(...i),r=i.findIndex(n=>n===s);this.$options.fitBounds?this.goTo(r):(this.$options.contain&&(t=Math.min(this.containMinState,t),t=Math.max(this.containMaxState,t)),this.$children.SliderItem.forEach(n=>{n.move(t)}),this.currentIndex=r)}prepareInvisibleItems(){const e=this.states[this.currentIndex],t=[],i=[];this.getInvisibleItems(this.getStateValueByMode(e.x)).forEach((s,r)=>{if(r>this.currentIndex){t.push(s);return}r<this.currentIndex&&i.push(s)}),t.forEach(s=>{const r=this.getStateWhereItemWillBeInvisible(s);r&&s.moveInstantly(this.getStateValueByMode(r.x))}),i.forEach(s=>{const r=this.getStateWhereItemWillBeInvisible(s,{reversed:!0});r&&s.moveInstantly(this.getStateValueByMode(r.x))})}getStateWhereItemWillBeInvisible(e,{reversed:t=!1}={}){const i=this.states.filter(a=>e.willBeVisible(this.getStateValueByMode(a.x))),s=i[0],r=i[i.length-1],n=this.states.findIndex(a=>this.getStateValueByMode(a.x)===this.getStateValueByMode(s.x)),l=this.states.findIndex(a=>a.x===r.x);return t?this.states[l+1]:this.states[n-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{x as default};
|
|
@@ -57,9 +57,7 @@ var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(i
|
|
|
57
57
|
}
|
|
58
58
|
ticked() {
|
|
59
59
|
this.dampedX = (0, import_utils.damp)(this.x, this.dampedX, 0.2, 1e-5);
|
|
60
|
-
this
|
|
61
|
-
translateX: this.dampedX
|
|
62
|
-
})} translateZ(0px)`;
|
|
60
|
+
this.render();
|
|
63
61
|
if (this.dampedX === this.x) {
|
|
64
62
|
this.$services.disable("ticked");
|
|
65
63
|
}
|
|
@@ -79,8 +77,11 @@ var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(i
|
|
|
79
77
|
moveInstantly(targetPosition) {
|
|
80
78
|
this.x = targetPosition;
|
|
81
79
|
this.dampedX = targetPosition;
|
|
80
|
+
this.render();
|
|
81
|
+
}
|
|
82
|
+
render() {
|
|
82
83
|
this.$el.style.transform = `${(0, import_utils.matrix)({
|
|
83
|
-
translateX:
|
|
84
|
+
translateX: this.dampedX
|
|
84
85
|
})} translateZ(0px)`;
|
|
85
86
|
}
|
|
86
87
|
willBeVisible(targetPosition) {
|
|
@@ -81,6 +81,11 @@ export default class SliderItem extends Base {
|
|
|
81
81
|
* @returns {void}
|
|
82
82
|
*/
|
|
83
83
|
moveInstantly(targetPosition: number): void;
|
|
84
|
+
/**
|
|
85
|
+
* Render the transform.
|
|
86
|
+
* @returns {void}
|
|
87
|
+
*/
|
|
88
|
+
render(): void;
|
|
84
89
|
/**
|
|
85
90
|
* Check if SliderItem is partially visible for the given target position.
|
|
86
91
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Base as
|
|
1
|
+
import{Base as i,withIntersectionObserver as s}from"@studiometa/js-toolkit";import{matrix as d,damp as h}from"@studiometa/js-toolkit/utils";class r extends s(i,{threshold:[0,1]}){static config={name:"SliderItem",emits:["is-fully-visible","is-partially-visible","is-hidden"]};isVisible=!1;x=0;dampedX=0;mounted(){this.updateRectAdjustedWithX()}resized(){this.updateRectAdjustedWithX()}destroyed(){this.moveInstantly(0)}intersected([{intersectionRatio:e,isIntersecting:t}]){e>=1?(this.$emit("is-fully-visible"),this.$el.setAttribute("aria-hidden","false")):e>0?(this.$emit("is-partially-visible"),this.$el.setAttribute("aria-hidden","true")):(this.$emit("is-hidden"),this.$el.setAttribute("aria-hidden","true")),this.isVisible=t}ticked(){this.dampedX=h(this.x,this.dampedX,.2,1e-5),this.render(),this.dampedX===this.x&&this.$services.disable("ticked")}activate(){this.$el.classList.add("is-active")}disactivate(){this.$el.classList.remove("is-active")}move(e){this.x=e,this.$services.has("ticked")||this.$services.enable("ticked")}moveInstantly(e){this.x=e,this.dampedX=e,this.render()}render(){this.$el.style.transform=`${d({translateX:this.dampedX})} translateZ(0px)`}willBeVisible(e){return this.rect.x+e<window.innerWidth*1.5&&this.rect.x+e+this.rect.width>window.innerWidth*-.5}willBeFullyVisible(e){return this.rect.x+e<window.innerWidth&&this.rect.x+e>0&&this.rect.x+e+this.rect.width<window.innerWidth&&this.rect.x+e+this.rect.width>0}updateRectAdjustedWithX(){const e=this.x*-1,t=this.$el.getBoundingClientRect().toJSON();this.rect={...t,left:t.left+e,right:t.left+e+t.width,x:t.left+e}}}export{r as default};
|