@wix/site-service-interactions 1.0.34 → 1.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/build/implementations/coreInteractions.js +11 -3
- package/cjs/build/implementations/coreInteractions.js.map +1 -1
- package/cjs/build/implementations/v2/ConfigStyleSheet.d.ts +17 -0
- package/cjs/build/implementations/v2/{ClickTriggerStyleSheet.js → ConfigStyleSheet.js} +8 -7
- package/cjs/build/implementations/v2/ConfigStyleSheet.js.map +1 -0
- package/cjs/build/implementations/v2/InteractionsScriptElement.d.ts +1 -1
- package/cjs/build/implementations/v2/InteractionsScriptElement.js +3 -3
- package/cjs/build/implementations/v2/InteractionsScriptElement.js.map +1 -1
- package/cjs/build/implementations/v2/backgroundScrollCss.d.ts +2 -0
- package/cjs/build/implementations/v2/backgroundScrollCss.js +169 -0
- package/cjs/build/implementations/v2/backgroundScrollCss.js.map +1 -0
- package/dist/implementations/coreInteractions.js +12 -4
- package/dist/implementations/coreInteractions.js.map +1 -1
- package/dist/implementations/v2/ConfigStyleSheet.d.ts +17 -0
- package/dist/implementations/v2/{ClickTriggerStyleSheet.js → ConfigStyleSheet.js} +6 -5
- package/dist/implementations/v2/ConfigStyleSheet.js.map +1 -0
- package/dist/implementations/v2/InteractionsScriptElement.d.ts +1 -1
- package/dist/implementations/v2/InteractionsScriptElement.js +3 -3
- package/dist/implementations/v2/InteractionsScriptElement.js.map +1 -1
- package/dist/implementations/v2/backgroundScrollCss.d.ts +2 -0
- package/dist/implementations/v2/backgroundScrollCss.js +165 -0
- package/dist/implementations/v2/backgroundScrollCss.js.map +1 -0
- package/package.json +2 -2
- package/src/implementations/coreInteractions.ts +14 -3
- package/src/implementations/v2/{ClickTriggerStyleSheet.tsx → ConfigStyleSheet.tsx} +5 -4
- package/src/implementations/v2/InteractionsScriptElement.tsx +3 -3
- package/src/implementations/v2/backgroundScrollCss.ts +208 -0
- package/cjs/build/implementations/v2/ClickTriggerStyleSheet.d.ts +0 -16
- package/cjs/build/implementations/v2/ClickTriggerStyleSheet.js.map +0 -1
- package/dist/implementations/v2/ClickTriggerStyleSheet.d.ts +0 -16
- package/dist/implementations/v2/ClickTriggerStyleSheet.js.map +0 -1
|
@@ -17,11 +17,14 @@ const InteractionsScriptElement_2 = require("./v2/InteractionsScriptElement");
|
|
|
17
17
|
const configCss_1 = require("./v2/configCss");
|
|
18
18
|
const configStyleHeadContent_1 = require("./v2/configStyleHeadContent");
|
|
19
19
|
const clickTriggerCss_1 = require("./v2/clickTriggerCss");
|
|
20
|
+
const backgroundScrollCss_1 = require("./v2/backgroundScrollCss");
|
|
20
21
|
const interactionsScriptContent_1 = require("./v2/interactionsScriptContent");
|
|
21
22
|
const authoredStyles_1 = require("./v2/authoredStyles");
|
|
22
23
|
const configEntries_1 = require("./configEntries");
|
|
23
24
|
/** An entry without interactions contributes CSS only; nothing has to load Interact for it. */
|
|
24
25
|
const getRuntimeConfigs = (entries) => entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0);
|
|
26
|
+
/** Only the reactions entry plays background scroll presets; experiences don't support them yet. */
|
|
27
|
+
const getBackgroundCss = ({ namespace, interact }) => namespace === configEntries_1.REACTIONS_NAMESPACE ? (0, backgroundScrollCss_1.getBackgroundScrollCss)(interact) : '';
|
|
25
28
|
const initInteract = (entries, isReducedMotion) => {
|
|
26
29
|
const runtimeConfigs = getRuntimeConfigs(entries);
|
|
27
30
|
// v1 registers its interact-element on create, and a tag can only be defined once: starting it for
|
|
@@ -44,7 +47,8 @@ const initInteract = (entries, isReducedMotion) => {
|
|
|
44
47
|
};
|
|
45
48
|
const getV2HeadContent = (entries) => {
|
|
46
49
|
const generatedCss = entries
|
|
47
|
-
.
|
|
50
|
+
.flatMap((entry) => [(0, configCss_1.getV2ConfigCss)(entry.interact), getBackgroundCss(entry)])
|
|
51
|
+
.map((css) => css.trim())
|
|
48
52
|
.filter(Boolean)
|
|
49
53
|
.join('\n');
|
|
50
54
|
const css = [(0, authoredStyles_1.getAuthoredStylesCss)(entries).trim(), generatedCss].filter(Boolean).join('\n');
|
|
@@ -70,8 +74,12 @@ const initRuntime = (entries, isReducedMotion, getService, useV2) => {
|
|
|
70
74
|
addTopComponent((0, InteractionsScriptElement_1.createInteractionsScriptElement)(runtimeConfigs[0], isReducedMotion, pageId));
|
|
71
75
|
return;
|
|
72
76
|
}
|
|
73
|
-
|
|
74
|
-
|
|
77
|
+
// The server sends these with the generated CSS; the client adopts whatever it did not send.
|
|
78
|
+
const configCss = entries
|
|
79
|
+
.flatMap((entry) => [(0, clickTriggerCss_1.getClickTriggerCss)(entry.interact), getBackgroundCss(entry)])
|
|
80
|
+
.map((css) => css.trim())
|
|
81
|
+
.filter(Boolean);
|
|
82
|
+
addTopComponent((0, InteractionsScriptElement_2.createV2InteractionsScriptElement)(runtimeConfigs, isReducedMotion, pageId, configCss));
|
|
75
83
|
};
|
|
76
84
|
const getInteractiveComps = (entries) => {
|
|
77
85
|
const keys = new Set();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../../src/implementations/coreInteractions.ts"],"names":[],"mappings":";;;AAAA,kDAA2C;AAE3C,yEAA+E;AAC/E,yEAAgF;AAChF,+FAA+F;AAC/F,+FAA+F;AAC/F,+FAA+F;AAC/F,kFAAkF;AAClF,qEAAsE;AACtE,2EAAmF;AACnF,iEAAuE;AACvE,mGAA+G;AAG/G,2EAA6E;AAC7E,8EAAkF;AAClF,8CAA+C;AAC/C,wEAAyE;AACzE,0DAAyD;AACzD,8EAA8E;AAC9E,wDAA0D;AAC1D,
|
|
1
|
+
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { FunctionComponent } from 'react';
|
|
2
|
+
type StyleSheetDocument = Pick<Document, 'adoptedStyleSheets' | 'querySelectorAll'>;
|
|
3
|
+
/**
|
|
4
|
+
* Adopts the rules the server did not already send as a constructable stylesheet, and returns a
|
|
5
|
+
* function that removes that sheet again.
|
|
6
|
+
*/
|
|
7
|
+
export declare const adoptMissingStyleSheet: (rules: Array<string>, document?: StyleSheetDocument | undefined) => () => void;
|
|
8
|
+
/**
|
|
9
|
+
* The server sends the rules it derives from the config (click-trigger cursors, background scroll
|
|
10
|
+
* sizing) in the head only for what it rendered, so content rendered on the client (client-side
|
|
11
|
+
* navigation, password-protected / members-only pages, a host that renders only on the client) never
|
|
12
|
+
* gets them. Adopt the missing ones while the page is mounted and remove them when navigating away.
|
|
13
|
+
*/
|
|
14
|
+
export declare const ConfigStyleSheet: FunctionComponent<{
|
|
15
|
+
rules: Array<string>;
|
|
16
|
+
}>;
|
|
17
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.ConfigStyleSheet = exports.adoptMissingStyleSheet = void 0;
|
|
4
4
|
const react_1 = require("react");
|
|
5
5
|
const configStyleHeadContent_1 = require("./configStyleHeadContent");
|
|
6
6
|
const getServerRenderedCss = (document) => Array.from(document.querySelectorAll(`style[${configStyleHeadContent_1.SSR_STYLE_ATTRIBUTE}]`))
|
|
@@ -28,13 +28,14 @@ const adoptMissingStyleSheet = (rules, document = globalThis.document) => {
|
|
|
28
28
|
};
|
|
29
29
|
exports.adoptMissingStyleSheet = adoptMissingStyleSheet;
|
|
30
30
|
/**
|
|
31
|
-
* The server sends the
|
|
32
|
-
*
|
|
33
|
-
*
|
|
31
|
+
* The server sends the rules it derives from the config (click-trigger cursors, background scroll
|
|
32
|
+
* sizing) in the head only for what it rendered, so content rendered on the client (client-side
|
|
33
|
+
* navigation, password-protected / members-only pages, a host that renders only on the client) never
|
|
34
|
+
* gets them. Adopt the missing ones while the page is mounted and remove them when navigating away.
|
|
34
35
|
*/
|
|
35
|
-
const
|
|
36
|
+
const ConfigStyleSheet = ({ rules }) => {
|
|
36
37
|
(0, react_1.useEffect)(() => (0, exports.adoptMissingStyleSheet)(rules), [rules]);
|
|
37
38
|
return null;
|
|
38
39
|
};
|
|
39
|
-
exports.
|
|
40
|
-
//# sourceMappingURL=
|
|
40
|
+
exports.ConfigStyleSheet = ConfigStyleSheet;
|
|
41
|
+
//# sourceMappingURL=ConfigStyleSheet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConfigStyleSheet.js","sourceRoot":"","sources":["../../../../src/implementations/v2/ConfigStyleSheet.tsx"],"names":[],"mappings":";;;AAAA,iCAAiC;AAEjC,qEAA8D;AAI9D,MAAM,oBAAoB,GAAG,CAAC,QAA4B,EAAU,EAAE,CACrE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,4CAAmB,GAAG,CAAC,CAAC;KACpE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;KACvC,IAAI,CAAC,IAAI,CAAC,CAAA;AAEb;;;GAGG;AACI,MAAM,sBAAsB,GAAG,CACrC,KAAoB,EACpB,QAAQ,GAAmC,UAAU,CAAC,QAAQ,EAC7D,EAAE;IACH,IAAI,CAAC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;QACnC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChB,CAAC;IAED,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAChF,IAAI,CAAC,GAAG,EAAE,CAAC;QACV,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChB,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAA;IACjC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;IACtB,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAA;IAErE,OAAO,GAAG,EAAE;QACX,QAAQ,CAAC,kBAAkB,GAAG,QAAQ,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,CAAC,CAAA;IACjG,CAAC,CAAA;AACF,CAAC,CAAA;AArBY,QAAA,sBAAsB,GAAtB,sBAAsB,CAqBlC;AAED;;;;;GAKG;AACI,MAAM,gBAAgB,GAAgD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1F,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,IAAA,QAAA,sBAAsB,EAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEvD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA;AAJY,QAAA,gBAAgB,GAAhB,gBAAgB,CAI5B"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { FunctionComponent } from 'react';
|
|
2
2
|
import type { InteractConfig } from '@wix/interact';
|
|
3
|
-
export declare const createV2InteractionsScriptElement: (config: InteractConfig | InteractConfig[], isReducedMotion: boolean, pageId: string,
|
|
3
|
+
export declare const createV2InteractionsScriptElement: (config: InteractConfig | InteractConfig[], isReducedMotion: boolean, pageId: string, configCss?: Array<string>) => FunctionComponent;
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.createV2InteractionsScriptElement = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const reviveScriptElement_1 = require("../reviveScriptElement");
|
|
9
|
-
const
|
|
9
|
+
const ConfigStyleSheet_1 = require("./ConfigStyleSheet");
|
|
10
10
|
const interactionsScriptContent_1 = require("./interactionsScriptContent");
|
|
11
11
|
const DANGEROUSLY_SET_INNER_HTML = ['dangerously', 'Set', 'Inner', 'HTML'];
|
|
12
12
|
/**
|
|
@@ -14,7 +14,7 @@ const DANGEROUSLY_SET_INNER_HTML = ['dangerously', 'Set', 'Inner', 'HTML'];
|
|
|
14
14
|
* element early. `\u003c` is valid JSON that `JSON.parse` reads back as `<`.
|
|
15
15
|
*/
|
|
16
16
|
const serializeConfigForScriptElement = (config) => JSON.stringify(config).replace(/</g, '\\u003c');
|
|
17
|
-
const createV2InteractionsScriptElement = (config, isReducedMotion, pageId,
|
|
17
|
+
const createV2InteractionsScriptElement = (config, isReducedMotion, pageId, configCss = []) => () => {
|
|
18
18
|
// This ID is also interpolated into raw module-script text. Percent-encoding removes
|
|
19
19
|
// script delimiters and template-literal syntax while keeping the ID deterministic.
|
|
20
20
|
const safePageId = encodeURIComponent(pageId);
|
|
@@ -29,7 +29,7 @@ const createV2InteractionsScriptElement = (config, isReducedMotion, pageId, clic
|
|
|
29
29
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
30
30
|
react_1.default.createElement("script", { type: "application/json", id: configId, ...configProps }),
|
|
31
31
|
react_1.default.createElement("script", { type: "module", id: `interactions-loader-${safePageId}`, ref: reviveScriptElement_1.reviveScriptElement, ...loaderProps }),
|
|
32
|
-
|
|
32
|
+
configCss.length > 0 && react_1.default.createElement(ConfigStyleSheet_1.ConfigStyleSheet, { rules: configCss })));
|
|
33
33
|
};
|
|
34
34
|
exports.createV2InteractionsScriptElement = createV2InteractionsScriptElement;
|
|
35
35
|
//# sourceMappingURL=InteractionsScriptElement.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionsScriptElement.js","sourceRoot":"","sources":["../../../../src/implementations/v2/InteractionsScriptElement.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAGzB,gEAA4D;AAC5D,
|
|
1
|
+
{"version":3,"file":"InteractionsScriptElement.js","sourceRoot":"","sources":["../../../../src/implementations/v2/InteractionsScriptElement.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAGzB,gEAA4D;AAC5D,yDAAqD;AACrD,2EAA4E;AAE5E,MAAM,0BAA0B,GAAG,CAAC,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AAE1E;;;GAGG;AACH,MAAM,+BAA+B,GAAG,CAAC,MAAyC,EAAU,EAAE,CAC7F,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;AAEzC,MAAM,iCAAiC,GAC7C,CACC,MAAyC,EACzC,eAAwB,EACxB,MAAc,EACd,SAAS,GAAkB,EAAE,EACT,EAAE,CACvB,GAAG,EAAE;IACJ,qFAAqF;IACrF,oFAAoF;IACpF,MAAM,UAAU,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAA;IAC7C,MAAM,QAAQ,GAAG,uBAAuB,UAAU,EAAE,CAAA;IACpD,MAAM,yBAAyB,GAAG,IAAA,0DAA8B,EAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;IAC3F,MAAM,WAAW,GAAG;QACnB,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAC,EAAE;KAC1F,CAAA;IACD,MAAM,WAAW,GAAG;QACnB,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE;KAC5E,CAAA;IAED,OAAO,CACN;QACC,0CAAQ,IAAI,EAAC,kBAAkB,EAAC,EAAE,EAAE,QAAQ,KAAM,WAAW,GAAI;QACjE,0CAAQ,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,uBAAuB,UAAU,EAAE,EAAE,GAAG,EAAE,yCAAmB,KAAM,WAAW,GAAI;QAC3G,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,8BAAC,mCAAgB,IAAC,KAAK,EAAE,SAAS,GAAI,CAC7D,CACH,CAAA;AACF,CAAC,CAAA;AA3BW,QAAA,iCAAiC,GAAjC,iCAAiC,CA2B5C"}
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getBackgroundScrollCss = void 0;
|
|
4
|
+
const motionPresets_1 = require("./motionPresets");
|
|
5
|
+
const BG_SKEW_ANGLE = 20;
|
|
6
|
+
const BG_ROTATE_ANGLE = 22;
|
|
7
|
+
const BG_PAN_SPEED = 0.2;
|
|
8
|
+
const IMAGE_PARALLAX_SPEED = 1.5;
|
|
9
|
+
// Mimics `position: fixed` with sticky positioning, which keeps working inside a transform or an overflow.
|
|
10
|
+
const FIXED_MEDIA_STYLE = {
|
|
11
|
+
'will-change': 'var(--motion-bgreveal-will-change)',
|
|
12
|
+
height: 'calc(100% + 200lvh)',
|
|
13
|
+
'margin-top': '-100lvh',
|
|
14
|
+
overflow: 'clip',
|
|
15
|
+
// a media rendered as a background image needs its own stacking context in some browsers
|
|
16
|
+
isolation: 'isolate',
|
|
17
|
+
};
|
|
18
|
+
const FIXED_IMG_STYLE = {
|
|
19
|
+
position: 'sticky',
|
|
20
|
+
height: 'max(100lvh, calc(100% - 200lvh))',
|
|
21
|
+
width: '100%',
|
|
22
|
+
top: '0px',
|
|
23
|
+
'margin-bottom': 'calc(100lvh - max(100lvh, var(--motion-comp-height, 100%)))',
|
|
24
|
+
display: 'block',
|
|
25
|
+
padding: '0px',
|
|
26
|
+
};
|
|
27
|
+
const FILL_STYLE = { height: '100%', width: '100%', position: 'absolute' };
|
|
28
|
+
// Firefox breaks the sticky imitation without it, https://bugzilla.mozilla.org/show_bug.cgi?id=1791232. It only
|
|
29
|
+
// defines the variable the fixed media style reads, so it is always rendered.
|
|
30
|
+
const FIREFOX_CSS = '@supports (-moz-appearance: none) {\nbody {\n--motion-bgreveal-will-change: transform;\n}\n}';
|
|
31
|
+
const toRadians = (degrees) => (degrees * Math.PI) / 180;
|
|
32
|
+
const numberParam = (namedEffect, name, fallback) => typeof namedEffect[name] === 'number' && namedEffect[name] ? namedEffect[name] : fallback;
|
|
33
|
+
const isFixedStyle = (namedEffect) => (namedEffect.type === 'BgZoom' && namedEffect.direction === 'in') ||
|
|
34
|
+
['BgReveal', 'BgParallax', 'BgFake3D'].includes(namedEffect.type);
|
|
35
|
+
const MEDIA_STYLES = {
|
|
36
|
+
BgParallax: () => FIXED_MEDIA_STYLE,
|
|
37
|
+
BgReveal: () => FIXED_MEDIA_STYLE,
|
|
38
|
+
BgFake3D: () => FIXED_MEDIA_STYLE,
|
|
39
|
+
BgSkew: (namedEffect) => {
|
|
40
|
+
const tan = Math.tan(toRadians(numberParam(namedEffect, 'angle', BG_SKEW_ANGLE)));
|
|
41
|
+
return { 'padding-bottom': `${(100 * tan).toFixed(3)}%`, 'margin-top': `${(-50 * tan).toFixed(3)}%` };
|
|
42
|
+
},
|
|
43
|
+
BgRotate: (namedEffect) => {
|
|
44
|
+
const angle = toRadians(numberParam(namedEffect, 'angle', BG_ROTATE_ANGLE));
|
|
45
|
+
const cos = (100 * Math.cos(angle)).toFixed(3);
|
|
46
|
+
const sin = (100 * Math.sin(angle)).toFixed(3);
|
|
47
|
+
return {
|
|
48
|
+
width: `max(100%, calc(${cos}cqw + ${sin}cqh))`,
|
|
49
|
+
height: `max(100%, calc(${sin}cqw + ${cos}cqh))`,
|
|
50
|
+
translate: 'calc(50cqw - 50%) calc(50cqh - 50%)',
|
|
51
|
+
};
|
|
52
|
+
},
|
|
53
|
+
BgPan: (namedEffect) => {
|
|
54
|
+
const speed = numberParam(namedEffect, 'speed', BG_PAN_SPEED);
|
|
55
|
+
return { position: 'relative', width: `${100 * (1 + speed)}%`, left: `-${50 * speed}%` };
|
|
56
|
+
},
|
|
57
|
+
BgZoom: (namedEffect) => isFixedStyle(namedEffect)
|
|
58
|
+
? FIXED_MEDIA_STYLE
|
|
59
|
+
: { position: 'relative', width: '115%', height: '115%', left: '-7.5%', top: '-7.5%' },
|
|
60
|
+
ImageParallax: (namedEffect) => ({
|
|
61
|
+
height: `${100 * numberParam(namedEffect, 'speed', IMAGE_PARALLAX_SPEED)}%`,
|
|
62
|
+
position: 'relative',
|
|
63
|
+
}),
|
|
64
|
+
};
|
|
65
|
+
const IMG_STYLES = {
|
|
66
|
+
BgParallax: () => FIXED_IMG_STYLE,
|
|
67
|
+
BgReveal: () => FIXED_IMG_STYLE,
|
|
68
|
+
BgFake3D: () => FIXED_IMG_STYLE,
|
|
69
|
+
BgZoom: (namedEffect) => (isFixedStyle(namedEffect) ? FIXED_IMG_STYLE : {}),
|
|
70
|
+
BgSkew: () => FILL_STYLE,
|
|
71
|
+
ImageParallax: () => FILL_STYLE,
|
|
72
|
+
};
|
|
73
|
+
const BACKGROUND_SCROLL_EFFECTS = new Set([
|
|
74
|
+
'BgCloseUp',
|
|
75
|
+
'BgFade',
|
|
76
|
+
'BgFadeBack',
|
|
77
|
+
'BgPullBack',
|
|
78
|
+
...Object.keys(MEDIA_STYLES),
|
|
79
|
+
...Object.keys(IMG_STYLES),
|
|
80
|
+
]);
|
|
81
|
+
const escapeCssAttr = (value) => value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
|
|
82
|
+
const rule = (selector, style) => `${selector} {\n${Object.entries(style)
|
|
83
|
+
.map(([property, value]) => `${property}: ${value};`)
|
|
84
|
+
.join('\n')}\n}`;
|
|
85
|
+
/**
|
|
86
|
+
* Keys are comp paths, so the last segment is the comp id. A part carries `<PART> <comp id>`, and a repeated
|
|
87
|
+
* comp's id carries its item, `<comp id>__<item>`, on the root and on its parts alike.
|
|
88
|
+
*/
|
|
89
|
+
const getSelectors = (key, selectorConditions) => {
|
|
90
|
+
const compId = escapeCssAttr(key.slice(key.lastIndexOf('/') + 1));
|
|
91
|
+
const root = `:is([id="${compId}"], [id^="${compId}__"])${selectorConditions}`;
|
|
92
|
+
const part = (name) => `:is([data-motion-part="${name} ${compId}"], [data-motion-part^="${name} ${compId}__"])`;
|
|
93
|
+
// Every part is matched under the root, as Thunderbolt does, so a root that is itself the layer is not matched.
|
|
94
|
+
return {
|
|
95
|
+
layer: `${root} ${part('BG_LAYER')}`,
|
|
96
|
+
media: `${root} ${part('BG_MEDIA')}`,
|
|
97
|
+
image: `${root}:not([data-show-canvas]) ${part('BG_IMG')}, ${root}[data-has-alpha="true"] canvas`,
|
|
98
|
+
imageXMedia: `${root}[data-testid="imageX"] ${part('BG_MEDIA')}`,
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
const getEffectRules = (namedEffect, key, selectorConditions) => {
|
|
102
|
+
const selectors = getSelectors(key, selectorConditions);
|
|
103
|
+
const mediaStyle = MEDIA_STYLES[namedEffect.type]?.(namedEffect);
|
|
104
|
+
const imgStyle = IMG_STYLES[namedEffect.type]?.(namedEffect);
|
|
105
|
+
const isRotate = namedEffect.type === 'BgRotate';
|
|
106
|
+
const rules = [
|
|
107
|
+
...(mediaStyle ? [rule(selectors.media, mediaStyle)] : []),
|
|
108
|
+
...(imgStyle && Object.keys(imgStyle).length ? [rule(selectors.image, imgStyle)] : []),
|
|
109
|
+
rule(selectors.layer, { overflow: 'clip', contain: 'layout', ...(isRotate && { 'container-type': 'size' }) }),
|
|
110
|
+
];
|
|
111
|
+
if (isRotate) {
|
|
112
|
+
const angle = toRadians(numberParam(namedEffect, 'angle', BG_ROTATE_ANGLE));
|
|
113
|
+
const grow = (100 * (Math.sqrt(1 + Math.tan(angle) ** 2) - 1)).toFixed(3);
|
|
114
|
+
const sin = (100 * Math.sin(angle)).toFixed(3);
|
|
115
|
+
rules.push(`@container (min-aspect-ratio: ${Math.tan(Math.PI / 2 - angle).toFixed(3)}) {\n${rule(selectors.media, {
|
|
116
|
+
width: `calc(100% + min(${grow}%, ${sin}cqh))`,
|
|
117
|
+
})}\n}`, `@container (max-aspect-ratio: ${Math.tan(angle).toFixed(3)}) {\n${rule(selectors.media, {
|
|
118
|
+
height: `calc(100% + min(${grow}%, ${sin}cqw))`,
|
|
119
|
+
})}\n}`);
|
|
120
|
+
}
|
|
121
|
+
else if (isFixedStyle(namedEffect)) {
|
|
122
|
+
// Safari has a bug like Firefox's for an ImageX media; a transform solves it
|
|
123
|
+
rules.push(rule(selectors.imageXMedia, { transform: 'translate3d(0,0,0)' }));
|
|
124
|
+
}
|
|
125
|
+
return rules;
|
|
126
|
+
};
|
|
127
|
+
const getConditions = (interact, conditionIds) => {
|
|
128
|
+
const conditions = [...new Set(conditionIds)]
|
|
129
|
+
.map((id) => interact.conditions?.[id])
|
|
130
|
+
.filter((condition) => Boolean(condition?.predicate));
|
|
131
|
+
const predicatesOf = (type) => conditions.filter((condition) => condition.type === type).map(({ predicate }) => predicate);
|
|
132
|
+
const media = predicatesOf('media');
|
|
133
|
+
return {
|
|
134
|
+
media: media.length ? `(${media.join(') and (')})` : '',
|
|
135
|
+
selector: predicatesOf('selector')
|
|
136
|
+
.map((predicate) => `:is(${predicate})`)
|
|
137
|
+
.join(''),
|
|
138
|
+
};
|
|
139
|
+
};
|
|
140
|
+
const toMediaBlock = ([media, rules]) => media ? `@media ${media} {\n${[...rules].join('\n')}\n}` : [...rules].join('\n');
|
|
141
|
+
const getBackgroundScrollCss = (interact) => {
|
|
142
|
+
const rulesByMedia = new Map();
|
|
143
|
+
for (const interaction of interact.interactions) {
|
|
144
|
+
// sequences don't play scrub animations, so a background scroll preset is only ever an interaction's effect
|
|
145
|
+
for (const inlineEffect of interaction.effects ?? []) {
|
|
146
|
+
// an effectId points at interact.effects; the inline fields override it, as interact reads them
|
|
147
|
+
const effect = {
|
|
148
|
+
...(inlineEffect.effectId ? interact.effects?.[inlineEffect.effectId] : undefined),
|
|
149
|
+
...inlineEffect,
|
|
150
|
+
};
|
|
151
|
+
const { namedEffect } = effect;
|
|
152
|
+
const key = effect.key ?? interaction.key;
|
|
153
|
+
const type = namedEffect?.type?.startsWith(motionPresets_1.LEGACY_PREFIX)
|
|
154
|
+
? namedEffect.type.slice(motionPresets_1.LEGACY_PREFIX.length)
|
|
155
|
+
: undefined;
|
|
156
|
+
if (!namedEffect || !type || !BACKGROUND_SCROLL_EFFECTS.has(type) || !key) {
|
|
157
|
+
continue;
|
|
158
|
+
}
|
|
159
|
+
const params = { ...namedEffect, type };
|
|
160
|
+
const conditions = getConditions(interact, [...(interaction.conditions ?? []), ...(effect.conditions ?? [])]);
|
|
161
|
+
const rules = rulesByMedia.get(conditions.media) ?? new Set();
|
|
162
|
+
getEffectRules(params, key, conditions.selector).forEach((css) => rules.add(css));
|
|
163
|
+
rulesByMedia.set(conditions.media, rules);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
return `@media (prefers-reduced-motion: no-preference) {\n${[...[...rulesByMedia].map(toMediaBlock), FIREFOX_CSS].join('\n')}\n}`;
|
|
167
|
+
};
|
|
168
|
+
exports.getBackgroundScrollCss = getBackgroundScrollCss;
|
|
169
|
+
//# sourceMappingURL=backgroundScrollCss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"backgroundScrollCss.js","sourceRoot":"","sources":["../../../../src/implementations/v2/backgroundScrollCss.ts"],"names":[],"mappings":"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"}
|
|
@@ -14,11 +14,14 @@ import { createV2InteractionsScriptElement } from './v2/InteractionsScriptElemen
|
|
|
14
14
|
import { getV2ConfigCss } from './v2/configCss';
|
|
15
15
|
import { getV2ConfigStyleHeadContent } from './v2/configStyleHeadContent';
|
|
16
16
|
import { getClickTriggerCss } from './v2/clickTriggerCss';
|
|
17
|
+
import { getBackgroundScrollCss } from './v2/backgroundScrollCss';
|
|
17
18
|
import { getV2ModulePreloadHeadContent } from './v2/interactionsScriptContent';
|
|
18
19
|
import { getAuthoredStylesCss } from './v2/authoredStyles';
|
|
19
|
-
import { getInteractConfigEntries, getInteractiveKeys, getResolvedConfigEntries, resolveInteractKeyConflicts, } from './configEntries';
|
|
20
|
+
import { getInteractConfigEntries, getInteractiveKeys, getResolvedConfigEntries, REACTIONS_NAMESPACE, resolveInteractKeyConflicts, } from './configEntries';
|
|
20
21
|
/** An entry without interactions contributes CSS only; nothing has to load Interact for it. */
|
|
21
22
|
const getRuntimeConfigs = (entries) => entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0);
|
|
23
|
+
/** Only the reactions entry plays background scroll presets; experiences don't support them yet. */
|
|
24
|
+
const getBackgroundCss = ({ namespace, interact }) => namespace === REACTIONS_NAMESPACE ? getBackgroundScrollCss(interact) : '';
|
|
22
25
|
const initInteract = (entries, isReducedMotion) => {
|
|
23
26
|
const runtimeConfigs = getRuntimeConfigs(entries);
|
|
24
27
|
// v1 registers its interact-element on create, and a tag can only be defined once: starting it for
|
|
@@ -41,7 +44,8 @@ const initInteract = (entries, isReducedMotion) => {
|
|
|
41
44
|
};
|
|
42
45
|
const getV2HeadContent = (entries) => {
|
|
43
46
|
const generatedCss = entries
|
|
44
|
-
.
|
|
47
|
+
.flatMap((entry) => [getV2ConfigCss(entry.interact), getBackgroundCss(entry)])
|
|
48
|
+
.map((css) => css.trim())
|
|
45
49
|
.filter(Boolean)
|
|
46
50
|
.join('\n');
|
|
47
51
|
const css = [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n');
|
|
@@ -67,8 +71,12 @@ const initRuntime = (entries, isReducedMotion, getService, useV2) => {
|
|
|
67
71
|
addTopComponent(createInteractionsScriptElement(runtimeConfigs[0], isReducedMotion, pageId));
|
|
68
72
|
return;
|
|
69
73
|
}
|
|
70
|
-
|
|
71
|
-
|
|
74
|
+
// The server sends these with the generated CSS; the client adopts whatever it did not send.
|
|
75
|
+
const configCss = entries
|
|
76
|
+
.flatMap((entry) => [getClickTriggerCss(entry.interact), getBackgroundCss(entry)])
|
|
77
|
+
.map((css) => css.trim())
|
|
78
|
+
.filter(Boolean);
|
|
79
|
+
addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId, configCss));
|
|
72
80
|
};
|
|
73
81
|
const getInteractiveComps = (entries) => {
|
|
74
82
|
const keys = new Set();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAC/E,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAA;AAChF,+FAA+F;AAC/F,+FAA+F;AAC/F,+FAA+F;AAC/F,kFAAkF;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAA;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,iCAAiC,EAAE,MAAM,6DAA6D,CAAA;AAG/G,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAA;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAA;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,EACN,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,EACxB,2BAA2B,GAC3B,MAAM,iBAAiB,CAAA;AAExB,+FAA+F;AAC/F,MAAM,iBAAiB,GAAG,CAAC,OAA8B,EAAoB,EAAE,CAC9E,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;AAE9F,MAAM,YAAY,GAAG,CAAC,OAA8B,EAAE,eAAwB,EAAE,EAAE;IACjF,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAA;IACjD,mGAAmG;IACnG,0GAA0G;IAC1G,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;QAC5B,OAAM;IACP,CAAC;IACD,6DAA6D;IAC7D,QAAQ,CAAC,kBAAkB,GAAG,eAAe,CAAA;IAC7C,QAAQ,CAAC,KAAK,CAAC;QACd,mBAAmB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC;QAC1E,iBAAiB,EAAE,IAAI;QACvB,SAAS,EAAE;YACV,gBAAgB,EAAE,IAAI;SACtB;KACD,CAAC,CAAA;IACF,KAAK,MAAM,MAAM,IAAI,cAAc,EAAE,CAAC;QACrC,QAAQ,CAAC,MAAM,CAAC,MAA0B,CAAC,CAAA;IAC5C,CAAC;AACF,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,OAA8B,EAAU,EAAE;IACnE,MAAM,YAAY,GAAG,OAAO;SAC1B,
|
|
1
|
+
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { FunctionComponent } from 'react';
|
|
2
|
+
type StyleSheetDocument = Pick<Document, 'adoptedStyleSheets' | 'querySelectorAll'>;
|
|
3
|
+
/**
|
|
4
|
+
* Adopts the rules the server did not already send as a constructable stylesheet, and returns a
|
|
5
|
+
* function that removes that sheet again.
|
|
6
|
+
*/
|
|
7
|
+
export declare const adoptMissingStyleSheet: (rules: Array<string>, document?: StyleSheetDocument | undefined) => () => void;
|
|
8
|
+
/**
|
|
9
|
+
* The server sends the rules it derives from the config (click-trigger cursors, background scroll
|
|
10
|
+
* sizing) in the head only for what it rendered, so content rendered on the client (client-side
|
|
11
|
+
* navigation, password-protected / members-only pages, a host that renders only on the client) never
|
|
12
|
+
* gets them. Adopt the missing ones while the page is mounted and remove them when navigating away.
|
|
13
|
+
*/
|
|
14
|
+
export declare const ConfigStyleSheet: FunctionComponent<{
|
|
15
|
+
rules: Array<string>;
|
|
16
|
+
}>;
|
|
17
|
+
export {};
|
|
@@ -24,12 +24,13 @@ export const adoptMissingStyleSheet = (rules, document = globalThis.document) =>
|
|
|
24
24
|
};
|
|
25
25
|
};
|
|
26
26
|
/**
|
|
27
|
-
* The server sends the
|
|
28
|
-
*
|
|
29
|
-
*
|
|
27
|
+
* The server sends the rules it derives from the config (click-trigger cursors, background scroll
|
|
28
|
+
* sizing) in the head only for what it rendered, so content rendered on the client (client-side
|
|
29
|
+
* navigation, password-protected / members-only pages, a host that renders only on the client) never
|
|
30
|
+
* gets them. Adopt the missing ones while the page is mounted and remove them when navigating away.
|
|
30
31
|
*/
|
|
31
|
-
export const
|
|
32
|
+
export const ConfigStyleSheet = ({ rules }) => {
|
|
32
33
|
useEffect(() => adoptMissingStyleSheet(rules), [rules]);
|
|
33
34
|
return null;
|
|
34
35
|
};
|
|
35
|
-
//# sourceMappingURL=
|
|
36
|
+
//# sourceMappingURL=ConfigStyleSheet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConfigStyleSheet.js","sourceRoot":"","sources":["../../../src/implementations/v2/ConfigStyleSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAI9D,MAAM,oBAAoB,GAAG,CAAC,QAA4B,EAAU,EAAE,CACrE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,mBAAmB,GAAG,CAAC,CAAC;KACpE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;KACvC,IAAI,CAAC,IAAI,CAAC,CAAA;AAEb;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACrC,KAAoB,EACpB,QAAQ,GAAmC,UAAU,CAAC,QAAQ,EAC7D,EAAE;IACH,IAAI,CAAC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;QACnC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChB,CAAC;IAED,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAChF,IAAI,CAAC,GAAG,EAAE,CAAC;QACV,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChB,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAA;IACjC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;IACtB,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAA;IAErE,OAAO,GAAG,EAAE;QACX,QAAQ,CAAC,kBAAkB,GAAG,QAAQ,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,CAAC,CAAA;IACjG,CAAC,CAAA;AACF,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAgD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1F,SAAS,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEvD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { FunctionComponent } from 'react';
|
|
2
2
|
import type { InteractConfig } from '@wix/interact';
|
|
3
|
-
export declare const createV2InteractionsScriptElement: (config: InteractConfig | InteractConfig[], isReducedMotion: boolean, pageId: string,
|
|
3
|
+
export declare const createV2InteractionsScriptElement: (config: InteractConfig | InteractConfig[], isReducedMotion: boolean, pageId: string, configCss?: Array<string>) => FunctionComponent;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { reviveScriptElement } from '../reviveScriptElement';
|
|
3
|
-
import {
|
|
3
|
+
import { ConfigStyleSheet } from './ConfigStyleSheet';
|
|
4
4
|
import { getV2InteractionsScriptContent } from './interactionsScriptContent';
|
|
5
5
|
const DANGEROUSLY_SET_INNER_HTML = ['dangerously', 'Set', 'Inner', 'HTML'];
|
|
6
6
|
/**
|
|
@@ -8,7 +8,7 @@ const DANGEROUSLY_SET_INNER_HTML = ['dangerously', 'Set', 'Inner', 'HTML'];
|
|
|
8
8
|
* element early. `\u003c` is valid JSON that `JSON.parse` reads back as `<`.
|
|
9
9
|
*/
|
|
10
10
|
const serializeConfigForScriptElement = (config) => JSON.stringify(config).replace(/</g, '\\u003c');
|
|
11
|
-
export const createV2InteractionsScriptElement = (config, isReducedMotion, pageId,
|
|
11
|
+
export const createV2InteractionsScriptElement = (config, isReducedMotion, pageId, configCss = []) => () => {
|
|
12
12
|
// This ID is also interpolated into raw module-script text. Percent-encoding removes
|
|
13
13
|
// script delimiters and template-literal syntax while keeping the ID deterministic.
|
|
14
14
|
const safePageId = encodeURIComponent(pageId);
|
|
@@ -23,6 +23,6 @@ export const createV2InteractionsScriptElement = (config, isReducedMotion, pageI
|
|
|
23
23
|
return (React.createElement(React.Fragment, null,
|
|
24
24
|
React.createElement("script", { type: "application/json", id: configId, ...configProps }),
|
|
25
25
|
React.createElement("script", { type: "module", id: `interactions-loader-${safePageId}`, ref: reviveScriptElement, ...loaderProps }),
|
|
26
|
-
|
|
26
|
+
configCss.length > 0 && React.createElement(ConfigStyleSheet, { rules: configCss })));
|
|
27
27
|
};
|
|
28
28
|
//# sourceMappingURL=InteractionsScriptElement.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionsScriptElement.js","sourceRoot":"","sources":["../../../src/implementations/v2/InteractionsScriptElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"InteractionsScriptElement.js","sourceRoot":"","sources":["../../../src/implementations/v2/InteractionsScriptElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAA;AAE5E,MAAM,0BAA0B,GAAG,CAAC,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AAE1E;;;GAGG;AACH,MAAM,+BAA+B,GAAG,CAAC,MAAyC,EAAU,EAAE,CAC7F,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;AAEhD,MAAM,CAAC,MAAM,iCAAiC,GAC7C,CACC,MAAyC,EACzC,eAAwB,EACxB,MAAc,EACd,SAAS,GAAkB,EAAE,EACT,EAAE,CACvB,GAAG,EAAE;IACJ,qFAAqF;IACrF,oFAAoF;IACpF,MAAM,UAAU,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAA;IAC7C,MAAM,QAAQ,GAAG,uBAAuB,UAAU,EAAE,CAAA;IACpD,MAAM,yBAAyB,GAAG,8BAA8B,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;IAC3F,MAAM,WAAW,GAAG;QACnB,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAC,EAAE;KAC1F,CAAA;IACD,MAAM,WAAW,GAAG;QACnB,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE;KAC5E,CAAA;IAED,OAAO,CACN;QACC,gCAAQ,IAAI,EAAC,kBAAkB,EAAC,EAAE,EAAE,QAAQ,KAAM,WAAW,GAAI;QACjE,gCAAQ,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,uBAAuB,UAAU,EAAE,EAAE,GAAG,EAAE,mBAAmB,KAAM,WAAW,GAAI;QAC3G,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,gBAAgB,IAAC,KAAK,EAAE,SAAS,GAAI,CAC7D,CACH,CAAA;AACF,CAAC,CAAA"}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import { LEGACY_PREFIX } from './motionPresets';
|
|
2
|
+
const BG_SKEW_ANGLE = 20;
|
|
3
|
+
const BG_ROTATE_ANGLE = 22;
|
|
4
|
+
const BG_PAN_SPEED = 0.2;
|
|
5
|
+
const IMAGE_PARALLAX_SPEED = 1.5;
|
|
6
|
+
// Mimics `position: fixed` with sticky positioning, which keeps working inside a transform or an overflow.
|
|
7
|
+
const FIXED_MEDIA_STYLE = {
|
|
8
|
+
'will-change': 'var(--motion-bgreveal-will-change)',
|
|
9
|
+
height: 'calc(100% + 200lvh)',
|
|
10
|
+
'margin-top': '-100lvh',
|
|
11
|
+
overflow: 'clip',
|
|
12
|
+
// a media rendered as a background image needs its own stacking context in some browsers
|
|
13
|
+
isolation: 'isolate',
|
|
14
|
+
};
|
|
15
|
+
const FIXED_IMG_STYLE = {
|
|
16
|
+
position: 'sticky',
|
|
17
|
+
height: 'max(100lvh, calc(100% - 200lvh))',
|
|
18
|
+
width: '100%',
|
|
19
|
+
top: '0px',
|
|
20
|
+
'margin-bottom': 'calc(100lvh - max(100lvh, var(--motion-comp-height, 100%)))',
|
|
21
|
+
display: 'block',
|
|
22
|
+
padding: '0px',
|
|
23
|
+
};
|
|
24
|
+
const FILL_STYLE = { height: '100%', width: '100%', position: 'absolute' };
|
|
25
|
+
// Firefox breaks the sticky imitation without it, https://bugzilla.mozilla.org/show_bug.cgi?id=1791232. It only
|
|
26
|
+
// defines the variable the fixed media style reads, so it is always rendered.
|
|
27
|
+
const FIREFOX_CSS = '@supports (-moz-appearance: none) {\nbody {\n--motion-bgreveal-will-change: transform;\n}\n}';
|
|
28
|
+
const toRadians = (degrees) => (degrees * Math.PI) / 180;
|
|
29
|
+
const numberParam = (namedEffect, name, fallback) => typeof namedEffect[name] === 'number' && namedEffect[name] ? namedEffect[name] : fallback;
|
|
30
|
+
const isFixedStyle = (namedEffect) => (namedEffect.type === 'BgZoom' && namedEffect.direction === 'in') ||
|
|
31
|
+
['BgReveal', 'BgParallax', 'BgFake3D'].includes(namedEffect.type);
|
|
32
|
+
const MEDIA_STYLES = {
|
|
33
|
+
BgParallax: () => FIXED_MEDIA_STYLE,
|
|
34
|
+
BgReveal: () => FIXED_MEDIA_STYLE,
|
|
35
|
+
BgFake3D: () => FIXED_MEDIA_STYLE,
|
|
36
|
+
BgSkew: (namedEffect) => {
|
|
37
|
+
const tan = Math.tan(toRadians(numberParam(namedEffect, 'angle', BG_SKEW_ANGLE)));
|
|
38
|
+
return { 'padding-bottom': `${(100 * tan).toFixed(3)}%`, 'margin-top': `${(-50 * tan).toFixed(3)}%` };
|
|
39
|
+
},
|
|
40
|
+
BgRotate: (namedEffect) => {
|
|
41
|
+
const angle = toRadians(numberParam(namedEffect, 'angle', BG_ROTATE_ANGLE));
|
|
42
|
+
const cos = (100 * Math.cos(angle)).toFixed(3);
|
|
43
|
+
const sin = (100 * Math.sin(angle)).toFixed(3);
|
|
44
|
+
return {
|
|
45
|
+
width: `max(100%, calc(${cos}cqw + ${sin}cqh))`,
|
|
46
|
+
height: `max(100%, calc(${sin}cqw + ${cos}cqh))`,
|
|
47
|
+
translate: 'calc(50cqw - 50%) calc(50cqh - 50%)',
|
|
48
|
+
};
|
|
49
|
+
},
|
|
50
|
+
BgPan: (namedEffect) => {
|
|
51
|
+
const speed = numberParam(namedEffect, 'speed', BG_PAN_SPEED);
|
|
52
|
+
return { position: 'relative', width: `${100 * (1 + speed)}%`, left: `-${50 * speed}%` };
|
|
53
|
+
},
|
|
54
|
+
BgZoom: (namedEffect) => isFixedStyle(namedEffect)
|
|
55
|
+
? FIXED_MEDIA_STYLE
|
|
56
|
+
: { position: 'relative', width: '115%', height: '115%', left: '-7.5%', top: '-7.5%' },
|
|
57
|
+
ImageParallax: (namedEffect) => ({
|
|
58
|
+
height: `${100 * numberParam(namedEffect, 'speed', IMAGE_PARALLAX_SPEED)}%`,
|
|
59
|
+
position: 'relative',
|
|
60
|
+
}),
|
|
61
|
+
};
|
|
62
|
+
const IMG_STYLES = {
|
|
63
|
+
BgParallax: () => FIXED_IMG_STYLE,
|
|
64
|
+
BgReveal: () => FIXED_IMG_STYLE,
|
|
65
|
+
BgFake3D: () => FIXED_IMG_STYLE,
|
|
66
|
+
BgZoom: (namedEffect) => (isFixedStyle(namedEffect) ? FIXED_IMG_STYLE : {}),
|
|
67
|
+
BgSkew: () => FILL_STYLE,
|
|
68
|
+
ImageParallax: () => FILL_STYLE,
|
|
69
|
+
};
|
|
70
|
+
const BACKGROUND_SCROLL_EFFECTS = new Set([
|
|
71
|
+
'BgCloseUp',
|
|
72
|
+
'BgFade',
|
|
73
|
+
'BgFadeBack',
|
|
74
|
+
'BgPullBack',
|
|
75
|
+
...Object.keys(MEDIA_STYLES),
|
|
76
|
+
...Object.keys(IMG_STYLES),
|
|
77
|
+
]);
|
|
78
|
+
const escapeCssAttr = (value) => value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
|
|
79
|
+
const rule = (selector, style) => `${selector} {\n${Object.entries(style)
|
|
80
|
+
.map(([property, value]) => `${property}: ${value};`)
|
|
81
|
+
.join('\n')}\n}`;
|
|
82
|
+
/**
|
|
83
|
+
* Keys are comp paths, so the last segment is the comp id. A part carries `<PART> <comp id>`, and a repeated
|
|
84
|
+
* comp's id carries its item, `<comp id>__<item>`, on the root and on its parts alike.
|
|
85
|
+
*/
|
|
86
|
+
const getSelectors = (key, selectorConditions) => {
|
|
87
|
+
const compId = escapeCssAttr(key.slice(key.lastIndexOf('/') + 1));
|
|
88
|
+
const root = `:is([id="${compId}"], [id^="${compId}__"])${selectorConditions}`;
|
|
89
|
+
const part = (name) => `:is([data-motion-part="${name} ${compId}"], [data-motion-part^="${name} ${compId}__"])`;
|
|
90
|
+
// Every part is matched under the root, as Thunderbolt does, so a root that is itself the layer is not matched.
|
|
91
|
+
return {
|
|
92
|
+
layer: `${root} ${part('BG_LAYER')}`,
|
|
93
|
+
media: `${root} ${part('BG_MEDIA')}`,
|
|
94
|
+
image: `${root}:not([data-show-canvas]) ${part('BG_IMG')}, ${root}[data-has-alpha="true"] canvas`,
|
|
95
|
+
imageXMedia: `${root}[data-testid="imageX"] ${part('BG_MEDIA')}`,
|
|
96
|
+
};
|
|
97
|
+
};
|
|
98
|
+
const getEffectRules = (namedEffect, key, selectorConditions) => {
|
|
99
|
+
const selectors = getSelectors(key, selectorConditions);
|
|
100
|
+
const mediaStyle = MEDIA_STYLES[namedEffect.type]?.(namedEffect);
|
|
101
|
+
const imgStyle = IMG_STYLES[namedEffect.type]?.(namedEffect);
|
|
102
|
+
const isRotate = namedEffect.type === 'BgRotate';
|
|
103
|
+
const rules = [
|
|
104
|
+
...(mediaStyle ? [rule(selectors.media, mediaStyle)] : []),
|
|
105
|
+
...(imgStyle && Object.keys(imgStyle).length ? [rule(selectors.image, imgStyle)] : []),
|
|
106
|
+
rule(selectors.layer, { overflow: 'clip', contain: 'layout', ...(isRotate && { 'container-type': 'size' }) }),
|
|
107
|
+
];
|
|
108
|
+
if (isRotate) {
|
|
109
|
+
const angle = toRadians(numberParam(namedEffect, 'angle', BG_ROTATE_ANGLE));
|
|
110
|
+
const grow = (100 * (Math.sqrt(1 + Math.tan(angle) ** 2) - 1)).toFixed(3);
|
|
111
|
+
const sin = (100 * Math.sin(angle)).toFixed(3);
|
|
112
|
+
rules.push(`@container (min-aspect-ratio: ${Math.tan(Math.PI / 2 - angle).toFixed(3)}) {\n${rule(selectors.media, {
|
|
113
|
+
width: `calc(100% + min(${grow}%, ${sin}cqh))`,
|
|
114
|
+
})}\n}`, `@container (max-aspect-ratio: ${Math.tan(angle).toFixed(3)}) {\n${rule(selectors.media, {
|
|
115
|
+
height: `calc(100% + min(${grow}%, ${sin}cqw))`,
|
|
116
|
+
})}\n}`);
|
|
117
|
+
}
|
|
118
|
+
else if (isFixedStyle(namedEffect)) {
|
|
119
|
+
// Safari has a bug like Firefox's for an ImageX media; a transform solves it
|
|
120
|
+
rules.push(rule(selectors.imageXMedia, { transform: 'translate3d(0,0,0)' }));
|
|
121
|
+
}
|
|
122
|
+
return rules;
|
|
123
|
+
};
|
|
124
|
+
const getConditions = (interact, conditionIds) => {
|
|
125
|
+
const conditions = [...new Set(conditionIds)]
|
|
126
|
+
.map((id) => interact.conditions?.[id])
|
|
127
|
+
.filter((condition) => Boolean(condition?.predicate));
|
|
128
|
+
const predicatesOf = (type) => conditions.filter((condition) => condition.type === type).map(({ predicate }) => predicate);
|
|
129
|
+
const media = predicatesOf('media');
|
|
130
|
+
return {
|
|
131
|
+
media: media.length ? `(${media.join(') and (')})` : '',
|
|
132
|
+
selector: predicatesOf('selector')
|
|
133
|
+
.map((predicate) => `:is(${predicate})`)
|
|
134
|
+
.join(''),
|
|
135
|
+
};
|
|
136
|
+
};
|
|
137
|
+
const toMediaBlock = ([media, rules]) => media ? `@media ${media} {\n${[...rules].join('\n')}\n}` : [...rules].join('\n');
|
|
138
|
+
export const getBackgroundScrollCss = (interact) => {
|
|
139
|
+
const rulesByMedia = new Map();
|
|
140
|
+
for (const interaction of interact.interactions) {
|
|
141
|
+
// sequences don't play scrub animations, so a background scroll preset is only ever an interaction's effect
|
|
142
|
+
for (const inlineEffect of interaction.effects ?? []) {
|
|
143
|
+
// an effectId points at interact.effects; the inline fields override it, as interact reads them
|
|
144
|
+
const effect = {
|
|
145
|
+
...(inlineEffect.effectId ? interact.effects?.[inlineEffect.effectId] : undefined),
|
|
146
|
+
...inlineEffect,
|
|
147
|
+
};
|
|
148
|
+
const { namedEffect } = effect;
|
|
149
|
+
const key = effect.key ?? interaction.key;
|
|
150
|
+
const type = namedEffect?.type?.startsWith(LEGACY_PREFIX)
|
|
151
|
+
? namedEffect.type.slice(LEGACY_PREFIX.length)
|
|
152
|
+
: undefined;
|
|
153
|
+
if (!namedEffect || !type || !BACKGROUND_SCROLL_EFFECTS.has(type) || !key) {
|
|
154
|
+
continue;
|
|
155
|
+
}
|
|
156
|
+
const params = { ...namedEffect, type };
|
|
157
|
+
const conditions = getConditions(interact, [...(interaction.conditions ?? []), ...(effect.conditions ?? [])]);
|
|
158
|
+
const rules = rulesByMedia.get(conditions.media) ?? new Set();
|
|
159
|
+
getEffectRules(params, key, conditions.selector).forEach((css) => rules.add(css));
|
|
160
|
+
rulesByMedia.set(conditions.media, rules);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
return `@media (prefers-reduced-motion: no-preference) {\n${[...[...rulesByMedia].map(toMediaBlock), FIREFOX_CSS].join('\n')}\n}`;
|
|
164
|
+
};
|
|
165
|
+
//# sourceMappingURL=backgroundScrollCss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"backgroundScrollCss.js","sourceRoot":"","sources":["../../../src/implementations/v2/backgroundScrollCss.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/site-service-interactions",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.35",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
]
|
|
98
98
|
}
|
|
99
99
|
},
|
|
100
|
-
"falconPackageHash": "
|
|
100
|
+
"falconPackageHash": "16d933e42e215bb54ceddf2be62070d6e42a0c7ceb44971cf1d557e8"
|
|
101
101
|
}
|
|
@@ -17,12 +17,14 @@ import { createV2InteractionsScriptElement } from './v2/InteractionsScriptElemen
|
|
|
17
17
|
import { getV2ConfigCss } from './v2/configCss'
|
|
18
18
|
import { getV2ConfigStyleHeadContent } from './v2/configStyleHeadContent'
|
|
19
19
|
import { getClickTriggerCss } from './v2/clickTriggerCss'
|
|
20
|
+
import { getBackgroundScrollCss } from './v2/backgroundScrollCss'
|
|
20
21
|
import { getV2ModulePreloadHeadContent } from './v2/interactionsScriptContent'
|
|
21
22
|
import { getAuthoredStylesCss } from './v2/authoredStyles'
|
|
22
23
|
import {
|
|
23
24
|
getInteractConfigEntries,
|
|
24
25
|
getInteractiveKeys,
|
|
25
26
|
getResolvedConfigEntries,
|
|
27
|
+
REACTIONS_NAMESPACE,
|
|
26
28
|
resolveInteractKeyConflicts,
|
|
27
29
|
} from './configEntries'
|
|
28
30
|
|
|
@@ -30,6 +32,10 @@ import {
|
|
|
30
32
|
const getRuntimeConfigs = (entries: InteractConfigEntry[]): InteractConfig[] =>
|
|
31
33
|
entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0)
|
|
32
34
|
|
|
35
|
+
/** Only the reactions entry plays background scroll presets; experiences don't support them yet. */
|
|
36
|
+
const getBackgroundCss = ({ namespace, interact }: InteractConfigEntry): string =>
|
|
37
|
+
namespace === REACTIONS_NAMESPACE ? getBackgroundScrollCss(interact) : ''
|
|
38
|
+
|
|
33
39
|
const initInteract = (entries: InteractConfigEntry[], isReducedMotion: boolean) => {
|
|
34
40
|
const runtimeConfigs = getRuntimeConfigs(entries)
|
|
35
41
|
// v1 registers its interact-element on create, and a tag can only be defined once: starting it for
|
|
@@ -53,7 +59,8 @@ const initInteract = (entries: InteractConfigEntry[], isReducedMotion: boolean)
|
|
|
53
59
|
|
|
54
60
|
const getV2HeadContent = (entries: InteractConfigEntry[]): string => {
|
|
55
61
|
const generatedCss = entries
|
|
56
|
-
.
|
|
62
|
+
.flatMap((entry) => [getV2ConfigCss(entry.interact), getBackgroundCss(entry)])
|
|
63
|
+
.map((css) => css.trim())
|
|
57
64
|
.filter(Boolean)
|
|
58
65
|
.join('\n')
|
|
59
66
|
const css = [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n')
|
|
@@ -92,8 +99,12 @@ const initRuntime = (
|
|
|
92
99
|
return
|
|
93
100
|
}
|
|
94
101
|
|
|
95
|
-
|
|
96
|
-
|
|
102
|
+
// The server sends these with the generated CSS; the client adopts whatever it did not send.
|
|
103
|
+
const configCss = entries
|
|
104
|
+
.flatMap((entry) => [getClickTriggerCss(entry.interact), getBackgroundCss(entry)])
|
|
105
|
+
.map((css) => css.trim())
|
|
106
|
+
.filter(Boolean)
|
|
107
|
+
addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId, configCss))
|
|
97
108
|
}
|
|
98
109
|
|
|
99
110
|
const getInteractiveComps = (entries: InteractConfigEntry[]): Set<string> => {
|
|
@@ -37,11 +37,12 @@ export const adoptMissingStyleSheet = (
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
/**
|
|
40
|
-
* The server sends the
|
|
41
|
-
*
|
|
42
|
-
*
|
|
40
|
+
* The server sends the rules it derives from the config (click-trigger cursors, background scroll
|
|
41
|
+
* sizing) in the head only for what it rendered, so content rendered on the client (client-side
|
|
42
|
+
* navigation, password-protected / members-only pages, a host that renders only on the client) never
|
|
43
|
+
* gets them. Adopt the missing ones while the page is mounted and remove them when navigating away.
|
|
43
44
|
*/
|
|
44
|
-
export const
|
|
45
|
+
export const ConfigStyleSheet: FunctionComponent<{ rules: Array<string> }> = ({ rules }) => {
|
|
45
46
|
useEffect(() => adoptMissingStyleSheet(rules), [rules])
|
|
46
47
|
|
|
47
48
|
return null
|
|
@@ -2,7 +2,7 @@ import React from 'react'
|
|
|
2
2
|
import type { FunctionComponent } from 'react'
|
|
3
3
|
import type { InteractConfig } from '@wix/interact'
|
|
4
4
|
import { reviveScriptElement } from '../reviveScriptElement'
|
|
5
|
-
import {
|
|
5
|
+
import { ConfigStyleSheet } from './ConfigStyleSheet'
|
|
6
6
|
import { getV2InteractionsScriptContent } from './interactionsScriptContent'
|
|
7
7
|
|
|
8
8
|
const DANGEROUSLY_SET_INNER_HTML = ['dangerously', 'Set', 'Inner', 'HTML']
|
|
@@ -19,7 +19,7 @@ export const createV2InteractionsScriptElement =
|
|
|
19
19
|
config: InteractConfig | InteractConfig[],
|
|
20
20
|
isReducedMotion: boolean,
|
|
21
21
|
pageId: string,
|
|
22
|
-
|
|
22
|
+
configCss: Array<string> = []
|
|
23
23
|
): FunctionComponent =>
|
|
24
24
|
() => {
|
|
25
25
|
// This ID is also interpolated into raw module-script text. Percent-encoding removes
|
|
@@ -38,7 +38,7 @@ export const createV2InteractionsScriptElement =
|
|
|
38
38
|
<>
|
|
39
39
|
<script type="application/json" id={configId} {...configProps} />
|
|
40
40
|
<script type="module" id={`interactions-loader-${safePageId}`} ref={reviveScriptElement} {...loaderProps} />
|
|
41
|
-
{
|
|
41
|
+
{configCss.length > 0 && <ConfigStyleSheet rules={configCss} />}
|
|
42
42
|
</>
|
|
43
43
|
)
|
|
44
44
|
}
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import type { Condition, Effect, InteractConfig } from '@wix/interact'
|
|
2
|
+
import { LEGACY_PREFIX } from './motionPresets'
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* The legacy background scroll presets, which the reactions config names with the `LEGACY_` prefix, animate the
|
|
6
|
+
* parts of a background, `BG_MEDIA` and `BG_IMG`, and expect them sized for the effect first: a media layer tall
|
|
7
|
+
* enough to travel, a sticky image that imitates a fixed background. Thunderbolt renders that sizing from the page
|
|
8
|
+
* data (thunderbolt-catharsis-extensions motionCss, viewer branch); nothing in the interact config says it, so a
|
|
9
|
+
* host without Thunderbolt plays these presets on unsized parts. These are the same rules, computed from the config.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
type Style = Record<string, string>
|
|
13
|
+
type NamedEffect = { type: string; [param: string]: unknown }
|
|
14
|
+
|
|
15
|
+
const BG_SKEW_ANGLE = 20
|
|
16
|
+
const BG_ROTATE_ANGLE = 22
|
|
17
|
+
const BG_PAN_SPEED = 0.2
|
|
18
|
+
const IMAGE_PARALLAX_SPEED = 1.5
|
|
19
|
+
|
|
20
|
+
// Mimics `position: fixed` with sticky positioning, which keeps working inside a transform or an overflow.
|
|
21
|
+
const FIXED_MEDIA_STYLE: Style = {
|
|
22
|
+
'will-change': 'var(--motion-bgreveal-will-change)',
|
|
23
|
+
height: 'calc(100% + 200lvh)',
|
|
24
|
+
'margin-top': '-100lvh',
|
|
25
|
+
overflow: 'clip',
|
|
26
|
+
// a media rendered as a background image needs its own stacking context in some browsers
|
|
27
|
+
isolation: 'isolate',
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const FIXED_IMG_STYLE: Style = {
|
|
31
|
+
position: 'sticky',
|
|
32
|
+
height: 'max(100lvh, calc(100% - 200lvh))',
|
|
33
|
+
width: '100%',
|
|
34
|
+
top: '0px',
|
|
35
|
+
'margin-bottom': 'calc(100lvh - max(100lvh, var(--motion-comp-height, 100%)))',
|
|
36
|
+
display: 'block',
|
|
37
|
+
padding: '0px',
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const FILL_STYLE: Style = { height: '100%', width: '100%', position: 'absolute' }
|
|
41
|
+
|
|
42
|
+
// Firefox breaks the sticky imitation without it, https://bugzilla.mozilla.org/show_bug.cgi?id=1791232. It only
|
|
43
|
+
// defines the variable the fixed media style reads, so it is always rendered.
|
|
44
|
+
const FIREFOX_CSS = '@supports (-moz-appearance: none) {\nbody {\n--motion-bgreveal-will-change: transform;\n}\n}'
|
|
45
|
+
|
|
46
|
+
const toRadians = (degrees: number) => (degrees * Math.PI) / 180
|
|
47
|
+
const numberParam = (namedEffect: NamedEffect, name: string, fallback: number) =>
|
|
48
|
+
typeof namedEffect[name] === 'number' && namedEffect[name] ? (namedEffect[name] as number) : fallback
|
|
49
|
+
|
|
50
|
+
const isFixedStyle = (namedEffect: NamedEffect) =>
|
|
51
|
+
(namedEffect.type === 'BgZoom' && namedEffect.direction === 'in') ||
|
|
52
|
+
['BgReveal', 'BgParallax', 'BgFake3D'].includes(namedEffect.type)
|
|
53
|
+
|
|
54
|
+
const MEDIA_STYLES: Record<string, (namedEffect: NamedEffect) => Style> = {
|
|
55
|
+
BgParallax: () => FIXED_MEDIA_STYLE,
|
|
56
|
+
BgReveal: () => FIXED_MEDIA_STYLE,
|
|
57
|
+
BgFake3D: () => FIXED_MEDIA_STYLE,
|
|
58
|
+
BgSkew: (namedEffect) => {
|
|
59
|
+
const tan = Math.tan(toRadians(numberParam(namedEffect, 'angle', BG_SKEW_ANGLE)))
|
|
60
|
+
return { 'padding-bottom': `${(100 * tan).toFixed(3)}%`, 'margin-top': `${(-50 * tan).toFixed(3)}%` }
|
|
61
|
+
},
|
|
62
|
+
BgRotate: (namedEffect) => {
|
|
63
|
+
const angle = toRadians(numberParam(namedEffect, 'angle', BG_ROTATE_ANGLE))
|
|
64
|
+
const cos = (100 * Math.cos(angle)).toFixed(3)
|
|
65
|
+
const sin = (100 * Math.sin(angle)).toFixed(3)
|
|
66
|
+
return {
|
|
67
|
+
width: `max(100%, calc(${cos}cqw + ${sin}cqh))`,
|
|
68
|
+
height: `max(100%, calc(${sin}cqw + ${cos}cqh))`,
|
|
69
|
+
translate: 'calc(50cqw - 50%) calc(50cqh - 50%)',
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
BgPan: (namedEffect) => {
|
|
73
|
+
const speed = numberParam(namedEffect, 'speed', BG_PAN_SPEED)
|
|
74
|
+
return { position: 'relative', width: `${100 * (1 + speed)}%`, left: `-${50 * speed}%` }
|
|
75
|
+
},
|
|
76
|
+
BgZoom: (namedEffect) =>
|
|
77
|
+
isFixedStyle(namedEffect)
|
|
78
|
+
? FIXED_MEDIA_STYLE
|
|
79
|
+
: { position: 'relative', width: '115%', height: '115%', left: '-7.5%', top: '-7.5%' },
|
|
80
|
+
ImageParallax: (namedEffect) => ({
|
|
81
|
+
height: `${100 * numberParam(namedEffect, 'speed', IMAGE_PARALLAX_SPEED)}%`,
|
|
82
|
+
position: 'relative',
|
|
83
|
+
}),
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
const IMG_STYLES: Record<string, (namedEffect: NamedEffect) => Style> = {
|
|
87
|
+
BgParallax: () => FIXED_IMG_STYLE,
|
|
88
|
+
BgReveal: () => FIXED_IMG_STYLE,
|
|
89
|
+
BgFake3D: () => FIXED_IMG_STYLE,
|
|
90
|
+
BgZoom: (namedEffect) => (isFixedStyle(namedEffect) ? FIXED_IMG_STYLE : {}),
|
|
91
|
+
BgSkew: () => FILL_STYLE,
|
|
92
|
+
ImageParallax: () => FILL_STYLE,
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
const BACKGROUND_SCROLL_EFFECTS = new Set([
|
|
96
|
+
'BgCloseUp',
|
|
97
|
+
'BgFade',
|
|
98
|
+
'BgFadeBack',
|
|
99
|
+
'BgPullBack',
|
|
100
|
+
...Object.keys(MEDIA_STYLES),
|
|
101
|
+
...Object.keys(IMG_STYLES),
|
|
102
|
+
])
|
|
103
|
+
|
|
104
|
+
const escapeCssAttr = (value: string): string => value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
|
|
105
|
+
|
|
106
|
+
const rule = (selector: string, style: Style): string =>
|
|
107
|
+
`${selector} {\n${Object.entries(style)
|
|
108
|
+
.map(([property, value]) => `${property}: ${value};`)
|
|
109
|
+
.join('\n')}\n}`
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Keys are comp paths, so the last segment is the comp id. A part carries `<PART> <comp id>`, and a repeated
|
|
113
|
+
* comp's id carries its item, `<comp id>__<item>`, on the root and on its parts alike.
|
|
114
|
+
*/
|
|
115
|
+
const getSelectors = (key: string, selectorConditions: string) => {
|
|
116
|
+
const compId = escapeCssAttr(key.slice(key.lastIndexOf('/') + 1))
|
|
117
|
+
const root = `:is([id="${compId}"], [id^="${compId}__"])${selectorConditions}`
|
|
118
|
+
const part = (name: string) =>
|
|
119
|
+
`:is([data-motion-part="${name} ${compId}"], [data-motion-part^="${name} ${compId}__"])`
|
|
120
|
+
// Every part is matched under the root, as Thunderbolt does, so a root that is itself the layer is not matched.
|
|
121
|
+
return {
|
|
122
|
+
layer: `${root} ${part('BG_LAYER')}`,
|
|
123
|
+
media: `${root} ${part('BG_MEDIA')}`,
|
|
124
|
+
image: `${root}:not([data-show-canvas]) ${part('BG_IMG')}, ${root}[data-has-alpha="true"] canvas`,
|
|
125
|
+
imageXMedia: `${root}[data-testid="imageX"] ${part('BG_MEDIA')}`,
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
const getEffectRules = (namedEffect: NamedEffect, key: string, selectorConditions: string): string[] => {
|
|
130
|
+
const selectors = getSelectors(key, selectorConditions)
|
|
131
|
+
const mediaStyle = MEDIA_STYLES[namedEffect.type]?.(namedEffect)
|
|
132
|
+
const imgStyle = IMG_STYLES[namedEffect.type]?.(namedEffect)
|
|
133
|
+
const isRotate = namedEffect.type === 'BgRotate'
|
|
134
|
+
const rules = [
|
|
135
|
+
...(mediaStyle ? [rule(selectors.media, mediaStyle)] : []),
|
|
136
|
+
...(imgStyle && Object.keys(imgStyle).length ? [rule(selectors.image, imgStyle)] : []),
|
|
137
|
+
rule(selectors.layer, { overflow: 'clip', contain: 'layout', ...(isRotate && { 'container-type': 'size' }) }),
|
|
138
|
+
]
|
|
139
|
+
|
|
140
|
+
if (isRotate) {
|
|
141
|
+
const angle = toRadians(numberParam(namedEffect, 'angle', BG_ROTATE_ANGLE))
|
|
142
|
+
const grow = (100 * (Math.sqrt(1 + Math.tan(angle) ** 2) - 1)).toFixed(3)
|
|
143
|
+
const sin = (100 * Math.sin(angle)).toFixed(3)
|
|
144
|
+
rules.push(
|
|
145
|
+
`@container (min-aspect-ratio: ${Math.tan(Math.PI / 2 - angle).toFixed(3)}) {\n${rule(selectors.media, {
|
|
146
|
+
width: `calc(100% + min(${grow}%, ${sin}cqh))`,
|
|
147
|
+
})}\n}`,
|
|
148
|
+
`@container (max-aspect-ratio: ${Math.tan(angle).toFixed(3)}) {\n${rule(selectors.media, {
|
|
149
|
+
height: `calc(100% + min(${grow}%, ${sin}cqw))`,
|
|
150
|
+
})}\n}`
|
|
151
|
+
)
|
|
152
|
+
} else if (isFixedStyle(namedEffect)) {
|
|
153
|
+
// Safari has a bug like Firefox's for an ImageX media; a transform solves it
|
|
154
|
+
rules.push(rule(selectors.imageXMedia, { transform: 'translate3d(0,0,0)' }))
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
return rules
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
const getConditions = (interact: InteractConfig, conditionIds: readonly string[]) => {
|
|
161
|
+
const conditions = [...new Set(conditionIds)]
|
|
162
|
+
.map((id) => interact.conditions?.[id])
|
|
163
|
+
.filter((condition): condition is Condition => Boolean(condition?.predicate))
|
|
164
|
+
const predicatesOf = (type: Condition['type']) =>
|
|
165
|
+
conditions.filter((condition) => condition.type === type).map(({ predicate }) => predicate)
|
|
166
|
+
const media = predicatesOf('media')
|
|
167
|
+
|
|
168
|
+
return {
|
|
169
|
+
media: media.length ? `(${media.join(') and (')})` : '',
|
|
170
|
+
selector: predicatesOf('selector')
|
|
171
|
+
.map((predicate) => `:is(${predicate})`)
|
|
172
|
+
.join(''),
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
const toMediaBlock = ([media, rules]: [string, Set<string>]): string =>
|
|
177
|
+
media ? `@media ${media} {\n${[...rules].join('\n')}\n}` : [...rules].join('\n')
|
|
178
|
+
|
|
179
|
+
export const getBackgroundScrollCss = (interact: InteractConfig): string => {
|
|
180
|
+
const rulesByMedia = new Map<string, Set<string>>()
|
|
181
|
+
|
|
182
|
+
for (const interaction of interact.interactions) {
|
|
183
|
+
// sequences don't play scrub animations, so a background scroll preset is only ever an interaction's effect
|
|
184
|
+
for (const inlineEffect of interaction.effects ?? []) {
|
|
185
|
+
// an effectId points at interact.effects; the inline fields override it, as interact reads them
|
|
186
|
+
const effect = {
|
|
187
|
+
...(inlineEffect.effectId ? interact.effects?.[inlineEffect.effectId] : undefined),
|
|
188
|
+
...inlineEffect,
|
|
189
|
+
} as Effect
|
|
190
|
+
const { namedEffect } = effect as { namedEffect?: NamedEffect }
|
|
191
|
+
const key = effect.key ?? interaction.key
|
|
192
|
+
const type = namedEffect?.type?.startsWith(LEGACY_PREFIX)
|
|
193
|
+
? namedEffect.type.slice(LEGACY_PREFIX.length)
|
|
194
|
+
: undefined
|
|
195
|
+
if (!namedEffect || !type || !BACKGROUND_SCROLL_EFFECTS.has(type) || !key) {
|
|
196
|
+
continue
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
const params = { ...namedEffect, type }
|
|
200
|
+
const conditions = getConditions(interact, [...(interaction.conditions ?? []), ...(effect.conditions ?? [])])
|
|
201
|
+
const rules = rulesByMedia.get(conditions.media) ?? new Set<string>()
|
|
202
|
+
getEffectRules(params, key, conditions.selector).forEach((css) => rules.add(css))
|
|
203
|
+
rulesByMedia.set(conditions.media, rules)
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
return `@media (prefers-reduced-motion: no-preference) {\n${[...[...rulesByMedia].map(toMediaBlock), FIREFOX_CSS].join('\n')}\n}`
|
|
208
|
+
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { FunctionComponent } from 'react';
|
|
2
|
-
type StyleSheetDocument = Pick<Document, 'adoptedStyleSheets' | 'querySelectorAll'>;
|
|
3
|
-
/**
|
|
4
|
-
* Adopts the rules the server did not already send as a constructable stylesheet, and returns a
|
|
5
|
-
* function that removes that sheet again.
|
|
6
|
-
*/
|
|
7
|
-
export declare const adoptMissingStyleSheet: (rules: Array<string>, document?: StyleSheetDocument | undefined) => () => void;
|
|
8
|
-
/**
|
|
9
|
-
* The server sends the click-trigger cursor rules in the head only for what it rendered, so content
|
|
10
|
-
* rendered on the client (client-side navigation, password-protected / members-only pages) never gets
|
|
11
|
-
* them. Adopt the missing ones while the page is mounted and remove them when navigating away.
|
|
12
|
-
*/
|
|
13
|
-
export declare const ClickTriggerStyleSheet: FunctionComponent<{
|
|
14
|
-
rules: Array<string>;
|
|
15
|
-
}>;
|
|
16
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ClickTriggerStyleSheet.js","sourceRoot":"","sources":["../../../../src/implementations/v2/ClickTriggerStyleSheet.tsx"],"names":[],"mappings":";;;AAAA,iCAAiC;AAEjC,qEAA8D;AAI9D,MAAM,oBAAoB,GAAG,CAAC,QAA4B,EAAU,EAAE,CACrE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,4CAAmB,GAAG,CAAC,CAAC;KACpE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;KACvC,IAAI,CAAC,IAAI,CAAC,CAAA;AAEb;;;GAGG;AACI,MAAM,sBAAsB,GAAG,CACrC,KAAoB,EACpB,QAAQ,GAAmC,UAAU,CAAC,QAAQ,EAC7D,EAAE;IACH,IAAI,CAAC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;QACnC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChB,CAAC;IAED,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAChF,IAAI,CAAC,GAAG,EAAE,CAAC;QACV,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChB,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAA;IACjC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;IACtB,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAA;IAErE,OAAO,GAAG,EAAE;QACX,QAAQ,CAAC,kBAAkB,GAAG,QAAQ,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,CAAC,CAAA;IACjG,CAAC,CAAA;AACF,CAAC,CAAA;AArBY,QAAA,sBAAsB,GAAtB,sBAAsB,CAqBlC;AAED;;;;GAIG;AACI,MAAM,sBAAsB,GAAgD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,IAAA,QAAA,sBAAsB,EAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEvD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA;AAJY,QAAA,sBAAsB,GAAtB,sBAAsB,CAIlC"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { FunctionComponent } from 'react';
|
|
2
|
-
type StyleSheetDocument = Pick<Document, 'adoptedStyleSheets' | 'querySelectorAll'>;
|
|
3
|
-
/**
|
|
4
|
-
* Adopts the rules the server did not already send as a constructable stylesheet, and returns a
|
|
5
|
-
* function that removes that sheet again.
|
|
6
|
-
*/
|
|
7
|
-
export declare const adoptMissingStyleSheet: (rules: Array<string>, document?: StyleSheetDocument | undefined) => () => void;
|
|
8
|
-
/**
|
|
9
|
-
* The server sends the click-trigger cursor rules in the head only for what it rendered, so content
|
|
10
|
-
* rendered on the client (client-side navigation, password-protected / members-only pages) never gets
|
|
11
|
-
* them. Adopt the missing ones while the page is mounted and remove them when navigating away.
|
|
12
|
-
*/
|
|
13
|
-
export declare const ClickTriggerStyleSheet: FunctionComponent<{
|
|
14
|
-
rules: Array<string>;
|
|
15
|
-
}>;
|
|
16
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ClickTriggerStyleSheet.js","sourceRoot":"","sources":["../../../src/implementations/v2/ClickTriggerStyleSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAI9D,MAAM,oBAAoB,GAAG,CAAC,QAA4B,EAAU,EAAE,CACrE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,mBAAmB,GAAG,CAAC,CAAC;KACpE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;KACvC,IAAI,CAAC,IAAI,CAAC,CAAA;AAEb;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACrC,KAAoB,EACpB,QAAQ,GAAmC,UAAU,CAAC,QAAQ,EAC7D,EAAE;IACH,IAAI,CAAC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;QACnC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChB,CAAC;IAED,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAChF,IAAI,CAAC,GAAG,EAAE,CAAC;QACV,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChB,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAA;IACjC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;IACtB,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAA;IAErE,OAAO,GAAG,EAAE;QACX,QAAQ,CAAC,kBAAkB,GAAG,QAAQ,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,CAAC,CAAA;IACjG,CAAC,CAAA;AACF,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAgD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,SAAS,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEvD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA"}
|