@wix/editor-react-components 1.2416.0 → 1.2417.0
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/dist/site/components/BoxContainer/component.js +1 -1
- package/dist/site/components/Breadcrumbs/component.js +2 -2
- package/dist/site/components/Checkbox/component.js +1 -1
- package/dist/site/components/CheckboxGroup/component.js +1 -1
- package/dist/site/components/DatePicker/component.js +1 -1
- package/dist/site/components/Dropdown/component.js +2 -2
- package/dist/site/components/GoogleMap/component.js +1 -1
- package/dist/site/components/HTMLComponent/component.js +1 -1
- package/dist/site/components/HipaaIcon/component.js +2 -2
- package/dist/site/components/Image3/component.js +11 -1
- package/dist/site/components/LegacyAppWidget/component.js +1 -1
- package/dist/site/components/LegacyContainer/component.js +1 -1
- package/dist/site/components/LegacyMultiStateBox/component.js +1 -1
- package/dist/site/components/LinkBar/component.js +1 -1
- package/dist/site/components/Lottie/component.js +1 -1
- package/dist/site/components/Menu/component.js +3 -3
- package/dist/site/components/RadioButtons/component.js +1 -1
- package/dist/site/components/ShareButtons/component.js +2 -2
- package/dist/site/components/Slideshow/component.js +1 -1
- package/dist/site/components/TextBox/component.js +1 -1
- package/dist/site/components/TextEffects3d/component.js +1 -1
- package/dist/site/components/TextEffectsBauhaus/component.js +1 -1
- package/dist/site/components/TextEffectsGlass/component.js +1 -1
- package/dist/site/components/TextEffectsGlitch/component.js +1 -1
- package/dist/site/components/TextEffectsLetterPress/component.js +1 -1
- package/dist/site/components/TextEffectsMatrix/component.js +1 -1
- package/dist/site/components/TextEffectsNeonSign/component.js +1 -1
- package/dist/site/components/TextEffectsNoisy/component.js +1 -1
- package/dist/site/components/TextEffectsOutlineOut/component.js +1 -1
- package/dist/site/components/TextEffectsRetro/component.js +1 -1
- package/dist/site/components/TextEffectsShook/component.js +1 -1
- package/dist/site/components/TextEffectsSticker/component.js +1 -1
- package/dist/site/components/TextEffectsStriped/component.js +1 -1
- package/dist/site/components/TextInput/component.js +2 -2
- package/dist/site/components/TextInput/sdk.js +1 -1
- package/dist/site/components/TimePicker/component.js +1 -1
- package/dist/site/components/TransparentVideo/component.js +2 -2
- package/dist/site/components/VideoUpload/component.js +7 -1
- package/dist/site/components/WRichText/manifest.js +3 -0
- package/dist/site/components/chunks/AnimatedIcon.js +1 -1
- package/dist/site/components/chunks/Image.js +1 -1
- package/dist/site/components/chunks/customElementInit.js +1 -1
- package/dist/site/components/chunks/index10.js +1914 -30330
- package/dist/site/components/chunks/index11.js +30437 -3
- package/dist/site/components/chunks/index12.js +5 -0
- package/dist/site/components/chunks/index3.js +3 -1463
- package/dist/site/components/chunks/index4.js +1405 -2312
- package/dist/site/components/chunks/index5.js +2370 -3
- package/dist/site/components/chunks/index6.js +3 -3
- package/dist/site/components/chunks/index7.js +3 -4
- package/dist/site/components/chunks/index8.js +3 -66
- package/dist/site/components/chunks/index9.js +52 -2006
- package/dist/site/components/chunks/parseHtml.js +2 -2
- package/dist/site/components/chunks/parseSvg.js +2 -2
- package/dist/site/components/chunks/staticService.js +1 -1
- package/dist/site/components/chunks/useConsentPolicyProps.js +1 -1
- package/package.json +4 -3
|
@@ -1,1465 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
const
|
|
3
|
-
const DSKTP_MAX_BG_SITE_LEGACY_WIDTH = 1920;
|
|
4
|
-
const DSKTP_MAX_BG_SITE_LEGACY_HEIGHT = 1920;
|
|
5
|
-
const MOBILE_MAX_BG_SITE_LEGACY_WIDTH = 1e3;
|
|
6
|
-
const MOBILE_MAX_BG_SITE_LEGACY_HEIGHT = 1e3;
|
|
7
|
-
const fittingTypes = {
|
|
8
|
-
SCALE_TO_FILL: "fill",
|
|
9
|
-
SCALE_TO_FIT: "fit",
|
|
10
|
-
STRETCH: "stretch",
|
|
11
|
-
ORIGINAL_SIZE: "original_size",
|
|
12
|
-
TILE: "tile",
|
|
13
|
-
TILE_HORIZONTAL: "tile_horizontal",
|
|
14
|
-
TILE_VERTICAL: "tile_vertical",
|
|
15
|
-
FIT_AND_TILE: "fit_and_tile",
|
|
16
|
-
LEGACY_STRIP_TILE: "legacy_strip_tile",
|
|
17
|
-
LEGACY_STRIP_TILE_HORIZONTAL: "legacy_strip_tile_horizontal",
|
|
18
|
-
LEGACY_STRIP_TILE_VERTICAL: "legacy_strip_tile_vertical",
|
|
19
|
-
LEGACY_STRIP_SCALE_TO_FILL: "legacy_strip_fill",
|
|
20
|
-
LEGACY_STRIP_SCALE_TO_FIT: "legacy_strip_fit",
|
|
21
|
-
LEGACY_STRIP_FIT_AND_TILE: "legacy_strip_fit_and_tile",
|
|
22
|
-
LEGACY_STRIP_ORIGINAL_SIZE: "legacy_strip_original_size",
|
|
23
|
-
LEGACY_ORIGINAL_SIZE: "actual_size",
|
|
24
|
-
LEGACY_FIT_WIDTH: "fitWidth",
|
|
25
|
-
LEGACY_FIT_HEIGHT: "fitHeight",
|
|
26
|
-
LEGACY_FULL: "full",
|
|
27
|
-
LEGACY_BG_FIT_AND_TILE: "legacy_tile",
|
|
28
|
-
LEGACY_BG_FIT_AND_TILE_HORIZONTAL: "legacy_tile_horizontal",
|
|
29
|
-
LEGACY_BG_FIT_AND_TILE_VERTICAL: "legacy_tile_vertical",
|
|
30
|
-
LEGACY_BG_NORMAL: "legacy_normal"
|
|
31
|
-
};
|
|
32
|
-
const transformTypes = {
|
|
33
|
-
FIT: "fit",
|
|
34
|
-
FILL: "fill",
|
|
35
|
-
FILL_FOCAL: "fill_focal",
|
|
36
|
-
CROP: "crop",
|
|
37
|
-
LEGACY_CROP: "legacy_crop",
|
|
38
|
-
LEGACY_FILL: "legacy_fill"
|
|
39
|
-
};
|
|
40
|
-
const alignTypes = {
|
|
41
|
-
CENTER: "center",
|
|
42
|
-
TOP: "top",
|
|
43
|
-
TOP_LEFT: "top_left",
|
|
44
|
-
TOP_RIGHT: "top_right",
|
|
45
|
-
BOTTOM: "bottom",
|
|
46
|
-
BOTTOM_LEFT: "bottom_left",
|
|
47
|
-
BOTTOM_RIGHT: "bottom_right",
|
|
48
|
-
LEFT: "left",
|
|
49
|
-
RIGHT: "right"
|
|
50
|
-
};
|
|
51
|
-
const ALIGN_TYPE_TO_FOCAL_POINT = {
|
|
52
|
-
[alignTypes.CENTER]: { x: 0.5, y: 0.5 },
|
|
53
|
-
[alignTypes.TOP_LEFT]: { x: 0, y: 0 },
|
|
54
|
-
[alignTypes.TOP_RIGHT]: { x: 1, y: 0 },
|
|
55
|
-
[alignTypes.TOP]: { x: 0.5, y: 0 },
|
|
56
|
-
[alignTypes.BOTTOM_LEFT]: { x: 0, y: 1 },
|
|
57
|
-
[alignTypes.BOTTOM_RIGHT]: { x: 1, y: 1 },
|
|
58
|
-
[alignTypes.BOTTOM]: { x: 0.5, y: 1 },
|
|
59
|
-
[alignTypes.RIGHT]: { x: 1, y: 0.5 },
|
|
60
|
-
[alignTypes.LEFT]: { x: 0, y: 0.5 }
|
|
61
|
-
};
|
|
62
|
-
const alignTypesMap = {
|
|
63
|
-
center: "c",
|
|
64
|
-
top: "t",
|
|
65
|
-
top_left: "tl",
|
|
66
|
-
top_right: "tr",
|
|
67
|
-
bottom: "b",
|
|
68
|
-
bottom_left: "bl",
|
|
69
|
-
bottom_right: "br",
|
|
70
|
-
left: "l",
|
|
71
|
-
right: "r"
|
|
72
|
-
};
|
|
73
|
-
const htmlTag = {
|
|
74
|
-
BG: "bg",
|
|
75
|
-
SVG: "svg"
|
|
76
|
-
};
|
|
77
|
-
const upscaleMethods = {
|
|
78
|
-
AUTO: "auto",
|
|
79
|
-
CLASSIC: "classic",
|
|
80
|
-
SUPER: "super"
|
|
81
|
-
};
|
|
82
|
-
const upscaleMethodsValues = {
|
|
83
|
-
classic: 1,
|
|
84
|
-
super: 2
|
|
85
|
-
};
|
|
86
|
-
const defaultUSM = {
|
|
87
|
-
radius: "0.66",
|
|
88
|
-
amount: "1.00",
|
|
89
|
-
threshold: "0.01"
|
|
90
|
-
};
|
|
91
|
-
const emptyData = {
|
|
92
|
-
uri: "",
|
|
93
|
-
css: {
|
|
94
|
-
img: {},
|
|
95
|
-
container: {}
|
|
96
|
-
},
|
|
97
|
-
attr: {
|
|
98
|
-
img: {},
|
|
99
|
-
container: {}
|
|
100
|
-
},
|
|
101
|
-
transformed: false
|
|
102
|
-
};
|
|
103
|
-
const MAX_TRANSFORMED_IMAGE_WIDTH = 5e3;
|
|
104
|
-
const MAX_TRANSFORMED_IMAGE_HEIGHT = 5e3;
|
|
105
|
-
const SAFE_TRANSFORMED_AREA = MAX_TRANSFORMED_IMAGE_WIDTH * MAX_TRANSFORMED_IMAGE_HEIGHT;
|
|
106
|
-
const SUPER_UPSCALE_MODELS = [1.5, 2, 4];
|
|
107
|
-
const imageScaleDefaults = {
|
|
108
|
-
HIGH: {
|
|
109
|
-
size: 1400 * 1400,
|
|
110
|
-
quality: 90,
|
|
111
|
-
maxUpscale: 1
|
|
112
|
-
},
|
|
113
|
-
MEDIUM: {
|
|
114
|
-
size: 600 * 600,
|
|
115
|
-
quality: 85,
|
|
116
|
-
maxUpscale: 1
|
|
117
|
-
},
|
|
118
|
-
LOW: {
|
|
119
|
-
size: 400 * 400,
|
|
120
|
-
quality: 80,
|
|
121
|
-
maxUpscale: 1.2
|
|
122
|
-
},
|
|
123
|
-
TINY: {
|
|
124
|
-
size: 0,
|
|
125
|
-
quality: 80,
|
|
126
|
-
maxUpscale: 1.4
|
|
127
|
-
}
|
|
128
|
-
};
|
|
129
|
-
const imageQuality = {
|
|
130
|
-
HIGH: "HIGH",
|
|
131
|
-
MEDIUM: "MEDIUM",
|
|
132
|
-
LOW: "LOW",
|
|
133
|
-
TINY: "TINY"
|
|
134
|
-
};
|
|
135
|
-
const imageFilters = {
|
|
136
|
-
CONTRAST: "contrast",
|
|
137
|
-
BRIGHTNESS: "brightness",
|
|
138
|
-
SATURATION: "saturation",
|
|
139
|
-
HUE: "hue",
|
|
140
|
-
BLUR: "blur"
|
|
141
|
-
};
|
|
142
|
-
const fileType = {
|
|
143
|
-
JPG: "jpg",
|
|
144
|
-
JPEG: "jpeg",
|
|
145
|
-
JPE: "jpe",
|
|
146
|
-
PNG: "png",
|
|
147
|
-
WEBP: "webp",
|
|
148
|
-
WIX_ICO_MP: "wix_ico_mp",
|
|
149
|
-
WIX_MP: "wix_mp",
|
|
150
|
-
GIF: "gif",
|
|
151
|
-
AVIF: "avif",
|
|
152
|
-
UNRECOGNIZED: "unrecognized"
|
|
153
|
-
};
|
|
154
|
-
const encodingTypes = {
|
|
155
|
-
AVIF: "AVIF",
|
|
156
|
-
PAVIF: "PAVIF"
|
|
157
|
-
};
|
|
158
|
-
function template(strings, ...keys) {
|
|
159
|
-
return function(...values) {
|
|
160
|
-
const dict = values[values.length - 1] || {};
|
|
161
|
-
const result = [strings[0]];
|
|
162
|
-
keys.forEach(function(key, i) {
|
|
163
|
-
const value = Number.isInteger(key) ? values[key] : dict[key];
|
|
164
|
-
result.push(value, strings[i + 1]);
|
|
165
|
-
});
|
|
166
|
-
return result.join("");
|
|
167
|
-
};
|
|
168
|
-
}
|
|
169
|
-
function last(array) {
|
|
170
|
-
return array[array.length - 1];
|
|
171
|
-
}
|
|
172
|
-
const SUPPORTED_IMAGE_EXTENSIONS = [
|
|
173
|
-
fileType.PNG,
|
|
174
|
-
fileType.JPEG,
|
|
175
|
-
fileType.JPG,
|
|
176
|
-
fileType.JPE,
|
|
177
|
-
fileType.WIX_ICO_MP,
|
|
178
|
-
fileType.WIX_MP,
|
|
179
|
-
fileType.WEBP,
|
|
180
|
-
fileType.AVIF
|
|
181
|
-
];
|
|
182
|
-
const JPG_EXTENSIONS = [
|
|
183
|
-
fileType.JPEG,
|
|
184
|
-
fileType.JPG,
|
|
185
|
-
fileType.JPE
|
|
186
|
-
];
|
|
187
|
-
function isImageTypeSupported(uri) {
|
|
188
|
-
return SUPPORTED_IMAGE_EXTENSIONS.includes(getFileExtension(uri));
|
|
189
|
-
}
|
|
190
|
-
function isValidRequest(fittingType, src, target) {
|
|
191
|
-
return target && src && !isUrlEmptyOrNone(src.id) && Object.values(fittingTypes).includes(fittingType);
|
|
192
|
-
}
|
|
193
|
-
function canTransformAnimatedWebpOrAvif(uri, hasAnimation, allowAnimatedTransform) {
|
|
194
|
-
const isAvifWebpFormat = isWEBP(uri) || isAVIF(uri);
|
|
195
|
-
if (!isAvifWebpFormat || !hasAnimation) {
|
|
196
|
-
return true;
|
|
197
|
-
}
|
|
198
|
-
return allowAnimatedTransform;
|
|
199
|
-
}
|
|
200
|
-
function canTransformGIF(uri, allowAnimatedTransform, allowFullGIFTransformation) {
|
|
201
|
-
if (!isGIF(uri)) {
|
|
202
|
-
return false;
|
|
203
|
-
}
|
|
204
|
-
return !!(allowAnimatedTransform || allowFullGIFTransformation);
|
|
205
|
-
}
|
|
206
|
-
function isImageTransformApplicable(uri, hasAnimation, allowAnimatedTransform, allowFullGIFTransformation) {
|
|
207
|
-
if (isExternalUrl(uri)) {
|
|
208
|
-
return false;
|
|
209
|
-
}
|
|
210
|
-
if (!canTransformAnimatedWebpOrAvif(uri, hasAnimation, allowAnimatedTransform)) {
|
|
211
|
-
return false;
|
|
212
|
-
}
|
|
213
|
-
const isSupportedImageType = isImageTypeSupported(uri);
|
|
214
|
-
const isTransformableGif = canTransformGIF(uri, allowAnimatedTransform, allowFullGIFTransformation);
|
|
215
|
-
return isSupportedImageType || isTransformableGif;
|
|
216
|
-
}
|
|
217
|
-
function isJPG(uri) {
|
|
218
|
-
return JPG_EXTENSIONS.includes(getFileExtension(uri));
|
|
219
|
-
}
|
|
220
|
-
function isPNG(uri) {
|
|
221
|
-
return getFileExtension(uri) === fileType.PNG;
|
|
222
|
-
}
|
|
223
|
-
function isWEBP(uri) {
|
|
224
|
-
return getFileExtension(uri) === fileType.WEBP;
|
|
225
|
-
}
|
|
226
|
-
function isGIF(uri) {
|
|
227
|
-
return getFileExtension(uri) === fileType.GIF;
|
|
228
|
-
}
|
|
229
|
-
function isAVIF(uri) {
|
|
230
|
-
return getFileExtension(uri) === fileType.AVIF;
|
|
231
|
-
}
|
|
232
|
-
function isExternalUrl(url) {
|
|
233
|
-
return /(^https?)|(^data)|(^\/\/)/.test(url);
|
|
234
|
-
}
|
|
235
|
-
function isUrlEmptyOrNone(url) {
|
|
236
|
-
return !url || !url.trim() || url.toLowerCase() === "none";
|
|
237
|
-
}
|
|
238
|
-
function isSEOBot(options) {
|
|
239
|
-
return (options == null ? void 0 : options.isSEOBot) ?? false;
|
|
240
|
-
}
|
|
241
|
-
const ILLEGAL_CHARS = ["/", "\\", "?", "<", ">", "|", "“", ":", '"'].map(encodeURIComponent);
|
|
242
|
-
const URL_SAFE_ILLEGAL_CHARS = ["\\.", "\\*"];
|
|
243
|
-
const ILLEGAL_CHARS_REPLACEMENT = "_";
|
|
244
|
-
function getFileName(uri, name) {
|
|
245
|
-
const beforeLeadingSlashRegexp = /\/(.*?)$/;
|
|
246
|
-
const fileExtensionRegexp = /\.([^.]*)$/;
|
|
247
|
-
const illegalCharsRegex = new RegExp(`(${ILLEGAL_CHARS.concat(URL_SAFE_ILLEGAL_CHARS).join("|")})`, "g");
|
|
248
|
-
if (name && name.length) {
|
|
249
|
-
let fileName2 = name;
|
|
250
|
-
const extension = name.match(fileExtensionRegexp);
|
|
251
|
-
if (extension && SUPPORTED_IMAGE_EXTENSIONS.includes(extension[1])) {
|
|
252
|
-
fileName2 = name.replace(fileExtensionRegexp, "");
|
|
253
|
-
}
|
|
254
|
-
return encodeURIComponent(fileName2).replace(illegalCharsRegex, ILLEGAL_CHARS_REPLACEMENT);
|
|
255
|
-
}
|
|
256
|
-
const trimmed = uri.match(beforeLeadingSlashRegexp);
|
|
257
|
-
const fileName = trimmed ? trimmed[1] : uri;
|
|
258
|
-
return fileName.replace(fileExtensionRegexp, "");
|
|
259
|
-
}
|
|
260
|
-
function getFileType(uri) {
|
|
261
|
-
if (isJPG(uri)) {
|
|
262
|
-
return fileType.JPG;
|
|
263
|
-
} else if (isPNG(uri)) {
|
|
264
|
-
return fileType.PNG;
|
|
265
|
-
} else if (isWEBP(uri)) {
|
|
266
|
-
return fileType.WEBP;
|
|
267
|
-
} else if (isGIF(uri)) {
|
|
268
|
-
return fileType.GIF;
|
|
269
|
-
} else if (isAVIF(uri)) {
|
|
270
|
-
return fileType.AVIF;
|
|
271
|
-
}
|
|
272
|
-
return fileType.UNRECOGNIZED;
|
|
273
|
-
}
|
|
274
|
-
function getFileExtension(uri) {
|
|
275
|
-
const splitURI = /[.]([^.]+)$/.exec(uri);
|
|
276
|
-
return (splitURI && /[.]([^.]+)$/.exec(uri)[1] || "").toLowerCase();
|
|
277
|
-
}
|
|
278
|
-
function getFitScaleFactor(sWidth, sHeight, dWidth, dHeight) {
|
|
279
|
-
return Math.min(dWidth / sWidth, dHeight / sHeight);
|
|
280
|
-
}
|
|
281
|
-
function getFillScaleFactor(sWidth, sHeight, dWidth, dHeight) {
|
|
282
|
-
return Math.max(dWidth / sWidth, dHeight / sHeight);
|
|
283
|
-
}
|
|
284
|
-
function getScaleFactor(sWidth, sHeight, dWidth, dHeight, transformType) {
|
|
285
|
-
let scaleFactor;
|
|
286
|
-
if (transformType === transformTypes.FILL) {
|
|
287
|
-
scaleFactor = getFillScaleFactor(sWidth, sHeight, dWidth, dHeight);
|
|
288
|
-
} else if (transformType === transformTypes.FIT) {
|
|
289
|
-
scaleFactor = getFitScaleFactor(sWidth, sHeight, dWidth, dHeight);
|
|
290
|
-
} else {
|
|
291
|
-
scaleFactor = 1;
|
|
292
|
-
}
|
|
293
|
-
return scaleFactor;
|
|
294
|
-
}
|
|
295
|
-
function getSafeTransformData(sWidth, sHeight, dWidth, dHeight, transformType) {
|
|
296
|
-
let scaleFactor;
|
|
297
|
-
let width = dWidth;
|
|
298
|
-
let height = dHeight;
|
|
299
|
-
scaleFactor = getScaleFactor(sWidth, sHeight, dWidth, dHeight, transformType);
|
|
300
|
-
if (transformType === transformTypes.FIT) {
|
|
301
|
-
width = sWidth * scaleFactor;
|
|
302
|
-
height = sHeight * scaleFactor;
|
|
303
|
-
}
|
|
304
|
-
if (width && height && width * height > SAFE_TRANSFORMED_AREA) {
|
|
305
|
-
const dimensionScaleFactor = Math.sqrt(SAFE_TRANSFORMED_AREA / (width * height));
|
|
306
|
-
width *= dimensionScaleFactor;
|
|
307
|
-
height *= dimensionScaleFactor;
|
|
308
|
-
scaleFactor = getScaleFactor(sWidth, sHeight, width, height, transformType);
|
|
309
|
-
}
|
|
310
|
-
return {
|
|
311
|
-
scaleFactor,
|
|
312
|
-
width,
|
|
313
|
-
height
|
|
314
|
-
};
|
|
315
|
-
}
|
|
316
|
-
function getTransformData(sWidth, sHeight, transformType, target, dpr, upscaleMethod) {
|
|
317
|
-
sWidth = sWidth || target.width;
|
|
318
|
-
sHeight = sHeight || target.height;
|
|
319
|
-
const { scaleFactor, width, height } = getSafeTransformData(sWidth, sHeight, target.width * dpr, target.height * dpr, transformType);
|
|
320
|
-
return getOptimizedTransformData(sWidth, sHeight, width, height, upscaleMethod, scaleFactor, transformType);
|
|
321
|
-
}
|
|
322
|
-
function getFocalPointFrom9GridAlignment(alignment = alignTypes.CENTER) {
|
|
323
|
-
return ALIGN_TYPE_TO_FOCAL_POINT[alignment];
|
|
324
|
-
}
|
|
325
|
-
function getAlignedRect(sRect, dRect, sFP, alignment) {
|
|
326
|
-
const fp = getFocalPoint(sFP) || getFocalPointFrom9GridAlignment(alignment);
|
|
327
|
-
const x = Math.max(0, Math.min(sRect.width - dRect.width, fp.x * sRect.width - dRect.width / 2));
|
|
328
|
-
const y = Math.max(0, Math.min(sRect.height - dRect.height, fp.y * sRect.height - dRect.height / 2));
|
|
329
|
-
return {
|
|
330
|
-
x,
|
|
331
|
-
y,
|
|
332
|
-
width: Math.min(sRect.width, dRect.width),
|
|
333
|
-
height: Math.min(sRect.height, dRect.height)
|
|
334
|
-
};
|
|
335
|
-
}
|
|
336
|
-
function getOverlappingRect(sRect, dRect) {
|
|
337
|
-
const width = Math.max(0, Math.min(sRect.width, dRect.x + dRect.width) - Math.max(0, dRect.x));
|
|
338
|
-
const height = Math.max(0, Math.min(sRect.height, dRect.y + dRect.height) - Math.max(0, dRect.y));
|
|
339
|
-
const isValidRect = width && height && (sRect.width !== width || sRect.height !== height);
|
|
340
|
-
return isValidRect ? {
|
|
341
|
-
x: Math.max(0, dRect.x),
|
|
342
|
-
y: Math.max(0, dRect.y),
|
|
343
|
-
width,
|
|
344
|
-
height
|
|
345
|
-
} : null;
|
|
346
|
-
}
|
|
347
|
-
function getDevicePixelRatio(target) {
|
|
348
|
-
return Math.min(target.pixelAspectRatio || 1, MAX_DEVICE_PIXEL_RATIO);
|
|
349
|
-
}
|
|
350
|
-
function getAlignment(target) {
|
|
351
|
-
return target.alignment && alignTypesMap[target.alignment] || alignTypesMap[alignTypes.CENTER];
|
|
352
|
-
}
|
|
353
|
-
function getFocalPoint(focalPoint) {
|
|
354
|
-
let fp;
|
|
355
|
-
if (focalPoint && typeof focalPoint.x === "number" && !isNaN(focalPoint.x) && typeof focalPoint.y === "number" && !isNaN(focalPoint.y)) {
|
|
356
|
-
fp = {
|
|
357
|
-
x: roundToFixed(Math.max(0, Math.min(100, focalPoint.x)) / 100, 2),
|
|
358
|
-
y: roundToFixed(Math.max(0, Math.min(100, focalPoint.y)) / 100, 2)
|
|
359
|
-
};
|
|
360
|
-
}
|
|
361
|
-
return fp;
|
|
362
|
-
}
|
|
363
|
-
function getPreferredImageQuality(imageWidth, imageHeight) {
|
|
364
|
-
return imageScaleDefaults[getImageQualityKey(imageWidth, imageHeight)].quality;
|
|
365
|
-
}
|
|
366
|
-
function getClassicScaleData(sWidth, sHeight) {
|
|
367
|
-
const imageKey = getImageQualityKey(sWidth, sHeight);
|
|
368
|
-
return {
|
|
369
|
-
optimizedScaleFactor: imageScaleDefaults[imageKey].maxUpscale,
|
|
370
|
-
upscaleMethodValue: upscaleMethodsValues.classic,
|
|
371
|
-
forceUSM: false
|
|
372
|
-
};
|
|
373
|
-
}
|
|
374
|
-
function getAutoScaleData(sWidth, sHeight) {
|
|
375
|
-
const imageKey = getImageQualityKey(sWidth, sHeight);
|
|
376
|
-
return {
|
|
377
|
-
optimizedScaleFactor: imageScaleDefaults[imageKey].maxUpscale,
|
|
378
|
-
upscaleMethodValue: upscaleMethodsValues.classic,
|
|
379
|
-
forceUSM: false
|
|
380
|
-
};
|
|
381
|
-
}
|
|
382
|
-
function getSuperScaleData(scaleFactor) {
|
|
383
|
-
return {
|
|
384
|
-
optimizedScaleFactor: last(SUPER_UPSCALE_MODELS),
|
|
385
|
-
upscaleMethodValue: upscaleMethodsValues.super,
|
|
386
|
-
forceUSM: !(SUPER_UPSCALE_MODELS.includes(scaleFactor) || scaleFactor > last(SUPER_UPSCALE_MODELS))
|
|
387
|
-
};
|
|
388
|
-
}
|
|
389
|
-
function getOptimizedScaleData(sWidth, sHeight, scaleFactor, upscaleMethod) {
|
|
390
|
-
if (upscaleMethod === "auto") {
|
|
391
|
-
return getAutoScaleData(sWidth, sHeight);
|
|
392
|
-
} else if (upscaleMethod === "super") {
|
|
393
|
-
return getSuperScaleData(scaleFactor);
|
|
394
|
-
}
|
|
395
|
-
return getClassicScaleData(sWidth, sHeight);
|
|
396
|
-
}
|
|
397
|
-
function getOptimizedTransformData(sWidth, sHeight, tWidth, tHeight, upscaleMethod, scaleFactor, transformType) {
|
|
398
|
-
const { optimizedScaleFactor, upscaleMethodValue, forceUSM } = getOptimizedScaleData(sWidth, sHeight, scaleFactor, upscaleMethod);
|
|
399
|
-
let width = tWidth;
|
|
400
|
-
let height = tHeight;
|
|
401
|
-
if (scaleFactor <= optimizedScaleFactor) {
|
|
402
|
-
return {
|
|
403
|
-
width,
|
|
404
|
-
height,
|
|
405
|
-
scaleFactor,
|
|
406
|
-
upscaleMethodValue,
|
|
407
|
-
forceUSM,
|
|
408
|
-
cssUpscaleNeeded: false
|
|
409
|
-
};
|
|
410
|
-
}
|
|
411
|
-
switch (transformType) {
|
|
412
|
-
case transformTypes.FILL:
|
|
413
|
-
width = tWidth * (optimizedScaleFactor / scaleFactor);
|
|
414
|
-
height = tHeight * (optimizedScaleFactor / scaleFactor);
|
|
415
|
-
break;
|
|
416
|
-
case transformTypes.FIT:
|
|
417
|
-
width = sWidth * optimizedScaleFactor;
|
|
418
|
-
height = sHeight * optimizedScaleFactor;
|
|
419
|
-
break;
|
|
420
|
-
}
|
|
421
|
-
return {
|
|
422
|
-
width,
|
|
423
|
-
height,
|
|
424
|
-
scaleFactor: optimizedScaleFactor,
|
|
425
|
-
upscaleMethodValue,
|
|
426
|
-
forceUSM,
|
|
427
|
-
cssUpscaleNeeded: true
|
|
428
|
-
};
|
|
429
|
-
}
|
|
430
|
-
function getImageQualityKey(imageWidth, imageHeight) {
|
|
431
|
-
const size = imageWidth * imageHeight;
|
|
432
|
-
if (size > imageScaleDefaults[imageQuality.HIGH].size) {
|
|
433
|
-
return imageQuality.HIGH;
|
|
434
|
-
} else if (size > imageScaleDefaults[imageQuality.MEDIUM].size) {
|
|
435
|
-
return imageQuality.MEDIUM;
|
|
436
|
-
} else if (size > imageScaleDefaults[imageQuality.LOW].size) {
|
|
437
|
-
return imageQuality.LOW;
|
|
438
|
-
}
|
|
439
|
-
return imageQuality.TINY;
|
|
440
|
-
}
|
|
441
|
-
function getDimension(sWidth, sHeight, tWidth, tHeight, transformType) {
|
|
442
|
-
const scaleFactor = getScaleFactor(sWidth, sHeight, tWidth, tHeight, transformType);
|
|
443
|
-
return {
|
|
444
|
-
width: Math.round(sWidth * scaleFactor),
|
|
445
|
-
height: Math.round(sHeight * scaleFactor)
|
|
446
|
-
};
|
|
447
|
-
}
|
|
448
|
-
function roundToFixed(value, precision) {
|
|
449
|
-
const truncatePrecision = Math.pow(10, precision);
|
|
450
|
-
return (value * truncatePrecision / truncatePrecision).toFixed(precision);
|
|
451
|
-
}
|
|
452
|
-
function getUpscaleString(options) {
|
|
453
|
-
if (!options || !options.upscaleMethod) {
|
|
454
|
-
return upscaleMethods.AUTO;
|
|
455
|
-
}
|
|
456
|
-
return upscaleMethods[options.upscaleMethod.toUpperCase()] || upscaleMethods.AUTO;
|
|
457
|
-
}
|
|
458
|
-
function imageIsAnimated(uri, hasAnimation) {
|
|
459
|
-
const isAvifWebpFormat = isWEBP(uri) || isAVIF(uri);
|
|
460
|
-
return getFileExtension(uri) === fileType.GIF || isAvifWebpFormat && hasAnimation;
|
|
461
|
-
}
|
|
462
|
-
const globalFeaturesSupportObj = {
|
|
463
|
-
/**
|
|
464
|
-
* @type {object<boolean>}
|
|
465
|
-
*/
|
|
466
|
-
isMobile: false
|
|
467
|
-
};
|
|
468
|
-
const getFeature = function(feature) {
|
|
469
|
-
return globalFeaturesSupportObj[feature];
|
|
470
|
-
};
|
|
471
|
-
const setFeature = function(feature, value) {
|
|
472
|
-
globalFeaturesSupportObj[feature] = value;
|
|
473
|
-
};
|
|
474
|
-
function populateGlobalFeatureSupport() {
|
|
475
|
-
if (typeof window !== "undefined" && typeof navigator !== "undefined") {
|
|
476
|
-
const isSmallScreen = window.matchMedia && window.matchMedia("(max-width: 767px)").matches;
|
|
477
|
-
const isMobileAgent = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
478
|
-
setFeature("isMobile", isSmallScreen && isMobileAgent);
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
function getCSS$1(transformsObj, target) {
|
|
482
|
-
const attributes = {
|
|
483
|
-
css: {
|
|
484
|
-
container: {}
|
|
485
|
-
}
|
|
486
|
-
};
|
|
487
|
-
const { css } = attributes;
|
|
488
|
-
const { fittingType } = transformsObj;
|
|
489
|
-
switch (fittingType) {
|
|
490
|
-
case fittingTypes.ORIGINAL_SIZE:
|
|
491
|
-
case fittingTypes.LEGACY_ORIGINAL_SIZE:
|
|
492
|
-
case fittingTypes.LEGACY_STRIP_ORIGINAL_SIZE:
|
|
493
|
-
css.container.backgroundSize = "auto";
|
|
494
|
-
css.container.backgroundRepeat = "no-repeat";
|
|
495
|
-
break;
|
|
496
|
-
case fittingTypes.SCALE_TO_FIT:
|
|
497
|
-
case fittingTypes.LEGACY_STRIP_SCALE_TO_FIT:
|
|
498
|
-
css.container.backgroundSize = "contain";
|
|
499
|
-
css.container.backgroundRepeat = "no-repeat";
|
|
500
|
-
break;
|
|
501
|
-
case fittingTypes.STRETCH:
|
|
502
|
-
css.container.backgroundSize = "100% 100%";
|
|
503
|
-
css.container.backgroundRepeat = "no-repeat";
|
|
504
|
-
break;
|
|
505
|
-
case fittingTypes.SCALE_TO_FILL:
|
|
506
|
-
case fittingTypes.LEGACY_STRIP_SCALE_TO_FILL:
|
|
507
|
-
css.container.backgroundSize = "cover";
|
|
508
|
-
css.container.backgroundRepeat = "no-repeat";
|
|
509
|
-
break;
|
|
510
|
-
case fittingTypes.TILE_HORIZONTAL:
|
|
511
|
-
case fittingTypes.LEGACY_STRIP_TILE_HORIZONTAL:
|
|
512
|
-
css.container.backgroundSize = "auto";
|
|
513
|
-
css.container.backgroundRepeat = "repeat-x";
|
|
514
|
-
break;
|
|
515
|
-
case fittingTypes.TILE_VERTICAL:
|
|
516
|
-
case fittingTypes.LEGACY_STRIP_TILE_VERTICAL:
|
|
517
|
-
css.container.backgroundSize = "auto";
|
|
518
|
-
css.container.backgroundRepeat = "repeat-y";
|
|
519
|
-
break;
|
|
520
|
-
case fittingTypes.TILE:
|
|
521
|
-
case fittingTypes.LEGACY_STRIP_TILE:
|
|
522
|
-
css.container.backgroundSize = "auto";
|
|
523
|
-
css.container.backgroundRepeat = "repeat";
|
|
524
|
-
break;
|
|
525
|
-
case fittingTypes.LEGACY_STRIP_FIT_AND_TILE:
|
|
526
|
-
css.container.backgroundSize = "contain";
|
|
527
|
-
css.container.backgroundRepeat = "repeat";
|
|
528
|
-
break;
|
|
529
|
-
case fittingTypes.FIT_AND_TILE:
|
|
530
|
-
css.container.backgroundSize = "auto";
|
|
531
|
-
css.container.backgroundRepeat = "repeat";
|
|
532
|
-
break;
|
|
533
|
-
// Legacy old editor bg types.
|
|
534
|
-
case fittingTypes.LEGACY_BG_FIT_AND_TILE:
|
|
535
|
-
css.container.backgroundSize = "auto";
|
|
536
|
-
css.container.backgroundRepeat = "repeat";
|
|
537
|
-
break;
|
|
538
|
-
case fittingTypes.LEGACY_BG_FIT_AND_TILE_HORIZONTAL:
|
|
539
|
-
css.container.backgroundSize = "auto";
|
|
540
|
-
css.container.backgroundRepeat = "repeat-x";
|
|
541
|
-
break;
|
|
542
|
-
case fittingTypes.LEGACY_BG_FIT_AND_TILE_VERTICAL:
|
|
543
|
-
css.container.backgroundSize = "auto";
|
|
544
|
-
css.container.backgroundRepeat = "repeat-y";
|
|
545
|
-
break;
|
|
546
|
-
case fittingTypes.LEGACY_BG_NORMAL:
|
|
547
|
-
css.container.backgroundSize = "auto";
|
|
548
|
-
css.container.backgroundRepeat = "no-repeat";
|
|
549
|
-
break;
|
|
550
|
-
}
|
|
551
|
-
switch (target.alignment) {
|
|
552
|
-
case alignTypes.CENTER:
|
|
553
|
-
css.container.backgroundPosition = "center center";
|
|
554
|
-
break;
|
|
555
|
-
case alignTypes.LEFT:
|
|
556
|
-
css.container.backgroundPosition = "left center";
|
|
557
|
-
break;
|
|
558
|
-
case alignTypes.RIGHT:
|
|
559
|
-
css.container.backgroundPosition = "right center";
|
|
560
|
-
break;
|
|
561
|
-
case alignTypes.TOP:
|
|
562
|
-
css.container.backgroundPosition = "center top";
|
|
563
|
-
break;
|
|
564
|
-
case alignTypes.BOTTOM:
|
|
565
|
-
css.container.backgroundPosition = "center bottom";
|
|
566
|
-
break;
|
|
567
|
-
case alignTypes.TOP_RIGHT:
|
|
568
|
-
css.container.backgroundPosition = "right top";
|
|
569
|
-
break;
|
|
570
|
-
case alignTypes.TOP_LEFT:
|
|
571
|
-
css.container.backgroundPosition = "left top";
|
|
572
|
-
break;
|
|
573
|
-
case alignTypes.BOTTOM_RIGHT:
|
|
574
|
-
css.container.backgroundPosition = "right bottom";
|
|
575
|
-
break;
|
|
576
|
-
case alignTypes.BOTTOM_LEFT:
|
|
577
|
-
css.container.backgroundPosition = "left bottom";
|
|
578
|
-
break;
|
|
579
|
-
}
|
|
580
|
-
return attributes;
|
|
581
|
-
}
|
|
582
|
-
function alignTypeToPosition(verticalMiddle, horizontalMiddle, target) {
|
|
583
|
-
return {
|
|
584
|
-
[alignTypes.TOP_LEFT]: { top: 0, left: 0 },
|
|
585
|
-
[alignTypes.TOP_RIGHT]: { top: 0, right: 0 },
|
|
586
|
-
[alignTypes.TOP]: { top: 0, left: horizontalMiddle },
|
|
587
|
-
[alignTypes.BOTTOM_LEFT]: { bottom: 0, left: 0 },
|
|
588
|
-
[alignTypes.BOTTOM_RIGHT]: { bottom: 0, right: 0 },
|
|
589
|
-
[alignTypes.BOTTOM]: { bottom: 0, left: horizontalMiddle },
|
|
590
|
-
[alignTypes.RIGHT]: { top: verticalMiddle, right: 0 },
|
|
591
|
-
[alignTypes.LEFT]: { top: verticalMiddle, left: 0 },
|
|
592
|
-
[alignTypes.CENTER]: {
|
|
593
|
-
width: target.width,
|
|
594
|
-
height: target.height,
|
|
595
|
-
objectFit: "none"
|
|
596
|
-
}
|
|
597
|
-
};
|
|
598
|
-
}
|
|
599
|
-
const alignTypeToPositionStr = {
|
|
600
|
-
[alignTypes.CENTER]: "center",
|
|
601
|
-
[alignTypes.TOP]: "top",
|
|
602
|
-
[alignTypes.TOP_LEFT]: "top left",
|
|
603
|
-
[alignTypes.TOP_RIGHT]: "top right",
|
|
604
|
-
[alignTypes.BOTTOM]: "bottom",
|
|
605
|
-
[alignTypes.BOTTOM_LEFT]: "bottom left",
|
|
606
|
-
[alignTypes.BOTTOM_RIGHT]: "bottom right",
|
|
607
|
-
[alignTypes.LEFT]: "left",
|
|
608
|
-
[alignTypes.RIGHT]: "right"
|
|
609
|
-
};
|
|
610
|
-
const aligmentDefaults = {
|
|
611
|
-
position: "absolute",
|
|
612
|
-
top: "auto",
|
|
613
|
-
right: "auto",
|
|
614
|
-
bottom: "auto",
|
|
615
|
-
left: "auto"
|
|
616
|
-
};
|
|
617
|
-
function getCSS(transformsObj, target) {
|
|
618
|
-
const attributes = {
|
|
619
|
-
css: {
|
|
620
|
-
container: {},
|
|
621
|
-
img: {}
|
|
622
|
-
}
|
|
623
|
-
};
|
|
624
|
-
const { css } = attributes;
|
|
625
|
-
const { fittingType } = transformsObj;
|
|
626
|
-
const alignType = target.alignment;
|
|
627
|
-
css.container.position = "relative";
|
|
628
|
-
switch (fittingType) {
|
|
629
|
-
case fittingTypes.ORIGINAL_SIZE:
|
|
630
|
-
case fittingTypes.LEGACY_ORIGINAL_SIZE:
|
|
631
|
-
if (transformsObj.parts && transformsObj.parts.length) {
|
|
632
|
-
css.img.width = transformsObj.parts[0].width;
|
|
633
|
-
css.img.height = transformsObj.parts[0].height;
|
|
634
|
-
} else {
|
|
635
|
-
css.img.width = transformsObj.src.width;
|
|
636
|
-
css.img.height = transformsObj.src.height;
|
|
637
|
-
}
|
|
638
|
-
break;
|
|
639
|
-
case fittingTypes.SCALE_TO_FIT:
|
|
640
|
-
case fittingTypes.LEGACY_FIT_WIDTH:
|
|
641
|
-
case fittingTypes.LEGACY_FIT_HEIGHT:
|
|
642
|
-
case fittingTypes.LEGACY_FULL:
|
|
643
|
-
css.img.width = target.width;
|
|
644
|
-
css.img.height = target.height;
|
|
645
|
-
css.img.objectFit = "contain";
|
|
646
|
-
css.img.objectPosition = alignTypeToPositionStr[alignType] || "unset";
|
|
647
|
-
break;
|
|
648
|
-
// BG_NORMAL is a sitebackground legacy for original size fitting type.
|
|
649
|
-
// target width and height were modified in transform.js
|
|
650
|
-
case fittingTypes.LEGACY_BG_NORMAL:
|
|
651
|
-
css.img.width = "100%";
|
|
652
|
-
css.img.height = "100%";
|
|
653
|
-
css.img.objectFit = "none";
|
|
654
|
-
css.img.objectPosition = alignTypeToPositionStr[alignType] || "unset";
|
|
655
|
-
break;
|
|
656
|
-
case fittingTypes.STRETCH:
|
|
657
|
-
css.img.width = target.width;
|
|
658
|
-
css.img.height = target.height;
|
|
659
|
-
css.img.objectFit = "fill";
|
|
660
|
-
break;
|
|
661
|
-
case fittingTypes.SCALE_TO_FILL:
|
|
662
|
-
css.img.width = target.width;
|
|
663
|
-
css.img.height = target.height;
|
|
664
|
-
css.img.objectFit = "cover";
|
|
665
|
-
break;
|
|
666
|
-
}
|
|
667
|
-
if (typeof css.img.width === "number" && typeof css.img.height === "number" && (css.img.width !== target.width || css.img.height !== target.height)) {
|
|
668
|
-
const verticalMiddle = Math.round((target.height - css.img.height) / 2);
|
|
669
|
-
const horizontalMiddle = Math.round((target.width - css.img.width) / 2);
|
|
670
|
-
Object.assign(css.img, aligmentDefaults, alignTypeToPosition(verticalMiddle, horizontalMiddle, target)[alignType]);
|
|
671
|
-
}
|
|
672
|
-
return attributes;
|
|
673
|
-
}
|
|
674
|
-
function getSvgAttr(transformsObj, target) {
|
|
675
|
-
const attributes = {
|
|
676
|
-
css: {
|
|
677
|
-
container: {}
|
|
678
|
-
},
|
|
679
|
-
attr: {
|
|
680
|
-
container: {},
|
|
681
|
-
img: {}
|
|
682
|
-
}
|
|
683
|
-
};
|
|
684
|
-
const { css, attr } = attributes;
|
|
685
|
-
const { fittingType } = transformsObj;
|
|
686
|
-
const alignType = target.alignment;
|
|
687
|
-
const { width: sourceWidth, height: sourceHeight } = transformsObj.src;
|
|
688
|
-
let imageScale;
|
|
689
|
-
css.container.position = "relative";
|
|
690
|
-
switch (fittingType) {
|
|
691
|
-
case fittingTypes.ORIGINAL_SIZE:
|
|
692
|
-
case fittingTypes.LEGACY_ORIGINAL_SIZE:
|
|
693
|
-
case fittingTypes.TILE:
|
|
694
|
-
if (transformsObj.parts && transformsObj.parts.length) {
|
|
695
|
-
attr.img.width = transformsObj.parts[0].width;
|
|
696
|
-
attr.img.height = transformsObj.parts[0].height;
|
|
697
|
-
} else {
|
|
698
|
-
attr.img.width = sourceWidth;
|
|
699
|
-
attr.img.height = sourceHeight;
|
|
700
|
-
}
|
|
701
|
-
attr.img.preserveAspectRatio = "xMidYMid slice";
|
|
702
|
-
break;
|
|
703
|
-
case fittingTypes.SCALE_TO_FIT:
|
|
704
|
-
case fittingTypes.LEGACY_FIT_WIDTH:
|
|
705
|
-
case fittingTypes.LEGACY_FIT_HEIGHT:
|
|
706
|
-
case fittingTypes.LEGACY_FULL:
|
|
707
|
-
attr.img.width = "100%";
|
|
708
|
-
attr.img.height = "100%";
|
|
709
|
-
attr.img.transform = "";
|
|
710
|
-
attr.img.preserveAspectRatio = "";
|
|
711
|
-
break;
|
|
712
|
-
case fittingTypes.STRETCH:
|
|
713
|
-
attr.img.width = target.width;
|
|
714
|
-
attr.img.height = target.height;
|
|
715
|
-
attr.img.x = 0;
|
|
716
|
-
attr.img.y = 0;
|
|
717
|
-
attr.img.transform = "";
|
|
718
|
-
attr.img.preserveAspectRatio = "none";
|
|
719
|
-
break;
|
|
720
|
-
case fittingTypes.SCALE_TO_FILL:
|
|
721
|
-
if (!isImageTransformApplicable(transformsObj.src.id)) {
|
|
722
|
-
imageScale = getDimension(sourceWidth, sourceHeight, target.width, target.height, transformTypes.FILL);
|
|
723
|
-
attr.img.width = imageScale.width;
|
|
724
|
-
attr.img.height = imageScale.height;
|
|
725
|
-
} else {
|
|
726
|
-
attr.img.width = target.width;
|
|
727
|
-
attr.img.height = target.height;
|
|
728
|
-
}
|
|
729
|
-
attr.img.x = 0;
|
|
730
|
-
attr.img.y = 0;
|
|
731
|
-
attr.img.transform = "";
|
|
732
|
-
attr.img.preserveAspectRatio = "xMidYMid slice";
|
|
733
|
-
break;
|
|
734
|
-
}
|
|
735
|
-
if (typeof attr.img.width === "number" && typeof attr.img.height === "number" && (attr.img.width !== target.width || attr.img.height !== target.height)) {
|
|
736
|
-
let x = 0;
|
|
737
|
-
let y = 0;
|
|
738
|
-
let right;
|
|
739
|
-
let bottom;
|
|
740
|
-
if (fittingType === fittingTypes.TILE) {
|
|
741
|
-
right = target.width % attr.img.width;
|
|
742
|
-
bottom = target.height % attr.img.height;
|
|
743
|
-
} else {
|
|
744
|
-
right = target.width - attr.img.width;
|
|
745
|
-
bottom = target.height - attr.img.height;
|
|
746
|
-
}
|
|
747
|
-
const center = Math.round(right / 2);
|
|
748
|
-
const middle = Math.round(bottom / 2);
|
|
749
|
-
switch (alignType) {
|
|
750
|
-
case alignTypes.TOP_LEFT:
|
|
751
|
-
x = 0;
|
|
752
|
-
y = 0;
|
|
753
|
-
break;
|
|
754
|
-
case alignTypes.TOP:
|
|
755
|
-
x = center;
|
|
756
|
-
y = 0;
|
|
757
|
-
break;
|
|
758
|
-
case alignTypes.TOP_RIGHT:
|
|
759
|
-
x = right;
|
|
760
|
-
y = 0;
|
|
761
|
-
break;
|
|
762
|
-
case alignTypes.LEFT:
|
|
763
|
-
x = 0;
|
|
764
|
-
y = middle;
|
|
765
|
-
break;
|
|
766
|
-
case alignTypes.CENTER:
|
|
767
|
-
x = center;
|
|
768
|
-
y = middle;
|
|
769
|
-
break;
|
|
770
|
-
case alignTypes.RIGHT:
|
|
771
|
-
x = right;
|
|
772
|
-
y = middle;
|
|
773
|
-
break;
|
|
774
|
-
case alignTypes.BOTTOM_LEFT:
|
|
775
|
-
x = 0;
|
|
776
|
-
y = bottom;
|
|
777
|
-
break;
|
|
778
|
-
case alignTypes.BOTTOM:
|
|
779
|
-
x = center;
|
|
780
|
-
y = bottom;
|
|
781
|
-
break;
|
|
782
|
-
case alignTypes.BOTTOM_RIGHT:
|
|
783
|
-
x = right;
|
|
784
|
-
y = bottom;
|
|
785
|
-
break;
|
|
786
|
-
}
|
|
787
|
-
attr.img.x = x;
|
|
788
|
-
attr.img.y = y;
|
|
789
|
-
}
|
|
790
|
-
attr.container.width = target.width;
|
|
791
|
-
attr.container.height = target.height;
|
|
792
|
-
attr.container.viewBox = [0, 0, target.width, target.height].join(" ");
|
|
793
|
-
return attributes;
|
|
794
|
-
}
|
|
795
|
-
function getAttributes(transformsObj, target) {
|
|
796
|
-
let attributesGetter;
|
|
797
|
-
if (target.htmlTag === htmlTag.BG) {
|
|
798
|
-
attributesGetter = getCSS$1;
|
|
799
|
-
} else if (target.htmlTag === htmlTag.SVG) {
|
|
800
|
-
attributesGetter = getSvgAttr;
|
|
801
|
-
} else {
|
|
802
|
-
attributesGetter = getCSS;
|
|
803
|
-
}
|
|
804
|
-
return attributesGetter(transformsObj, target);
|
|
805
|
-
}
|
|
806
|
-
function isMobile() {
|
|
807
|
-
return getFeature("isMobile");
|
|
808
|
-
}
|
|
809
|
-
function setTransformParts(transformsObj, src, target) {
|
|
810
|
-
let rect;
|
|
811
|
-
if (src.crop) {
|
|
812
|
-
rect = getOverlappingRect(src, src.crop);
|
|
813
|
-
if (rect) {
|
|
814
|
-
transformsObj.src.width = rect.width;
|
|
815
|
-
transformsObj.src.height = rect.height;
|
|
816
|
-
transformsObj.src.isCropped = true;
|
|
817
|
-
transformsObj.parts.push(getCropPart(rect));
|
|
818
|
-
}
|
|
819
|
-
}
|
|
820
|
-
switch (transformsObj.fittingType) {
|
|
821
|
-
case fittingTypes.SCALE_TO_FIT:
|
|
822
|
-
case fittingTypes.LEGACY_FIT_WIDTH:
|
|
823
|
-
case fittingTypes.LEGACY_FIT_HEIGHT:
|
|
824
|
-
case fittingTypes.LEGACY_FULL:
|
|
825
|
-
case fittingTypes.FIT_AND_TILE:
|
|
826
|
-
case fittingTypes.LEGACY_BG_FIT_AND_TILE:
|
|
827
|
-
case fittingTypes.LEGACY_BG_FIT_AND_TILE_HORIZONTAL:
|
|
828
|
-
case fittingTypes.LEGACY_BG_FIT_AND_TILE_VERTICAL:
|
|
829
|
-
case fittingTypes.LEGACY_BG_NORMAL:
|
|
830
|
-
transformsObj.parts.push(getFitPart(transformsObj, target));
|
|
831
|
-
break;
|
|
832
|
-
case fittingTypes.SCALE_TO_FILL:
|
|
833
|
-
transformsObj.parts.push(getFillPart(transformsObj, target));
|
|
834
|
-
break;
|
|
835
|
-
case fittingTypes.STRETCH:
|
|
836
|
-
transformsObj.parts.push(getStretchPart(transformsObj, target));
|
|
837
|
-
break;
|
|
838
|
-
case fittingTypes.TILE_HORIZONTAL:
|
|
839
|
-
case fittingTypes.TILE_VERTICAL:
|
|
840
|
-
case fittingTypes.TILE:
|
|
841
|
-
case fittingTypes.LEGACY_ORIGINAL_SIZE:
|
|
842
|
-
case fittingTypes.ORIGINAL_SIZE:
|
|
843
|
-
rect = getAlignedRect(transformsObj.src, target, transformsObj.focalPoint, target.alignment);
|
|
844
|
-
if (transformsObj.src.isCropped) {
|
|
845
|
-
Object.assign(transformsObj.parts[0], rect);
|
|
846
|
-
transformsObj.src.width = rect.width;
|
|
847
|
-
transformsObj.src.height = rect.height;
|
|
848
|
-
} else {
|
|
849
|
-
transformsObj.parts.push(getCropPart(rect));
|
|
850
|
-
}
|
|
851
|
-
break;
|
|
852
|
-
// ---------------------------------------------------------------------------------------
|
|
853
|
-
// handles a legacy bug on bgImageStrip, background html tag
|
|
854
|
-
// component Full Width Strip stored incorrect image source width and height
|
|
855
|
-
// ---------------------------------------------------------------------------------------
|
|
856
|
-
case fittingTypes.LEGACY_STRIP_TILE_HORIZONTAL:
|
|
857
|
-
case fittingTypes.LEGACY_STRIP_TILE_VERTICAL:
|
|
858
|
-
case fittingTypes.LEGACY_STRIP_TILE:
|
|
859
|
-
case fittingTypes.LEGACY_STRIP_ORIGINAL_SIZE:
|
|
860
|
-
transformsObj.parts.push(getLegacyCropPart(target));
|
|
861
|
-
break;
|
|
862
|
-
case fittingTypes.LEGACY_STRIP_SCALE_TO_FIT:
|
|
863
|
-
case fittingTypes.LEGACY_STRIP_FIT_AND_TILE:
|
|
864
|
-
transformsObj.parts.push(getLegacyFitPart(target));
|
|
865
|
-
break;
|
|
866
|
-
case fittingTypes.LEGACY_STRIP_SCALE_TO_FILL:
|
|
867
|
-
transformsObj.parts.push(getLegacyFillPart(target));
|
|
868
|
-
break;
|
|
869
|
-
}
|
|
870
|
-
}
|
|
871
|
-
function getFitPart(transformsObj, target) {
|
|
872
|
-
const transformedData = getTransformData(transformsObj.src.width, transformsObj.src.height, transformTypes.FIT, target, transformsObj.devicePixelRatio, transformsObj.upscaleMethod);
|
|
873
|
-
const isMissingSrcDimensions = !transformsObj.src.width || !transformsObj.src.height;
|
|
874
|
-
const transformType = isMissingSrcDimensions ? transformTypes.FIT : transformTypes.FILL;
|
|
875
|
-
return {
|
|
876
|
-
transformType,
|
|
877
|
-
width: Math.round(transformedData.width),
|
|
878
|
-
height: Math.round(transformedData.height),
|
|
879
|
-
alignment: alignTypesMap.center,
|
|
880
|
-
upscale: transformedData.scaleFactor > 1,
|
|
881
|
-
forceUSM: transformedData.forceUSM,
|
|
882
|
-
scaleFactor: transformedData.scaleFactor,
|
|
883
|
-
cssUpscaleNeeded: transformedData.cssUpscaleNeeded,
|
|
884
|
-
upscaleMethodValue: transformedData.upscaleMethodValue
|
|
885
|
-
};
|
|
886
|
-
}
|
|
887
|
-
function getFillPart(transformsObj, target) {
|
|
888
|
-
const transformedData = getTransformData(transformsObj.src.width, transformsObj.src.height, transformTypes.FILL, target, transformsObj.devicePixelRatio, transformsObj.upscaleMethod);
|
|
889
|
-
const focalPoint = getFocalPoint(transformsObj.focalPoint);
|
|
890
|
-
const transformType = focalPoint ? transformTypes.FILL_FOCAL : transformTypes.FILL;
|
|
891
|
-
return {
|
|
892
|
-
transformType,
|
|
893
|
-
width: Math.round(transformedData.width),
|
|
894
|
-
height: Math.round(transformedData.height),
|
|
895
|
-
alignment: getAlignment(target),
|
|
896
|
-
focalPointX: focalPoint && focalPoint.x,
|
|
897
|
-
focalPointY: focalPoint && focalPoint.y,
|
|
898
|
-
upscale: transformedData.scaleFactor > 1,
|
|
899
|
-
forceUSM: transformedData.forceUSM,
|
|
900
|
-
scaleFactor: transformedData.scaleFactor,
|
|
901
|
-
cssUpscaleNeeded: transformedData.cssUpscaleNeeded,
|
|
902
|
-
upscaleMethodValue: transformedData.upscaleMethodValue
|
|
903
|
-
};
|
|
904
|
-
}
|
|
905
|
-
function getStretchPart(transformsObj, target) {
|
|
906
|
-
const scaleFactor = getScaleFactor(transformsObj.src.width, transformsObj.src.height, target.width, target.height, transformTypes.FILL);
|
|
907
|
-
const clonedTarget = { ...target };
|
|
908
|
-
clonedTarget.width = transformsObj.src.width * scaleFactor;
|
|
909
|
-
clonedTarget.height = transformsObj.src.height * scaleFactor;
|
|
910
|
-
return getFitPart(transformsObj, clonedTarget);
|
|
911
|
-
}
|
|
912
|
-
function getCropPart(rect) {
|
|
913
|
-
return {
|
|
914
|
-
transformType: transformTypes.CROP,
|
|
915
|
-
x: Math.round(rect.x),
|
|
916
|
-
y: Math.round(rect.y),
|
|
917
|
-
width: Math.round(rect.width),
|
|
918
|
-
height: Math.round(rect.height),
|
|
919
|
-
upscale: false,
|
|
920
|
-
forceUSM: false,
|
|
921
|
-
scaleFactor: 1,
|
|
922
|
-
cssUpscaleNeeded: false
|
|
923
|
-
};
|
|
924
|
-
}
|
|
925
|
-
function getLegacyFitPart(target) {
|
|
926
|
-
return {
|
|
927
|
-
transformType: transformTypes.FIT,
|
|
928
|
-
width: Math.round(target.width),
|
|
929
|
-
height: Math.round(target.height),
|
|
930
|
-
upscale: false,
|
|
931
|
-
forceUSM: true,
|
|
932
|
-
scaleFactor: 1,
|
|
933
|
-
cssUpscaleNeeded: false
|
|
934
|
-
};
|
|
935
|
-
}
|
|
936
|
-
function getLegacyFillPart(target) {
|
|
937
|
-
return {
|
|
938
|
-
transformType: transformTypes.LEGACY_FILL,
|
|
939
|
-
width: Math.round(target.width),
|
|
940
|
-
height: Math.round(target.height),
|
|
941
|
-
alignment: getAlignment(target),
|
|
942
|
-
upscale: false,
|
|
943
|
-
forceUSM: true,
|
|
944
|
-
scaleFactor: 1,
|
|
945
|
-
cssUpscaleNeeded: false
|
|
946
|
-
};
|
|
947
|
-
}
|
|
948
|
-
function getLegacyCropPart(target) {
|
|
949
|
-
return {
|
|
950
|
-
transformType: transformTypes.LEGACY_CROP,
|
|
951
|
-
width: Math.round(target.width),
|
|
952
|
-
height: Math.round(target.height),
|
|
953
|
-
alignment: getAlignment(target),
|
|
954
|
-
upscale: false,
|
|
955
|
-
forceUSM: false,
|
|
956
|
-
scaleFactor: 1,
|
|
957
|
-
cssUpscaleNeeded: false
|
|
958
|
-
};
|
|
959
|
-
}
|
|
960
|
-
function setTransformOptions(transformsObj, options) {
|
|
961
|
-
options = options || {};
|
|
962
|
-
transformsObj.quality = getQuality(transformsObj, options);
|
|
963
|
-
transformsObj.progressive = getProgressive(options);
|
|
964
|
-
transformsObj.watermark = getWatermark(options);
|
|
965
|
-
transformsObj.autoEncode = options.autoEncode ?? true;
|
|
966
|
-
transformsObj.encoding = options == null ? void 0 : options.encoding;
|
|
967
|
-
transformsObj.unsharpMask = getUnsharpMask(transformsObj, options);
|
|
968
|
-
transformsObj.filters = getFilters(options);
|
|
969
|
-
}
|
|
970
|
-
function getWatermark(options) {
|
|
971
|
-
return options.watermark;
|
|
972
|
-
}
|
|
973
|
-
function getProgressive(options) {
|
|
974
|
-
return options.progressive !== false;
|
|
975
|
-
}
|
|
976
|
-
function getQuality(transformsObj, options) {
|
|
977
|
-
const isPNG2 = transformsObj.fileType === fileType.PNG;
|
|
978
|
-
const isJPG2 = transformsObj.fileType === fileType.JPG;
|
|
979
|
-
const isWEBP2 = transformsObj.fileType === fileType.WEBP;
|
|
980
|
-
const isAVIF2 = transformsObj.fileType === fileType.AVIF;
|
|
981
|
-
const isQualitySupported = isJPG2 || isPNG2 || isWEBP2 || isAVIF2;
|
|
982
|
-
if (isQualitySupported) {
|
|
983
|
-
const transformData = last(transformsObj.parts);
|
|
984
|
-
const defaultQuality = getPreferredImageQuality(transformData.width, transformData.height);
|
|
985
|
-
let quality = options.quality && options.quality >= 5 && options.quality <= 90 ? options.quality : defaultQuality;
|
|
986
|
-
quality = isPNG2 ? quality + 5 : quality;
|
|
987
|
-
return quality;
|
|
988
|
-
}
|
|
989
|
-
return 0;
|
|
990
|
-
}
|
|
991
|
-
function getFilters(options) {
|
|
992
|
-
const filterOptions = options.filters || {};
|
|
993
|
-
const filters = {};
|
|
994
|
-
if (isValidImageFilter(filterOptions[imageFilters.CONTRAST], -100, 100)) {
|
|
995
|
-
filters[imageFilters.CONTRAST] = filterOptions[imageFilters.CONTRAST];
|
|
996
|
-
}
|
|
997
|
-
if (isValidImageFilter(filterOptions[imageFilters.BRIGHTNESS], -100, 100)) {
|
|
998
|
-
filters[imageFilters.BRIGHTNESS] = filterOptions[imageFilters.BRIGHTNESS];
|
|
999
|
-
}
|
|
1000
|
-
if (isValidImageFilter(filterOptions[imageFilters.SATURATION], -100, 100)) {
|
|
1001
|
-
filters[imageFilters.SATURATION] = filterOptions[imageFilters.SATURATION];
|
|
1002
|
-
}
|
|
1003
|
-
if (isValidImageFilter(filterOptions[imageFilters.HUE], -180, 180)) {
|
|
1004
|
-
filters[imageFilters.HUE] = filterOptions[imageFilters.HUE];
|
|
1005
|
-
}
|
|
1006
|
-
if (isValidImageFilter(filterOptions[imageFilters.BLUR], 0, 100)) {
|
|
1007
|
-
filters[imageFilters.BLUR] = filterOptions[imageFilters.BLUR];
|
|
1008
|
-
}
|
|
1009
|
-
return filters;
|
|
1010
|
-
}
|
|
1011
|
-
function isValidImageFilter(filterValue, minValue, maxValue) {
|
|
1012
|
-
return typeof filterValue === "number" && !isNaN(filterValue) && filterValue !== 0 && filterValue >= minValue && filterValue <= maxValue;
|
|
1013
|
-
}
|
|
1014
|
-
function getUnsharpMask(transformsObj, options) {
|
|
1015
|
-
var _a, _b, _c;
|
|
1016
|
-
if (isUSMValid(options.unsharpMask)) {
|
|
1017
|
-
return {
|
|
1018
|
-
radius: roundToFixed((_a = options.unsharpMask) == null ? void 0 : _a.radius, 2),
|
|
1019
|
-
amount: roundToFixed((_b = options.unsharpMask) == null ? void 0 : _b.amount, 2),
|
|
1020
|
-
threshold: roundToFixed((_c = options.unsharpMask) == null ? void 0 : _c.threshold, 2)
|
|
1021
|
-
};
|
|
1022
|
-
} else if (!isZeroUSM(options.unsharpMask) && isUSMNeeded(transformsObj)) {
|
|
1023
|
-
return defaultUSM;
|
|
1024
|
-
}
|
|
1025
|
-
return;
|
|
1026
|
-
}
|
|
1027
|
-
function isUSMNeeded(transformsObj) {
|
|
1028
|
-
const transformPart = last(transformsObj.parts);
|
|
1029
|
-
const upscale = transformPart.scaleFactor >= 1;
|
|
1030
|
-
return !upscale || transformPart.forceUSM || transformPart.transformType === transformTypes.FIT;
|
|
1031
|
-
}
|
|
1032
|
-
function isUSMValid(usm) {
|
|
1033
|
-
usm = usm || {};
|
|
1034
|
-
const radius = typeof usm.radius === "number" && !isNaN(usm.radius) && usm.radius >= 0.1 && usm.radius <= 500;
|
|
1035
|
-
const amount = typeof usm.amount === "number" && !isNaN(usm.amount) && usm.amount >= 0 && usm.amount <= 10;
|
|
1036
|
-
const threshold = typeof usm.threshold === "number" && !isNaN(usm.threshold) && usm.threshold >= 0 && usm.threshold <= 255;
|
|
1037
|
-
return radius && amount && threshold;
|
|
1038
|
-
}
|
|
1039
|
-
function isZeroUSM(usm) {
|
|
1040
|
-
usm = usm || {};
|
|
1041
|
-
return typeof usm.radius === "number" && !isNaN(usm.radius) && usm.radius === 0 && typeof usm.amount === "number" && !isNaN(usm.amount) && usm.amount === 0 && typeof usm.threshold === "number" && !isNaN(usm.threshold) && usm.threshold === 0;
|
|
1042
|
-
}
|
|
1043
|
-
function getTransform(fittingType, src, target, options) {
|
|
1044
|
-
const _isSEOBot = isSEOBot(options);
|
|
1045
|
-
const fileType2 = getFileType(src.id);
|
|
1046
|
-
const fileName = getFileName(src.id, src.name);
|
|
1047
|
-
const devicePixelRatio = _isSEOBot ? 1 : getDevicePixelRatio(target);
|
|
1048
|
-
const fileExtension = getFileExtension(src.id);
|
|
1049
|
-
const preferredExtension = fileExtension;
|
|
1050
|
-
const canTransformImage = isImageTransformApplicable(src.id, options == null ? void 0 : options.hasAnimation, options == null ? void 0 : options.allowAnimatedTransform, options == null ? void 0 : options.allowFullGIFTransformation);
|
|
1051
|
-
const transformsObj = {
|
|
1052
|
-
fileName,
|
|
1053
|
-
fileExtension,
|
|
1054
|
-
fileType: fileType2,
|
|
1055
|
-
fittingType,
|
|
1056
|
-
preferredExtension,
|
|
1057
|
-
src: {
|
|
1058
|
-
id: src.id,
|
|
1059
|
-
width: src.width,
|
|
1060
|
-
height: src.height,
|
|
1061
|
-
isCropped: false,
|
|
1062
|
-
isAnimated: imageIsAnimated(src.id, options == null ? void 0 : options.hasAnimation)
|
|
1063
|
-
},
|
|
1064
|
-
focalPoint: {
|
|
1065
|
-
x: src.focalPoint && src.focalPoint.x,
|
|
1066
|
-
y: src.focalPoint && src.focalPoint.y
|
|
1067
|
-
},
|
|
1068
|
-
parts: [],
|
|
1069
|
-
// options - general
|
|
1070
|
-
devicePixelRatio,
|
|
1071
|
-
quality: 0,
|
|
1072
|
-
upscaleMethod: getUpscaleString(options),
|
|
1073
|
-
progressive: true,
|
|
1074
|
-
watermark: "",
|
|
1075
|
-
unsharpMask: {},
|
|
1076
|
-
filters: {},
|
|
1077
|
-
transformed: canTransformImage,
|
|
1078
|
-
allowFullGIFTransformation: options == null ? void 0 : options.allowFullGIFTransformation,
|
|
1079
|
-
isPlaceholderFlow: options == null ? void 0 : options.isPlaceholderFlow
|
|
1080
|
-
};
|
|
1081
|
-
if (canTransformImage) {
|
|
1082
|
-
setTransformParts(transformsObj, src, target);
|
|
1083
|
-
setTransformOptions(transformsObj, options);
|
|
1084
|
-
}
|
|
1085
|
-
return transformsObj;
|
|
1086
|
-
}
|
|
1087
|
-
function getTarget(fittingType, src, target) {
|
|
1088
|
-
const targetObj = { ...target };
|
|
1089
|
-
const _isMobile = isMobile();
|
|
1090
|
-
switch (fittingType) {
|
|
1091
|
-
case fittingTypes.LEGACY_BG_FIT_AND_TILE:
|
|
1092
|
-
case fittingTypes.LEGACY_BG_FIT_AND_TILE_HORIZONTAL:
|
|
1093
|
-
case fittingTypes.LEGACY_BG_FIT_AND_TILE_VERTICAL:
|
|
1094
|
-
case fittingTypes.LEGACY_BG_NORMAL:
|
|
1095
|
-
const maxBGSiteLegacyWidth = _isMobile ? MOBILE_MAX_BG_SITE_LEGACY_WIDTH : DSKTP_MAX_BG_SITE_LEGACY_WIDTH;
|
|
1096
|
-
const maxBGSiteLegacyHeight = _isMobile ? MOBILE_MAX_BG_SITE_LEGACY_HEIGHT : DSKTP_MAX_BG_SITE_LEGACY_HEIGHT;
|
|
1097
|
-
targetObj.width = Math.min(maxBGSiteLegacyWidth, src.width);
|
|
1098
|
-
targetObj.height = Math.min(maxBGSiteLegacyHeight, Math.round(targetObj.width / (src.width / src.height)));
|
|
1099
|
-
targetObj.pixelAspectRatio = 1;
|
|
1100
|
-
}
|
|
1101
|
-
return targetObj;
|
|
1102
|
-
}
|
|
1103
|
-
const fitTemplate = template`fit/w_${"width"},h_${"height"}`;
|
|
1104
|
-
const fillTemplate = template`fill/w_${"width"},h_${"height"},al_${"alignment"}`;
|
|
1105
|
-
const fillFocalTemplate = template`fill/w_${"width"},h_${"height"},fp_${"focalPointX"}_${"focalPointY"}`;
|
|
1106
|
-
const cropTemplate = template`crop/x_${"x"},y_${"y"},w_${"width"},h_${"height"}`;
|
|
1107
|
-
const legacyCropTemplate = template`crop/w_${"width"},h_${"height"},al_${"alignment"}`;
|
|
1108
|
-
const legacyFillTemplate = template`fill/w_${"width"},h_${"height"},al_${"alignment"}`;
|
|
1109
|
-
const upscaleTemplate = template`,lg_${"upscaleMethodValue"}`;
|
|
1110
|
-
const qualityTemplate = template`,q_${"quality"}`;
|
|
1111
|
-
const qualityAutoTemplate = template`,quality_auto`;
|
|
1112
|
-
const unSharpMaskTemplate = template`,usm_${"radius"}_${"amount"}_${"threshold"}`;
|
|
1113
|
-
const nonProgressiveTemplate = template`,bl`;
|
|
1114
|
-
const watermarkTemplate = template`,wm_${"watermark"}`;
|
|
1115
|
-
const filterTemplatesMap = {
|
|
1116
|
-
[imageFilters.CONTRAST]: template`,con_${"contrast"}`,
|
|
1117
|
-
[imageFilters.BRIGHTNESS]: template`,br_${"brightness"}`,
|
|
1118
|
-
[imageFilters.SATURATION]: template`,sat_${"saturation"}`,
|
|
1119
|
-
[imageFilters.HUE]: template`,hue_${"hue"}`,
|
|
1120
|
-
[imageFilters.BLUR]: template`,blur_${"blur"}`
|
|
1121
|
-
};
|
|
1122
|
-
const autoEncodeTemplate = template`,enc_auto`;
|
|
1123
|
-
const AVIFEncodeTemplate = template`,enc_avif`;
|
|
1124
|
-
const pAVIFEncodeTemplate = template`,enc_pavif`;
|
|
1125
|
-
const animatedTransformTemplate = template`,pstr`;
|
|
1126
|
-
const animatedGIFTransformTemplate = template`,anm_all`;
|
|
1127
|
-
function getImageURI(transformsObj) {
|
|
1128
|
-
var _a;
|
|
1129
|
-
const transformsObjStrArr = [];
|
|
1130
|
-
transformsObj.parts.forEach((transformPart) => {
|
|
1131
|
-
switch (transformPart.transformType) {
|
|
1132
|
-
case transformTypes.CROP:
|
|
1133
|
-
transformsObjStrArr.push(cropTemplate(transformPart));
|
|
1134
|
-
break;
|
|
1135
|
-
case transformTypes.LEGACY_CROP:
|
|
1136
|
-
transformsObjStrArr.push(legacyCropTemplate(transformPart));
|
|
1137
|
-
break;
|
|
1138
|
-
case transformTypes.LEGACY_FILL:
|
|
1139
|
-
let legacyFillStr = legacyFillTemplate(transformPart);
|
|
1140
|
-
if (transformPart.upscale) {
|
|
1141
|
-
legacyFillStr += upscaleTemplate(transformPart);
|
|
1142
|
-
}
|
|
1143
|
-
transformsObjStrArr.push(legacyFillStr);
|
|
1144
|
-
break;
|
|
1145
|
-
case transformTypes.FIT:
|
|
1146
|
-
let fitStr = fitTemplate(transformPart);
|
|
1147
|
-
if (transformPart.upscale) {
|
|
1148
|
-
fitStr += upscaleTemplate(transformPart);
|
|
1149
|
-
}
|
|
1150
|
-
transformsObjStrArr.push(fitStr);
|
|
1151
|
-
break;
|
|
1152
|
-
case transformTypes.FILL:
|
|
1153
|
-
let fillStr = fillTemplate(transformPart);
|
|
1154
|
-
if (transformPart.upscale) {
|
|
1155
|
-
fillStr += upscaleTemplate(transformPart);
|
|
1156
|
-
}
|
|
1157
|
-
transformsObjStrArr.push(fillStr);
|
|
1158
|
-
break;
|
|
1159
|
-
case transformTypes.FILL_FOCAL:
|
|
1160
|
-
let fillFocalStr = fillFocalTemplate(transformPart);
|
|
1161
|
-
if (transformPart.upscale) {
|
|
1162
|
-
fillFocalStr += upscaleTemplate(transformPart);
|
|
1163
|
-
}
|
|
1164
|
-
transformsObjStrArr.push(fillFocalStr);
|
|
1165
|
-
break;
|
|
1166
|
-
}
|
|
1167
|
-
});
|
|
1168
|
-
let transformsStr = transformsObjStrArr.join("/");
|
|
1169
|
-
if (transformsObj.quality) {
|
|
1170
|
-
transformsStr += qualityTemplate(transformsObj);
|
|
1171
|
-
}
|
|
1172
|
-
if (transformsObj.unsharpMask) {
|
|
1173
|
-
transformsStr += unSharpMaskTemplate(transformsObj.unsharpMask);
|
|
1174
|
-
}
|
|
1175
|
-
if (!transformsObj.progressive) {
|
|
1176
|
-
transformsStr += nonProgressiveTemplate(transformsObj);
|
|
1177
|
-
}
|
|
1178
|
-
if (transformsObj.watermark) {
|
|
1179
|
-
transformsStr += watermarkTemplate(transformsObj);
|
|
1180
|
-
}
|
|
1181
|
-
if (transformsObj.filters) {
|
|
1182
|
-
transformsStr += Object.keys(transformsObj.filters).map((filterName) => filterTemplatesMap[filterName](transformsObj.filters)).join("");
|
|
1183
|
-
}
|
|
1184
|
-
if (transformsObj.fileType !== fileType.GIF) {
|
|
1185
|
-
if (transformsObj.encoding === encodingTypes.AVIF) {
|
|
1186
|
-
transformsStr += AVIFEncodeTemplate(transformsObj);
|
|
1187
|
-
transformsStr += qualityAutoTemplate(transformsObj);
|
|
1188
|
-
} else if (transformsObj.encoding === encodingTypes.PAVIF) {
|
|
1189
|
-
transformsStr += pAVIFEncodeTemplate(transformsObj);
|
|
1190
|
-
transformsStr += qualityAutoTemplate(transformsObj);
|
|
1191
|
-
} else if (transformsObj.autoEncode) {
|
|
1192
|
-
transformsStr += autoEncodeTemplate(transformsObj);
|
|
1193
|
-
}
|
|
1194
|
-
}
|
|
1195
|
-
if (((_a = transformsObj.src) == null ? void 0 : _a.isAnimated) && transformsObj.transformed) {
|
|
1196
|
-
const isGif = isGIF(transformsObj.src.id);
|
|
1197
|
-
const isPlaceholderFlow = transformsObj.isPlaceholderFlow === true;
|
|
1198
|
-
const allowFullGIFTransformation = transformsObj.allowFullGIFTransformation === true;
|
|
1199
|
-
if (isPlaceholderFlow) {
|
|
1200
|
-
transformsStr += animatedTransformTemplate(transformsObj);
|
|
1201
|
-
} else if (isGif && allowFullGIFTransformation) {
|
|
1202
|
-
transformsStr += animatedGIFTransformTemplate(transformsObj);
|
|
1203
|
-
}
|
|
1204
|
-
}
|
|
1205
|
-
return `${transformsObj.src.id}/${API_VERSION}/${transformsStr}/${transformsObj.fileName}.${transformsObj.preferredExtension}`;
|
|
1206
|
-
}
|
|
1207
|
-
function getURI(fittingType, src, target, options = {}, transformObj) {
|
|
1208
|
-
if (isImageTransformApplicable(src.id, options == null ? void 0 : options.hasAnimation, options == null ? void 0 : options.allowAnimatedTransform, options == null ? void 0 : options.allowFullGIFTransformation)) {
|
|
1209
|
-
if ((isWEBP(src.id) || isAVIF(src.id)) && !options.allowWebpAvifTransforms) {
|
|
1210
|
-
const { alignment, ...transformTarget } = target;
|
|
1211
|
-
src.focalPoint = { x: void 0, y: void 0 };
|
|
1212
|
-
src == null ? true : delete src.crop;
|
|
1213
|
-
transformObj = getTransform(fittingType, src, transformTarget, options);
|
|
1214
|
-
} else {
|
|
1215
|
-
transformObj = transformObj || getTransform(fittingType, src, target, options);
|
|
1216
|
-
}
|
|
1217
|
-
return getImageURI(transformObj);
|
|
1218
|
-
}
|
|
1219
|
-
return src.id;
|
|
1220
|
-
}
|
|
1221
|
-
function getSrcset(fittingType, src, target, options, data) {
|
|
1222
|
-
const dpr = target.pixelAspectRatio || 1;
|
|
1223
|
-
return {
|
|
1224
|
-
dpr: [
|
|
1225
|
-
`${dpr === 1 ? data.uri : getURI(fittingType, src, {
|
|
1226
|
-
...target,
|
|
1227
|
-
pixelAspectRatio: 1
|
|
1228
|
-
}, options)} 1x`,
|
|
1229
|
-
`${dpr === 2 ? data.uri : getURI(fittingType, src, {
|
|
1230
|
-
...target,
|
|
1231
|
-
pixelAspectRatio: 2
|
|
1232
|
-
}, options)} 2x`
|
|
1233
|
-
]
|
|
1234
|
-
};
|
|
1235
|
-
}
|
|
1236
|
-
const ALIGN_TYPE_TO_POSITION = {
|
|
1237
|
-
[alignTypes.CENTER]: "50% 50%",
|
|
1238
|
-
[alignTypes.TOP_LEFT]: "0% 0%",
|
|
1239
|
-
[alignTypes.TOP_RIGHT]: "100% 0%",
|
|
1240
|
-
[alignTypes.TOP]: "50% 0%",
|
|
1241
|
-
[alignTypes.BOTTOM_LEFT]: "0% 100%",
|
|
1242
|
-
[alignTypes.BOTTOM_RIGHT]: "100% 100%",
|
|
1243
|
-
[alignTypes.BOTTOM]: "50% 100%",
|
|
1244
|
-
[alignTypes.RIGHT]: "100% 50%",
|
|
1245
|
-
[alignTypes.LEFT]: "0% 50%"
|
|
1246
|
-
};
|
|
1247
|
-
const POSITION_TO_ALIGN_TYPE = Object.entries(ALIGN_TYPE_TO_POSITION).reduce((acc, [align, position]) => {
|
|
1248
|
-
acc[position] = align;
|
|
1249
|
-
return acc;
|
|
1250
|
-
}, {});
|
|
1251
|
-
const TILE_FITTING_TYPES = [
|
|
1252
|
-
fittingTypes.TILE,
|
|
1253
|
-
fittingTypes.TILE_HORIZONTAL,
|
|
1254
|
-
fittingTypes.TILE_VERTICAL,
|
|
1255
|
-
fittingTypes.LEGACY_BG_FIT_AND_TILE,
|
|
1256
|
-
fittingTypes.LEGACY_BG_FIT_AND_TILE_HORIZONTAL,
|
|
1257
|
-
fittingTypes.LEGACY_BG_FIT_AND_TILE_VERTICAL
|
|
1258
|
-
];
|
|
1259
|
-
const NON_SCALING_FITTING_TYPES = [
|
|
1260
|
-
fittingTypes.LEGACY_ORIGINAL_SIZE,
|
|
1261
|
-
fittingTypes.ORIGINAL_SIZE,
|
|
1262
|
-
fittingTypes.LEGACY_BG_NORMAL
|
|
1263
|
-
];
|
|
1264
|
-
function getIsFakeTile(fittingType, src, { width: targetWidth, height: targetHeight }) {
|
|
1265
|
-
return fittingType === fittingTypes.TILE && src.width > targetWidth && src.height > targetHeight;
|
|
1266
|
-
}
|
|
1267
|
-
function getScaledDimensions(fittingType, src, { width, height }, isSEOBot2 = false) {
|
|
1268
|
-
if (isSEOBot2) {
|
|
1269
|
-
return { width, height };
|
|
1270
|
-
}
|
|
1271
|
-
const isScalable = !NON_SCALING_FITTING_TYPES.includes(fittingType);
|
|
1272
|
-
const isFakeTile = getIsFakeTile(fittingType, src, { width, height });
|
|
1273
|
-
const isTile = !isFakeTile && TILE_FITTING_TYPES.includes(fittingType);
|
|
1274
|
-
const _width = isTile ? src.width : width;
|
|
1275
|
-
const _height = isTile ? src.height : height;
|
|
1276
|
-
const scaleFactor = isScalable ? getScaleFactorByWidth(_width, isPNG(src.id)) : 1;
|
|
1277
|
-
return {
|
|
1278
|
-
width: isFakeTile ? 1920 : _width * scaleFactor,
|
|
1279
|
-
height: _height * scaleFactor
|
|
1280
|
-
};
|
|
1281
|
-
}
|
|
1282
|
-
function getConvertedFitting(fittingType, isFakeTile) {
|
|
1283
|
-
const isTile = TILE_FITTING_TYPES.includes(fittingType) && !isFakeTile;
|
|
1284
|
-
const isFill = fittingType === fittingTypes.SCALE_TO_FILL;
|
|
1285
|
-
return isFill || isTile ? fittingTypes.SCALE_TO_FIT : fittingType;
|
|
1286
|
-
}
|
|
1287
|
-
function validateTargetDimensions(src, { width, height }) {
|
|
1288
|
-
if (!width || !height) {
|
|
1289
|
-
const _width = width || Math.min(980, src.width);
|
|
1290
|
-
const heightRatio = _width / src.width;
|
|
1291
|
-
return {
|
|
1292
|
-
width: _width,
|
|
1293
|
-
height: height || src.height * heightRatio
|
|
1294
|
-
};
|
|
1295
|
-
}
|
|
1296
|
-
return { width, height };
|
|
1297
|
-
}
|
|
1298
|
-
function getScaleFactorByWidth(width, isHighQuality) {
|
|
1299
|
-
if (width > 900) {
|
|
1300
|
-
return isHighQuality ? 0.05 : 0.15;
|
|
1301
|
-
} else if (width > 500) {
|
|
1302
|
-
return isHighQuality ? 0.1 : 0.18;
|
|
1303
|
-
} else if (width > 200) {
|
|
1304
|
-
return 0.25;
|
|
1305
|
-
}
|
|
1306
|
-
return 1;
|
|
1307
|
-
}
|
|
1308
|
-
function getBlurValue(width, fittingType, isSEOBot2) {
|
|
1309
|
-
if (isSEOBot2) {
|
|
1310
|
-
return 0;
|
|
1311
|
-
}
|
|
1312
|
-
if (TILE_FITTING_TYPES.includes(fittingType)) {
|
|
1313
|
-
return 1;
|
|
1314
|
-
}
|
|
1315
|
-
if (width > 200) {
|
|
1316
|
-
return 2;
|
|
1317
|
-
}
|
|
1318
|
-
return 3;
|
|
1319
|
-
}
|
|
1320
|
-
function getCSSOverrides(fittingType, src, target, alignment = "center") {
|
|
1321
|
-
const returnValue = {
|
|
1322
|
-
img: {},
|
|
1323
|
-
container: {}
|
|
1324
|
-
};
|
|
1325
|
-
if (fittingType === fittingTypes.SCALE_TO_FILL) {
|
|
1326
|
-
const alignTypeFromFocalPoint = src.focalPoint && convertFocalPointToAlignType(src.focalPoint);
|
|
1327
|
-
const alignType = alignTypeFromFocalPoint || alignment;
|
|
1328
|
-
if (src.focalPoint && !alignTypeFromFocalPoint) {
|
|
1329
|
-
returnValue.img = {
|
|
1330
|
-
objectPosition: convertFillFocalToPosition(src, target, src.focalPoint)
|
|
1331
|
-
};
|
|
1332
|
-
} else {
|
|
1333
|
-
returnValue.img = {
|
|
1334
|
-
objectPosition: ALIGN_TYPE_TO_POSITION[alignType]
|
|
1335
|
-
};
|
|
1336
|
-
}
|
|
1337
|
-
} else if ([fittingTypes.LEGACY_ORIGINAL_SIZE, fittingTypes.ORIGINAL_SIZE].includes(fittingType)) {
|
|
1338
|
-
returnValue.img = {
|
|
1339
|
-
objectFit: "none",
|
|
1340
|
-
top: "auto",
|
|
1341
|
-
left: "auto",
|
|
1342
|
-
right: "auto",
|
|
1343
|
-
bottom: "auto"
|
|
1344
|
-
};
|
|
1345
|
-
} else if (TILE_FITTING_TYPES.includes(fittingType)) {
|
|
1346
|
-
returnValue.container = {
|
|
1347
|
-
backgroundSize: `${src.width}px ${src.height}px`
|
|
1348
|
-
};
|
|
1349
|
-
}
|
|
1350
|
-
return returnValue;
|
|
1351
|
-
}
|
|
1352
|
-
function convertFocalPointToAlignType(focalPoint) {
|
|
1353
|
-
const position = `${focalPoint.x}% ${focalPoint.y}%`;
|
|
1354
|
-
return POSITION_TO_ALIGN_TYPE[position] || "";
|
|
1355
|
-
}
|
|
1356
|
-
function convertFillFocalToPosition(src, target, focalPoint) {
|
|
1357
|
-
const { width: sW, height: sH } = src;
|
|
1358
|
-
const { width: tW, height: tH } = target;
|
|
1359
|
-
const { x: fpX, y: fpY } = focalPoint;
|
|
1360
|
-
if (!tW || !tH) {
|
|
1361
|
-
return `${fpX}% ${fpY}%`;
|
|
1362
|
-
}
|
|
1363
|
-
const fillScaleFactor = Math.max(tW / sW, tH / sH);
|
|
1364
|
-
const imgScaledW = sW * fillScaleFactor;
|
|
1365
|
-
const imgScaledH = sH * fillScaleFactor;
|
|
1366
|
-
const x = Math.max(0, Math.min(imgScaledW - tW, imgScaledW * (fpX / 100) - tW / 2));
|
|
1367
|
-
const y = Math.max(0, Math.min(imgScaledH - tH, imgScaledH * (fpY / 100) - tH / 2));
|
|
1368
|
-
const posX = x && Math.floor(x / (imgScaledW - tW) * 100);
|
|
1369
|
-
const posY = y && Math.floor(y / (imgScaledH - tH) * 100);
|
|
1370
|
-
return `${posX}% ${posY}%`;
|
|
1371
|
-
}
|
|
1372
|
-
const PLACEHOLDER_IMG_CSS_OVERRIDES = { width: "100%", height: "100%" };
|
|
1373
|
-
function getPlaceholder(fittingType, src, target, options = {}) {
|
|
1374
|
-
const { autoEncode = true, isSEOBot: isSEOBot2, shouldLoadHQImage, hasAnimation, allowAnimatedTransform, encoding } = options;
|
|
1375
|
-
if (!isValidRequest(fittingType, src, target)) {
|
|
1376
|
-
return emptyData;
|
|
1377
|
-
}
|
|
1378
|
-
const IS_IN_PLACEHOLDER_FLOW = true;
|
|
1379
|
-
const shouldAllowAnimatedTransformInPlaceholder = allowAnimatedTransform ?? IS_IN_PLACEHOLDER_FLOW;
|
|
1380
|
-
const canTransformImage = isImageTransformApplicable(src.id, hasAnimation, shouldAllowAnimatedTransformInPlaceholder);
|
|
1381
|
-
if (!canTransformImage || shouldLoadHQImage) {
|
|
1382
|
-
return getData(fittingType, src, target, {
|
|
1383
|
-
...options,
|
|
1384
|
-
autoEncode,
|
|
1385
|
-
useSrcset: canTransformImage
|
|
1386
|
-
});
|
|
1387
|
-
}
|
|
1388
|
-
const newTarget = {
|
|
1389
|
-
...target,
|
|
1390
|
-
...validateTargetDimensions(src, target)
|
|
1391
|
-
};
|
|
1392
|
-
const { alignment, htmlTag: htmlTag2 } = newTarget;
|
|
1393
|
-
const isFakeTile = getIsFakeTile(fittingType, src, newTarget);
|
|
1394
|
-
const scaledDimensions = getScaledDimensions(fittingType, src, newTarget, isSEOBot2);
|
|
1395
|
-
const blur = getBlurValue(newTarget.width, fittingType, isSEOBot2);
|
|
1396
|
-
const convertedFittingType = getConvertedFitting(fittingType, isFakeTile);
|
|
1397
|
-
const overrideCSS = getCSSOverrides(fittingType, src, target, alignment);
|
|
1398
|
-
const { uri } = getData(convertedFittingType, src, {
|
|
1399
|
-
...scaledDimensions,
|
|
1400
|
-
alignment,
|
|
1401
|
-
htmlTag: htmlTag2
|
|
1402
|
-
}, {
|
|
1403
|
-
autoEncode,
|
|
1404
|
-
filters: blur ? { blur } : {},
|
|
1405
|
-
hasAnimation,
|
|
1406
|
-
allowAnimatedTransform: shouldAllowAnimatedTransformInPlaceholder,
|
|
1407
|
-
encoding,
|
|
1408
|
-
isPlaceholderFlow: IS_IN_PLACEHOLDER_FLOW
|
|
1409
|
-
});
|
|
1410
|
-
const { attr = {}, css } = getData(fittingType, src, {
|
|
1411
|
-
...newTarget,
|
|
1412
|
-
alignment,
|
|
1413
|
-
htmlTag: htmlTag2
|
|
1414
|
-
}, {});
|
|
1415
|
-
css.img = css.img || {};
|
|
1416
|
-
css.container = css.container || {};
|
|
1417
|
-
Object.assign(css.img, overrideCSS.img, PLACEHOLDER_IMG_CSS_OVERRIDES);
|
|
1418
|
-
Object.assign(css.container, overrideCSS.container);
|
|
1419
|
-
return { uri, css, attr, transformed: true };
|
|
1420
|
-
}
|
|
1421
|
-
function getData(fittingType, src, target, options) {
|
|
1422
|
-
let data = {};
|
|
1423
|
-
if (isValidRequest(fittingType, src, target)) {
|
|
1424
|
-
const targetObj = getTarget(fittingType, src, target);
|
|
1425
|
-
const transformObj = getTransform(fittingType, src, targetObj, options);
|
|
1426
|
-
data.uri = getURI(fittingType, src, targetObj, options, transformObj);
|
|
1427
|
-
if (options == null ? void 0 : options.useSrcset) {
|
|
1428
|
-
data.srcset = getSrcset(fittingType, src, targetObj, options, data);
|
|
1429
|
-
}
|
|
1430
|
-
Object.assign(data, getAttributes(transformObj, targetObj), {
|
|
1431
|
-
transformed: transformObj.transformed
|
|
1432
|
-
});
|
|
1433
|
-
} else {
|
|
1434
|
-
data = emptyData;
|
|
1435
|
-
}
|
|
1436
|
-
return data;
|
|
1437
|
-
}
|
|
1438
|
-
const wixStaticWithMedia = "https://static.wixstatic.com/media/";
|
|
1439
|
-
populateGlobalFeatureSupport();
|
|
1440
|
-
populateGlobalFeatureSupport();
|
|
1441
|
-
const STATIC_MEDIA_URL = wixStaticWithMedia;
|
|
1442
|
-
const imageKit = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1443
|
-
__proto__: null,
|
|
1444
|
-
STATIC_MEDIA_URL,
|
|
1445
|
-
alignTypes,
|
|
1446
|
-
fileType,
|
|
1447
|
-
fittingTypes,
|
|
1448
|
-
getData,
|
|
1449
|
-
getFileExtension,
|
|
1450
|
-
getPlaceholder,
|
|
1451
|
-
htmlTag,
|
|
1452
|
-
isWEBP,
|
|
1453
|
-
populateGlobalFeatureSupport,
|
|
1454
|
-
upscaleMethods
|
|
1455
|
-
}, Symbol.toStringTag, { value: "Module" }));
|
|
1
|
+
import { d as defineService } from "./index8.js";
|
|
2
|
+
const RenderingContextDefinition = defineService("@wix/site-service-rendering-context");
|
|
1456
3
|
export {
|
|
1457
|
-
|
|
1458
|
-
getData as a,
|
|
1459
|
-
getFileExtension as b,
|
|
1460
|
-
alignTypes as c,
|
|
1461
|
-
fittingTypes as d,
|
|
1462
|
-
fileType as f,
|
|
1463
|
-
getPlaceholder as g,
|
|
1464
|
-
imageKit as i
|
|
4
|
+
RenderingContextDefinition as R
|
|
1465
5
|
};
|