@studiometa/ui 0.2.33 → 0.2.35
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/Figure/Figure.cjs +14 -14
- package/atoms/Figure/Figure.cjs.map +2 -2
- package/atoms/Figure/Figure.d.ts +5 -1
- package/atoms/Figure/Figure.js +14 -14
- package/atoms/Figure/Figure.js.map +2 -2
- package/atoms/Figure/FigureTwicpics.cjs +3 -2
- package/atoms/Figure/FigureTwicpics.cjs.map +2 -2
- package/atoms/Figure/FigureTwicpics.d.ts +1 -1
- package/atoms/Figure/FigureTwicpics.js +4 -3
- package/atoms/Figure/FigureTwicpics.js.map +2 -2
- package/package.json +1 -1
package/atoms/Figure/Figure.cjs
CHANGED
|
@@ -24,11 +24,19 @@ var __publicField = (obj, key, value) => {
|
|
|
24
24
|
// packages/ui/atoms/Figure/Figure.ts
|
|
25
25
|
var Figure_exports = {};
|
|
26
26
|
__export(Figure_exports, {
|
|
27
|
-
Figure: () => Figure
|
|
27
|
+
Figure: () => Figure,
|
|
28
|
+
loadImage: () => loadImage
|
|
28
29
|
});
|
|
29
30
|
module.exports = __toCommonJS(Figure_exports);
|
|
30
31
|
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
31
32
|
var import_primitives = require("../../primitives/index.cjs");
|
|
33
|
+
function loadImage(src) {
|
|
34
|
+
return new Promise((resolve) => {
|
|
35
|
+
const img = new Image();
|
|
36
|
+
img.addEventListener("load", () => resolve(img));
|
|
37
|
+
img.src = src;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
32
40
|
var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(
|
|
33
41
|
import_primitives.Transition,
|
|
34
42
|
{
|
|
@@ -62,7 +70,7 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(
|
|
|
62
70
|
/**
|
|
63
71
|
* Load on mount.
|
|
64
72
|
*/
|
|
65
|
-
mounted() {
|
|
73
|
+
async mounted() {
|
|
66
74
|
const { img } = this.$refs;
|
|
67
75
|
if (!img) {
|
|
68
76
|
throw new Error("[Figure] The `img` ref is required.");
|
|
@@ -72,18 +80,10 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(
|
|
|
72
80
|
}
|
|
73
81
|
const src = this.original;
|
|
74
82
|
if (this.$options.lazy && src && src !== this.src) {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
this.src = src;
|
|
80
|
-
tempImg = null;
|
|
81
|
-
this.enter();
|
|
82
|
-
this.$emit("load");
|
|
83
|
-
},
|
|
84
|
-
{ once: true }
|
|
85
|
-
);
|
|
86
|
-
tempImg.src = src;
|
|
83
|
+
await loadImage(src);
|
|
84
|
+
this.src = src;
|
|
85
|
+
this.enter();
|
|
86
|
+
this.$emit("load");
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
/**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Figure/Figure.ts"],
|
|
4
|
-
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FigureProps extends BaseProps {\n $refs: {\n img: HTMLImageElement;\n };\n $options: {\n lazy: boolean;\n };\n}\n\n/**\n * Figure class.\n */\nexport class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(\n Transition,\n {\n threshold: [0, 1],\n },\n)<T & FigureProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'Figure',\n emits: ['load'],\n refs: ['img'],\n options: {\n ...Transition.config.options,\n lazy: Boolean,\n },\n };\n\n /**\n * Get the transition target.\n */\n get target() {\n return this.$refs.img;\n }\n\n /**\n * Get the image source.\n */\n get src() {\n return this.$refs.img.src;\n }\n\n /**\n * Set the image source.\n */\n set src(value: string) {\n this.$refs.img.src = value;\n }\n\n /**\n * Get the original source.\n */\n get original() {\n return this.$refs.img.dataset.src;\n }\n\n /**\n * Load on mount.\n */\n mounted() {\n const { img } = this.$refs;\n\n if (!img) {\n throw new Error('[Figure] The `img` ref is required.');\n }\n\n if (!(img instanceof HTMLImageElement)) {\n throw new Error('[Figure] The `img` ref must be an `<img>` element.');\n }\n\n const src = this.original;\n\n if (this.$options.lazy && src && src !== this.src) {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAoC;AAEpC,wBAA2B;AAcpB,IAAM,SAAN,kBAAsD;AAAA,EAC3D;AAAA,EACA;AAAA,IACE,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AACF,EAAmB;AAAA;AAAA;AAAA;AAAA,EAkBjB,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,IAAI,OAAe;AACrB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,MAAM,IAAI,QAAQ;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;
|
|
4
|
+
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FigureProps extends BaseProps {\n $refs: {\n img: HTMLImageElement;\n };\n $options: {\n lazy: boolean;\n };\n}\n\n/**\n * Load the given image.\n */\nexport function loadImage(src: string): Promise<HTMLImageElement> {\n return new Promise((resolve) => {\n const img = new Image();\n img.addEventListener('load', () => resolve(img));\n img.src = src;\n });\n}\n\n/**\n * Figure class.\n */\nexport class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(\n Transition,\n {\n threshold: [0, 1],\n },\n)<T & FigureProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'Figure',\n emits: ['load'],\n refs: ['img'],\n options: {\n ...Transition.config.options,\n lazy: Boolean,\n },\n };\n\n /**\n * Get the transition target.\n */\n get target() {\n return this.$refs.img;\n }\n\n /**\n * Get the image source.\n */\n get src() {\n return this.$refs.img.src;\n }\n\n /**\n * Set the image source.\n */\n set src(value: string) {\n this.$refs.img.src = value;\n }\n\n /**\n * Get the original source.\n */\n get original() {\n return this.$refs.img.dataset.src;\n }\n\n /**\n * Load on mount.\n */\n async mounted() {\n const { img } = this.$refs;\n\n if (!img) {\n throw new Error('[Figure] The `img` ref is required.');\n }\n\n if (!(img instanceof HTMLImageElement)) {\n throw new Error('[Figure] The `img` ref must be an `<img>` element.');\n }\n\n const src = this.original;\n\n if (this.$options.lazy && src && src !== this.src) {\n await loadImage(src);\n this.src = src;\n this.enter();\n this.$emit('load');\n }\n }\n\n /**\n * Terminate the component on load.\n */\n onLoad() {\n this.$terminate();\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAoC;AAEpC,wBAA2B;AAcpB,SAAS,UAAU,KAAwC;AAChE,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,MAAM,IAAI,MAAM;AACtB,QAAI,iBAAiB,QAAQ,MAAM,QAAQ,GAAG,CAAC;AAC/C,QAAI,MAAM;AAAA,EACZ,CAAC;AACH;AAKO,IAAM,SAAN,kBAAsD;AAAA,EAC3D;AAAA,EACA;AAAA,IACE,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AACF,EAAmB;AAAA;AAAA;AAAA;AAAA,EAkBjB,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,IAAI,OAAe;AACrB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,MAAM,IAAI,QAAQ;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,UAAM,EAAE,IAAI,IAAI,KAAK;AAErB,QAAI,CAAC,KAAK;AACR,YAAM,IAAI,MAAM,qCAAqC;AAAA,IACvD;AAEA,QAAI,EAAE,eAAe,mBAAmB;AACtC,YAAM,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEA,UAAM,MAAM,KAAK;AAEjB,QAAI,KAAK,SAAS,QAAQ,OAAO,QAAQ,KAAK,KAAK;AACjD,YAAM,UAAU,GAAG;AACnB,WAAK,MAAM;AACX,WAAK,MAAM;AACX,WAAK,MAAM,MAAM;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;AAAA;AAAA;AAAA;AArEE,cATW,QASJ,UAAqB;AAAA,EAC1B,GAAG,6BAAW;AAAA,EACd,MAAM;AAAA,EACN,OAAO,CAAC,MAAM;AAAA,EACd,MAAM,CAAC,KAAK;AAAA,EACZ,SAAS;AAAA,IACP,GAAG,6BAAW,OAAO;AAAA,IACrB,MAAM;AAAA,EACR;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/atoms/Figure/Figure.d.ts
CHANGED
|
@@ -8,6 +8,10 @@ export interface FigureProps extends BaseProps {
|
|
|
8
8
|
lazy: boolean;
|
|
9
9
|
};
|
|
10
10
|
}
|
|
11
|
+
/**
|
|
12
|
+
* Load the given image.
|
|
13
|
+
*/
|
|
14
|
+
export declare function loadImage(src: string): Promise<HTMLImageElement>;
|
|
11
15
|
declare const Figure_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithMountWhenInViewInterface, Transition<BaseProps>, import("@studiometa/js-toolkit").WithMountWhenInViewProps>;
|
|
12
16
|
/**
|
|
13
17
|
* Figure class.
|
|
@@ -36,7 +40,7 @@ export declare class Figure<T extends BaseProps = BaseProps> extends Figure_base
|
|
|
36
40
|
/**
|
|
37
41
|
* Load on mount.
|
|
38
42
|
*/
|
|
39
|
-
mounted(): void
|
|
43
|
+
mounted(): Promise<void>;
|
|
40
44
|
/**
|
|
41
45
|
* Terminate the component on load.
|
|
42
46
|
*/
|
package/atoms/Figure/Figure.js
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import { withMountWhenInView } from "@studiometa/js-toolkit";
|
|
2
2
|
import { Transition } from "../../primitives/index.js";
|
|
3
|
+
function loadImage(src) {
|
|
4
|
+
return new Promise((resolve) => {
|
|
5
|
+
const img = new Image();
|
|
6
|
+
img.addEventListener("load", () => resolve(img));
|
|
7
|
+
img.src = src;
|
|
8
|
+
});
|
|
9
|
+
}
|
|
3
10
|
class Figure extends withMountWhenInView(
|
|
4
11
|
Transition,
|
|
5
12
|
{
|
|
@@ -46,7 +53,7 @@ class Figure extends withMountWhenInView(
|
|
|
46
53
|
/**
|
|
47
54
|
* Load on mount.
|
|
48
55
|
*/
|
|
49
|
-
mounted() {
|
|
56
|
+
async mounted() {
|
|
50
57
|
const { img } = this.$refs;
|
|
51
58
|
if (!img) {
|
|
52
59
|
throw new Error("[Figure] The `img` ref is required.");
|
|
@@ -56,18 +63,10 @@ class Figure extends withMountWhenInView(
|
|
|
56
63
|
}
|
|
57
64
|
const src = this.original;
|
|
58
65
|
if (this.$options.lazy && src && src !== this.src) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
this.src = src;
|
|
64
|
-
tempImg = null;
|
|
65
|
-
this.enter();
|
|
66
|
-
this.$emit("load");
|
|
67
|
-
},
|
|
68
|
-
{ once: true }
|
|
69
|
-
);
|
|
70
|
-
tempImg.src = src;
|
|
66
|
+
await loadImage(src);
|
|
67
|
+
this.src = src;
|
|
68
|
+
this.enter();
|
|
69
|
+
this.$emit("load");
|
|
71
70
|
}
|
|
72
71
|
}
|
|
73
72
|
/**
|
|
@@ -78,6 +77,7 @@ class Figure extends withMountWhenInView(
|
|
|
78
77
|
}
|
|
79
78
|
}
|
|
80
79
|
export {
|
|
81
|
-
Figure
|
|
80
|
+
Figure,
|
|
81
|
+
loadImage
|
|
82
82
|
};
|
|
83
83
|
//# sourceMappingURL=Figure.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Figure/Figure.ts"],
|
|
4
|
-
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FigureProps extends BaseProps {\n $refs: {\n img: HTMLImageElement;\n };\n $options: {\n lazy: boolean;\n };\n}\n\n/**\n * Figure class.\n */\nexport class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(\n Transition,\n {\n threshold: [0, 1],\n },\n)<T & FigureProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'Figure',\n emits: ['load'],\n refs: ['img'],\n options: {\n ...Transition.config.options,\n lazy: Boolean,\n },\n };\n\n /**\n * Get the transition target.\n */\n get target() {\n return this.$refs.img;\n }\n\n /**\n * Get the image source.\n */\n get src() {\n return this.$refs.img.src;\n }\n\n /**\n * Set the image source.\n */\n set src(value: string) {\n this.$refs.img.src = value;\n }\n\n /**\n * Get the original source.\n */\n get original() {\n return this.$refs.img.dataset.src;\n }\n\n /**\n * Load on mount.\n */\n mounted() {\n const { img } = this.$refs;\n\n if (!img) {\n throw new Error('[Figure] The `img` ref is required.');\n }\n\n if (!(img instanceof HTMLImageElement)) {\n throw new Error('[Figure] The `img` ref must be an `<img>` element.');\n }\n\n const src = this.original;\n\n if (this.$options.lazy && src && src !== this.src) {\n
|
|
5
|
-
"mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB;AAcpB,MAAM,eAAgD;AAAA,EAC3D;AAAA,EACA;AAAA,IACE,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AACF,EAAmB;AAAA;AAAA;AAAA;AAAA,EAIjB,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,OAAO,CAAC,MAAM;AAAA,IACd,MAAM,CAAC,KAAK;AAAA,IACZ,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,IACR;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,IAAI,OAAe;AACrB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,MAAM,IAAI,QAAQ;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;
|
|
4
|
+
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FigureProps extends BaseProps {\n $refs: {\n img: HTMLImageElement;\n };\n $options: {\n lazy: boolean;\n };\n}\n\n/**\n * Load the given image.\n */\nexport function loadImage(src: string): Promise<HTMLImageElement> {\n return new Promise((resolve) => {\n const img = new Image();\n img.addEventListener('load', () => resolve(img));\n img.src = src;\n });\n}\n\n/**\n * Figure class.\n */\nexport class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(\n Transition,\n {\n threshold: [0, 1],\n },\n)<T & FigureProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'Figure',\n emits: ['load'],\n refs: ['img'],\n options: {\n ...Transition.config.options,\n lazy: Boolean,\n },\n };\n\n /**\n * Get the transition target.\n */\n get target() {\n return this.$refs.img;\n }\n\n /**\n * Get the image source.\n */\n get src() {\n return this.$refs.img.src;\n }\n\n /**\n * Set the image source.\n */\n set src(value: string) {\n this.$refs.img.src = value;\n }\n\n /**\n * Get the original source.\n */\n get original() {\n return this.$refs.img.dataset.src;\n }\n\n /**\n * Load on mount.\n */\n async mounted() {\n const { img } = this.$refs;\n\n if (!img) {\n throw new Error('[Figure] The `img` ref is required.');\n }\n\n if (!(img instanceof HTMLImageElement)) {\n throw new Error('[Figure] The `img` ref must be an `<img>` element.');\n }\n\n const src = this.original;\n\n if (this.$options.lazy && src && src !== this.src) {\n await loadImage(src);\n this.src = src;\n this.enter();\n this.$emit('load');\n }\n }\n\n /**\n * Terminate the component on load.\n */\n onLoad() {\n this.$terminate();\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB;AAcpB,SAAS,UAAU,KAAwC;AAChE,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,MAAM,IAAI,MAAM;AACtB,QAAI,iBAAiB,QAAQ,MAAM,QAAQ,GAAG,CAAC;AAC/C,QAAI,MAAM;AAAA,EACZ,CAAC;AACH;AAKO,MAAM,eAAgD;AAAA,EAC3D;AAAA,EACA;AAAA,IACE,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AACF,EAAmB;AAAA;AAAA;AAAA;AAAA,EAIjB,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,OAAO,CAAC,MAAM;AAAA,IACd,MAAM,CAAC,KAAK;AAAA,IACZ,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,IACR;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,IAAI,OAAe;AACrB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,MAAM,IAAI,QAAQ;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,UAAM,EAAE,IAAI,IAAI,KAAK;AAErB,QAAI,CAAC,KAAK;AACR,YAAM,IAAI,MAAM,qCAAqC;AAAA,IACvD;AAEA,QAAI,EAAE,eAAe,mBAAmB;AACtC,YAAM,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEA,UAAM,MAAM,KAAK;AAEjB,QAAI,KAAK,SAAS,QAAQ,OAAO,QAAQ,KAAK,KAAK;AACjD,YAAM,UAAU,GAAG;AACnB,WAAK,MAAM;AACX,WAAK,MAAM;AACX,WAAK,MAAM,MAAM;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -75,8 +75,9 @@ var FigureTwicpics = class extends import_Figure.Figure {
|
|
|
75
75
|
/**
|
|
76
76
|
* Reassign the source from the original on resize.
|
|
77
77
|
*/
|
|
78
|
-
resized() {
|
|
79
|
-
|
|
78
|
+
async resized() {
|
|
79
|
+
const { src } = await (0, import_Figure.loadImage)(this.original);
|
|
80
|
+
this.src = src;
|
|
80
81
|
}
|
|
81
82
|
/**
|
|
82
83
|
* Do not terminate on image load as we need to set the src on resize.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Figure/FigureTwicpics.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n withLeadingSlash,\n withoutLeadingSlash,\n withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { Figure } from './Figure.js';\n\nexport interface FigureTwicpicsProps extends BaseProps {\n $options: {\n transform: string;\n domain: string;\n path: string;\n step: number;\n mode: string;\n };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureTwicpics, prop: string): number {\n const { step } = that.$options;\n return Math.ceil(that.$refs.img[prop] / step) * step;\n}\n\n/**\n * Figure class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<\n T & FigureTwicpicsProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Figure.config,\n name: 'FigureTwicpics',\n options: {\n ...Figure.config.options,\n transform: String,\n domain: String,\n path: String,\n step: {\n type: Number,\n default: 50,\n },\n mode: {\n type: String,\n default: 'cover',\n },\n },\n };\n\n /**\n * Get the Twicpics path.\n */\n get path(): string {\n return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n }\n\n /**\n * Get the Twicpics domain.\n */\n get domain(): string {\n const url = new URL(this.$refs.img.dataset.src);\n return url.host;\n }\n\n /**\n * Get formattted original source.\n */\n get original() {\n return this.formatSrc(super.original);\n }\n\n /**\n * Format the source for Twicpics.\n */\n formatSrc(src: string): string {\n const url = new URL(src, 'https://localhost');\n url.host = this.domain;\n url.port = '';\n\n if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n url.pathname = `/${this.path}${url.pathname}`;\n }\n\n const width = normalizeSize(this, 'offsetWidth');\n const height = normalizeSize(this, 'offsetHeight');\n\n url.searchParams.set(\n 'twic',\n ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`]\n .filter(Boolean)\n .join('/'),\n );\n\n url.search = decodeURIComponent(url.search);\n\n return url.toString();\n }\n\n /**\n * Reassign the source from the original on resize.\n */\n resized() {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAIO;AACP,
|
|
4
|
+
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n withLeadingSlash,\n withoutLeadingSlash,\n withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { Figure, loadImage } from './Figure.js';\n\nexport interface FigureTwicpicsProps extends BaseProps {\n $options: {\n transform: string;\n domain: string;\n path: string;\n step: number;\n mode: string;\n };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureTwicpics, prop: string): number {\n const { step } = that.$options;\n return Math.ceil(that.$refs.img[prop] / step) * step;\n}\n\n/**\n * Figure class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<\n T & FigureTwicpicsProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Figure.config,\n name: 'FigureTwicpics',\n options: {\n ...Figure.config.options,\n transform: String,\n domain: String,\n path: String,\n step: {\n type: Number,\n default: 50,\n },\n mode: {\n type: String,\n default: 'cover',\n },\n },\n };\n\n /**\n * Get the Twicpics path.\n */\n get path(): string {\n return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n }\n\n /**\n * Get the Twicpics domain.\n */\n get domain(): string {\n const url = new URL(this.$refs.img.dataset.src);\n return url.host;\n }\n\n /**\n * Get formattted original source.\n */\n get original() {\n return this.formatSrc(super.original);\n }\n\n /**\n * Format the source for Twicpics.\n */\n formatSrc(src: string): string {\n const url = new URL(src, 'https://localhost');\n url.host = this.domain;\n url.port = '';\n\n if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n url.pathname = `/${this.path}${url.pathname}`;\n }\n\n const width = normalizeSize(this, 'offsetWidth');\n const height = normalizeSize(this, 'offsetHeight');\n\n url.searchParams.set(\n 'twic',\n ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`]\n .filter(Boolean)\n .join('/'),\n );\n\n url.search = decodeURIComponent(url.search);\n\n return url.toString();\n }\n\n /**\n * Reassign the source from the original on resize.\n */\n async resized() {\n const { src } = await loadImage(this.original);\n this.src = src;\n }\n\n /**\n * Do not terminate on image load as we need to set the src on resize.\n */\n onLoad() {\n // Do not terminate on image load as we need.\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAIO;AACP,oBAAkC;AAgBlC,SAAS,cAAc,MAAsB,MAAsB;AACjE,QAAM,EAAE,KAAK,IAAI,KAAK;AACtB,SAAO,KAAK,KAAK,KAAK,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI;AAClD;AAOO,IAAM,iBAAN,cAA8D,qBAEnE;AAAA;AAAA;AAAA;AAAA,EA0BA,IAAI,OAAe;AACjB,eAAO,uCAAqB,kCAAoB,KAAK,SAAS,IAAI,CAAC;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAiB;AACnB,UAAM,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,GAAG;AAC9C,WAAO,IAAI;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,UAAU,MAAM,QAAQ;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,KAAqB;AAC7B,UAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAC5C,QAAI,OAAO,KAAK;AAChB,QAAI,OAAO;AAEX,QAAI,KAAK,QAAQ,CAAC,IAAI,SAAS,eAAW,+BAAiB,KAAK,IAAI,CAAC,GAAG;AACtE,UAAI,WAAW,IAAI,KAAK,OAAO,IAAI;AAAA,IACrC;AAEA,UAAM,QAAQ,cAAc,MAAM,aAAa;AAC/C,UAAM,SAAS,cAAc,MAAM,cAAc;AAEjD,QAAI,aAAa;AAAA,MACf;AAAA,MACA,CAAC,MAAM,KAAK,SAAS,WAAW,GAAG,KAAK,SAAS,QAAQ,SAAS,QAAQ,EACvE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,IACb;AAEA,QAAI,SAAS,mBAAmB,IAAI,MAAM;AAE1C,WAAO,IAAI,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,UAAM,EAAE,IAAI,IAAI,UAAM,yBAAU,KAAK,QAAQ;AAC7C,SAAK,MAAM;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AAAA,EAET;AACF;AAAA;AAAA;AAAA;AAlFE,cANW,gBAMJ,UAAqB;AAAA,EAC1B,GAAG,qBAAO;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,IACP,GAAG,qBAAO,OAAO;AAAA,IACjB,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,7 +38,7 @@ export declare class FigureTwicpics<T extends BaseProps = BaseProps> extends Fig
|
|
|
38
38
|
/**
|
|
39
39
|
* Reassign the source from the original on resize.
|
|
40
40
|
*/
|
|
41
|
-
resized(): void
|
|
41
|
+
resized(): Promise<void>;
|
|
42
42
|
/**
|
|
43
43
|
* Do not terminate on image load as we need to set the src on resize.
|
|
44
44
|
*/
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
withoutLeadingSlash,
|
|
4
4
|
withoutTrailingSlash
|
|
5
5
|
} from "@studiometa/js-toolkit/utils";
|
|
6
|
-
import { Figure } from "./Figure.js";
|
|
6
|
+
import { Figure, loadImage } from "./Figure.js";
|
|
7
7
|
function normalizeSize(that, prop) {
|
|
8
8
|
const { step } = that.$options;
|
|
9
9
|
return Math.ceil(that.$refs.img[prop] / step) * step;
|
|
@@ -71,8 +71,9 @@ class FigureTwicpics extends Figure {
|
|
|
71
71
|
/**
|
|
72
72
|
* Reassign the source from the original on resize.
|
|
73
73
|
*/
|
|
74
|
-
resized() {
|
|
75
|
-
|
|
74
|
+
async resized() {
|
|
75
|
+
const { src } = await loadImage(this.original);
|
|
76
|
+
this.src = src;
|
|
76
77
|
}
|
|
77
78
|
/**
|
|
78
79
|
* Do not terminate on image load as we need to set the src on resize.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Figure/FigureTwicpics.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n withLeadingSlash,\n withoutLeadingSlash,\n withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { Figure } from './Figure.js';\n\nexport interface FigureTwicpicsProps extends BaseProps {\n $options: {\n transform: string;\n domain: string;\n path: string;\n step: number;\n mode: string;\n };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureTwicpics, prop: string): number {\n const { step } = that.$options;\n return Math.ceil(that.$refs.img[prop] / step) * step;\n}\n\n/**\n * Figure class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<\n T & FigureTwicpicsProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Figure.config,\n name: 'FigureTwicpics',\n options: {\n ...Figure.config.options,\n transform: String,\n domain: String,\n path: String,\n step: {\n type: Number,\n default: 50,\n },\n mode: {\n type: String,\n default: 'cover',\n },\n },\n };\n\n /**\n * Get the Twicpics path.\n */\n get path(): string {\n return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n }\n\n /**\n * Get the Twicpics domain.\n */\n get domain(): string {\n const url = new URL(this.$refs.img.dataset.src);\n return url.host;\n }\n\n /**\n * Get formattted original source.\n */\n get original() {\n return this.formatSrc(super.original);\n }\n\n /**\n * Format the source for Twicpics.\n */\n formatSrc(src: string): string {\n const url = new URL(src, 'https://localhost');\n url.host = this.domain;\n url.port = '';\n\n if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n url.pathname = `/${this.path}${url.pathname}`;\n }\n\n const width = normalizeSize(this, 'offsetWidth');\n const height = normalizeSize(this, 'offsetHeight');\n\n url.searchParams.set(\n 'twic',\n ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`]\n .filter(Boolean)\n .join('/'),\n );\n\n url.search = decodeURIComponent(url.search);\n\n return url.toString();\n }\n\n /**\n * Reassign the source from the original on resize.\n */\n resized() {\n
|
|
5
|
-
"mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,
|
|
4
|
+
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n withLeadingSlash,\n withoutLeadingSlash,\n withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { Figure, loadImage } from './Figure.js';\n\nexport interface FigureTwicpicsProps extends BaseProps {\n $options: {\n transform: string;\n domain: string;\n path: string;\n step: number;\n mode: string;\n };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureTwicpics, prop: string): number {\n const { step } = that.$options;\n return Math.ceil(that.$refs.img[prop] / step) * step;\n}\n\n/**\n * Figure class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<\n T & FigureTwicpicsProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Figure.config,\n name: 'FigureTwicpics',\n options: {\n ...Figure.config.options,\n transform: String,\n domain: String,\n path: String,\n step: {\n type: Number,\n default: 50,\n },\n mode: {\n type: String,\n default: 'cover',\n },\n },\n };\n\n /**\n * Get the Twicpics path.\n */\n get path(): string {\n return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n }\n\n /**\n * Get the Twicpics domain.\n */\n get domain(): string {\n const url = new URL(this.$refs.img.dataset.src);\n return url.host;\n }\n\n /**\n * Get formattted original source.\n */\n get original() {\n return this.formatSrc(super.original);\n }\n\n /**\n * Format the source for Twicpics.\n */\n formatSrc(src: string): string {\n const url = new URL(src, 'https://localhost');\n url.host = this.domain;\n url.port = '';\n\n if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n url.pathname = `/${this.path}${url.pathname}`;\n }\n\n const width = normalizeSize(this, 'offsetWidth');\n const height = normalizeSize(this, 'offsetHeight');\n\n url.searchParams.set(\n 'twic',\n ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`]\n .filter(Boolean)\n .join('/'),\n );\n\n url.search = decodeURIComponent(url.search);\n\n return url.toString();\n }\n\n /**\n * Reassign the source from the original on resize.\n */\n async resized() {\n const { src } = await loadImage(this.original);\n this.src = src;\n }\n\n /**\n * Do not terminate on image load as we need to set the src on resize.\n */\n onLoad() {\n // Do not terminate on image load as we need.\n }\n}\n"],
|
|
5
|
+
"mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,QAAQ,iBAAiB;AAgBlC,SAAS,cAAc,MAAsB,MAAsB;AACjE,QAAM,EAAE,KAAK,IAAI,KAAK;AACtB,SAAO,KAAK,KAAK,KAAK,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI;AAClD;AAOO,MAAM,uBAAwD,OAEnE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,OAAO;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,MACP,GAAG,OAAO,OAAO;AAAA,MACjB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,OAAe;AACjB,WAAO,qBAAqB,oBAAoB,KAAK,SAAS,IAAI,CAAC;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAiB;AACnB,UAAM,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,GAAG;AAC9C,WAAO,IAAI;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,UAAU,MAAM,QAAQ;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,KAAqB;AAC7B,UAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAC5C,QAAI,OAAO,KAAK;AAChB,QAAI,OAAO;AAEX,QAAI,KAAK,QAAQ,CAAC,IAAI,SAAS,WAAW,iBAAiB,KAAK,IAAI,CAAC,GAAG;AACtE,UAAI,WAAW,IAAI,KAAK,OAAO,IAAI;AAAA,IACrC;AAEA,UAAM,QAAQ,cAAc,MAAM,aAAa;AAC/C,UAAM,SAAS,cAAc,MAAM,cAAc;AAEjD,QAAI,aAAa;AAAA,MACf;AAAA,MACA,CAAC,MAAM,KAAK,SAAS,WAAW,GAAG,KAAK,SAAS,QAAQ,SAAS,QAAQ,EACvE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,IACb;AAEA,QAAI,SAAS,mBAAmB,IAAI,MAAM;AAE1C,WAAO,IAAI,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,UAAM,EAAE,IAAI,IAAI,MAAM,UAAU,KAAK,QAAQ;AAC7C,SAAK,MAAM;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AAAA,EAET;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|