@studiometa/ui 1.0.0-alpha.1 → 1.0.0-alpha.2
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.
- package/atoms/Data/DataBind.d.ts +1 -1
- package/atoms/Data/DataBind.js +9 -2
- package/atoms/Data/DataBind.js.map +2 -2
- package/atoms/Data/DataComputed.js +1 -1
- package/atoms/Data/DataComputed.js.map +2 -2
- package/atoms/Data/DataModel.js +1 -1
- package/atoms/Data/DataModel.js.map +2 -2
- package/package.json +1 -1
- package/atoms/Action/Action.cjs +0 -115
- package/atoms/Action/Action.cjs.map +0 -7
- package/atoms/Action/Target.cjs +0 -35
- package/atoms/Action/Target.cjs.map +0 -7
- package/atoms/Action/index.cjs +0 -22
- package/atoms/Action/index.cjs.map +0 -7
- package/atoms/AnchorScrollTo/AnchorScrollTo.cjs +0 -52
- package/atoms/AnchorScrollTo/AnchorScrollTo.cjs.map +0 -7
- package/atoms/AnchorScrollTo/index.cjs +0 -21
- package/atoms/AnchorScrollTo/index.cjs.map +0 -7
- package/atoms/CircularMarquee/CircularMarquee.cjs +0 -69
- package/atoms/CircularMarquee/CircularMarquee.cjs.map +0 -7
- package/atoms/CircularMarquee/index.cjs +0 -21
- package/atoms/CircularMarquee/index.cjs.map +0 -7
- package/atoms/Cursor/Cursor.cjs +0 -137
- package/atoms/Cursor/Cursor.cjs.map +0 -7
- package/atoms/Cursor/index.cjs +0 -21
- package/atoms/Cursor/index.cjs.map +0 -7
- package/atoms/Data/DataBind.cjs +0 -124
- package/atoms/Data/DataBind.cjs.map +0 -7
- package/atoms/Data/DataComputed.cjs +0 -49
- package/atoms/Data/DataComputed.cjs.map +0 -7
- package/atoms/Data/DataEffect.cjs +0 -47
- package/atoms/Data/DataEffect.cjs.map +0 -7
- package/atoms/Data/DataModel.cjs +0 -48
- package/atoms/Data/DataModel.cjs.map +0 -7
- package/atoms/Data/index.cjs +0 -24
- package/atoms/Data/index.cjs.map +0 -7
- package/atoms/Data/utils.cjs +0 -46
- package/atoms/Data/utils.cjs.map +0 -7
- package/atoms/Figure/Figure.cjs +0 -105
- package/atoms/Figure/Figure.cjs.map +0 -7
- package/atoms/Figure/FigureTwicpics.cjs +0 -123
- package/atoms/Figure/FigureTwicpics.cjs.map +0 -7
- package/atoms/Figure/index.cjs +0 -22
- package/atoms/Figure/index.cjs.map +0 -7
- package/atoms/FigureVideo/FigureVideo.cjs +0 -132
- package/atoms/FigureVideo/FigureVideo.cjs.map +0 -7
- package/atoms/FigureVideo/FigureVideoTwicpics.cjs +0 -153
- package/atoms/FigureVideo/FigureVideoTwicpics.cjs.map +0 -7
- package/atoms/FigureVideo/index.cjs +0 -22
- package/atoms/FigureVideo/index.cjs.map +0 -7
- package/atoms/LargeText/LargeText.cjs +0 -109
- package/atoms/LargeText/LargeText.cjs.map +0 -7
- package/atoms/LargeText/index.cjs +0 -21
- package/atoms/LargeText/index.cjs.map +0 -7
- package/atoms/LazyInclude/LazyInclude.cjs +0 -78
- package/atoms/LazyInclude/LazyInclude.cjs.map +0 -7
- package/atoms/LazyInclude/index.cjs +0 -21
- package/atoms/LazyInclude/index.cjs.map +0 -7
- package/atoms/Prefetch/AbstractPrefetch.cjs +0 -86
- package/atoms/Prefetch/AbstractPrefetch.cjs.map +0 -7
- package/atoms/Prefetch/PrefetchWhenOver.cjs +0 -42
- package/atoms/Prefetch/PrefetchWhenOver.cjs.map +0 -7
- package/atoms/Prefetch/PrefetchWhenVisible.cjs +0 -43
- package/atoms/Prefetch/PrefetchWhenVisible.cjs.map +0 -7
- package/atoms/Prefetch/index.cjs +0 -23
- package/atoms/Prefetch/index.cjs.map +0 -7
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs +0 -95
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs.map +0 -7
- package/atoms/ScrollAnimation/ScrollAnimation.cjs +0 -44
- package/atoms/ScrollAnimation/ScrollAnimation.cjs.map +0 -7
- package/atoms/ScrollAnimation/ScrollAnimationChild.cjs +0 -84
- package/atoms/ScrollAnimation/ScrollAnimationChild.cjs.map +0 -7
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs +0 -37
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs.map +0 -7
- package/atoms/ScrollAnimation/ScrollAnimationParent.cjs +0 -50
- package/atoms/ScrollAnimation/ScrollAnimationParent.cjs.map +0 -7
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs +0 -37
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs.map +0 -7
- package/atoms/ScrollAnimation/animationScrollWithEase.cjs +0 -59
- package/atoms/ScrollAnimation/animationScrollWithEase.cjs.map +0 -7
- package/atoms/ScrollAnimation/index.cjs +0 -27
- package/atoms/ScrollAnimation/index.cjs.map +0 -7
- package/atoms/ScrollReveal/ScrollReveal.cjs +0 -81
- package/atoms/ScrollReveal/ScrollReveal.cjs.map +0 -7
- package/atoms/ScrollReveal/index.cjs +0 -21
- package/atoms/ScrollReveal/index.cjs.map +0 -7
- package/atoms/index.cjs +0 -32
- package/atoms/index.cjs.map +0 -7
- package/decorators/index.cjs +0 -22
- package/decorators/index.cjs.map +0 -7
- package/decorators/withDeprecation.cjs +0 -47
- package/decorators/withDeprecation.cjs.map +0 -7
- package/decorators/withTransition.cjs +0 -86
- package/decorators/withTransition.cjs.map +0 -7
- package/index.cjs +0 -25
- package/index.cjs.map +0 -7
- package/molecules/Accordion/Accordion.cjs +0 -36
- package/molecules/Accordion/Accordion.cjs.map +0 -7
- package/molecules/Accordion/AccordionCore.cjs +0 -58
- package/molecules/Accordion/AccordionCore.cjs.map +0 -7
- package/molecules/Accordion/AccordionItem.cjs +0 -206
- package/molecules/Accordion/AccordionItem.cjs.map +0 -7
- package/molecules/Accordion/index.cjs +0 -22
- package/molecules/Accordion/index.cjs.map +0 -7
- package/molecules/AnchorNav/AnchorNav.cjs +0 -63
- package/molecules/AnchorNav/AnchorNav.cjs.map +0 -7
- package/molecules/AnchorNav/AnchorNavLink.cjs +0 -40
- package/molecules/AnchorNav/AnchorNavLink.cjs.map +0 -7
- package/molecules/AnchorNav/AnchorNavTarget.cjs +0 -35
- package/molecules/AnchorNav/AnchorNavTarget.cjs.map +0 -7
- package/molecules/AnchorNav/index.cjs +0 -23
- package/molecules/AnchorNav/index.cjs.map +0 -7
- package/molecules/Menu/Menu.cjs +0 -177
- package/molecules/Menu/Menu.cjs.map +0 -7
- package/molecules/Menu/MenuBtn.cjs +0 -66
- package/molecules/Menu/MenuBtn.cjs.map +0 -7
- package/molecules/Menu/MenuList.cjs +0 -165
- package/molecules/Menu/MenuList.cjs.map +0 -7
- package/molecules/Menu/index.cjs +0 -23
- package/molecules/Menu/index.cjs.map +0 -7
- package/molecules/Modal/Modal.cjs +0 -219
- package/molecules/Modal/Modal.cjs.map +0 -7
- package/molecules/Modal/ModalWithTransition.cjs +0 -69
- package/molecules/Modal/ModalWithTransition.cjs.map +0 -7
- package/molecules/Modal/index.cjs +0 -22
- package/molecules/Modal/index.cjs.map +0 -7
- package/molecules/Panel/Panel.cjs +0 -137
- package/molecules/Panel/Panel.cjs.map +0 -7
- package/molecules/Panel/index.cjs +0 -21
- package/molecules/Panel/index.cjs.map +0 -7
- package/molecules/Slider/AbstractSliderChild.cjs +0 -88
- package/molecules/Slider/AbstractSliderChild.cjs.map +0 -7
- package/molecules/Slider/Slider.cjs +0 -404
- package/molecules/Slider/Slider.cjs.map +0 -7
- package/molecules/Slider/SliderBtn.cjs +0 -71
- package/molecules/Slider/SliderBtn.cjs.map +0 -7
- package/molecules/Slider/SliderCount.cjs +0 -44
- package/molecules/Slider/SliderCount.cjs.map +0 -7
- package/molecules/Slider/SliderDots.cjs +0 -64
- package/molecules/Slider/SliderDots.cjs.map +0 -7
- package/molecules/Slider/SliderDrag.cjs +0 -66
- package/molecules/Slider/SliderDrag.cjs.map +0 -7
- package/molecules/Slider/SliderItem.cjs +0 -177
- package/molecules/Slider/SliderItem.cjs.map +0 -7
- package/molecules/Slider/SliderProgress.cjs +0 -49
- package/molecules/Slider/SliderProgress.cjs.map +0 -7
- package/molecules/Slider/index.cjs +0 -28
- package/molecules/Slider/index.cjs.map +0 -7
- package/molecules/Sticky/Sticky.cjs +0 -177
- package/molecules/Sticky/Sticky.cjs.map +0 -7
- package/molecules/Sticky/index.cjs +0 -21
- package/molecules/Sticky/index.cjs.map +0 -7
- package/molecules/TableOfContent/TableOfContent.cjs +0 -72
- package/molecules/TableOfContent/TableOfContent.cjs.map +0 -7
- package/molecules/TableOfContent/TableOfContentAnchor.cjs +0 -76
- package/molecules/TableOfContent/TableOfContentAnchor.cjs.map +0 -7
- package/molecules/TableOfContent/index.cjs +0 -22
- package/molecules/TableOfContent/index.cjs.map +0 -7
- package/molecules/Tabs/Tabs.cjs +0 -153
- package/molecules/Tabs/Tabs.cjs.map +0 -7
- package/molecules/Tabs/index.cjs +0 -21
- package/molecules/Tabs/index.cjs.map +0 -7
- package/molecules/index.cjs +0 -30
- package/molecules/index.cjs.map +0 -7
- package/organisms/Frame/Frame.cjs +0 -220
- package/organisms/Frame/Frame.cjs.map +0 -7
- package/organisms/Frame/FrameAnchor.cjs +0 -41
- package/organisms/Frame/FrameAnchor.cjs.map +0 -7
- package/organisms/Frame/FrameForm.cjs +0 -41
- package/organisms/Frame/FrameForm.cjs.map +0 -7
- package/organisms/Frame/FrameTarget.cjs +0 -114
- package/organisms/Frame/FrameTarget.cjs.map +0 -7
- package/organisms/Frame/index.cjs +0 -24
- package/organisms/Frame/index.cjs.map +0 -7
- package/organisms/index.cjs +0 -21
- package/organisms/index.cjs.map +0 -7
- package/primitives/Draggable/Draggable.cjs +0 -65
- package/primitives/Draggable/Draggable.cjs.map +0 -7
- package/primitives/Draggable/index.cjs +0 -21
- package/primitives/Draggable/index.cjs.map +0 -7
- package/primitives/Sentinel/Sentinel.cjs +0 -35
- package/primitives/Sentinel/Sentinel.cjs.map +0 -7
- package/primitives/Sentinel/index.cjs +0 -21
- package/primitives/Sentinel/index.cjs.map +0 -7
- package/primitives/Transition/Transition.cjs +0 -36
- package/primitives/Transition/Transition.cjs.map +0 -7
- package/primitives/Transition/index.cjs +0 -21
- package/primitives/Transition/index.cjs.map +0 -7
- package/primitives/index.cjs +0 -23
- package/primitives/index.cjs.map +0 -7
|
@@ -1,404 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all)
|
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
-
};
|
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
-
for (let key of __getOwnPropNames(from))
|
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
-
}
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
-
|
|
19
|
-
// packages/ui/molecules/Slider/Slider.ts
|
|
20
|
-
var Slider_exports = {};
|
|
21
|
-
__export(Slider_exports, {
|
|
22
|
-
Slider: () => Slider
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(Slider_exports);
|
|
25
|
-
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
26
|
-
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
27
|
-
var import_SliderDrag = require("./SliderDrag.cjs");
|
|
28
|
-
var import_SliderItem = require("./SliderItem.cjs");
|
|
29
|
-
var Slider = class extends import_js_toolkit.Base {
|
|
30
|
-
/**
|
|
31
|
-
* Config.
|
|
32
|
-
*/
|
|
33
|
-
static config = {
|
|
34
|
-
name: "Slider",
|
|
35
|
-
refs: ["wrapper", "debug"],
|
|
36
|
-
emits: ["goto", "index"],
|
|
37
|
-
components: {
|
|
38
|
-
SliderItem: import_SliderItem.SliderItem,
|
|
39
|
-
SliderDrag: import_SliderDrag.SliderDrag
|
|
40
|
-
},
|
|
41
|
-
options: {
|
|
42
|
-
mode: { type: String, default: "left" },
|
|
43
|
-
fitBounds: Boolean,
|
|
44
|
-
contain: Boolean,
|
|
45
|
-
sensitivity: { type: Number, default: 1 },
|
|
46
|
-
dropSensitivity: { type: Number, default: 2 }
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
__distanceX = 0;
|
|
50
|
-
__initialX = 0;
|
|
51
|
-
/**
|
|
52
|
-
* Index of the current active slide.
|
|
53
|
-
*/
|
|
54
|
-
__currentIndex = 0;
|
|
55
|
-
__isDragging = false;
|
|
56
|
-
/**
|
|
57
|
-
* Get the current index.
|
|
58
|
-
*/
|
|
59
|
-
get currentIndex() {
|
|
60
|
-
return this.__currentIndex;
|
|
61
|
-
}
|
|
62
|
-
/**
|
|
63
|
-
* Set the current index and emit the `index` event.
|
|
64
|
-
*/
|
|
65
|
-
set currentIndex(value) {
|
|
66
|
-
this.currentSliderItem.disactivate();
|
|
67
|
-
this.$emit("index", value);
|
|
68
|
-
this.__currentIndex = value;
|
|
69
|
-
this.currentSliderItem.activate();
|
|
70
|
-
}
|
|
71
|
-
/**
|
|
72
|
-
* Store all the states.
|
|
73
|
-
*/
|
|
74
|
-
states = [];
|
|
75
|
-
/**
|
|
76
|
-
* Origins for the different modes.
|
|
77
|
-
*/
|
|
78
|
-
origins = {
|
|
79
|
-
left: 0,
|
|
80
|
-
center: 0,
|
|
81
|
-
right: 0
|
|
82
|
-
};
|
|
83
|
-
/**
|
|
84
|
-
* Wether or not the wrapper is focused.
|
|
85
|
-
* @type {boolean}
|
|
86
|
-
*/
|
|
87
|
-
hasFocus = false;
|
|
88
|
-
/**
|
|
89
|
-
* Get the current state.
|
|
90
|
-
*/
|
|
91
|
-
get currentState() {
|
|
92
|
-
return this.states[this.currentIndex];
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* Get the first state.
|
|
96
|
-
*/
|
|
97
|
-
get firstState() {
|
|
98
|
-
return this.states[0];
|
|
99
|
-
}
|
|
100
|
-
/**
|
|
101
|
-
* Get the last state.
|
|
102
|
-
*/
|
|
103
|
-
get lastState() {
|
|
104
|
-
return this.states.at(-1);
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* Get the minimal contain state value.
|
|
108
|
-
*/
|
|
109
|
-
get containMinState() {
|
|
110
|
-
return this.getStateValueByMode(this.firstState.x, "left");
|
|
111
|
-
}
|
|
112
|
-
/**
|
|
113
|
-
* Get the maximal contain state value.
|
|
114
|
-
*/
|
|
115
|
-
get containMaxState() {
|
|
116
|
-
return this.getStateValueByMode(this.lastState.x, "right");
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* Get the last index.
|
|
120
|
-
*/
|
|
121
|
-
get indexMax() {
|
|
122
|
-
return this.$children.SliderItem.length - 1;
|
|
123
|
-
}
|
|
124
|
-
/**
|
|
125
|
-
* Get the current SliderItem
|
|
126
|
-
*/
|
|
127
|
-
get currentSliderItem() {
|
|
128
|
-
return this.$children.SliderItem[this.currentIndex];
|
|
129
|
-
}
|
|
130
|
-
/**
|
|
131
|
-
* Get the states for each SliderItem.
|
|
132
|
-
*/
|
|
133
|
-
getStates() {
|
|
134
|
-
const { wrapper } = this.$refs;
|
|
135
|
-
const originRect = wrapper.getBoundingClientRect();
|
|
136
|
-
this.origins = {
|
|
137
|
-
left: originRect.left,
|
|
138
|
-
center: originRect.x + originRect.width / 2,
|
|
139
|
-
right: originRect.x + originRect.width
|
|
140
|
-
};
|
|
141
|
-
const states = this.$children.SliderItem.map((item) => ({
|
|
142
|
-
x: {
|
|
143
|
-
left: (item.rect.x - this.origins.left) * -1,
|
|
144
|
-
center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,
|
|
145
|
-
right: (item.rect.x + item.rect.width - this.origins.right) * -1
|
|
146
|
-
}
|
|
147
|
-
}));
|
|
148
|
-
if (this.$options.contain) {
|
|
149
|
-
const { mode } = this.$options;
|
|
150
|
-
if (mode === "left") {
|
|
151
|
-
const lastChild = this.$children.SliderItem.at(-1);
|
|
152
|
-
const maxState = states.find((state) => {
|
|
153
|
-
const lastChildPosition = lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;
|
|
154
|
-
const diffWithWrapperBound = originRect.width - lastChildPosition;
|
|
155
|
-
if (diffWithWrapperBound > 0) {
|
|
156
|
-
state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);
|
|
157
|
-
return true;
|
|
158
|
-
}
|
|
159
|
-
return false;
|
|
160
|
-
});
|
|
161
|
-
if (maxState) {
|
|
162
|
-
return states.map((state) => {
|
|
163
|
-
state.x.left = Math.max(state.x.left, maxState.x.left);
|
|
164
|
-
return state;
|
|
165
|
-
});
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
if (mode === "right") {
|
|
169
|
-
const maxStateIndex = states.findIndex((state) => state.x.right <= 0);
|
|
170
|
-
const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];
|
|
171
|
-
return states.map((state) => {
|
|
172
|
-
state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);
|
|
173
|
-
return state;
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
|
-
if (mode === "center" && import_utils.isDev) {
|
|
177
|
-
console.warn(
|
|
178
|
-
`[${this.$id}]`,
|
|
179
|
-
"The `center` mode is not yet compatible with the `contain` mode."
|
|
180
|
-
);
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
return states;
|
|
184
|
-
}
|
|
185
|
-
/**
|
|
186
|
-
* Get an origin by mode.
|
|
187
|
-
*/
|
|
188
|
-
getOriginByMode(mode) {
|
|
189
|
-
return this.origins[mode ?? this.$options.mode];
|
|
190
|
-
}
|
|
191
|
-
/**
|
|
192
|
-
* Get a state value according to the given mode.
|
|
193
|
-
*/
|
|
194
|
-
getStateValueByMode(state, mode) {
|
|
195
|
-
return state[mode ?? this.$options.mode];
|
|
196
|
-
}
|
|
197
|
-
/**
|
|
198
|
-
* Mounted hook.
|
|
199
|
-
*/
|
|
200
|
-
mounted() {
|
|
201
|
-
this.states = this.getStates();
|
|
202
|
-
this.setAccessibilityAttributes();
|
|
203
|
-
this.prepareInvisibleItems();
|
|
204
|
-
this.goTo(this.currentIndex);
|
|
205
|
-
}
|
|
206
|
-
/**
|
|
207
|
-
* Resized hook.
|
|
208
|
-
*/
|
|
209
|
-
resized() {
|
|
210
|
-
(0, import_utils.nextFrame)(() => {
|
|
211
|
-
this.states = this.getStates();
|
|
212
|
-
(0, import_utils.nextFrame)(() => {
|
|
213
|
-
this.prepareInvisibleItems();
|
|
214
|
-
this.goTo(this.currentIndex);
|
|
215
|
-
});
|
|
216
|
-
});
|
|
217
|
-
}
|
|
218
|
-
/**
|
|
219
|
-
* Set accessibility attributes for the component
|
|
220
|
-
*/
|
|
221
|
-
setAccessibilityAttributes() {
|
|
222
|
-
this.$el.setAttribute("role", "group");
|
|
223
|
-
this.$el.setAttribute("aria-roledescription", "carousel");
|
|
224
|
-
}
|
|
225
|
-
/**
|
|
226
|
-
* Go to the next slide.
|
|
227
|
-
*/
|
|
228
|
-
goNext() {
|
|
229
|
-
if (this.currentIndex + 1 > this.indexMax) {
|
|
230
|
-
return;
|
|
231
|
-
}
|
|
232
|
-
this.goTo(this.currentIndex + 1);
|
|
233
|
-
}
|
|
234
|
-
/**
|
|
235
|
-
* Go to the previous slide.
|
|
236
|
-
*/
|
|
237
|
-
goPrev() {
|
|
238
|
-
if (this.currentIndex - 1 < 0) {
|
|
239
|
-
return;
|
|
240
|
-
}
|
|
241
|
-
this.goTo(this.currentIndex - 1);
|
|
242
|
-
}
|
|
243
|
-
/**
|
|
244
|
-
* Go to the given index.
|
|
245
|
-
*/
|
|
246
|
-
goTo(index, { withInstantMove = true } = {}) {
|
|
247
|
-
if (index < 0 || index > this.indexMax) {
|
|
248
|
-
throw new Error("Index out of bound.");
|
|
249
|
-
}
|
|
250
|
-
const currentState = this.getStateValueByMode(this.currentState.x);
|
|
251
|
-
const state = this.getStateValueByMode(this.states[index].x);
|
|
252
|
-
const itemsToMove = this.getVisibleItems(state);
|
|
253
|
-
const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);
|
|
254
|
-
itemsToMove.forEach((item) => {
|
|
255
|
-
if (currentState !== state && withInstantMove) {
|
|
256
|
-
item.moveInstantly(currentState);
|
|
257
|
-
}
|
|
258
|
-
(0, import_utils.nextFrame)(() => item.move(state));
|
|
259
|
-
});
|
|
260
|
-
invisibleItemsToMoveInstantly.forEach((item) => {
|
|
261
|
-
item.moveInstantly(state);
|
|
262
|
-
});
|
|
263
|
-
this.currentIndex = index;
|
|
264
|
-
this.$emit("goto", index);
|
|
265
|
-
}
|
|
266
|
-
/**
|
|
267
|
-
* Listen to the Draggable `start` event.
|
|
268
|
-
*/
|
|
269
|
-
onSliderDragStart() {
|
|
270
|
-
this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
|
|
271
|
-
this.__distanceX = this.__initialX;
|
|
272
|
-
this.__isDragging = true;
|
|
273
|
-
}
|
|
274
|
-
/**
|
|
275
|
-
* Listen to the Draggable `drag` event.
|
|
276
|
-
*/
|
|
277
|
-
onSliderDragDrag(props) {
|
|
278
|
-
if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
|
|
279
|
-
return;
|
|
280
|
-
}
|
|
281
|
-
this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;
|
|
282
|
-
this.getVisibleItems(this.__distanceX).forEach((item) => {
|
|
283
|
-
item.moveInstantly(this.__distanceX);
|
|
284
|
-
});
|
|
285
|
-
}
|
|
286
|
-
/**
|
|
287
|
-
* Listen to the Draggable `drop` event and find the new active slide.
|
|
288
|
-
*/
|
|
289
|
-
onSliderDragDrop(props) {
|
|
290
|
-
if (!this.__isDragging) {
|
|
291
|
-
return;
|
|
292
|
-
}
|
|
293
|
-
this.__isDragging = false;
|
|
294
|
-
if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
|
|
295
|
-
return;
|
|
296
|
-
}
|
|
297
|
-
let finalX = (0, import_utils.clamp)(
|
|
298
|
-
(0, import_utils.inertiaFinalValue)(this.__distanceX, props.delta.x * this.$options.dropSensitivity),
|
|
299
|
-
this.getStateValueByMode(this.firstState.x),
|
|
300
|
-
this.getStateValueByMode(this.lastState.x)
|
|
301
|
-
);
|
|
302
|
-
const absoluteDifferencesBetweenDistanceAndState = this.states.map(
|
|
303
|
-
(state) => Math.abs(finalX - this.getStateValueByMode(state.x))
|
|
304
|
-
);
|
|
305
|
-
const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);
|
|
306
|
-
const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);
|
|
307
|
-
if (this.$options.fitBounds) {
|
|
308
|
-
this.goTo(closestIndex, { withInstantMove: false });
|
|
309
|
-
} else {
|
|
310
|
-
if (this.$options.contain) {
|
|
311
|
-
finalX = Math.min(this.containMinState, finalX);
|
|
312
|
-
finalX = Math.max(this.containMaxState, finalX);
|
|
313
|
-
}
|
|
314
|
-
this.$children.SliderItem.forEach((item) => {
|
|
315
|
-
item.move(finalX);
|
|
316
|
-
});
|
|
317
|
-
this.currentIndex = closestIndex;
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
/**
|
|
321
|
-
* Enable focus.
|
|
322
|
-
*/
|
|
323
|
-
onWrapperFocus() {
|
|
324
|
-
this.hasFocus = true;
|
|
325
|
-
}
|
|
326
|
-
/**
|
|
327
|
-
* Disable focus.
|
|
328
|
-
*/
|
|
329
|
-
onWrapperBlur() {
|
|
330
|
-
this.hasFocus = false;
|
|
331
|
-
}
|
|
332
|
-
/**
|
|
333
|
-
* Go prev or next when focus is on the wrapper and pressing arrow keys.
|
|
334
|
-
*/
|
|
335
|
-
keyed({ LEFT, RIGHT, isDown }) {
|
|
336
|
-
if (this.hasFocus && isDown) {
|
|
337
|
-
if (LEFT) {
|
|
338
|
-
this.goPrev();
|
|
339
|
-
} else if (RIGHT) {
|
|
340
|
-
this.goNext();
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
/**
|
|
345
|
-
* Prepare invisible items.
|
|
346
|
-
*/
|
|
347
|
-
prepareInvisibleItems() {
|
|
348
|
-
const state = this.states[this.currentIndex];
|
|
349
|
-
const nextItemsToPrepare = [];
|
|
350
|
-
const previousItemsToPrepare = [];
|
|
351
|
-
this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {
|
|
352
|
-
if (i > this.currentIndex) {
|
|
353
|
-
nextItemsToPrepare.push(item);
|
|
354
|
-
return;
|
|
355
|
-
}
|
|
356
|
-
if (i < this.currentIndex) {
|
|
357
|
-
previousItemsToPrepare.push(item);
|
|
358
|
-
}
|
|
359
|
-
});
|
|
360
|
-
nextItemsToPrepare.forEach((item) => {
|
|
361
|
-
const invisibleState = this.getStateWhereItemWillBeInvisible(item);
|
|
362
|
-
if (invisibleState) {
|
|
363
|
-
item.moveInstantly(this.getStateValueByMode(invisibleState.x));
|
|
364
|
-
}
|
|
365
|
-
});
|
|
366
|
-
previousItemsToPrepare.forEach((item) => {
|
|
367
|
-
const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });
|
|
368
|
-
if (invisibleState) {
|
|
369
|
-
item.moveInstantly(this.getStateValueByMode(invisibleState.x));
|
|
370
|
-
}
|
|
371
|
-
});
|
|
372
|
-
}
|
|
373
|
-
/**
|
|
374
|
-
* Get the state where the given item will be visible.
|
|
375
|
-
*/
|
|
376
|
-
getStateWhereItemWillBeInvisible(item, { reversed = false } = {}) {
|
|
377
|
-
const visibleStates = this.states.filter(
|
|
378
|
-
(state) => item.willBeVisible(this.getStateValueByMode(state.x))
|
|
379
|
-
);
|
|
380
|
-
const firstVisibleState = visibleStates[0];
|
|
381
|
-
const lastVisibleState = visibleStates.at(-1);
|
|
382
|
-
const firstVisibleStateIndex = this.states.findIndex(
|
|
383
|
-
(state) => this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x)
|
|
384
|
-
);
|
|
385
|
-
const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);
|
|
386
|
-
return reversed ? this.states[lastVisibleStateIndex + 1] : this.states[firstVisibleStateIndex - 1];
|
|
387
|
-
}
|
|
388
|
-
/**
|
|
389
|
-
* Get the visible slides for the given position.
|
|
390
|
-
*/
|
|
391
|
-
getVisibleItems(target) {
|
|
392
|
-
return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));
|
|
393
|
-
}
|
|
394
|
-
/**
|
|
395
|
-
* Get the invisible slides for the given position.
|
|
396
|
-
*/
|
|
397
|
-
getInvisibleItems(target) {
|
|
398
|
-
return this.$children.SliderItem.filter(
|
|
399
|
-
(item) => !item.isVisible && !item.willBeVisible(target)
|
|
400
|
-
);
|
|
401
|
-
}
|
|
402
|
-
};
|
|
403
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
404
|
-
//# sourceMappingURL=Slider.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Slider/Slider.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type {\n BaseProps,\n BaseConfig,\n DragServiceProps,\n KeyServiceProps,\n} from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame, isDev } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n $refs: {\n wrapper: HTMLElement;\n };\n $children: {\n SliderItem: SliderItem[];\n SliderDrag: SliderDrag[];\n };\n $options: {\n mode: SliderModes;\n fitBounds: boolean;\n contain: boolean;\n sensitivity: number;\n dropSensitivity: number;\n };\n}\n\n/**\n * Orchestrate the slider items state transition.\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Slider',\n refs: ['wrapper', 'debug'],\n emits: ['goto', 'index'],\n components: {\n SliderItem,\n SliderDrag,\n },\n options: {\n mode: { type: String, default: 'left' },\n fitBounds: Boolean,\n contain: Boolean,\n sensitivity: { type: Number, default: 1 },\n dropSensitivity: { type: Number, default: 2 },\n },\n };\n\n __distanceX = 0;\n\n __initialX = 0;\n\n /**\n * Index of the current active slide.\n */\n __currentIndex = 0;\n\n __isDragging = false;\n\n /**\n * Get the current index.\n */\n get currentIndex() {\n return this.__currentIndex;\n }\n\n /**\n * Set the current index and emit the `index` event.\n */\n set currentIndex(value: number) {\n this.currentSliderItem.disactivate();\n this.$emit('index', value);\n this.__currentIndex = value;\n this.currentSliderItem.activate();\n }\n\n /**\n * Store all the states.\n */\n states: SliderState[] = [];\n\n /**\n * Origins for the different modes.\n */\n origins: Record<SliderModes, number> = {\n left: 0,\n center: 0,\n right: 0,\n };\n\n /**\n * Wether or not the wrapper is focused.\n * @type {boolean}\n */\n hasFocus = false;\n\n /**\n * Get the current state.\n */\n get currentState() {\n return this.states[this.currentIndex];\n }\n\n /**\n * Get the first state.\n */\n get firstState() {\n return this.states[0];\n }\n\n /**\n * Get the last state.\n */\n get lastState() {\n return this.states.at(-1);\n }\n\n /**\n * Get the minimal contain state value.\n */\n get containMinState(): number {\n return this.getStateValueByMode(this.firstState.x, 'left');\n }\n\n /**\n * Get the maximal contain state value.\n */\n get containMaxState(): number {\n return this.getStateValueByMode(this.lastState.x, 'right');\n }\n\n /**\n * Get the last index.\n */\n get indexMax(): number {\n return this.$children.SliderItem.length - 1;\n }\n\n /**\n * Get the current SliderItem\n */\n get currentSliderItem() {\n return this.$children.SliderItem[this.currentIndex];\n }\n\n /**\n * Get the states for each SliderItem.\n */\n getStates(): SliderState[] {\n const { wrapper } = this.$refs;\n const originRect = wrapper.getBoundingClientRect();\n\n this.origins = {\n left: originRect.left,\n center: originRect.x + originRect.width / 2,\n right: originRect.x + originRect.width,\n };\n\n const states: SliderState[] = this.$children.SliderItem.map((item) => ({\n x: {\n left: (item.rect.x - this.origins.left) * -1,\n center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n },\n }));\n\n if (this.$options.contain) {\n const { mode } = this.$options;\n // Find state where last child has passed the wrapper bound completely\n if (mode === 'left') {\n const lastChild = this.$children.SliderItem.at(-1);\n\n const maxState = states.find((state) => {\n const lastChildPosition =\n lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n const diffWithWrapperBound = originRect.width - lastChildPosition;\n if (diffWithWrapperBound > 0) {\n state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n return true;\n }\n\n return false;\n });\n\n if (maxState) {\n return states.map((state) => {\n state.x.left = Math.max(state.x.left, maxState.x.left);\n return state;\n });\n }\n }\n\n if (mode === 'right') {\n const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n return states.map((state) => {\n state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n return state;\n });\n }\n\n if (mode === 'center' && isDev) {\n console.warn(\n `[${this.$id}]`,\n 'The `center` mode is not yet compatible with the `contain` mode.',\n );\n }\n }\n\n return states;\n }\n\n /**\n * Get an origin by mode.\n */\n getOriginByMode(mode?: SliderModes) {\n return this.origins[mode ?? this.$options.mode];\n }\n\n /**\n * Get a state value according to the given mode.\n */\n getStateValueByMode(state: SliderState['x'], mode?: SliderModes) {\n return state[mode ?? this.$options.mode];\n }\n\n /**\n * Mounted hook.\n */\n mounted() {\n this.states = this.getStates();\n this.setAccessibilityAttributes();\n this.prepareInvisibleItems();\n this.goTo(this.currentIndex);\n }\n\n /**\n * Resized hook.\n */\n resized() {\n nextFrame(() => {\n this.states = this.getStates();\n nextFrame(() => {\n this.prepareInvisibleItems();\n this.goTo(this.currentIndex);\n });\n });\n }\n\n /**\n * Set accessibility attributes for the component\n */\n setAccessibilityAttributes() {\n this.$el.setAttribute('role', 'group');\n this.$el.setAttribute('aria-roledescription', 'carousel');\n }\n\n /**\n * Go to the next slide.\n */\n goNext() {\n if (this.currentIndex + 1 > this.indexMax) {\n return;\n }\n\n this.goTo(this.currentIndex + 1);\n }\n\n /**\n * Go to the previous slide.\n */\n goPrev() {\n if (this.currentIndex - 1 < 0) {\n return;\n }\n\n this.goTo(this.currentIndex - 1);\n }\n\n /**\n * Go to the given index.\n */\n goTo(index: number, { withInstantMove = true } = {}) {\n if (index < 0 || index > this.indexMax) {\n throw new Error('Index out of bound.');\n }\n\n const currentState = this.getStateValueByMode(this.currentState.x);\n const state = this.getStateValueByMode(this.states[index].x);\n const itemsToMove = this.getVisibleItems(state);\n const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);\n\n itemsToMove.forEach((item) => {\n // Better perfs when going fast through the slides\n if (currentState !== state && withInstantMove) {\n item.moveInstantly(currentState);\n }\n nextFrame(() => item.move(state));\n });\n invisibleItemsToMoveInstantly.forEach((item) => {\n item.moveInstantly(state);\n });\n\n this.currentIndex = index;\n this.$emit('goto', index);\n }\n\n /**\n * Listen to the Draggable `start` event.\n */\n onSliderDragStart() {\n this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n this.__distanceX = this.__initialX;\n\n this.__isDragging = true;\n }\n\n /**\n * Listen to the Draggable `drag` event.\n */\n onSliderDragDrag(props: DragServiceProps) {\n if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n return;\n }\n\n this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n this.getVisibleItems(this.__distanceX).forEach((item) => {\n item.moveInstantly(this.__distanceX);\n });\n }\n\n /**\n * Listen to the Draggable `drop` event and find the new active slide.\n */\n onSliderDragDrop(props: DragServiceProps) {\n if (!this.__isDragging) {\n return;\n }\n this.__isDragging = false;\n\n if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n return;\n }\n\n let finalX = clamp(\n inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n this.getStateValueByMode(this.firstState.x),\n this.getStateValueByMode(this.lastState.x),\n );\n\n const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n Math.abs(finalX - this.getStateValueByMode(state.x)),\n );\n const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n if (this.$options.fitBounds) {\n this.goTo(closestIndex, { withInstantMove: false });\n } else {\n if (this.$options.contain) {\n finalX = Math.min(this.containMinState, finalX);\n finalX = Math.max(this.containMaxState, finalX);\n }\n this.$children.SliderItem.forEach((item) => {\n item.move(finalX);\n });\n this.currentIndex = closestIndex;\n }\n }\n\n /**\n * Enable focus.\n */\n onWrapperFocus() {\n this.hasFocus = true;\n }\n\n /**\n * Disable focus.\n */\n onWrapperBlur() {\n this.hasFocus = false;\n }\n\n /**\n * Go prev or next when focus is on the wrapper and pressing arrow keys.\n */\n keyed({ LEFT, RIGHT, isDown }: KeyServiceProps) {\n if (this.hasFocus && isDown) {\n if (LEFT) {\n this.goPrev();\n } else if (RIGHT) {\n this.goNext();\n }\n }\n }\n\n /**\n * Prepare invisible items.\n */\n prepareInvisibleItems() {\n const state = this.states[this.currentIndex];\n const nextItemsToPrepare = [];\n const previousItemsToPrepare = [];\n\n this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {\n if (i > this.currentIndex) {\n nextItemsToPrepare.push(item);\n return;\n }\n\n if (i < this.currentIndex) {\n previousItemsToPrepare.push(item);\n }\n });\n\n nextItemsToPrepare.forEach((item) => {\n const invisibleState = this.getStateWhereItemWillBeInvisible(item);\n if (invisibleState) {\n item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n }\n });\n\n previousItemsToPrepare.forEach((item) => {\n const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });\n if (invisibleState) {\n item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n }\n });\n }\n\n /**\n * Get the state where the given item will be visible.\n */\n getStateWhereItemWillBeInvisible(item: SliderItem, { reversed = false } = {}): SliderState {\n const visibleStates = this.states.filter((state) =>\n item.willBeVisible(this.getStateValueByMode(state.x)),\n );\n const firstVisibleState = visibleStates[0];\n const lastVisibleState = visibleStates.at(-1);\n const firstVisibleStateIndex = this.states.findIndex(\n (state) =>\n this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x),\n );\n const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);\n\n return reversed\n ? this.states[lastVisibleStateIndex + 1]\n : this.states[firstVisibleStateIndex - 1];\n }\n\n /**\n * Get the visible slides for the given position.\n */\n getVisibleItems(target: number) {\n return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));\n }\n\n /**\n * Get the invisible slides for the given position.\n */\n getInvisibleItems(target: number) {\n return this.$children.SliderItem.filter(\n (item) => !item.isVisible && !item.willBeVisible(target),\n );\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all)
|
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
-
};
|
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
-
for (let key of __getOwnPropNames(from))
|
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
-
}
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
-
|
|
19
|
-
// packages/ui/molecules/Slider/SliderBtn.ts
|
|
20
|
-
var SliderBtn_exports = {};
|
|
21
|
-
__export(SliderBtn_exports, {
|
|
22
|
-
SliderBtn: () => SliderBtn
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(SliderBtn_exports);
|
|
25
|
-
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
26
|
-
var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
|
|
27
|
-
var SliderBtn = class extends import_AbstractSliderChild.AbstractSliderChild {
|
|
28
|
-
/**
|
|
29
|
-
* Config.
|
|
30
|
-
*/
|
|
31
|
-
static config = {
|
|
32
|
-
name: "SliderBtn",
|
|
33
|
-
options: {
|
|
34
|
-
prev: Boolean,
|
|
35
|
-
next: Boolean,
|
|
36
|
-
contain: Boolean
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
/**
|
|
40
|
-
* Update attributes.
|
|
41
|
-
* @param {number} index
|
|
42
|
-
* @returns {void}
|
|
43
|
-
*/
|
|
44
|
-
update(index) {
|
|
45
|
-
if (import_utils.isDev && this.$options.contain && !this.$parent.$options.contain) {
|
|
46
|
-
console.warn(
|
|
47
|
-
`[${this.$id}] The contain option will only works if the parent Slider also has the contain option.`
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
const isContainMaxState = this.$options.contain && this.$parent.$options.contain && this.$parent.containMaxState === this.$parent.getStates()[index].x[this.$parent.$options.mode];
|
|
51
|
-
if (index === 0 && this.$options.prev || (index === this.$parent.indexMax || isContainMaxState) && this.$options.next) {
|
|
52
|
-
this.$el.setAttribute("disabled", "");
|
|
53
|
-
} else {
|
|
54
|
-
this.$el.removeAttribute("disabled");
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* Go prev or next on click.
|
|
59
|
-
* @returns {void}
|
|
60
|
-
*/
|
|
61
|
-
onClick() {
|
|
62
|
-
const { prev, next } = this.$options;
|
|
63
|
-
if (prev) {
|
|
64
|
-
this.$parent.goPrev();
|
|
65
|
-
} else if (next) {
|
|
66
|
-
this.$parent.goNext();
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
71
|
-
//# sourceMappingURL=SliderBtn.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Slider/SliderBtn.ts"],
|
|
4
|
-
"sourcesContent": ["import { isDev } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderBtnProps extends BaseProps {\n $options: {\n prev: boolean;\n next: boolean;\n contain: boolean;\n };\n}\n\n/**\n * SliderBtn class.\n */\nexport class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n T & SliderBtnProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderBtn',\n options: {\n prev: Boolean,\n next: Boolean,\n contain: Boolean,\n },\n };\n\n /**\n * Update attributes.\n * @param {number} index\n * @returns {void}\n */\n update(index: number) {\n if (isDev && this.$options.contain && !this.$parent.$options.contain) {\n console.warn(\n `[${this.$id}] The contain option will only works if the parent Slider also has the contain option.`,\n );\n }\n\n const isContainMaxState =\n this.$options.contain &&\n this.$parent.$options.contain &&\n this.$parent.containMaxState ===\n this.$parent.getStates()[index].x[this.$parent.$options.mode];\n\n if (\n (index === 0 && this.$options.prev) ||\n ((index === this.$parent.indexMax || isContainMaxState) && this.$options.next)\n ) {\n this.$el.setAttribute('disabled', '');\n } else {\n this.$el.removeAttribute('disabled');\n }\n }\n\n /**\n * Go prev or next on click.\n * @returns {void}\n */\n onClick() {\n const { prev, next } = this.$options;\n\n if (prev) {\n this.$parent.goPrev();\n } else if (next) {\n this.$parent.goNext();\n }\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AAEtB,iCAAoC;AAa7B,IAAM,YAAN,cAAyD,+CAE9D;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAe;AACpB,QAAI,sBAAS,KAAK,SAAS,WAAW,CAAC,KAAK,QAAQ,SAAS,SAAS;AACpE,cAAQ;AAAA,QACN,IAAI,KAAK,GAAG;AAAA,MACd;AAAA,IACF;AAEA,UAAM,oBACJ,KAAK,SAAS,WACd,KAAK,QAAQ,SAAS,WACtB,KAAK,QAAQ,oBACX,KAAK,QAAQ,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,QAAQ,SAAS,IAAI;AAEhE,QACG,UAAU,KAAK,KAAK,SAAS,SAC5B,UAAU,KAAK,QAAQ,YAAY,sBAAsB,KAAK,SAAS,MACzE;AACA,WAAK,IAAI,aAAa,YAAY,EAAE;AAAA,IACtC,OAAO;AACL,WAAK,IAAI,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,UAAM,EAAE,MAAM,KAAK,IAAI,KAAK;AAE5B,QAAI,MAAM;AACR,WAAK,QAAQ,OAAO;AAAA,IACtB,WAAW,MAAM;AACf,WAAK,QAAQ,OAAO;AAAA,IACtB;AAAA,EACF;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all)
|
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
-
};
|
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
-
for (let key of __getOwnPropNames(from))
|
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
-
}
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
-
|
|
19
|
-
// packages/ui/molecules/Slider/SliderCount.ts
|
|
20
|
-
var SliderCount_exports = {};
|
|
21
|
-
__export(SliderCount_exports, {
|
|
22
|
-
SliderCount: () => SliderCount
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(SliderCount_exports);
|
|
25
|
-
var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
|
|
26
|
-
var SliderCount = class extends import_AbstractSliderChild.AbstractSliderChild {
|
|
27
|
-
/**
|
|
28
|
-
* Config.
|
|
29
|
-
*/
|
|
30
|
-
static config = {
|
|
31
|
-
name: "SliderCount",
|
|
32
|
-
refs: ["current"]
|
|
33
|
-
};
|
|
34
|
-
/**
|
|
35
|
-
* Update the current counter indicator.
|
|
36
|
-
* @param {number} index The new active index.
|
|
37
|
-
* @returns {void}
|
|
38
|
-
*/
|
|
39
|
-
update(index) {
|
|
40
|
-
this.$refs.current.innerHTML = `${index + 1}`;
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
44
|
-
//# sourceMappingURL=SliderCount.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Slider/SliderCount.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderCountProps extends BaseProps {\n $refs: {\n current: HTMLElement;\n };\n}\n\n/**\n * SliderCount class.\n */\nexport class SliderCount<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n T & SliderCountProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderCount',\n refs: ['current'],\n };\n\n /**\n * Update the current counter indicator.\n * @param {number} index The new active index.\n * @returns {void}\n */\n update(index: number) {\n this.$refs.current.innerHTML = `${index + 1}`;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iCAAoC;AAW7B,IAAM,cAAN,cAA2D,+CAEhE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,SAAS;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAe;AACpB,SAAK,MAAM,QAAQ,YAAY,GAAG,QAAQ,CAAC;AAAA,EAC7C;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all)
|
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
-
};
|
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
-
for (let key of __getOwnPropNames(from))
|
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
-
}
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
-
|
|
19
|
-
// packages/ui/molecules/Slider/SliderDots.ts
|
|
20
|
-
var SliderDots_exports = {};
|
|
21
|
-
__export(SliderDots_exports, {
|
|
22
|
-
SliderDots: () => SliderDots
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(SliderDots_exports);
|
|
25
|
-
var import_decorators = require("../../decorators/index.cjs");
|
|
26
|
-
var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
|
|
27
|
-
var SliderDots = class extends (0, import_decorators.withTransition)(import_AbstractSliderChild.AbstractSliderChild) {
|
|
28
|
-
/**
|
|
29
|
-
* Config.
|
|
30
|
-
*/
|
|
31
|
-
static config = {
|
|
32
|
-
name: "SliderDots",
|
|
33
|
-
refs: ["dots[]"]
|
|
34
|
-
};
|
|
35
|
-
/**
|
|
36
|
-
* Get target.
|
|
37
|
-
* @returns {HTMLButtonElement[]}
|
|
38
|
-
*/
|
|
39
|
-
get target() {
|
|
40
|
-
return this.$refs.dots;
|
|
41
|
-
}
|
|
42
|
-
/**
|
|
43
|
-
* The current active index.
|
|
44
|
-
*/
|
|
45
|
-
currentIndex = 0;
|
|
46
|
-
/**
|
|
47
|
-
* Update dots classes according to the new index.
|
|
48
|
-
* @param {number} index
|
|
49
|
-
* @returns {void}
|
|
50
|
-
*/
|
|
51
|
-
update(index) {
|
|
52
|
-
this.leave(this.$refs.dots[this.currentIndex]);
|
|
53
|
-
this.enter(this.$refs.dots[index]);
|
|
54
|
-
this.currentIndex = index;
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Go to the given index on dot click.
|
|
58
|
-
*/
|
|
59
|
-
onDotsClick(event, index) {
|
|
60
|
-
this.$parent.goTo(index);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
64
|
-
//# sourceMappingURL=SliderDots.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Slider/SliderDots.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n $refs: {\n dots: HTMLButtonElement[];\n };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderDots',\n refs: ['dots[]'],\n };\n\n /**\n * Get target.\n * @returns {HTMLButtonElement[]}\n */\n get target() {\n return this.$refs.dots;\n }\n\n /**\n * The current active index.\n */\n currentIndex = 0;\n\n /**\n * Update dots classes according to the new index.\n * @param {number} index\n * @returns {void}\n */\n update(index: number) {\n this.leave(this.$refs.dots[this.currentIndex]);\n this.enter(this.$refs.dots[index]);\n this.currentIndex = index;\n }\n\n /**\n * Go to the given index on dot click.\n */\n onDotsClick(event: MouseEvent, index: number) {\n this.$parent.goTo(index);\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA+B;AAC/B,iCAAoC;AAW7B,IAAM,aAAN,kBAEG,kCAAoC,8CAAmB,EAAuB;AAAA;AAAA;AAAA;AAAA,EAItF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOf,OAAO,OAAe;AACpB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,YAAY,CAAC;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,OAAmB,OAAe;AAC5C,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|