@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,66 +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/SliderDrag.ts
|
|
20
|
-
var SliderDrag_exports = {};
|
|
21
|
-
__export(SliderDrag_exports, {
|
|
22
|
-
SliderDrag: () => SliderDrag
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(SliderDrag_exports);
|
|
25
|
-
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
26
|
-
var SliderDrag = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit.Base) {
|
|
27
|
-
/**
|
|
28
|
-
* Config.
|
|
29
|
-
*/
|
|
30
|
-
static config = {
|
|
31
|
-
name: "SliderDrag",
|
|
32
|
-
emits: ["start", "drag", "drop", "inertia", "stop"],
|
|
33
|
-
options: {
|
|
34
|
-
scrollLockThreshold: {
|
|
35
|
-
type: Number,
|
|
36
|
-
default: 10
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* Test if the scroll should be blocked. Used with the touchmove event to prevent
|
|
42
|
-
* scrolling vertically when trying to drag the slider.
|
|
43
|
-
*/
|
|
44
|
-
get shouldPreventScroll() {
|
|
45
|
-
const { distance } = this.$services.get("dragged");
|
|
46
|
-
return Math.abs(distance.x) > this.$options.scrollLockThreshold && Math.abs(distance.x) > Math.abs(distance.y);
|
|
47
|
-
}
|
|
48
|
-
/**
|
|
49
|
-
* Touchmove handler.
|
|
50
|
-
* @param {TouchEvent} event
|
|
51
|
-
* @returns {void}
|
|
52
|
-
*/
|
|
53
|
-
onTouchmove(event) {
|
|
54
|
-
if (this.shouldPreventScroll) {
|
|
55
|
-
event.preventDefault();
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Emit drag events.
|
|
60
|
-
*/
|
|
61
|
-
dragged(props) {
|
|
62
|
-
this.$emit(props.mode, props);
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
66
|
-
//# sourceMappingURL=SliderDrag.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Slider/SliderDrag.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n $options: {\n scrollLockThreshold: number;\n };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n T & SliderDragProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderDrag',\n emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n options: {\n scrollLockThreshold: {\n type: Number,\n default: 10,\n },\n },\n };\n\n /**\n * Test if the scroll should be blocked. Used with the touchmove event to prevent\n * scrolling vertically when trying to drag the slider.\n */\n get shouldPreventScroll() {\n const { distance } = this.$services.get('dragged') as DragServiceProps;\n return (\n Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n Math.abs(distance.x) > Math.abs(distance.y)\n );\n }\n\n /**\n * Touchmove handler.\n * @param {TouchEvent} event\n * @returns {void}\n */\n onTouchmove(event: TouchEvent) {\n if (this.shouldPreventScroll) {\n event.preventDefault();\n }\n }\n\n /**\n * Emit drag events.\n */\n dragged(props: DragServiceProps) {\n this.$emit(props.mode, props);\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA+B;AAWxB,IAAM,aAAN,kBAA0D,4BAAS,sBAAI,EAE5E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,IAClD,SAAS;AAAA,MACP,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAmB;AAC7B,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAyB;AAC/B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,177 +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/SliderItem.ts
|
|
20
|
-
var SliderItem_exports = {};
|
|
21
|
-
__export(SliderItem_exports, {
|
|
22
|
-
SliderItem: () => SliderItem
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(SliderItem_exports);
|
|
25
|
-
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
26
|
-
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
27
|
-
var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(import_js_toolkit.Base, {
|
|
28
|
-
threshold: [0, 1]
|
|
29
|
-
}) {
|
|
30
|
-
/**
|
|
31
|
-
* Config.
|
|
32
|
-
*/
|
|
33
|
-
static config = {
|
|
34
|
-
name: "SliderItem",
|
|
35
|
-
emits: ["is-fully-visible", "is-partially-visible", "is-hidden"]
|
|
36
|
-
};
|
|
37
|
-
/**
|
|
38
|
-
* Wether the SliderItem is visible or not.
|
|
39
|
-
* @type {boolean}
|
|
40
|
-
*/
|
|
41
|
-
isVisible = false;
|
|
42
|
-
/**
|
|
43
|
-
* The SliderItem `x` position.
|
|
44
|
-
* @type {number}
|
|
45
|
-
*/
|
|
46
|
-
x = 0;
|
|
47
|
-
/**
|
|
48
|
-
* The smoothed `x` position.
|
|
49
|
-
* @type {number}
|
|
50
|
-
*/
|
|
51
|
-
dampedX = 0;
|
|
52
|
-
/**
|
|
53
|
-
* Item original position.
|
|
54
|
-
*/
|
|
55
|
-
__rect;
|
|
56
|
-
shouldEvaluateRect = false;
|
|
57
|
-
get rect() {
|
|
58
|
-
if (!this.__rect || this.shouldEvaluateRect) {
|
|
59
|
-
this.shouldEvaluateRect = false;
|
|
60
|
-
const x = this.x * -1;
|
|
61
|
-
const rect = this.$el.getBoundingClientRect().toJSON();
|
|
62
|
-
this.__rect = {
|
|
63
|
-
...rect,
|
|
64
|
-
left: rect.left + x,
|
|
65
|
-
right: rect.left + x + rect.width,
|
|
66
|
-
x: rect.left + x
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
return this.__rect;
|
|
70
|
-
}
|
|
71
|
-
/**
|
|
72
|
-
* Mounted hook
|
|
73
|
-
*/
|
|
74
|
-
mounted() {
|
|
75
|
-
this.setAccessibilityAttributes();
|
|
76
|
-
}
|
|
77
|
-
/**
|
|
78
|
-
* Update SliderItem bounding rectangle on resize.
|
|
79
|
-
*/
|
|
80
|
-
resized() {
|
|
81
|
-
this.shouldEvaluateRect = true;
|
|
82
|
-
}
|
|
83
|
-
/**
|
|
84
|
-
* Reset position to `0` on destroy.
|
|
85
|
-
*/
|
|
86
|
-
destroyed() {
|
|
87
|
-
this.moveInstantly(0);
|
|
88
|
-
}
|
|
89
|
-
/**
|
|
90
|
-
* Intersected hook.
|
|
91
|
-
*/
|
|
92
|
-
intersected([{ intersectionRatio, isIntersecting }]) {
|
|
93
|
-
if (intersectionRatio >= 1) {
|
|
94
|
-
this.$emit("is-fully-visible");
|
|
95
|
-
} else if (intersectionRatio > 0) {
|
|
96
|
-
this.$emit("is-partially-visible");
|
|
97
|
-
} else {
|
|
98
|
-
this.$emit("is-hidden");
|
|
99
|
-
}
|
|
100
|
-
this.isVisible = isIntersecting;
|
|
101
|
-
}
|
|
102
|
-
/**
|
|
103
|
-
* Ticked hook.
|
|
104
|
-
* @todo create AbstractSliderItem with `render` method
|
|
105
|
-
* @todo add state to SliderItem
|
|
106
|
-
* @todo add origin to SliderItem
|
|
107
|
-
* @returns {void}
|
|
108
|
-
*/
|
|
109
|
-
ticked() {
|
|
110
|
-
this.dampedX = (0, import_utils.damp)(this.x, this.dampedX, 0.1, 1e-5);
|
|
111
|
-
this.render();
|
|
112
|
-
if (this.dampedX === this.x) {
|
|
113
|
-
this.$services.disable("ticked");
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Set accessibility attributes for the component
|
|
118
|
-
*/
|
|
119
|
-
setAccessibilityAttributes() {
|
|
120
|
-
this.$el.setAttribute("role", "group");
|
|
121
|
-
this.$el.setAttribute("aria-roledescription", "slide");
|
|
122
|
-
this.$el.setAttribute("aria-label", this.$id);
|
|
123
|
-
}
|
|
124
|
-
/**
|
|
125
|
-
* Enable the SliderItem.
|
|
126
|
-
*/
|
|
127
|
-
activate() {
|
|
128
|
-
this.$el.classList.add("is-active");
|
|
129
|
-
}
|
|
130
|
-
/**
|
|
131
|
-
* Disable the SliderItem.
|
|
132
|
-
*/
|
|
133
|
-
disactivate() {
|
|
134
|
-
this.$el.classList.remove("is-active");
|
|
135
|
-
}
|
|
136
|
-
/**
|
|
137
|
-
* Move the SliderItem to the given target position.
|
|
138
|
-
*/
|
|
139
|
-
move(targetPosition) {
|
|
140
|
-
this.x = targetPosition;
|
|
141
|
-
if (!this.$services.has("ticked")) {
|
|
142
|
-
this.$services.enable("ticked");
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
/**
|
|
146
|
-
* Move the SliderItem instantly to the given target position.
|
|
147
|
-
*/
|
|
148
|
-
moveInstantly(targetPosition) {
|
|
149
|
-
this.x = targetPosition;
|
|
150
|
-
this.dampedX = targetPosition;
|
|
151
|
-
this.render();
|
|
152
|
-
}
|
|
153
|
-
/**
|
|
154
|
-
* Render the component.
|
|
155
|
-
*/
|
|
156
|
-
render() {
|
|
157
|
-
import_utils.domScheduler.write(() => {
|
|
158
|
-
(0, import_utils.transform)(this.$el, { x: this.dampedX });
|
|
159
|
-
});
|
|
160
|
-
}
|
|
161
|
-
/**
|
|
162
|
-
* Check if SliderItem is partially visible for the given target position.
|
|
163
|
-
*/
|
|
164
|
-
willBeVisible(targetPosition) {
|
|
165
|
-
return this.rect.x + targetPosition < window.innerWidth * 1.5 && this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5;
|
|
166
|
-
}
|
|
167
|
-
/**
|
|
168
|
-
* Check if SliderItem is fully visible for the given target position.
|
|
169
|
-
* @param {number} targetPosition
|
|
170
|
-
* @returns {boolean}
|
|
171
|
-
*/
|
|
172
|
-
willBeFullyVisible(targetPosition) {
|
|
173
|
-
return this.rect.x + targetPosition < window.innerWidth && this.rect.x + targetPosition > 0 && this.rect.x + targetPosition + this.rect.width < window.innerWidth && this.rect.x + targetPosition + this.rect.width > 0;
|
|
174
|
-
}
|
|
175
|
-
};
|
|
176
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
177
|
-
//# sourceMappingURL=SliderItem.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Slider/SliderItem.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { damp, domScheduler, transform } from '@studiometa/js-toolkit/utils';\n\n/**\n * Manage a slider item and its state transition.\n */\nexport class SliderItem<T extends BaseProps = BaseProps> extends withIntersectionObserver(Base, {\n threshold: [0, 1],\n})<T> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderItem',\n emits: ['is-fully-visible', 'is-partially-visible', 'is-hidden'],\n };\n\n /**\n * Wether the SliderItem is visible or not.\n * @type {boolean}\n */\n isVisible = false;\n\n /**\n * The SliderItem `x` position.\n * @type {number}\n */\n x = 0;\n\n /**\n * The smoothed `x` position.\n * @type {number}\n */\n dampedX = 0;\n\n /**\n * Item original position.\n */\n __rect: {\n x: number;\n y: number;\n top: number;\n right: number;\n bottom: number;\n left: number;\n width: number;\n height: number;\n };\n\n shouldEvaluateRect = false;\n\n get rect() {\n if (!this.__rect || this.shouldEvaluateRect) {\n this.shouldEvaluateRect = false;\n const x = this.x * -1;\n const rect = this.$el.getBoundingClientRect().toJSON();\n this.__rect = {\n ...rect,\n left: rect.left + x,\n right: rect.left + x + rect.width,\n x: rect.left + x,\n };\n }\n\n return this.__rect;\n }\n\n /**\n * Mounted hook\n */\n mounted() {\n this.setAccessibilityAttributes();\n }\n\n /**\n * Update SliderItem bounding rectangle on resize.\n */\n resized() {\n this.shouldEvaluateRect = true;\n }\n\n /**\n * Reset position to `0` on destroy.\n */\n destroyed() {\n this.moveInstantly(0);\n }\n\n /**\n * Intersected hook.\n */\n intersected([{ intersectionRatio, isIntersecting }]: IntersectionObserverEntry[]) {\n if (intersectionRatio >= 1) {\n this.$emit('is-fully-visible');\n } else if (intersectionRatio > 0) {\n this.$emit('is-partially-visible');\n } else {\n this.$emit('is-hidden');\n }\n\n this.isVisible = isIntersecting;\n }\n\n /**\n * Ticked hook.\n * @todo create AbstractSliderItem with `render` method\n * @todo add state to SliderItem\n * @todo add origin to SliderItem\n * @returns {void}\n */\n ticked() {\n this.dampedX = damp(this.x, this.dampedX, 0.1, 0.00001);\n this.render();\n\n if (this.dampedX === this.x) {\n this.$services.disable('ticked');\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', 'slide');\n this.$el.setAttribute('aria-label', this.$id);\n }\n\n /**\n * Enable the SliderItem.\n */\n activate() {\n this.$el.classList.add('is-active');\n }\n\n /**\n * Disable the SliderItem.\n */\n disactivate() {\n this.$el.classList.remove('is-active');\n }\n\n /**\n * Move the SliderItem to the given target position.\n */\n move(targetPosition: number) {\n this.x = targetPosition;\n\n if (!this.$services.has('ticked')) {\n this.$services.enable('ticked');\n }\n }\n\n /**\n * Move the SliderItem instantly to the given target position.\n */\n moveInstantly(targetPosition: number) {\n this.x = targetPosition;\n this.dampedX = targetPosition;\n this.render();\n }\n\n /**\n * Render the component.\n */\n render() {\n domScheduler.write(() => {\n transform(this.$el, { x: this.dampedX });\n });\n }\n\n /**\n * Check if SliderItem is partially visible for the given target position.\n */\n willBeVisible(targetPosition: number) {\n return (\n this.rect.x + targetPosition < window.innerWidth * 1.5 &&\n this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5\n );\n }\n\n /**\n * Check if SliderItem is fully visible for the given target position.\n * @param {number} targetPosition\n * @returns {boolean}\n */\n willBeFullyVisible(targetPosition) {\n return (\n this.rect.x + targetPosition < window.innerWidth &&\n this.rect.x + targetPosition > 0 &&\n this.rect.x + targetPosition + this.rect.width < window.innerWidth &&\n this.rect.x + targetPosition + this.rect.width > 0\n );\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,49 +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/SliderProgress.ts
|
|
20
|
-
var SliderProgress_exports = {};
|
|
21
|
-
__export(SliderProgress_exports, {
|
|
22
|
-
SliderProgress: () => SliderProgress
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(SliderProgress_exports);
|
|
25
|
-
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
26
|
-
var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
|
|
27
|
-
var SliderProgress = class extends import_AbstractSliderChild.AbstractSliderChild {
|
|
28
|
-
/**
|
|
29
|
-
* Config.
|
|
30
|
-
*/
|
|
31
|
-
static config = {
|
|
32
|
-
name: "SliderProgress",
|
|
33
|
-
refs: ["progress"]
|
|
34
|
-
};
|
|
35
|
-
/**
|
|
36
|
-
* Update the progress indicator.
|
|
37
|
-
*/
|
|
38
|
-
update(index) {
|
|
39
|
-
import_utils.domScheduler.read(() => {
|
|
40
|
-
const { progress } = this.$refs;
|
|
41
|
-
const x = (0, import_utils.map)(index, 0, this.$parent.indexMax, progress.clientWidth * -1, 0);
|
|
42
|
-
import_utils.domScheduler.write(() => {
|
|
43
|
-
(0, import_utils.transform)(progress, { x });
|
|
44
|
-
});
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
49
|
-
//# sourceMappingURL=SliderProgress.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Slider/SliderProgress.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transform, map, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderProgressProps extends BaseProps {\n $refs: {\n progress: HTMLElement;\n };\n}\n\n/**\n * SliderProgress class.\n */\nexport class SliderProgress<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n T & SliderProgressProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderProgress',\n refs: ['progress'],\n };\n\n /**\n * Update the progress indicator.\n */\n update(index: number) {\n domScheduler.read(() => {\n const { progress } = this.$refs;\n const x = map(index, 0, this.$parent.indexMax, progress.clientWidth * -1, 0);\n domScheduler.write(() => {\n transform(progress, { x });\n });\n });\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA6C;AAC7C,iCAAoC;AAW7B,IAAM,iBAAN,cAA8D,+CAEnE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,UAAU;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,OAAe;AACpB,8BAAa,KAAK,MAAM;AACtB,YAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,YAAM,QAAI,kBAAI,OAAO,GAAG,KAAK,QAAQ,UAAU,SAAS,cAAc,IAAI,CAAC;AAC3E,gCAAa,MAAM,MAAM;AACvB,oCAAU,UAAU,EAAE,EAAE,CAAC;AAAA,MAC3B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,28 +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 __copyProps = (to, from, except, desc) => {
|
|
6
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
7
|
-
for (let key of __getOwnPropNames(from))
|
|
8
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
9
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
-
}
|
|
11
|
-
return to;
|
|
12
|
-
};
|
|
13
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
-
|
|
16
|
-
// packages/ui/molecules/Slider/index.ts
|
|
17
|
-
var Slider_exports = {};
|
|
18
|
-
module.exports = __toCommonJS(Slider_exports);
|
|
19
|
-
__reExport(Slider_exports, require("./AbstractSliderChild.cjs"), module.exports);
|
|
20
|
-
__reExport(Slider_exports, require("./Slider.cjs"), module.exports);
|
|
21
|
-
__reExport(Slider_exports, require("./SliderBtn.cjs"), module.exports);
|
|
22
|
-
__reExport(Slider_exports, require("./SliderCount.cjs"), module.exports);
|
|
23
|
-
__reExport(Slider_exports, require("./SliderDrag.cjs"), module.exports);
|
|
24
|
-
__reExport(Slider_exports, require("./SliderItem.cjs"), module.exports);
|
|
25
|
-
__reExport(Slider_exports, require("./SliderProgress.cjs"), module.exports);
|
|
26
|
-
__reExport(Slider_exports, require("./SliderDots.cjs"), module.exports);
|
|
27
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
28
|
-
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Slider/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './AbstractSliderChild.js';\nexport * from './Slider.js';\nexport * from './SliderBtn.js';\nexport * from './SliderCount.js';\nexport * from './SliderDrag.js';\nexport * from './SliderItem.js';\nexport * from './SliderProgress.js';\nexport * from './SliderDots.js';\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,sCAAd;AACA,2BAAc,yBADd;AAEA,2BAAc,4BAFd;AAGA,2BAAc,8BAHd;AAIA,2BAAc,6BAJd;AAKA,2BAAc,6BALd;AAMA,2BAAc,iCANd;AAOA,2BAAc,6BAPd;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,177 +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/Sticky/Sticky.ts
|
|
20
|
-
var Sticky_exports = {};
|
|
21
|
-
__export(Sticky_exports, {
|
|
22
|
-
Sticky: () => Sticky
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(Sticky_exports);
|
|
25
|
-
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
26
|
-
var import_primitives = require("../../primitives/index.cjs");
|
|
27
|
-
var Sticky = class _Sticky extends import_js_toolkit.Base {
|
|
28
|
-
/**
|
|
29
|
-
* Config.
|
|
30
|
-
*/
|
|
31
|
-
static config = {
|
|
32
|
-
name: "Sticky",
|
|
33
|
-
refs: ["inner", "sentinelRef"],
|
|
34
|
-
components: {
|
|
35
|
-
Sentinel: import_primitives.Sentinel
|
|
36
|
-
},
|
|
37
|
-
options: {
|
|
38
|
-
zIndex: {
|
|
39
|
-
type: Number,
|
|
40
|
-
default: 100
|
|
41
|
-
},
|
|
42
|
-
hideWhenUp: Boolean,
|
|
43
|
-
hideWhenDown: Boolean
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
/**
|
|
47
|
-
* Holder for all instances.
|
|
48
|
-
*/
|
|
49
|
-
// eslint-disable-next-line no-use-before-define
|
|
50
|
-
static instances = /* @__PURE__ */ new Set();
|
|
51
|
-
/**
|
|
52
|
-
* Is the component sticky?
|
|
53
|
-
*/
|
|
54
|
-
isSticky = false;
|
|
55
|
-
/**
|
|
56
|
-
* Is the component visible?
|
|
57
|
-
*/
|
|
58
|
-
isVisible = true;
|
|
59
|
-
/**
|
|
60
|
-
* Set the Y value.
|
|
61
|
-
*/
|
|
62
|
-
set y(value) {
|
|
63
|
-
this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* Get instances as array.
|
|
67
|
-
*/
|
|
68
|
-
get instances() {
|
|
69
|
-
return Array.from(_Sticky.instances);
|
|
70
|
-
}
|
|
71
|
-
/**
|
|
72
|
-
* Mounted hook.
|
|
73
|
-
*/
|
|
74
|
-
mounted() {
|
|
75
|
-
_Sticky.instances.add(this);
|
|
76
|
-
this.setSentinelSize();
|
|
77
|
-
}
|
|
78
|
-
/**
|
|
79
|
-
* Resized hook.
|
|
80
|
-
*/
|
|
81
|
-
resized() {
|
|
82
|
-
this.setSentinelSize();
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* Destroyed hook.
|
|
86
|
-
*/
|
|
87
|
-
destroyed() {
|
|
88
|
-
_Sticky.instances.delete(this);
|
|
89
|
-
}
|
|
90
|
-
/**
|
|
91
|
-
* Scrolled hook.
|
|
92
|
-
*/
|
|
93
|
-
scrolled(props) {
|
|
94
|
-
if (!this.isSticky || props.y === props.last.y) {
|
|
95
|
-
return;
|
|
96
|
-
}
|
|
97
|
-
if (props.direction.y === "DOWN" && this.$options.hideWhenDown || props.direction.y === "UP" && this.$options.hideWhenUp) {
|
|
98
|
-
this.hide();
|
|
99
|
-
} else {
|
|
100
|
-
this.show();
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
/**
|
|
104
|
-
* Listen to the sentinel's `intersected` event to set the `isSticky` value.
|
|
105
|
-
* @param {IntersectionObserverEntry[]} entries
|
|
106
|
-
* @returns {void}
|
|
107
|
-
*/
|
|
108
|
-
onSentinelIntersected([entry]) {
|
|
109
|
-
this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;
|
|
110
|
-
this.setPosition();
|
|
111
|
-
}
|
|
112
|
-
/**
|
|
113
|
-
* Hide the sticky component when another one is sticky.
|
|
114
|
-
*/
|
|
115
|
-
hide() {
|
|
116
|
-
if (!this.isVisible) {
|
|
117
|
-
return;
|
|
118
|
-
}
|
|
119
|
-
this.isVisible = false;
|
|
120
|
-
this.$el.classList.add("pointer-events-none");
|
|
121
|
-
this.instances.forEach((instance, index) => instance.setPosition(index));
|
|
122
|
-
}
|
|
123
|
-
/**
|
|
124
|
-
* Show the sticky component when the other one is not sticky anymore.
|
|
125
|
-
*/
|
|
126
|
-
show() {
|
|
127
|
-
if (this.isVisible) {
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
this.isVisible = true;
|
|
131
|
-
this.$el.classList.remove("pointer-events-none");
|
|
132
|
-
this.instances.forEach((instance, index) => instance.setPosition(index));
|
|
133
|
-
}
|
|
134
|
-
/**
|
|
135
|
-
* Set the sentinel height based on the previous instances.
|
|
136
|
-
*/
|
|
137
|
-
setSentinelSize() {
|
|
138
|
-
const { instances } = this;
|
|
139
|
-
const index = instances.indexOf(this);
|
|
140
|
-
const height = instances.slice(0, index).filter(
|
|
141
|
-
// Test each instance sticky context against the current element
|
|
142
|
-
(instance) => this.closestRelativeElement(instance.$el).contains(this.$el)
|
|
143
|
-
).reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);
|
|
144
|
-
this.$refs.sentinelRef.style.height = `${height + 1}px`;
|
|
145
|
-
this.$el.style.top = `${height}px`;
|
|
146
|
-
this.$el.style.zIndex = String(this.$options.zIndex - index);
|
|
147
|
-
}
|
|
148
|
-
/**
|
|
149
|
-
* Set the component's position.
|
|
150
|
-
* @param {number} [index] The instance index in all the pages' instances.
|
|
151
|
-
* @returns {void}
|
|
152
|
-
*/
|
|
153
|
-
setPosition(index) {
|
|
154
|
-
if (!this.isSticky) {
|
|
155
|
-
this.y = 0;
|
|
156
|
-
return;
|
|
157
|
-
}
|
|
158
|
-
const { instances } = this;
|
|
159
|
-
index = index ?? instances.indexOf(this);
|
|
160
|
-
this.y = instances.slice(0, index).filter((instance) => instance.isSticky && !instance.isVisible).reduce(
|
|
161
|
-
(y, instance) => y - instance.$refs.inner.offsetHeight,
|
|
162
|
-
this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1
|
|
163
|
-
);
|
|
164
|
-
}
|
|
165
|
-
/**
|
|
166
|
-
* Find the first parent which has a relative position.
|
|
167
|
-
*/
|
|
168
|
-
closestRelativeElement(element) {
|
|
169
|
-
let parent = element.parentElement;
|
|
170
|
-
while (getComputedStyle(parent).position !== "relative" && parent.parentElement) {
|
|
171
|
-
parent = parent.parentElement;
|
|
172
|
-
}
|
|
173
|
-
return parent;
|
|
174
|
-
}
|
|
175
|
-
};
|
|
176
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
177
|
-
//# sourceMappingURL=Sticky.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Sticky/Sticky.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../../primitives/index.js';\n\n/**\n * @typedef {object} StickyRefs\n * @property {HTMLElement} inner\n * @property {HTMLElement} sentinelRef\n */\n\n/**\n * @typedef {object} StickyPrivateInterface\n * @property {StickyRefs} $refs\n * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options\n * @property {{ Sentinel: Sentinel[] }} $children\n */\n\nexport interface StickyProps extends BaseProps {\n $refs: {\n inner: HTMLElement;\n sentinelRef: HTMLElement;\n };\n $options: {\n zIndex: number;\n hideWhenUp: boolean;\n hideWhenDown: boolean;\n };\n $children: {\n Sentinel: Sentinel[];\n };\n}\n\n/**\n * Sticky class.\n */\nexport class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Sticky',\n refs: ['inner', 'sentinelRef'],\n components: {\n Sentinel,\n },\n options: {\n zIndex: {\n type: Number,\n default: 100,\n },\n hideWhenUp: Boolean,\n hideWhenDown: Boolean,\n },\n };\n\n /**\n * Holder for all instances.\n */\n // eslint-disable-next-line no-use-before-define\n static instances: Set<Sticky> = new Set();\n\n /**\n * Is the component sticky?\n */\n isSticky = false;\n\n /**\n * Is the component visible?\n */\n isVisible = true;\n\n /**\n * Set the Y value.\n */\n set y(value: number) {\n this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;\n }\n\n /**\n * Get instances as array.\n */\n get instances(): Sticky[] {\n return Array.from(Sticky.instances);\n }\n\n /**\n * Mounted hook.\n */\n mounted() {\n Sticky.instances.add(this);\n this.setSentinelSize();\n }\n\n /**\n * Resized hook.\n */\n resized() {\n this.setSentinelSize();\n }\n\n /**\n * Destroyed hook.\n */\n destroyed() {\n Sticky.instances.delete(this);\n }\n\n /**\n * Scrolled hook.\n */\n scrolled(props) {\n if (!this.isSticky || props.y === props.last.y) {\n return;\n }\n\n if (\n (props.direction.y === 'DOWN' && this.$options.hideWhenDown) ||\n (props.direction.y === 'UP' && this.$options.hideWhenUp)\n ) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n /**\n * Listen to the sentinel's `intersected` event to set the `isSticky` value.\n * @param {IntersectionObserverEntry[]} entries\n * @returns {void}\n */\n onSentinelIntersected([entry]: IntersectionObserverEntry[]) {\n this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;\n this.setPosition();\n }\n\n /**\n * Hide the sticky component when another one is sticky.\n */\n hide() {\n if (!this.isVisible) {\n return;\n }\n\n this.isVisible = false;\n this.$el.classList.add('pointer-events-none');\n\n this.instances.forEach((instance, index) => instance.setPosition(index));\n }\n\n /**\n * Show the sticky component when the other one is not sticky anymore.\n */\n show() {\n if (this.isVisible) {\n return;\n }\n\n this.isVisible = true;\n this.$el.classList.remove('pointer-events-none');\n this.instances.forEach((instance, index) => instance.setPosition(index));\n }\n\n /**\n * Set the sentinel height based on the previous instances.\n */\n setSentinelSize() {\n const { instances } = this;\n const index = instances.indexOf(this);\n const height = instances\n .slice(0, index)\n .filter(\n // Test each instance sticky context against the current element\n (instance) => this.closestRelativeElement(instance.$el).contains(this.$el),\n )\n .reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);\n\n this.$refs.sentinelRef.style.height = `${height + 1}px`;\n this.$el.style.top = `${height}px`;\n this.$el.style.zIndex = String(this.$options.zIndex - index);\n }\n\n /**\n * Set the component's position.\n * @param {number} [index] The instance index in all the pages' instances.\n * @returns {void}\n */\n setPosition(index?: number) {\n if (!this.isSticky) {\n this.y = 0;\n return;\n }\n\n const { instances } = this;\n\n // eslint-disable-next-line no-param-reassign\n index = index ?? instances.indexOf(this);\n\n this.y = instances\n .slice(0, index)\n .filter((instance) => instance.isSticky && !instance.isVisible)\n .reduce<number>(\n (y: number, instance) => y - instance.$refs.inner.offsetHeight,\n this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1,\n ) as number;\n }\n\n /**\n * Find the first parent which has a relative position.\n */\n closestRelativeElement(element: HTMLElement) {\n let parent = element.parentElement;\n\n while (getComputedStyle(parent).position !== 'relative' && parent.parentElement) {\n parent = parent.parentElement;\n }\n\n return parent;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAErB,wBAAyB;AAiClB,IAAM,SAAN,MAAM,gBAAgD,uBAAsB;AAAA;AAAA;AAAA;AAAA,EAIjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,SAAS,aAAa;AAAA,IAC7B,YAAY;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,YAAyB,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAKxC,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,YAAY;AAAA;AAAA;AAAA;AAAA,EAKZ,IAAI,EAAE,OAAe;AACnB,SAAK,MAAM,MAAM,MAAM,YAAY,cAAc,KAAK;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAsB;AACxB,WAAO,MAAM,KAAK,QAAO,SAAS;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,YAAO,UAAU,IAAI,IAAI;AACzB,SAAK,gBAAgB;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,gBAAgB;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,YAAO,UAAU,OAAO,IAAI;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,OAAO;AACd,QAAI,CAAC,KAAK,YAAY,MAAM,MAAM,MAAM,KAAK,GAAG;AAC9C;AAAA,IACF;AAEA,QACG,MAAM,UAAU,MAAM,UAAU,KAAK,SAAS,gBAC9C,MAAM,UAAU,MAAM,QAAQ,KAAK,SAAS,YAC7C;AACA,WAAK,KAAK;AAAA,IACZ,OAAO;AACL,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,sBAAsB,CAAC,KAAK,GAAgC;AAC1D,SAAK,WAAW,MAAM,kBAAkB,MAAM,mBAAmB,IAAI;AACrE,SAAK,YAAY;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,QAAI,CAAC,KAAK,WAAW;AACnB;AAAA,IACF;AAEA,SAAK,YAAY;AACjB,SAAK,IAAI,UAAU,IAAI,qBAAqB;AAE5C,SAAK,UAAU,QAAQ,CAAC,UAAU,UAAU,SAAS,YAAY,KAAK,CAAC;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,QAAI,KAAK,WAAW;AAClB;AAAA,IACF;AAEA,SAAK,YAAY;AACjB,SAAK,IAAI,UAAU,OAAO,qBAAqB;AAC/C,SAAK,UAAU,QAAQ,CAAC,UAAU,UAAU,SAAS,YAAY,KAAK,CAAC;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AAChB,UAAM,EAAE,UAAU,IAAI;AACtB,UAAM,QAAQ,UAAU,QAAQ,IAAI;AACpC,UAAM,SAAS,UACZ,MAAM,GAAG,KAAK,EACd;AAAA;AAAA,MAEC,CAAC,aAAa,KAAK,uBAAuB,SAAS,GAAG,EAAE,SAAS,KAAK,GAAG;AAAA,IAC3E,EACC,OAAO,CAAC,KAAK,aAAa,MAAM,SAAS,IAAI,cAAc,CAAC;AAE/D,SAAK,MAAM,YAAY,MAAM,SAAS,GAAG,SAAS,CAAC;AACnD,SAAK,IAAI,MAAM,MAAM,GAAG,MAAM;AAC9B,SAAK,IAAI,MAAM,SAAS,OAAO,KAAK,SAAS,SAAS,KAAK;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAgB;AAC1B,QAAI,CAAC,KAAK,UAAU;AAClB,WAAK,IAAI;AACT;AAAA,IACF;AAEA,UAAM,EAAE,UAAU,IAAI;AAGtB,YAAQ,SAAS,UAAU,QAAQ,IAAI;AAEvC,SAAK,IAAI,UACN,MAAM,GAAG,KAAK,EACd,OAAO,CAAC,aAAa,SAAS,YAAY,CAAC,SAAS,SAAS,EAC7D;AAAA,MACC,CAAC,GAAW,aAAa,IAAI,SAAS,MAAM,MAAM;AAAA,MAClD,KAAK,YAAY,IAAI,KAAK,MAAM,MAAM,eAAe;AAAA,IACvD;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,uBAAuB,SAAsB;AAC3C,QAAI,SAAS,QAAQ;AAErB,WAAO,iBAAiB,MAAM,EAAE,aAAa,cAAc,OAAO,eAAe;AAC/E,eAAS,OAAO;AAAA,IAClB;AAEA,WAAO;AAAA,EACT;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,21 +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 __copyProps = (to, from, except, desc) => {
|
|
6
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
7
|
-
for (let key of __getOwnPropNames(from))
|
|
8
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
9
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
-
}
|
|
11
|
-
return to;
|
|
12
|
-
};
|
|
13
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
-
|
|
16
|
-
// packages/ui/molecules/Sticky/index.ts
|
|
17
|
-
var Sticky_exports = {};
|
|
18
|
-
module.exports = __toCommonJS(Sticky_exports);
|
|
19
|
-
__reExport(Sticky_exports, require("./Sticky.cjs"), module.exports);
|
|
20
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
21
|
-
//# sourceMappingURL=index.cjs.map
|