@studiometa/ui 0.2.30 → 0.2.31
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.
|
@@ -38,6 +38,7 @@ var Slider = class extends import_js_toolkit.Base {
|
|
|
38
38
|
* Index of the current active slide.
|
|
39
39
|
*/
|
|
40
40
|
__currentIndex = 0;
|
|
41
|
+
__isDragging = false;
|
|
41
42
|
/**
|
|
42
43
|
* Get the current index.
|
|
43
44
|
*/
|
|
@@ -246,6 +247,7 @@ var Slider = class extends import_js_toolkit.Base {
|
|
|
246
247
|
onSliderDragStart() {
|
|
247
248
|
this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
|
|
248
249
|
this.__distanceX = this.__initialX;
|
|
250
|
+
this.__isDragging = true;
|
|
249
251
|
}
|
|
250
252
|
/**
|
|
251
253
|
* Listen to the Draggable `drag` event.
|
|
@@ -263,6 +265,10 @@ var Slider = class extends import_js_toolkit.Base {
|
|
|
263
265
|
* Listen to the Draggable `drop` event and find the new active slide.
|
|
264
266
|
*/
|
|
265
267
|
onSliderDragDrop(props) {
|
|
268
|
+
if (!this.__isDragging) {
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
this.__isDragging = false;
|
|
266
272
|
if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
|
|
267
273
|
return;
|
|
268
274
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 /**\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.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 * 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\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 (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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAOrB,mBAA2D;AAC3D,wBAA2B;AAC3B,wBAA2B;AA2BpB,IAAM,SAAN,cAAsD,uBAAsB;AAAA,EAqBjF,cAAc;AAAA,EAEd,aAAa;AAAA;AAAA;AAAA;AAAA,EAKb,iBAAiB;AAAA;AAAA;AAAA;AAAA,
|
|
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.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 * 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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAOrB,mBAA2D;AAC3D,wBAA2B;AAC3B,wBAA2B;AA2BpB,IAAM,SAAN,cAAsD,uBAAsB;AAAA,EAqBjF,cAAc;AAAA,EAEd,aAAa;AAAA;AAAA;AAAA;AAAA,EAKb,iBAAiB;AAAA,EAEjB,eAAe;AAAA;AAAA;AAAA;AAAA,EAKf,IAAI,eAAe;AACjB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,aAAa,OAAe;AAC9B,SAAK,kBAAkB,YAAY;AACnC,SAAK,MAAM,SAAS,KAAK;AACzB,SAAK,iBAAiB;AACtB,SAAK,kBAAkB,SAAS;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,SAAwB,CAAC;AAAA;AAAA;AAAA;AAAA,EAKzB,UAAuC;AAAA,IACrC,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,IAAI,eAAe;AACjB,WAAO,KAAK,OAAO,KAAK,YAAY;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,aAAa;AACf,WAAO,KAAK,OAAO,CAAC;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAY;AACd,WAAO,KAAK,OAAO,GAAG,EAAE;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,kBAA0B;AAC5B,WAAO,KAAK,oBAAoB,KAAK,WAAW,GAAG,MAAM;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,kBAA0B;AAC5B,WAAO,KAAK,oBAAoB,KAAK,UAAU,GAAG,OAAO;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAmB;AACrB,WAAO,KAAK,UAAU,WAAW,SAAS;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,oBAAoB;AACtB,WAAO,KAAK,UAAU,WAAW,KAAK,YAAY;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA,EAKA,YAA2B;AACzB,UAAM,EAAE,QAAQ,IAAI,KAAK;AACzB,UAAM,aAAa,QAAQ,sBAAsB;AAEjD,SAAK,UAAU;AAAA,MACb,MAAM,WAAW;AAAA,MACjB,QAAQ,WAAW,IAAI,WAAW,QAAQ;AAAA,MAC1C,OAAO,WAAW,IAAI,WAAW;AAAA,IACnC;AAEA,UAAM,SAAwB,KAAK,UAAU,WAAW,IAAI,CAAC,UAAU;AAAA,MACrE,GAAG;AAAA,QACD,OAAO,KAAK,KAAK,IAAI,KAAK,QAAQ,QAAQ;AAAA,QAC1C,SAAS,KAAK,KAAK,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,QAAQ,UAAU;AAAA,QACpE,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,QAAQ,KAAK,QAAQ,SAAS;AAAA,MAChE;AAAA,IACF,EAAE;AAEF,QAAI,KAAK,SAAS,SAAS;AACzB,YAAM,EAAE,KAAK,IAAI,KAAK;AAEtB,UAAI,SAAS,QAAQ;AACnB,cAAM,YAAY,KAAK,UAAU,WAAW,GAAG,EAAE;AAEjD,cAAM,WAAW,OAAO,KAAK,CAAC,UAAU;AACtC,gBAAM,oBACJ,UAAU,KAAK,IAAI,KAAK,QAAQ,OAAO,UAAU,KAAK,QAAQ,MAAM,EAAE;AACxE,gBAAM,uBAAuB,WAAW,QAAQ;AAChD,cAAI,uBAAuB,GAAG;AAC5B,kBAAM,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,OAAO,sBAAsB,CAAC;AAC9D,mBAAO;AAAA,UACT;AAEA,iBAAO;AAAA,QACT,CAAC;AAED,YAAI,UAAU;AACZ,iBAAO,OAAO,IAAI,CAAC,UAAU;AAC3B,kBAAM,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,MAAM,SAAS,EAAE,IAAI;AACrD,mBAAO;AAAA,UACT,CAAC;AAAA,QACH;AAAA,MACF;AAEA,UAAI,SAAS,SAAS;AACpB,cAAM,gBAAgB,OAAO,UAAU,CAAC,UAAU,MAAM,EAAE,SAAS,CAAC;AACpE,cAAM,WAAW,gBAAgB,IAAI,OAAO,GAAG,EAAE,IAAI,OAAO,gBAAgB,CAAC;AAE7E,eAAO,OAAO,IAAI,CAAC,UAAU;AAC3B,gBAAM,EAAE,QAAQ,gBAAgB,IAAI,SAAS,EAAE,QAAQ,KAAK,IAAI,MAAM,EAAE,OAAO,CAAC;AAChF,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAEA,UAAI,SAAS,YAAY,oBAAO;AAC9B,gBAAQ;AAAA,UACN,IAAI,KAAK;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB,MAAoB;AAClC,WAAO,KAAK,QAAQ,QAAQ,KAAK,SAAS,IAAI;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB,OAAyB,MAAoB;AAC/D,WAAO,MAAM,QAAQ,KAAK,SAAS,IAAI;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,SAAS,KAAK,UAAU;AAC7B,SAAK,sBAAsB;AAC3B,SAAK,KAAK,KAAK,YAAY;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,gCAAU,MAAM;AACd,WAAK,SAAS,KAAK,UAAU;AAC7B,kCAAU,MAAM;AACd,aAAK,sBAAsB;AAC3B,aAAK,KAAK,KAAK,YAAY;AAAA,MAC7B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,QAAI,KAAK,eAAe,IAAI,KAAK,UAAU;AACzC;AAAA,IACF;AAEA,SAAK,KAAK,KAAK,eAAe,CAAC;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,QAAI,KAAK,eAAe,IAAI,GAAG;AAC7B;AAAA,IACF;AAEA,SAAK,KAAK,KAAK,eAAe,CAAC;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,KAAK,OAAe,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG;AACnD,QAAI,QAAQ,KAAK,QAAQ,KAAK,UAAU;AACtC,YAAM,IAAI,MAAM,qBAAqB;AAAA,IACvC;AAEA,UAAM,eAAe,KAAK,oBAAoB,KAAK,aAAa,CAAC;AACjE,UAAM,QAAQ,KAAK,oBAAoB,KAAK,OAAO,KAAK,EAAE,CAAC;AAC3D,UAAM,cAAc,KAAK,gBAAgB,KAAK;AAC9C,UAAM,gCAAgC,KAAK,kBAAkB,KAAK;AAElE,gBAAY,QAAQ,CAAC,SAAS;AAE5B,UAAI,iBAAiB,SAAS,iBAAiB;AAC7C,aAAK,cAAc,YAAY;AAAA,MACjC;AACA,kCAAU,MAAM,KAAK,KAAK,KAAK,CAAC;AAAA,IAClC,CAAC;AACD,kCAA8B,QAAQ,CAAC,SAAS;AAC9C,WAAK,cAAc,KAAK;AAAA,IAC1B,CAAC;AAED,SAAK,eAAe;AACpB,SAAK,MAAM,QAAQ,KAAK;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB;AAClB,SAAK,aAAa,KAAK,oBAAoB,KAAK,kBAAkB,IAAI;AACtE,SAAK,cAAc,KAAK;AAExB,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB,OAAyB;AACxC,QAAI,KAAK,IAAI,MAAM,MAAM,CAAC,IAAI,KAAK,IAAI,MAAM,MAAM,CAAC,GAAG;AACrD;AAAA,IACF;AAEA,SAAK,cAAc,KAAK,aAAa,MAAM,SAAS,IAAI,KAAK,SAAS;AAEtE,SAAK,gBAAgB,KAAK,WAAW,EAAE,QAAQ,CAAC,SAAS;AACvD,WAAK,cAAc,KAAK,WAAW;AAAA,IACrC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB,OAAyB;AACxC,QAAI,CAAC,KAAK,cAAc;AACtB;AAAA,IACF;AACA,SAAK,eAAe;AAEpB,QAAI,KAAK,IAAI,MAAM,MAAM,CAAC,IAAI,KAAK,IAAI,MAAM,MAAM,CAAC,GAAG;AACrD;AAAA,IACF;AAEA,QAAI,aAAS;AAAA,UACX,gCAAkB,KAAK,aAAa,MAAM,MAAM,IAAI,KAAK,SAAS,eAAe;AAAA,MACjF,KAAK,oBAAoB,KAAK,WAAW,CAAC;AAAA,MAC1C,KAAK,oBAAoB,KAAK,UAAU,CAAC;AAAA,IAC3C;AAEA,UAAM,6CAA6C,KAAK,OAAO;AAAA,MAAI,CAAC,UAClE,KAAK,IAAI,SAAS,KAAK,oBAAoB,MAAM,CAAC,CAAC;AAAA,IACrD;AACA,UAAM,oBAAoB,KAAK,IAAI,GAAG,0CAA0C;AAChF,UAAM,eAAe,2CAA2C,QAAQ,iBAAiB;AAEzF,QAAI,KAAK,SAAS,WAAW;AAC3B,WAAK,KAAK,cAAc,EAAE,iBAAiB,MAAM,CAAC;AAAA,IACpD,OAAO;AACL,UAAI,KAAK,SAAS,SAAS;AACzB,iBAAS,KAAK,IAAI,KAAK,iBAAiB,MAAM;AAC9C,iBAAS,KAAK,IAAI,KAAK,iBAAiB,MAAM;AAAA,MAChD;AACA,WAAK,UAAU,WAAW,QAAQ,CAAC,SAAS;AAC1C,aAAK,KAAK,MAAM;AAAA,MAClB,CAAC;AACD,WAAK,eAAe;AAAA,IACtB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB;AACf,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,EAAE,MAAM,OAAO,OAAO,GAAoB;AAC9C,QAAI,KAAK,YAAY,QAAQ;AAC3B,UAAI,MAAM;AACR,aAAK,OAAO;AAAA,MACd,WAAW,OAAO;AAChB,aAAK,OAAO;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,wBAAwB;AACtB,UAAM,QAAQ,KAAK,OAAO,KAAK,YAAY;AAC3C,UAAM,qBAAqB,CAAC;AAC5B,UAAM,yBAAyB,CAAC;AAEhC,SAAK,kBAAkB,KAAK,oBAAoB,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,MAAM;AAC7E,UAAI,IAAI,KAAK,cAAc;AACzB,2BAAmB,KAAK,IAAI;AAC5B;AAAA,MACF;AAEA,UAAI,IAAI,KAAK,cAAc;AACzB,+BAAuB,KAAK,IAAI;AAAA,MAClC;AAAA,IACF,CAAC;AAED,uBAAmB,QAAQ,CAAC,SAAS;AACnC,YAAM,iBAAiB,KAAK,iCAAiC,IAAI;AACjE,UAAI,gBAAgB;AAClB,aAAK,cAAc,KAAK,oBAAoB,eAAe,CAAC,CAAC;AAAA,MAC/D;AAAA,IACF,CAAC;AAED,2BAAuB,QAAQ,CAAC,SAAS;AACvC,YAAM,iBAAiB,KAAK,iCAAiC,MAAM,EAAE,UAAU,KAAK,CAAC;AACrF,UAAI,gBAAgB;AAClB,aAAK,cAAc,KAAK,oBAAoB,eAAe,CAAC,CAAC;AAAA,MAC/D;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,iCAAiC,MAAkB,EAAE,WAAW,MAAM,IAAI,CAAC,GAAgB;AACzF,UAAM,gBAAgB,KAAK,OAAO;AAAA,MAAO,CAAC,UACxC,KAAK,cAAc,KAAK,oBAAoB,MAAM,CAAC,CAAC;AAAA,IACtD;AACA,UAAM,oBAAoB,cAAc,CAAC;AACzC,UAAM,mBAAmB,cAAc,GAAG,EAAE;AAC5C,UAAM,yBAAyB,KAAK,OAAO;AAAA,MACzC,CAAC,UACC,KAAK,oBAAoB,MAAM,CAAC,MAAM,KAAK,oBAAoB,kBAAkB,CAAC;AAAA,IACtF;AACA,UAAM,wBAAwB,KAAK,OAAO,UAAU,CAAC,UAAU,MAAM,MAAM,iBAAiB,CAAC;AAE7F,WAAO,WACH,KAAK,OAAO,wBAAwB,CAAC,IACrC,KAAK,OAAO,yBAAyB,CAAC;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB,QAAgB;AAC9B,WAAO,KAAK,UAAU,WAAW,OAAO,CAAC,SAAS,KAAK,aAAa,KAAK,cAAc,MAAM,CAAC;AAAA,EAChG;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB,QAAgB;AAChC,WAAO,KAAK,UAAU,WAAW;AAAA,MAC/B,CAAC,SAAS,CAAC,KAAK,aAAa,CAAC,KAAK,cAAc,MAAM;AAAA,IACzD;AAAA,EACF;AACF;AAAA;AAAA;AAAA;AA5aE,cAJW,QAIJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM,CAAC,WAAW,OAAO;AAAA,EACzB,OAAO,CAAC,QAAQ,OAAO;AAAA,EACvB,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,MAAM,EAAE,MAAM,QAAQ,SAAS,OAAO;AAAA,IACtC,WAAW;AAAA,IACX,SAAS;AAAA,IACT,aAAa,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,IACxC,iBAAiB,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,EAC9C;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ class Slider extends Base {
|
|
|
28
28
|
* Index of the current active slide.
|
|
29
29
|
*/
|
|
30
30
|
__currentIndex = 0;
|
|
31
|
+
__isDragging = false;
|
|
31
32
|
/**
|
|
32
33
|
* Get the current index.
|
|
33
34
|
*/
|
|
@@ -236,6 +237,7 @@ class Slider extends Base {
|
|
|
236
237
|
onSliderDragStart() {
|
|
237
238
|
this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
|
|
238
239
|
this.__distanceX = this.__initialX;
|
|
240
|
+
this.__isDragging = true;
|
|
239
241
|
}
|
|
240
242
|
/**
|
|
241
243
|
* Listen to the Draggable `drag` event.
|
|
@@ -253,6 +255,10 @@ class Slider extends Base {
|
|
|
253
255
|
* Listen to the Draggable `drop` event and find the new active slide.
|
|
254
256
|
*/
|
|
255
257
|
onSliderDragDrop(props) {
|
|
258
|
+
if (!this.__isDragging) {
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
this.__isDragging = false;
|
|
256
262
|
if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
|
|
257
263
|
return;
|
|
258
264
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 /**\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.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 * 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\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 (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": "AAAA,SAAS,YAAY;AAOrB,SAAS,OAAO,mBAAmB,WAAW,aAAa;AAC3D,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AA2BpB,MAAM,eAAgD,KAAsB;AAAA;AAAA;AAAA;AAAA,EAIjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,OAAO;AAAA,IACzB,OAAO,CAAC,QAAQ,OAAO;AAAA,IACvB,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM,EAAE,MAAM,QAAQ,SAAS,OAAO;AAAA,MACtC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,MACxC,iBAAiB,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,IAC9C;AAAA,EACF;AAAA,EAEA,cAAc;AAAA,EAEd,aAAa;AAAA;AAAA;AAAA;AAAA,EAKb,iBAAiB;AAAA;AAAA;AAAA;AAAA,
|
|
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.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 * 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": "AAAA,SAAS,YAAY;AAOrB,SAAS,OAAO,mBAAmB,WAAW,aAAa;AAC3D,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AA2BpB,MAAM,eAAgD,KAAsB;AAAA;AAAA;AAAA;AAAA,EAIjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,OAAO;AAAA,IACzB,OAAO,CAAC,QAAQ,OAAO;AAAA,IACvB,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM,EAAE,MAAM,QAAQ,SAAS,OAAO;AAAA,MACtC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,MACxC,iBAAiB,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,IAC9C;AAAA,EACF;AAAA,EAEA,cAAc;AAAA,EAEd,aAAa;AAAA;AAAA;AAAA;AAAA,EAKb,iBAAiB;AAAA,EAEjB,eAAe;AAAA;AAAA;AAAA;AAAA,EAKf,IAAI,eAAe;AACjB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,aAAa,OAAe;AAC9B,SAAK,kBAAkB,YAAY;AACnC,SAAK,MAAM,SAAS,KAAK;AACzB,SAAK,iBAAiB;AACtB,SAAK,kBAAkB,SAAS;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,SAAwB,CAAC;AAAA;AAAA;AAAA;AAAA,EAKzB,UAAuC;AAAA,IACrC,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,IAAI,eAAe;AACjB,WAAO,KAAK,OAAO,KAAK,YAAY;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,aAAa;AACf,WAAO,KAAK,OAAO,CAAC;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAY;AACd,WAAO,KAAK,OAAO,GAAG,EAAE;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,kBAA0B;AAC5B,WAAO,KAAK,oBAAoB,KAAK,WAAW,GAAG,MAAM;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,kBAA0B;AAC5B,WAAO,KAAK,oBAAoB,KAAK,UAAU,GAAG,OAAO;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAmB;AACrB,WAAO,KAAK,UAAU,WAAW,SAAS;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,oBAAoB;AACtB,WAAO,KAAK,UAAU,WAAW,KAAK,YAAY;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA,EAKA,YAA2B;AACzB,UAAM,EAAE,QAAQ,IAAI,KAAK;AACzB,UAAM,aAAa,QAAQ,sBAAsB;AAEjD,SAAK,UAAU;AAAA,MACb,MAAM,WAAW;AAAA,MACjB,QAAQ,WAAW,IAAI,WAAW,QAAQ;AAAA,MAC1C,OAAO,WAAW,IAAI,WAAW;AAAA,IACnC;AAEA,UAAM,SAAwB,KAAK,UAAU,WAAW,IAAI,CAAC,UAAU;AAAA,MACrE,GAAG;AAAA,QACD,OAAO,KAAK,KAAK,IAAI,KAAK,QAAQ,QAAQ;AAAA,QAC1C,SAAS,KAAK,KAAK,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,QAAQ,UAAU;AAAA,QACpE,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,QAAQ,KAAK,QAAQ,SAAS;AAAA,MAChE;AAAA,IACF,EAAE;AAEF,QAAI,KAAK,SAAS,SAAS;AACzB,YAAM,EAAE,KAAK,IAAI,KAAK;AAEtB,UAAI,SAAS,QAAQ;AACnB,cAAM,YAAY,KAAK,UAAU,WAAW,GAAG,EAAE;AAEjD,cAAM,WAAW,OAAO,KAAK,CAAC,UAAU;AACtC,gBAAM,oBACJ,UAAU,KAAK,IAAI,KAAK,QAAQ,OAAO,UAAU,KAAK,QAAQ,MAAM,EAAE;AACxE,gBAAM,uBAAuB,WAAW,QAAQ;AAChD,cAAI,uBAAuB,GAAG;AAC5B,kBAAM,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,OAAO,sBAAsB,CAAC;AAC9D,mBAAO;AAAA,UACT;AAEA,iBAAO;AAAA,QACT,CAAC;AAED,YAAI,UAAU;AACZ,iBAAO,OAAO,IAAI,CAAC,UAAU;AAC3B,kBAAM,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,MAAM,SAAS,EAAE,IAAI;AACrD,mBAAO;AAAA,UACT,CAAC;AAAA,QACH;AAAA,MACF;AAEA,UAAI,SAAS,SAAS;AACpB,cAAM,gBAAgB,OAAO,UAAU,CAAC,UAAU,MAAM,EAAE,SAAS,CAAC;AACpE,cAAM,WAAW,gBAAgB,IAAI,OAAO,GAAG,EAAE,IAAI,OAAO,gBAAgB,CAAC;AAE7E,eAAO,OAAO,IAAI,CAAC,UAAU;AAC3B,gBAAM,EAAE,QAAQ,gBAAgB,IAAI,SAAS,EAAE,QAAQ,KAAK,IAAI,MAAM,EAAE,OAAO,CAAC;AAChF,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAEA,UAAI,SAAS,YAAY,OAAO;AAC9B,gBAAQ;AAAA,UACN,IAAI,KAAK;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB,MAAoB;AAClC,WAAO,KAAK,QAAQ,QAAQ,KAAK,SAAS,IAAI;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB,OAAyB,MAAoB;AAC/D,WAAO,MAAM,QAAQ,KAAK,SAAS,IAAI;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,SAAS,KAAK,UAAU;AAC7B,SAAK,sBAAsB;AAC3B,SAAK,KAAK,KAAK,YAAY;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,cAAU,MAAM;AACd,WAAK,SAAS,KAAK,UAAU;AAC7B,gBAAU,MAAM;AACd,aAAK,sBAAsB;AAC3B,aAAK,KAAK,KAAK,YAAY;AAAA,MAC7B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,QAAI,KAAK,eAAe,IAAI,KAAK,UAAU;AACzC;AAAA,IACF;AAEA,SAAK,KAAK,KAAK,eAAe,CAAC;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,QAAI,KAAK,eAAe,IAAI,GAAG;AAC7B;AAAA,IACF;AAEA,SAAK,KAAK,KAAK,eAAe,CAAC;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,KAAK,OAAe,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG;AACnD,QAAI,QAAQ,KAAK,QAAQ,KAAK,UAAU;AACtC,YAAM,IAAI,MAAM,qBAAqB;AAAA,IACvC;AAEA,UAAM,eAAe,KAAK,oBAAoB,KAAK,aAAa,CAAC;AACjE,UAAM,QAAQ,KAAK,oBAAoB,KAAK,OAAO,KAAK,EAAE,CAAC;AAC3D,UAAM,cAAc,KAAK,gBAAgB,KAAK;AAC9C,UAAM,gCAAgC,KAAK,kBAAkB,KAAK;AAElE,gBAAY,QAAQ,CAAC,SAAS;AAE5B,UAAI,iBAAiB,SAAS,iBAAiB;AAC7C,aAAK,cAAc,YAAY;AAAA,MACjC;AACA,gBAAU,MAAM,KAAK,KAAK,KAAK,CAAC;AAAA,IAClC,CAAC;AACD,kCAA8B,QAAQ,CAAC,SAAS;AAC9C,WAAK,cAAc,KAAK;AAAA,IAC1B,CAAC;AAED,SAAK,eAAe;AACpB,SAAK,MAAM,QAAQ,KAAK;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB;AAClB,SAAK,aAAa,KAAK,oBAAoB,KAAK,kBAAkB,IAAI;AACtE,SAAK,cAAc,KAAK;AAExB,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB,OAAyB;AACxC,QAAI,KAAK,IAAI,MAAM,MAAM,CAAC,IAAI,KAAK,IAAI,MAAM,MAAM,CAAC,GAAG;AACrD;AAAA,IACF;AAEA,SAAK,cAAc,KAAK,aAAa,MAAM,SAAS,IAAI,KAAK,SAAS;AAEtE,SAAK,gBAAgB,KAAK,WAAW,EAAE,QAAQ,CAAC,SAAS;AACvD,WAAK,cAAc,KAAK,WAAW;AAAA,IACrC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB,OAAyB;AACxC,QAAI,CAAC,KAAK,cAAc;AACtB;AAAA,IACF;AACA,SAAK,eAAe;AAEpB,QAAI,KAAK,IAAI,MAAM,MAAM,CAAC,IAAI,KAAK,IAAI,MAAM,MAAM,CAAC,GAAG;AACrD;AAAA,IACF;AAEA,QAAI,SAAS;AAAA,MACX,kBAAkB,KAAK,aAAa,MAAM,MAAM,IAAI,KAAK,SAAS,eAAe;AAAA,MACjF,KAAK,oBAAoB,KAAK,WAAW,CAAC;AAAA,MAC1C,KAAK,oBAAoB,KAAK,UAAU,CAAC;AAAA,IAC3C;AAEA,UAAM,6CAA6C,KAAK,OAAO;AAAA,MAAI,CAAC,UAClE,KAAK,IAAI,SAAS,KAAK,oBAAoB,MAAM,CAAC,CAAC;AAAA,IACrD;AACA,UAAM,oBAAoB,KAAK,IAAI,GAAG,0CAA0C;AAChF,UAAM,eAAe,2CAA2C,QAAQ,iBAAiB;AAEzF,QAAI,KAAK,SAAS,WAAW;AAC3B,WAAK,KAAK,cAAc,EAAE,iBAAiB,MAAM,CAAC;AAAA,IACpD,OAAO;AACL,UAAI,KAAK,SAAS,SAAS;AACzB,iBAAS,KAAK,IAAI,KAAK,iBAAiB,MAAM;AAC9C,iBAAS,KAAK,IAAI,KAAK,iBAAiB,MAAM;AAAA,MAChD;AACA,WAAK,UAAU,WAAW,QAAQ,CAAC,SAAS;AAC1C,aAAK,KAAK,MAAM;AAAA,MAClB,CAAC;AACD,WAAK,eAAe;AAAA,IACtB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB;AACf,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,EAAE,MAAM,OAAO,OAAO,GAAoB;AAC9C,QAAI,KAAK,YAAY,QAAQ;AAC3B,UAAI,MAAM;AACR,aAAK,OAAO;AAAA,MACd,WAAW,OAAO;AAChB,aAAK,OAAO;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,wBAAwB;AACtB,UAAM,QAAQ,KAAK,OAAO,KAAK,YAAY;AAC3C,UAAM,qBAAqB,CAAC;AAC5B,UAAM,yBAAyB,CAAC;AAEhC,SAAK,kBAAkB,KAAK,oBAAoB,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,MAAM;AAC7E,UAAI,IAAI,KAAK,cAAc;AACzB,2BAAmB,KAAK,IAAI;AAC5B;AAAA,MACF;AAEA,UAAI,IAAI,KAAK,cAAc;AACzB,+BAAuB,KAAK,IAAI;AAAA,MAClC;AAAA,IACF,CAAC;AAED,uBAAmB,QAAQ,CAAC,SAAS;AACnC,YAAM,iBAAiB,KAAK,iCAAiC,IAAI;AACjE,UAAI,gBAAgB;AAClB,aAAK,cAAc,KAAK,oBAAoB,eAAe,CAAC,CAAC;AAAA,MAC/D;AAAA,IACF,CAAC;AAED,2BAAuB,QAAQ,CAAC,SAAS;AACvC,YAAM,iBAAiB,KAAK,iCAAiC,MAAM,EAAE,UAAU,KAAK,CAAC;AACrF,UAAI,gBAAgB;AAClB,aAAK,cAAc,KAAK,oBAAoB,eAAe,CAAC,CAAC;AAAA,MAC/D;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,iCAAiC,MAAkB,EAAE,WAAW,MAAM,IAAI,CAAC,GAAgB;AACzF,UAAM,gBAAgB,KAAK,OAAO;AAAA,MAAO,CAAC,UACxC,KAAK,cAAc,KAAK,oBAAoB,MAAM,CAAC,CAAC;AAAA,IACtD;AACA,UAAM,oBAAoB,cAAc,CAAC;AACzC,UAAM,mBAAmB,cAAc,GAAG,EAAE;AAC5C,UAAM,yBAAyB,KAAK,OAAO;AAAA,MACzC,CAAC,UACC,KAAK,oBAAoB,MAAM,CAAC,MAAM,KAAK,oBAAoB,kBAAkB,CAAC;AAAA,IACtF;AACA,UAAM,wBAAwB,KAAK,OAAO,UAAU,CAAC,UAAU,MAAM,MAAM,iBAAiB,CAAC;AAE7F,WAAO,WACH,KAAK,OAAO,wBAAwB,CAAC,IACrC,KAAK,OAAO,yBAAyB,CAAC;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB,QAAgB;AAC9B,WAAO,KAAK,UAAU,WAAW,OAAO,CAAC,SAAS,KAAK,aAAa,KAAK,cAAc,MAAM,CAAC;AAAA,EAChG;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB,QAAgB;AAChC,WAAO,KAAK,UAAU,WAAW;AAAA,MAC/B,CAAC,SAAS,CAAC,KAAK,aAAa,CAAC,KAAK,cAAc,MAAM;AAAA,IACzD;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|