@studiometa/ui 0.2.2 → 0.2.5
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/AnchorScrollTo/AnchorScrollTo.cjs +8 -13
- package/atoms/AnchorScrollTo/AnchorScrollTo.js +1 -26
- package/atoms/Cursor/Cursor.cjs +14 -22
- package/atoms/Cursor/Cursor.d.ts +2 -2
- package/atoms/Cursor/Cursor.js +1 -103
- package/atoms/Figure/Figure.cjs +20 -16
- package/atoms/Figure/Figure.d.ts +19 -1
- package/atoms/Figure/Figure.js +1 -27
- package/atoms/Figure/FigureTwicPics.cjs +72 -0
- package/atoms/Figure/FigureTwicPics.d.ts +48 -0
- package/atoms/Figure/FigureTwicPics.js +1 -0
- package/atoms/Figure/index.cjs +31 -0
- package/atoms/Figure/index.d.ts +2 -0
- package/atoms/Figure/index.js +1 -0
- package/atoms/LargeText/LargeText.cjs +36 -28
- package/atoms/LargeText/LargeText.d.ts +27 -4
- package/atoms/LargeText/LargeText.js +1 -48
- package/atoms/LazyInclude/LazyInclude.cjs +8 -13
- package/atoms/LazyInclude/LazyInclude.d.ts +4 -4
- package/atoms/LazyInclude/LazyInclude.js +1 -46
- package/atoms/Prefetch/AbstractPrefetch.cjs +8 -13
- package/atoms/Prefetch/AbstractPrefetch.d.ts +1 -1
- package/atoms/Prefetch/AbstractPrefetch.js +1 -58
- package/atoms/Prefetch/PrefetchWhenOver.cjs +12 -34
- package/atoms/Prefetch/PrefetchWhenOver.d.ts +1 -1
- package/atoms/Prefetch/PrefetchWhenOver.js +1 -35
- package/atoms/Prefetch/PrefetchWhenVisible.cjs +12 -34
- package/atoms/Prefetch/PrefetchWhenVisible.d.ts +1 -1
- package/atoms/Prefetch/PrefetchWhenVisible.js +1 -36
- package/atoms/Prefetch/index.cjs +9 -16
- package/atoms/Prefetch/index.js +1 -8
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs +126 -0
- package/atoms/ScrollAnimation/AbstractScrollAnimation.d.ts +133 -0
- package/atoms/ScrollAnimation/AbstractScrollAnimation.js +1 -0
- package/atoms/ScrollAnimation/ScrollAnimation.cjs +51 -0
- package/atoms/ScrollAnimation/ScrollAnimation.d.ts +55 -0
- package/atoms/ScrollAnimation/ScrollAnimation.js +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationChild.cjs +51 -0
- package/atoms/ScrollAnimation/ScrollAnimationChild.d.ts +13 -0
- package/atoms/ScrollAnimation/ScrollAnimationChild.js +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs +41 -0
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.d.ts +6 -0
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.js +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationParent.cjs +48 -0
- package/atoms/ScrollAnimation/ScrollAnimationParent.d.ts +35 -0
- package/atoms/ScrollAnimation/ScrollAnimationParent.js +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs +41 -0
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.d.ts +6 -0
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.js +1 -0
- package/atoms/ScrollAnimation/animationScrollWithEase.cjs +70 -0
- package/atoms/ScrollAnimation/animationScrollWithEase.d.ts +11 -0
- package/atoms/ScrollAnimation/animationScrollWithEase.js +1 -0
- package/atoms/ScrollAnimation/index.cjs +41 -0
- package/atoms/ScrollAnimation/index.d.ts +7 -0
- package/atoms/ScrollAnimation/index.js +1 -0
- package/atoms/index.cjs +13 -19
- package/atoms/index.d.ts +2 -1
- package/atoms/index.js +1 -13
- package/index.cjs +11 -15
- package/index.js +1 -3
- package/molecules/Accordion/Accordion.cjs +12 -34
- package/molecules/Accordion/Accordion.js +1 -35
- package/molecules/Accordion/AccordionCore.cjs +8 -13
- package/molecules/Accordion/AccordionCore.d.ts +2 -2
- package/molecules/Accordion/AccordionCore.js +1 -34
- package/molecules/Accordion/AccordionItem.cjs +70 -114
- package/molecules/Accordion/AccordionItem.d.ts +7 -6
- package/molecules/Accordion/AccordionItem.js +1 -178
- package/molecules/Menu/Menu.cjs +148 -0
- package/molecules/Menu/Menu.d.ts +140 -0
- package/molecules/Menu/Menu.js +1 -0
- package/molecules/Menu/MenuBtn.cjs +53 -0
- package/molecules/Menu/MenuBtn.d.ts +39 -0
- package/molecules/Menu/MenuBtn.js +1 -0
- package/molecules/Menu/MenuList.cjs +134 -0
- package/molecules/Menu/MenuList.d.ts +101 -0
- package/molecules/Menu/MenuList.js +1 -0
- package/molecules/Menu/index.cjs +33 -0
- package/molecules/Menu/index.d.ts +3 -0
- package/molecules/Menu/index.js +1 -0
- package/molecules/Modal/Modal.cjs +42 -71
- package/molecules/Modal/Modal.d.ts +5 -5
- package/molecules/Modal/Modal.js +1 -150
- package/molecules/Modal/ModalWithTransition.cjs +13 -43
- package/molecules/Modal/ModalWithTransition.js +1 -69
- package/molecules/Panel/Panel.cjs +42 -76
- package/molecules/Panel/Panel.js +1 -117
- package/molecules/Slider/AbstractSliderChild.cjs +10 -20
- package/molecules/Slider/AbstractSliderChild.d.ts +6 -2
- package/molecules/Slider/AbstractSliderChild.js +1 -43
- package/molecules/Slider/Slider.cjs +14 -24
- package/molecules/Slider/Slider.d.ts +6 -6
- package/molecules/Slider/Slider.js +1 -209
- package/molecules/Slider/SliderBtn.cjs +9 -16
- package/molecules/Slider/SliderBtn.d.ts +1 -1
- package/molecules/Slider/SliderBtn.js +1 -34
- package/molecules/Slider/SliderCount.cjs +9 -16
- package/molecules/Slider/SliderCount.js +1 -19
- package/molecules/Slider/SliderDots.cjs +9 -16
- package/molecules/Slider/SliderDots.js +1 -24
- package/molecules/Slider/SliderDrag.cjs +8 -13
- package/molecules/Slider/SliderDrag.js +1 -19
- package/molecules/Slider/SliderItem.cjs +14 -37
- package/molecules/Slider/SliderItem.js +1 -105
- package/molecules/Slider/SliderProgress.cjs +9 -16
- package/molecules/Slider/SliderProgress.js +1 -23
- package/molecules/Slider/index.cjs +9 -16
- package/molecules/Slider/index.js +1 -18
- package/molecules/Sticky/Sticky.cjs +11 -19
- package/molecules/Sticky/Sticky.d.ts +8 -8
- package/molecules/Sticky/Sticky.js +1 -107
- package/molecules/TableOfContent/TableOfContent.cjs +9 -16
- package/molecules/TableOfContent/TableOfContent.d.ts +1 -1
- package/molecules/TableOfContent/TableOfContent.js +1 -42
- package/molecules/TableOfContent/TableOfContentAnchor.cjs +8 -13
- package/molecules/TableOfContent/TableOfContentAnchor.js +1 -39
- package/molecules/TableOfContent/index.cjs +9 -16
- package/molecules/TableOfContent/index.js +1 -6
- package/molecules/Tabs/Tabs.cjs +54 -82
- package/molecules/Tabs/Tabs.d.ts +5 -4
- package/molecules/Tabs/Tabs.js +1 -126
- package/molecules/index.cjs +13 -18
- package/molecules/index.d.ts +1 -0
- package/molecules/index.js +1 -18
- package/organisms/Frame/Frame.cjs +67 -98
- package/organisms/Frame/Frame.d.ts +3 -3
- package/organisms/Frame/Frame.js +1 -171
- package/organisms/Frame/FrameAnchor.cjs +8 -13
- package/organisms/Frame/FrameAnchor.js +1 -22
- package/organisms/Frame/FrameForm.cjs +8 -13
- package/organisms/Frame/FrameForm.js +1 -22
- package/organisms/Frame/FrameTarget.cjs +31 -73
- package/organisms/Frame/FrameTarget.js +1 -109
- package/organisms/Frame/index.cjs +9 -16
- package/organisms/Frame/index.js +1 -10
- package/organisms/index.cjs +9 -13
- package/organisms/index.js +1 -1
- package/package.json +3 -4
- package/primitives/Draggable/Draggable.cjs +15 -28
- package/primitives/Draggable/Draggable.d.ts +0 -5
- package/primitives/Draggable/Draggable.js +1 -38
- package/primitives/Sentinel/Sentinel.cjs +8 -13
- package/primitives/Sentinel/Sentinel.js +1 -15
- package/primitives/Transition/Transition.cjs +12 -17
- package/primitives/Transition/Transition.d.ts +2 -4
- package/primitives/Transition/Transition.js +1 -45
- package/primitives/index.cjs +9 -16
- package/primitives/index.js +1 -8
|
@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
5
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
7
6
|
var __export = (target, all) => {
|
|
8
7
|
for (var name in all)
|
|
9
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
9
|
};
|
|
11
|
-
var
|
|
12
|
-
if (
|
|
13
|
-
for (let key of __getOwnPropNames(
|
|
14
|
-
if (!__hasOwnProp.call(
|
|
15
|
-
__defProp(
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
15
|
}
|
|
17
|
-
return
|
|
16
|
+
return to;
|
|
18
17
|
};
|
|
19
|
-
var __toCommonJS =
|
|
20
|
-
return (module2, temp) => {
|
|
21
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
22
|
-
};
|
|
23
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
24
19
|
var __publicField = (obj, key, value) => {
|
|
25
20
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
26
21
|
return value;
|
|
@@ -31,6 +26,7 @@ var AnchorScrollTo_exports = {};
|
|
|
31
26
|
__export(AnchorScrollTo_exports, {
|
|
32
27
|
default: () => AnchorScrollTo
|
|
33
28
|
});
|
|
29
|
+
module.exports = __toCommonJS(AnchorScrollTo_exports);
|
|
34
30
|
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
35
31
|
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
36
32
|
var AnchorScrollTo = class extends import_js_toolkit.Base {
|
|
@@ -48,5 +44,4 @@ var AnchorScrollTo = class extends import_js_toolkit.Base {
|
|
|
48
44
|
__publicField(AnchorScrollTo, "config", {
|
|
49
45
|
name: "AnchorScrollTo"
|
|
50
46
|
});
|
|
51
|
-
module.exports = __toCommonJS(AnchorScrollTo_exports);
|
|
52
47
|
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -1,26 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
|
-
import { Base } from "@studiometa/js-toolkit";
|
|
8
|
-
import { scrollTo } from "@studiometa/js-toolkit/utils";
|
|
9
|
-
class AnchorScrollTo extends Base {
|
|
10
|
-
get targetSelector() {
|
|
11
|
-
return this.$el.hash;
|
|
12
|
-
}
|
|
13
|
-
onClick(event) {
|
|
14
|
-
try {
|
|
15
|
-
scrollTo(this.targetSelector);
|
|
16
|
-
event.preventDefault();
|
|
17
|
-
} catch (err) {
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
__publicField(AnchorScrollTo, "config", {
|
|
22
|
-
name: "AnchorScrollTo"
|
|
23
|
-
});
|
|
24
|
-
export {
|
|
25
|
-
AnchorScrollTo as default
|
|
26
|
-
};
|
|
1
|
+
import{Base as r}from"@studiometa/js-toolkit";import{scrollTo as e}from"@studiometa/js-toolkit/utils";class o extends r{static config={name:"AnchorScrollTo"};get targetSelector(){return this.$el.hash}onClick(t){try{e(this.targetSelector),t.preventDefault()}catch{}}}export{o as default};
|
package/atoms/Cursor/Cursor.cjs
CHANGED
|
@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
5
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
7
6
|
var __export = (target, all) => {
|
|
8
7
|
for (var name in all)
|
|
9
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
9
|
};
|
|
11
|
-
var
|
|
12
|
-
if (
|
|
13
|
-
for (let key of __getOwnPropNames(
|
|
14
|
-
if (!__hasOwnProp.call(
|
|
15
|
-
__defProp(
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
15
|
}
|
|
17
|
-
return
|
|
16
|
+
return to;
|
|
18
17
|
};
|
|
19
|
-
var __toCommonJS =
|
|
20
|
-
return (module2, temp) => {
|
|
21
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
22
|
-
};
|
|
23
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
24
19
|
var __publicField = (obj, key, value) => {
|
|
25
20
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
26
21
|
return value;
|
|
@@ -31,18 +26,16 @@ var Cursor_exports = {};
|
|
|
31
26
|
__export(Cursor_exports, {
|
|
32
27
|
default: () => Cursor
|
|
33
28
|
});
|
|
29
|
+
module.exports = __toCommonJS(Cursor_exports);
|
|
34
30
|
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
35
31
|
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
36
32
|
var Cursor = class extends import_js_toolkit.Base {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
__publicField(this, "pointerY", 0);
|
|
44
|
-
__publicField(this, "pointerScale", 0);
|
|
45
|
-
}
|
|
33
|
+
x = 0;
|
|
34
|
+
y = 0;
|
|
35
|
+
scale = 0;
|
|
36
|
+
pointerX = 0;
|
|
37
|
+
pointerY = 0;
|
|
38
|
+
pointerScale = 0;
|
|
46
39
|
mounted() {
|
|
47
40
|
this.x = 0;
|
|
48
41
|
this.y = 0;
|
|
@@ -125,5 +118,4 @@ __publicField(Cursor, "config", {
|
|
|
125
118
|
}
|
|
126
119
|
}
|
|
127
120
|
});
|
|
128
|
-
module.exports = __toCommonJS(Cursor_exports);
|
|
129
121
|
if (module.exports.default) module.exports = module.exports.default;
|
package/atoms/Cursor/Cursor.d.ts
CHANGED
|
@@ -96,7 +96,7 @@ export default class Cursor extends Base {
|
|
|
96
96
|
* @param {PointerServiceProps} options
|
|
97
97
|
* @return {void}
|
|
98
98
|
*/
|
|
99
|
-
moved({ event, x, y, isDown }: PointerServiceProps): void;
|
|
99
|
+
moved(this: CursorInterface, { event, x, y, isDown }: PointerServiceProps): void;
|
|
100
100
|
/**
|
|
101
101
|
* RequestAnimationFrame hook.
|
|
102
102
|
*
|
|
@@ -104,7 +104,7 @@ export default class Cursor extends Base {
|
|
|
104
104
|
*
|
|
105
105
|
* @return {void}
|
|
106
106
|
*/
|
|
107
|
-
ticked(): void;
|
|
107
|
+
ticked(this: CursorInterface): void;
|
|
108
108
|
/**
|
|
109
109
|
* Render the cursor.
|
|
110
110
|
*
|
package/atoms/Cursor/Cursor.js
CHANGED
|
@@ -1,103 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
|
-
import { Base } from "@studiometa/js-toolkit";
|
|
8
|
-
import { damp, matrix } from "@studiometa/js-toolkit/utils";
|
|
9
|
-
class Cursor extends Base {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments);
|
|
12
|
-
__publicField(this, "x", 0);
|
|
13
|
-
__publicField(this, "y", 0);
|
|
14
|
-
__publicField(this, "scale", 0);
|
|
15
|
-
__publicField(this, "pointerX", 0);
|
|
16
|
-
__publicField(this, "pointerY", 0);
|
|
17
|
-
__publicField(this, "pointerScale", 0);
|
|
18
|
-
}
|
|
19
|
-
mounted() {
|
|
20
|
-
this.x = 0;
|
|
21
|
-
this.y = 0;
|
|
22
|
-
this.scale = 0;
|
|
23
|
-
this.pointerX = 0;
|
|
24
|
-
this.pointerY = 0;
|
|
25
|
-
this.pointerScale = 0;
|
|
26
|
-
this.render({ x: this.x, y: this.y, scale: this.scale });
|
|
27
|
-
}
|
|
28
|
-
moved({ event, x, y, isDown }) {
|
|
29
|
-
if (!this.$services.has("ticked")) {
|
|
30
|
-
this.$services.enable("ticked");
|
|
31
|
-
}
|
|
32
|
-
this.pointerX = x;
|
|
33
|
-
this.pointerY = y;
|
|
34
|
-
let scale = 1;
|
|
35
|
-
if (!event) {
|
|
36
|
-
this.pointerScale = scale;
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
const shouldGrow = event.target instanceof Element && event.target.matches(this.$options.growSelectors) || false;
|
|
40
|
-
const shouldReduce = isDown || event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors) || false;
|
|
41
|
-
if (shouldGrow) {
|
|
42
|
-
scale = this.$options.growTo;
|
|
43
|
-
}
|
|
44
|
-
if (shouldReduce) {
|
|
45
|
-
scale = this.$options.shrinkTo;
|
|
46
|
-
}
|
|
47
|
-
this.pointerScale = scale;
|
|
48
|
-
}
|
|
49
|
-
ticked() {
|
|
50
|
-
this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);
|
|
51
|
-
this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);
|
|
52
|
-
this.scale = damp(this.pointerScale, this.scale, this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor);
|
|
53
|
-
this.render({ x: this.x, y: this.y, scale: this.scale });
|
|
54
|
-
if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {
|
|
55
|
-
this.$services.disable("ticked");
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
render({ x, y, scale }) {
|
|
59
|
-
const transform = matrix({
|
|
60
|
-
translateX: x,
|
|
61
|
-
translateY: y,
|
|
62
|
-
scaleX: scale,
|
|
63
|
-
scaleY: scale
|
|
64
|
-
});
|
|
65
|
-
this.$el.style.transform = `translateZ(0) ${transform}`;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
__publicField(Cursor, "config", {
|
|
69
|
-
name: "Cursor",
|
|
70
|
-
options: {
|
|
71
|
-
growSelectors: {
|
|
72
|
-
type: String,
|
|
73
|
-
default: "a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"
|
|
74
|
-
},
|
|
75
|
-
shrinkSelectors: {
|
|
76
|
-
type: String,
|
|
77
|
-
default: "[data-cursor-shrink], [data-cursor-shrink] *"
|
|
78
|
-
},
|
|
79
|
-
growTo: {
|
|
80
|
-
type: Number,
|
|
81
|
-
default: 2
|
|
82
|
-
},
|
|
83
|
-
shrinkTo: {
|
|
84
|
-
type: Number,
|
|
85
|
-
default: 0.5
|
|
86
|
-
},
|
|
87
|
-
translateDampFactor: {
|
|
88
|
-
type: Number,
|
|
89
|
-
default: 0.25
|
|
90
|
-
},
|
|
91
|
-
growDampFactor: {
|
|
92
|
-
type: Number,
|
|
93
|
-
default: 0.25
|
|
94
|
-
},
|
|
95
|
-
shrinkDampFactor: {
|
|
96
|
-
type: Number,
|
|
97
|
-
default: 0.25
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
export {
|
|
102
|
-
Cursor as default
|
|
103
|
-
};
|
|
1
|
+
import{Base as n}from"@studiometa/js-toolkit";import{damp as a,matrix as c}from"@studiometa/js-toolkit/utils";class l extends n{static config={name:"Cursor",options:{growSelectors:{type:String,default:"a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"},shrinkSelectors:{type:String,default:"[data-cursor-shrink], [data-cursor-shrink] *"},growTo:{type:Number,default:2},shrinkTo:{type:Number,default:.5},translateDampFactor:{type:Number,default:.25},growDampFactor:{type:Number,default:.25},shrinkDampFactor:{type:Number,default:.25}}};x=0;y=0;scale=0;pointerX=0;pointerY=0;pointerScale=0;mounted(){this.x=0,this.y=0,this.scale=0,this.pointerX=0,this.pointerY=0,this.pointerScale=0,this.render({x:this.x,y:this.y,scale:this.scale})}moved({event:t,x:i,y:s,isDown:r}){this.$services.has("ticked")||this.$services.enable("ticked"),this.pointerX=i,this.pointerY=s;let e=1;if(!t){this.pointerScale=e;return}const o=t.target instanceof Element&&t.target.matches(this.$options.growSelectors)||!1,h=r||t.target instanceof Element&&t.target.matches(this.$options.shrinkSelectors)||!1;o&&(e=this.$options.growTo),h&&(e=this.$options.shrinkTo),this.pointerScale=e}ticked(){this.x=a(this.pointerX,this.x,this.$options.translateDampFactor),this.y=a(this.pointerY,this.y,this.$options.translateDampFactor),this.scale=a(this.pointerScale,this.scale,this.pointerScale<this.scale?this.$options.shrinkDampFactor:this.$options.growDampFactor),this.render({x:this.x,y:this.y,scale:this.scale}),this.x===this.pointerX&&this.y===this.pointerY&&this.scale===this.pointerScale&&this.$services.disable("ticked")}render({x:t,y:i,scale:s}){const r=c({translateX:t,translateY:i,scaleX:s,scaleY:s});this.$el.style.transform=`translateZ(0) ${r}`}}export{l as default};
|
package/atoms/Figure/Figure.cjs
CHANGED
|
@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
5
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
7
6
|
var __export = (target, all) => {
|
|
8
7
|
for (var name in all)
|
|
9
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
9
|
};
|
|
11
|
-
var
|
|
12
|
-
if (
|
|
13
|
-
for (let key of __getOwnPropNames(
|
|
14
|
-
if (!__hasOwnProp.call(
|
|
15
|
-
__defProp(
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
15
|
}
|
|
17
|
-
return
|
|
16
|
+
return to;
|
|
18
17
|
};
|
|
19
|
-
var __toCommonJS =
|
|
20
|
-
return (module2, temp) => {
|
|
21
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
22
|
-
};
|
|
23
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
24
19
|
var __publicField = (obj, key, value) => {
|
|
25
20
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
26
21
|
return value;
|
|
@@ -31,8 +26,15 @@ var Figure_exports = {};
|
|
|
31
26
|
__export(Figure_exports, {
|
|
32
27
|
default: () => Figure
|
|
33
28
|
});
|
|
29
|
+
module.exports = __toCommonJS(Figure_exports);
|
|
34
30
|
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
35
31
|
var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { threshold: [0, 1] }) {
|
|
32
|
+
get src() {
|
|
33
|
+
return this.$refs.img.src;
|
|
34
|
+
}
|
|
35
|
+
set src(value) {
|
|
36
|
+
this.$refs.img.src = value;
|
|
37
|
+
}
|
|
36
38
|
mounted() {
|
|
37
39
|
if (!this.$refs.img) {
|
|
38
40
|
throw new Error("[Figure] The `img` ref is required.");
|
|
@@ -40,14 +42,16 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_
|
|
|
40
42
|
if (!(this.$refs.img instanceof HTMLImageElement)) {
|
|
41
43
|
throw new Error("[Figure] The `img` ref must be an `<img>` element.");
|
|
42
44
|
}
|
|
43
|
-
if (this.$refs.img.hasAttribute("data-src")) {
|
|
44
|
-
this
|
|
45
|
+
if (this.$options.lazy && this.$refs.img.hasAttribute("data-src") && this.$refs.img.getAttribute("data-src") !== this.src) {
|
|
46
|
+
this.src = this.$refs.img.getAttribute("data-src");
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
};
|
|
48
50
|
__publicField(Figure, "config", {
|
|
49
51
|
name: "Figure",
|
|
50
|
-
refs: ["img"]
|
|
52
|
+
refs: ["img"],
|
|
53
|
+
options: {
|
|
54
|
+
lazy: Boolean
|
|
55
|
+
}
|
|
51
56
|
});
|
|
52
|
-
module.exports = __toCommonJS(Figure_exports);
|
|
53
57
|
if (module.exports.default) module.exports = module.exports.default;
|
package/atoms/Figure/Figure.d.ts
CHANGED
|
@@ -15,12 +15,30 @@ export default class Figure extends Base {
|
|
|
15
15
|
static config: {
|
|
16
16
|
name: string;
|
|
17
17
|
refs: string[];
|
|
18
|
+
options: {
|
|
19
|
+
lazy: BooleanConstructor;
|
|
20
|
+
};
|
|
18
21
|
};
|
|
22
|
+
/**
|
|
23
|
+
* Set the image source.
|
|
24
|
+
*
|
|
25
|
+
* @this {Figure & FigureInterface}
|
|
26
|
+
* @param {string} value
|
|
27
|
+
* @returns {void}
|
|
28
|
+
*/
|
|
29
|
+
set src(arg: string);
|
|
30
|
+
/**
|
|
31
|
+
* Get the image source.
|
|
32
|
+
*
|
|
33
|
+
* @this {Figure & FigureInterface}
|
|
34
|
+
* @returns {string}
|
|
35
|
+
*/
|
|
36
|
+
get src(): string;
|
|
19
37
|
/**
|
|
20
38
|
* Load on mount.
|
|
21
39
|
* @this {Figure & FigureInterface}
|
|
22
40
|
*/
|
|
23
|
-
mounted(): void;
|
|
41
|
+
mounted(this: Figure & FigureInterface): void;
|
|
24
42
|
}
|
|
25
43
|
export type FigureRefs = {
|
|
26
44
|
img: HTMLImageElement;
|
package/atoms/Figure/Figure.js
CHANGED
|
@@ -1,27 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
|
-
import { Base, withMountWhenInView } from "@studiometa/js-toolkit";
|
|
8
|
-
class Figure extends withMountWhenInView(Base, { threshold: [0, 1] }) {
|
|
9
|
-
mounted() {
|
|
10
|
-
if (!this.$refs.img) {
|
|
11
|
-
throw new Error("[Figure] The `img` ref is required.");
|
|
12
|
-
}
|
|
13
|
-
if (!(this.$refs.img instanceof HTMLImageElement)) {
|
|
14
|
-
throw new Error("[Figure] The `img` ref must be an `<img>` element.");
|
|
15
|
-
}
|
|
16
|
-
if (this.$refs.img.hasAttribute("data-src")) {
|
|
17
|
-
this.$refs.img.src = this.$refs.img.getAttribute("data-src");
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
__publicField(Figure, "config", {
|
|
22
|
-
name: "Figure",
|
|
23
|
-
refs: ["img"]
|
|
24
|
-
});
|
|
25
|
-
export {
|
|
26
|
-
Figure as default
|
|
27
|
-
};
|
|
1
|
+
import{Base as t,withMountWhenInView as r}from"@studiometa/js-toolkit";class i extends r(t,{threshold:[0,1]}){static config={name:"Figure",refs:["img"],options:{lazy:Boolean}};get src(){return this.$refs.img.src}set src(e){this.$refs.img.src=e}mounted(){if(!this.$refs.img)throw new Error("[Figure] The `img` ref is required.");if(!(this.$refs.img instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");this.$options.lazy&&this.$refs.img.hasAttribute("data-src")&&this.$refs.img.getAttribute("data-src")!==this.src&&(this.src=this.$refs.img.getAttribute("data-src"))}}export{i as default};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var __publicField = (obj, key, value) => {
|
|
23
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
+
return value;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// packages/ui/atoms/Figure/FigureTwicPics.js
|
|
28
|
+
var FigureTwicPics_exports = {};
|
|
29
|
+
__export(FigureTwicPics_exports, {
|
|
30
|
+
default: () => FigureTwicPics
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(FigureTwicPics_exports);
|
|
33
|
+
var import_Figure = __toESM(require("./Figure.cjs"), 1);
|
|
34
|
+
function normalizeSize(that, prop) {
|
|
35
|
+
const { step } = that.$options;
|
|
36
|
+
return Math.ceil(that.$refs.img[prop] / step) * step;
|
|
37
|
+
}
|
|
38
|
+
var FigureTwicPics = class extends import_Figure.default {
|
|
39
|
+
get domain() {
|
|
40
|
+
const url = new URL(this.$refs.img.dataset.src);
|
|
41
|
+
return url.host;
|
|
42
|
+
}
|
|
43
|
+
set src(value) {
|
|
44
|
+
const url = new URL(value);
|
|
45
|
+
url.host = this.domain;
|
|
46
|
+
const width = normalizeSize(this, "offsetWidth");
|
|
47
|
+
const height = normalizeSize(this, "offsetHeight");
|
|
48
|
+
url.searchParams.set("twic", ["v1", this.$options.transform, `${this.$options.mode}=${width}x${height}`].filter(Boolean).join("/"));
|
|
49
|
+
url.search = decodeURIComponent(url.search);
|
|
50
|
+
super.src = url.toString();
|
|
51
|
+
}
|
|
52
|
+
resized() {
|
|
53
|
+
this.src = this.$refs.img.dataset.src;
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
__publicField(FigureTwicPics, "config", {
|
|
57
|
+
...import_Figure.default.config,
|
|
58
|
+
name: "FigureTwicPics",
|
|
59
|
+
options: {
|
|
60
|
+
...import_Figure.default.config.options,
|
|
61
|
+
transform: String,
|
|
62
|
+
step: {
|
|
63
|
+
type: Number,
|
|
64
|
+
default: 50
|
|
65
|
+
},
|
|
66
|
+
mode: {
|
|
67
|
+
type: String,
|
|
68
|
+
default: "cover"
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Figure class.
|
|
3
|
+
*
|
|
4
|
+
* Manager lazyloading image sources.
|
|
5
|
+
*/
|
|
6
|
+
export default class FigureTwicPics extends Figure {
|
|
7
|
+
/**
|
|
8
|
+
* Config.
|
|
9
|
+
*/
|
|
10
|
+
static config: {
|
|
11
|
+
name: string;
|
|
12
|
+
options: {
|
|
13
|
+
transform: StringConstructor;
|
|
14
|
+
step: {
|
|
15
|
+
type: NumberConstructor;
|
|
16
|
+
default: number;
|
|
17
|
+
};
|
|
18
|
+
mode: {
|
|
19
|
+
type: StringConstructor;
|
|
20
|
+
default: string;
|
|
21
|
+
};
|
|
22
|
+
lazy: BooleanConstructor;
|
|
23
|
+
};
|
|
24
|
+
refs: string[];
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Get the TwicPics domain.
|
|
28
|
+
*
|
|
29
|
+
* @this {FigureTwicPicsInterface}
|
|
30
|
+
* @returns {string}
|
|
31
|
+
*/
|
|
32
|
+
get domain(): string;
|
|
33
|
+
/**
|
|
34
|
+
* Reassign the source from the original on resized.
|
|
35
|
+
*
|
|
36
|
+
* @this {FigureTwicPicsInterface}
|
|
37
|
+
* @returns {void}
|
|
38
|
+
*/
|
|
39
|
+
resized(this: FigureTwicPicsInterface): void;
|
|
40
|
+
}
|
|
41
|
+
export type FigureInterface = import('./Figure.js').FigureInterface;
|
|
42
|
+
export type FigureTwicPicsInterface = FigureTwicPics & FigureInterface & {
|
|
43
|
+
$options: {
|
|
44
|
+
transform: string;
|
|
45
|
+
step: number;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
import Figure from "./Figure.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import i from"./Figure.js";function o(e,s){const{step:t}=e.$options;return Math.ceil(e.$refs.img[s]/t)*t}class c extends i{static config={...i.config,name:"FigureTwicPics",options:{...i.config.options,transform:String,step:{type:Number,default:50},mode:{type:String,default:"cover"}}};get domain(){return new URL(this.$refs.img.dataset.src).host}set src(s){const t=new URL(s);t.host=this.domain;const r=o(this,"offsetWidth"),n=o(this,"offsetHeight");t.searchParams.set("twic",["v1",this.$options.transform,`${this.$options.mode}=${r}x${n}`].filter(Boolean).join("/")),t.search=decodeURIComponent(t.search),super.src=t.toString()}resized(){this.src=this.$refs.img.dataset.src}}export{c as default};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
20
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
21
|
+
|
|
22
|
+
// packages/ui/atoms/Figure/index.js
|
|
23
|
+
var Figure_exports = {};
|
|
24
|
+
__export(Figure_exports, {
|
|
25
|
+
Figure: () => import_Figure.default,
|
|
26
|
+
FigureTwicPics: () => import_FigureTwicPics.default
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(Figure_exports);
|
|
29
|
+
var import_Figure = __toESM(require("./Figure.cjs"), 1);
|
|
30
|
+
var import_FigureTwicPics = __toESM(require("./FigureTwicPics.cjs"), 1);
|
|
31
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{default as a}from"./Figure.js";import{default as i}from"./FigureTwicPics.js";export{a as Figure,i as FigureTwicPics};
|
|
@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
5
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
7
6
|
var __export = (target, all) => {
|
|
8
7
|
for (var name in all)
|
|
9
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
9
|
};
|
|
11
|
-
var
|
|
12
|
-
if (
|
|
13
|
-
for (let key of __getOwnPropNames(
|
|
14
|
-
if (!__hasOwnProp.call(
|
|
15
|
-
__defProp(
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
15
|
}
|
|
17
|
-
return
|
|
16
|
+
return to;
|
|
18
17
|
};
|
|
19
|
-
var __toCommonJS =
|
|
20
|
-
return (module2, temp) => {
|
|
21
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
22
|
-
};
|
|
23
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
24
19
|
var __publicField = (obj, key, value) => {
|
|
25
20
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
26
21
|
return value;
|
|
@@ -31,19 +26,17 @@ var LargeText_exports = {};
|
|
|
31
26
|
__export(LargeText_exports, {
|
|
32
27
|
default: () => LargeText
|
|
33
28
|
});
|
|
29
|
+
module.exports = __toCommonJS(LargeText_exports);
|
|
34
30
|
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
35
31
|
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
36
32
|
var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { rootMargin: "50%" }) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
});
|
|
45
|
-
__publicField(this, "width", 0);
|
|
46
|
-
}
|
|
33
|
+
translateX = 0;
|
|
34
|
+
deltaY = 0;
|
|
35
|
+
transform = {
|
|
36
|
+
skewX: 0,
|
|
37
|
+
translateX: 0
|
|
38
|
+
};
|
|
39
|
+
width = 0;
|
|
47
40
|
mounted() {
|
|
48
41
|
this.width = this.$refs.target.clientWidth;
|
|
49
42
|
}
|
|
@@ -54,12 +47,17 @@ var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_
|
|
|
54
47
|
this.deltaY = props.delta.y;
|
|
55
48
|
}
|
|
56
49
|
ticked() {
|
|
57
|
-
this.translateX -= Math.abs(this.deltaY) + 1;
|
|
50
|
+
this.translateX -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
|
|
58
51
|
this.transform.translateX = (0, import_utils.damp)(this.translateX, this.transform.translateX, 0.25);
|
|
59
|
-
|
|
60
|
-
|
|
52
|
+
if (this.$options.skew) {
|
|
53
|
+
this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY / 20 * -1, -0.5, 0.5) * this.$options.skewSensitivity, this.transform.skewX, 0.25);
|
|
54
|
+
}
|
|
55
|
+
if (this.translateX <= this.width * -1) {
|
|
56
|
+
this.translateX = 0;
|
|
57
|
+
this.transform.translateX += this.width;
|
|
58
|
+
} else if (this.$options.sensitivity < 0 && this.translateX >= this.width) {
|
|
61
59
|
this.translateX = 0;
|
|
62
|
-
this.transform.translateX
|
|
60
|
+
this.transform.translateX -= this.width;
|
|
63
61
|
}
|
|
64
62
|
(0, import_utils.nextFrame)(() => {
|
|
65
63
|
this.$refs.target.style.transform = (0, import_utils.matrix)(this.transform) + " translateZ(0px)";
|
|
@@ -68,7 +66,17 @@ var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_
|
|
|
68
66
|
};
|
|
69
67
|
__publicField(LargeText, "config", {
|
|
70
68
|
name: "LargeText",
|
|
71
|
-
refs: ["target"]
|
|
69
|
+
refs: ["target"],
|
|
70
|
+
options: {
|
|
71
|
+
skew: Boolean,
|
|
72
|
+
sensitivity: {
|
|
73
|
+
type: Number,
|
|
74
|
+
default: 1
|
|
75
|
+
},
|
|
76
|
+
skewSensitivity: {
|
|
77
|
+
type: Number,
|
|
78
|
+
default: 1
|
|
79
|
+
}
|
|
80
|
+
}
|
|
72
81
|
});
|
|
73
|
-
module.exports = __toCommonJS(LargeText_exports);
|
|
74
82
|
if (module.exports.default) module.exports = module.exports.default;
|