@studiometa/ui 0.2.21 → 0.2.23
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 +4 -1
- package/atoms/Figure/Figure.cjs.map +2 -2
- package/atoms/Figure/Figure.d.ts +4 -0
- package/atoms/Figure/Figure.js +4 -1
- package/atoms/Figure/Figure.js.map +2 -2
- package/atoms/Figure/FigureTwicpics.cjs +7 -4
- package/atoms/Figure/FigureTwicpics.cjs.map +2 -2
- package/atoms/Figure/FigureTwicpics.d.ts +6 -2
- package/atoms/Figure/FigureTwicpics.js +7 -4
- package/atoms/Figure/FigureTwicpics.js.map +2 -2
- package/atoms/Figure/FigureTwicpics.twig +7 -1
- package/package.json +1 -1
package/atoms/Figure/Figure.cjs
CHANGED
|
@@ -41,6 +41,9 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_pri
|
|
|
41
41
|
set src(value) {
|
|
42
42
|
this.$refs.img.src = value;
|
|
43
43
|
}
|
|
44
|
+
get original() {
|
|
45
|
+
return this.$refs.img.dataset.src;
|
|
46
|
+
}
|
|
44
47
|
mounted() {
|
|
45
48
|
const { img } = this.$refs;
|
|
46
49
|
if (!img) {
|
|
@@ -49,7 +52,7 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_pri
|
|
|
49
52
|
if (!(img instanceof HTMLImageElement)) {
|
|
50
53
|
throw new Error("[Figure] The `img` ref must be an `<img>` element.");
|
|
51
54
|
}
|
|
52
|
-
const
|
|
55
|
+
const src = this.original;
|
|
53
56
|
if (this.$options.lazy && src && src !== this.src) {
|
|
54
57
|
let tempImg = new Image();
|
|
55
58
|
tempImg.addEventListener(
|
|
@@ -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>(Transition, {\n threshold: [0, 1],\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 * 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAoC;AAEpC,wBAA2B;AAcpB,IAAM,SAAN,kBAAsD,uCAAgC,8BAAY;AAAA,EACvG,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAAmB;AAAA,EAkBlB,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA,EAKA,IAAI,IAAI,OAAc;AACpB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA,EAKA,UAAU;AACR,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,
|
|
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>(Transition, {\n threshold: [0, 1],\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 let tempImg = new Image();\n tempImg.addEventListener(\n 'load',\n async () => {\n this.src = src;\n tempImg = null;\n this.enter();\n this.$emit('load');\n },\n { once: true },\n );\n tempImg.src = src;\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,wBAAoC;AAEpC,wBAA2B;AAcpB,IAAM,SAAN,kBAAsD,uCAAgC,8BAAY;AAAA,EACvG,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAAmB;AAAA,EAkBlB,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA,EAKA,IAAI,IAAI,OAAc;AACpB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,MAAM,IAAI,QAAQ;AAAA,EAChC;AAAA,EAKA,UAAU;AACR,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,UAAI,UAAU,IAAI,MAAM;AACxB,cAAQ;AAAA,QACN;AAAA,QACA,YAAY;AACV,eAAK,MAAM;AACX,oBAAU;AACV,eAAK,MAAM;AACX,eAAK,MAAM,MAAM;AAAA,QACnB;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACf;AACA,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;AA7EE,cANW,QAMJ,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
package/atoms/Figure/Figure.js
CHANGED
|
@@ -22,6 +22,9 @@ class Figure extends withMountWhenInView(Transition, {
|
|
|
22
22
|
set src(value) {
|
|
23
23
|
this.$refs.img.src = value;
|
|
24
24
|
}
|
|
25
|
+
get original() {
|
|
26
|
+
return this.$refs.img.dataset.src;
|
|
27
|
+
}
|
|
25
28
|
mounted() {
|
|
26
29
|
const { img } = this.$refs;
|
|
27
30
|
if (!img) {
|
|
@@ -30,7 +33,7 @@ class Figure extends withMountWhenInView(Transition, {
|
|
|
30
33
|
if (!(img instanceof HTMLImageElement)) {
|
|
31
34
|
throw new Error("[Figure] The `img` ref must be an `<img>` element.");
|
|
32
35
|
}
|
|
33
|
-
const
|
|
36
|
+
const src = this.original;
|
|
34
37
|
if (this.$options.lazy && src && src !== this.src) {
|
|
35
38
|
let tempImg = new Image();
|
|
36
39
|
tempImg.addEventListener(
|
|
@@ -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>(Transition, {\n threshold: [0, 1],\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 * 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
|
|
5
|
-
"mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB;AAcpB,MAAM,eAAgD,oBAAgC,YAAY;AAAA,EACvG,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAAmB;AAAA,EAIlB,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,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA,EAKA,IAAI,IAAI,OAAc;AACpB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA,EAKA,UAAU;AACR,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,
|
|
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>(Transition, {\n threshold: [0, 1],\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 let tempImg = new Image();\n tempImg.addEventListener(\n 'load',\n async () => {\n this.src = src;\n tempImg = null;\n this.enter();\n this.$emit('load');\n },\n { once: true },\n );\n tempImg.src = src;\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,MAAM,eAAgD,oBAAgC,YAAY;AAAA,EACvG,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAAmB;AAAA,EAIlB,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,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA,EAKA,IAAI,IAAI,OAAc;AACpB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,MAAM,IAAI,QAAQ;AAAA,EAChC;AAAA,EAKA,UAAU;AACR,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,UAAI,UAAU,IAAI,MAAM;AACxB,cAAQ;AAAA,QACN;AAAA,QACA,YAAY;AACV,eAAK,MAAM;AACX,oBAAU;AACV,eAAK,MAAM;AACX,eAAK,MAAM,MAAM;AAAA,QACnB;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACf;AACA,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,8 +41,11 @@ var FigureTwicpics = class extends import_Figure.Figure {
|
|
|
41
41
|
const url = new URL(this.$refs.img.dataset.src);
|
|
42
42
|
return url.host;
|
|
43
43
|
}
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
get original() {
|
|
45
|
+
return this.formatSrc(super.original);
|
|
46
|
+
}
|
|
47
|
+
formatSrc(src) {
|
|
48
|
+
const url = new URL(src, "https://localhost");
|
|
46
49
|
url.host = this.domain;
|
|
47
50
|
url.port = "";
|
|
48
51
|
if (this.path) {
|
|
@@ -55,10 +58,10 @@ var FigureTwicpics = class extends import_Figure.Figure {
|
|
|
55
58
|
["v1", this.$options.transform, `${this.$options.mode}=${width}x${height}`].filter(Boolean).join("/")
|
|
56
59
|
);
|
|
57
60
|
url.search = decodeURIComponent(url.search);
|
|
58
|
-
|
|
61
|
+
return url.toString();
|
|
59
62
|
}
|
|
60
63
|
resized() {
|
|
61
|
-
this.src = this
|
|
64
|
+
this.src = this.original;
|
|
62
65
|
}
|
|
63
66
|
onLoad() {
|
|
64
67
|
}
|
|
@@ -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 { withoutLeadingSlash, withoutTrailingSlash } 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 *
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA0D;AAC1D,oBAAuB;AAgBvB,SAAS,cAAc,MAAsB,MAAsB;AACjE,QAAM,EAAE,KAAK,IAAI,KAAK;AACtB,SAAO,KAAK,KAAK,KAAK,MAAM,IAAI,QAAQ,IAAI,IAAI;AAClD;AAOO,IAAM,iBAAN,cAA8D,qBAEnE;AAAA,EA0BA,IAAI,
|
|
4
|
+
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { withoutLeadingSlash, withoutTrailingSlash } 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) {\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 this.src = this.original;\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,mBAA0D;AAC1D,oBAAuB;AAgBvB,SAAS,cAAc,MAAsB,MAAsB;AACjE,QAAM,EAAE,KAAK,IAAI,KAAK;AACtB,SAAO,KAAK,KAAK,KAAK,MAAM,IAAI,QAAQ,IAAI,IAAI;AAClD;AAOO,IAAM,iBAAN,cAA8D,qBAEnE;AAAA,EA0BA,IAAI,OAAe;AACjB,eAAO,uCAAqB,kCAAoB,KAAK,SAAS,IAAI,CAAC;AAAA,EACrE;AAAA,EAKA,IAAI,SAAiB;AACnB,UAAM,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,GAAG;AAC9C,WAAO,IAAI;AAAA,EACb;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,UAAU,MAAM,QAAQ;AAAA,EACtC;AAAA,EAKA,UAAU,KAAqB;AAC7B,UAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAC5C,QAAI,OAAO,KAAK;AAChB,QAAI,OAAO;AAEX,QAAI,KAAK,MAAM;AACb,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,EAKA,UAAU;AACR,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA,EAKA,SAAS;AAAA,EAET;AACF;AAjFE,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
|
}
|
|
@@ -28,9 +28,13 @@ export declare class FigureTwicpics<T extends BaseProps = BaseProps> extends Fig
|
|
|
28
28
|
*/
|
|
29
29
|
get domain(): string;
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
31
|
+
* Get formattted original source.
|
|
32
32
|
*/
|
|
33
|
-
|
|
33
|
+
get original(): string;
|
|
34
|
+
/**
|
|
35
|
+
* Format the source for Twicpics.
|
|
36
|
+
*/
|
|
37
|
+
formatSrc(src: string): string;
|
|
34
38
|
/**
|
|
35
39
|
* Reassign the source from the original on resize.
|
|
36
40
|
*/
|
|
@@ -30,8 +30,11 @@ class FigureTwicpics extends Figure {
|
|
|
30
30
|
const url = new URL(this.$refs.img.dataset.src);
|
|
31
31
|
return url.host;
|
|
32
32
|
}
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
get original() {
|
|
34
|
+
return this.formatSrc(super.original);
|
|
35
|
+
}
|
|
36
|
+
formatSrc(src) {
|
|
37
|
+
const url = new URL(src, "https://localhost");
|
|
35
38
|
url.host = this.domain;
|
|
36
39
|
url.port = "";
|
|
37
40
|
if (this.path) {
|
|
@@ -44,10 +47,10 @@ class FigureTwicpics extends Figure {
|
|
|
44
47
|
["v1", this.$options.transform, `${this.$options.mode}=${width}x${height}`].filter(Boolean).join("/")
|
|
45
48
|
);
|
|
46
49
|
url.search = decodeURIComponent(url.search);
|
|
47
|
-
|
|
50
|
+
return url.toString();
|
|
48
51
|
}
|
|
49
52
|
resized() {
|
|
50
|
-
this.src = this
|
|
53
|
+
this.src = this.original;
|
|
51
54
|
}
|
|
52
55
|
onLoad() {
|
|
53
56
|
}
|
|
@@ -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 { withoutLeadingSlash, withoutTrailingSlash } 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 *
|
|
5
|
-
"mappings": "AACA,SAAS,qBAAqB,4BAA4B;AAC1D,SAAS,cAAc;AAgBvB,SAAS,cAAc,MAAsB,MAAsB;AACjE,QAAM,EAAE,KAAK,IAAI,KAAK;AACtB,SAAO,KAAK,KAAK,KAAK,MAAM,IAAI,QAAQ,IAAI,IAAI;AAClD;AAOO,MAAM,uBAAwD,OAEnE;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,EAKA,IAAI,
|
|
4
|
+
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { withoutLeadingSlash, withoutTrailingSlash } 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) {\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 this.src = this.original;\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,SAAS,qBAAqB,4BAA4B;AAC1D,SAAS,cAAc;AAgBvB,SAAS,cAAc,MAAsB,MAAsB;AACjE,QAAM,EAAE,KAAK,IAAI,KAAK;AACtB,SAAO,KAAK,KAAK,KAAK,MAAM,IAAI,QAAQ,IAAI,IAAI;AAClD;AAOO,MAAM,uBAAwD,OAEnE;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,EAKA,IAAI,OAAe;AACjB,WAAO,qBAAqB,oBAAoB,KAAK,SAAS,IAAI,CAAC;AAAA,EACrE;AAAA,EAKA,IAAI,SAAiB;AACnB,UAAM,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,GAAG;AAC9C,WAAO,IAAI;AAAA,EACb;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,UAAU,MAAM,QAAQ;AAAA,EACtC;AAAA,EAKA,UAAU,KAAqB;AAC7B,UAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAC5C,QAAI,OAAO,KAAK;AAChB,QAAI,OAAO;AAEX,QAAI,KAAK,MAAM;AACb,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,EAKA,UAAU;AACR,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA,EAKA,SAAS;AAAA,EAET;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,10 +9,12 @@
|
|
|
9
9
|
* The Twicpics path to use.
|
|
10
10
|
* @param object $twic_transform
|
|
11
11
|
* Custom transforms for Twicpics.
|
|
12
|
+
* @param string $twic_placeholder
|
|
13
|
+
* Define how the placeholder should be treated. Possible values: meancolor, maincolor, preview.
|
|
12
14
|
*/
|
|
13
15
|
#}
|
|
14
16
|
|
|
15
|
-
{% extends '@ui/atoms/Figure/Figure.twig' %}
|
|
17
|
+
{% extends '@ui-pkg/atoms/Figure/Figure.twig' %}
|
|
16
18
|
|
|
17
19
|
{% set twic_param = 'v1' %}
|
|
18
20
|
{% if twic_transform is defined %}
|
|
@@ -37,3 +39,7 @@
|
|
|
37
39
|
{% set src = src.withPath(twic_path ~ src.getPath()) %}
|
|
38
40
|
{% set attr = (attr ?? {})|merge({ data_option_path: twic_path }) %}
|
|
39
41
|
{% endif %}
|
|
42
|
+
|
|
43
|
+
{% if twic_placeholder is defined %}
|
|
44
|
+
{% set placeholder = src.withQueryParameter('twic', '%s/output=%s'|format(twic_param, twic_placeholder)) %}
|
|
45
|
+
{% endif %}
|