@makeswift/runtime 0.1.2 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Box.cjs.js +1 -0
- package/dist/Box.cjs.js.map +1 -1
- package/dist/Box.es.js +1 -0
- package/dist/Box.es.js.map +1 -1
- package/dist/Box2.cjs.js +54 -0
- package/dist/Box2.cjs.js.map +1 -0
- package/dist/Box2.es.js +52 -0
- package/dist/Box2.es.js.map +1 -0
- package/dist/Button.cjs.js +1 -1
- package/dist/Button.es.js +2 -2
- package/dist/Carousel.cjs.js +1 -1
- package/dist/Carousel.es.js +2 -2
- package/dist/Countdown.cjs.js +1 -0
- package/dist/Countdown.cjs.js.map +1 -1
- package/dist/Countdown.es.js +2 -1
- package/dist/Countdown.es.js.map +1 -1
- package/dist/Divider.cjs.js +1 -0
- package/dist/Divider.cjs.js.map +1 -1
- package/dist/Divider.es.js +2 -1
- package/dist/Divider.es.js.map +1 -1
- package/dist/Embed.cjs.js +1 -0
- package/dist/Embed.cjs.js.map +1 -1
- package/dist/Embed.es.js +2 -1
- package/dist/Embed.es.js.map +1 -1
- package/dist/Form.cjs.js +1 -1
- package/dist/Form.es.js +2 -2
- package/dist/Image.cjs2.js +1 -1
- package/dist/Image.es2.js +2 -2
- package/dist/Navigation.cjs.js +1 -1
- package/dist/Navigation.es.js +2 -2
- package/dist/Root.cjs.js +1 -0
- package/dist/Root.cjs.js.map +1 -1
- package/dist/Root.es.js +1 -0
- package/dist/Root.es.js.map +1 -1
- package/dist/SocialLinks.es.js +1 -1
- package/dist/Text.cjs.js +1 -1
- package/dist/Text.es.js +2 -2
- package/dist/Video.cjs.js +1 -0
- package/dist/Video.cjs.js.map +1 -1
- package/dist/Video.es.js +1 -0
- package/dist/Video.es.js.map +1 -1
- package/dist/components.cjs.js +4 -4
- package/dist/components.es.js +4 -4
- package/dist/controls.cjs.js +2 -0
- package/dist/controls.cjs.js.map +1 -1
- package/dist/controls.es.js +1 -1
- package/dist/cssMediaRules.es.js +1 -1
- package/dist/descriptors.cjs.js.map +1 -1
- package/dist/descriptors.es.js.map +1 -1
- package/dist/grid-item.cjs.js +594 -0
- package/dist/grid-item.cjs.js.map +1 -0
- package/dist/grid-item.es.js +585 -0
- package/dist/grid-item.es.js.map +1 -0
- package/dist/index.cjs.js +128 -10
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs3.js +1 -12
- package/dist/index.cjs3.js.map +1 -1
- package/dist/index.es.js +129 -12
- package/dist/index.es.js.map +1 -1
- package/dist/index.es2.js +1 -1
- package/dist/index.es3.js +2 -12
- package/dist/index.es3.js.map +1 -1
- package/dist/next.cjs.js +1 -0
- package/dist/next.cjs.js.map +1 -1
- package/dist/next.es.js +1 -0
- package/dist/next.es.js.map +1 -1
- package/dist/react-builder-preview.cjs.js +1 -0
- package/dist/react-builder-preview.cjs.js.map +1 -1
- package/dist/react-builder-preview.es.js +1 -0
- package/dist/react-builder-preview.es.js.map +1 -1
- package/dist/react.cjs.js +1 -0
- package/dist/react.cjs.js.map +1 -1
- package/dist/react.es.js +1 -0
- package/dist/react.es.js.map +1 -1
- package/dist/slot.cjs.js +130 -0
- package/dist/slot.cjs.js.map +1 -0
- package/dist/slot.es.js +123 -0
- package/dist/slot.es.js.map +1 -0
- package/dist/text-input.cjs.js +6 -0
- package/dist/text-input.cjs.js.map +1 -1
- package/dist/text-input.es.js +5 -1
- package/dist/text-input.es.js.map +1 -1
- package/dist/types/api/react.d.ts.map +1 -1
- package/dist/types/components/builtin/Box/Box2.d.ts +8 -0
- package/dist/types/components/builtin/Box/Box2.d.ts.map +1 -0
- package/dist/types/components/experimental/box-placeholder.d.ts +2 -0
- package/dist/types/components/experimental/box-placeholder.d.ts.map +1 -0
- package/dist/types/components/experimental/box.d.ts +9 -0
- package/dist/types/components/experimental/box.d.ts.map +1 -0
- package/dist/types/components/experimental/index.d.ts +2 -0
- package/dist/types/components/experimental/index.d.ts.map +1 -0
- package/dist/types/components/hooks/useTable.d.ts +66 -0
- package/dist/types/components/hooks/useTable.d.ts.map +1 -0
- package/dist/types/components/shared/grid-item.d.ts +17 -0
- package/dist/types/components/shared/grid-item.d.ts.map +1 -0
- package/dist/types/controls/control.d.ts +3 -2
- package/dist/types/controls/control.d.ts.map +1 -1
- package/dist/types/controls/index.d.ts +1 -0
- package/dist/types/controls/index.d.ts.map +1 -1
- package/dist/types/controls/link.d.ts +50 -0
- package/dist/types/controls/link.d.ts.map +1 -0
- package/dist/types/controls/slot.d.ts +42 -0
- package/dist/types/controls/slot.d.ts.map +1 -0
- package/dist/types/css/border-radius.d.ts +20 -0
- package/dist/types/css/border-radius.d.ts.map +1 -0
- package/dist/types/css/border.d.ts +31 -0
- package/dist/types/css/border.d.ts.map +1 -0
- package/dist/types/css/box-shadow.d.ts +19 -0
- package/dist/types/css/box-shadow.d.ts.map +1 -0
- package/dist/types/css/color.d.ts +5 -0
- package/dist/types/css/color.d.ts.map +1 -0
- package/dist/types/css/length-percentage.d.ts +10 -0
- package/dist/types/css/length-percentage.d.ts.map +1 -0
- package/dist/types/css/length.d.ts +14 -0
- package/dist/types/css/length.d.ts.map +1 -0
- package/dist/types/css/margin.d.ts +20 -0
- package/dist/types/css/margin.d.ts.map +1 -0
- package/dist/types/css/padding.d.ts +20 -0
- package/dist/types/css/padding.d.ts.map +1 -0
- package/dist/types/next.d.ts.map +1 -1
- package/dist/types/prop-controllers/descriptors.d.ts +4 -3
- package/dist/types/prop-controllers/descriptors.d.ts.map +1 -1
- package/dist/types/runtimes/react/controls/control.d.ts +3 -2
- package/dist/types/runtimes/react/controls/control.d.ts.map +1 -1
- package/dist/types/runtimes/react/controls/link.d.ts +11 -0
- package/dist/types/runtimes/react/controls/link.d.ts.map +1 -0
- package/dist/types/runtimes/react/controls/slot.d.ts +26 -0
- package/dist/types/runtimes/react/controls/slot.d.ts.map +1 -0
- package/dist/types/runtimes/react/controls.d.ts.map +1 -1
- package/dist/types/runtimes/react/use-style.d.ts +3 -0
- package/dist/types/runtimes/react/use-style.d.ts.map +1 -0
- package/dist/types/use-global-style.d.ts +3 -0
- package/dist/types/use-global-style.d.ts.map +1 -0
- package/dist/types/use-grid-item-style.d.ts +1 -0
- package/dist/types/use-grid-item-style.d.ts.map +1 -0
- package/dist/types/use-style.d.ts +3 -0
- package/dist/types/use-style.d.ts.map +1 -0
- package/dist/useBoxShadow.es.js +1 -1
- package/dist/useMediaQuery.es.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,585 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import { cx } from "@emotion/css";
|
|
33
|
+
import { motion } from "framer-motion";
|
|
34
|
+
import { useMemo, useRef, useState, useCallback, createElement, forwardRef, useImperativeHandle, Children } from "react";
|
|
35
|
+
import { U as isNonNullable, y as useQuery, V as FILES_BY_ID, K as SWATCHES_BY_ID, t as useIsomorphicLayoutEffect, r as responsiveStyle, p as useStyle, q as colorToString, W as responsiveGridItem } from "./index.es.js";
|
|
36
|
+
import NextImage from "next/image";
|
|
37
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
38
|
+
import ReactPlayer from "react-player";
|
|
39
|
+
import styled from "styled-components";
|
|
40
|
+
function useBackgrounds(value) {
|
|
41
|
+
const fileIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => background.type === "image" && background.payload != null ? background.payload.imageId : null).filter(isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []);
|
|
42
|
+
const swatchIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => {
|
|
43
|
+
if (background.type === "color" && background.payload != null) {
|
|
44
|
+
return [background.payload.swatchId];
|
|
45
|
+
}
|
|
46
|
+
if (background.type === "gradient" && background.payload != null) {
|
|
47
|
+
return background.payload.stops.map((stop) => stop.color && stop.color.swatchId).filter(isNonNullable);
|
|
48
|
+
}
|
|
49
|
+
if (background.type === "video" && background.payload != null) {
|
|
50
|
+
return [background.payload.maskColor && background.payload.maskColor.swatchId];
|
|
51
|
+
}
|
|
52
|
+
return null;
|
|
53
|
+
}).filter(isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []).filter(isNonNullable);
|
|
54
|
+
const skip = value == null;
|
|
55
|
+
const filesResult = useQuery(FILES_BY_ID, {
|
|
56
|
+
skip: skip || fileIds.length === 0,
|
|
57
|
+
variables: { ids: fileIds }
|
|
58
|
+
});
|
|
59
|
+
const swatchesResult = useQuery(SWATCHES_BY_ID, {
|
|
60
|
+
skip: skip || swatchIds.length === 0,
|
|
61
|
+
variables: { ids: swatchIds }
|
|
62
|
+
});
|
|
63
|
+
return useMemo(() => {
|
|
64
|
+
const { data: filesData = {} } = filesResult;
|
|
65
|
+
const { data: swatchesData = {} } = swatchesResult;
|
|
66
|
+
if (value == null || filesResult.error != null || swatchesResult.error != null) {
|
|
67
|
+
return null;
|
|
68
|
+
}
|
|
69
|
+
const { files = [] } = filesData;
|
|
70
|
+
const { swatches = [] } = swatchesData;
|
|
71
|
+
return value.map((_a) => {
|
|
72
|
+
var _b = _a, { value: backgrounds } = _b, restOfValue = __objRest(_b, ["value"]);
|
|
73
|
+
return __spreadProps(__spreadValues({}, restOfValue), {
|
|
74
|
+
value: backgrounds.map((bg) => {
|
|
75
|
+
if (bg.type === "image" && bg.payload != null && bg.payload.imageId != null) {
|
|
76
|
+
const _a2 = bg.payload, { imageId } = _a2, restOfPayload = __objRest(_a2, ["imageId"]);
|
|
77
|
+
const file = files.find((f) => f && f.id === imageId);
|
|
78
|
+
return file && {
|
|
79
|
+
id: bg.id,
|
|
80
|
+
type: "image",
|
|
81
|
+
payload: __spreadProps(__spreadValues({}, restOfPayload), {
|
|
82
|
+
publicUrl: file.publicUrl,
|
|
83
|
+
dimensions: file.dimensions
|
|
84
|
+
})
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
if (bg.type === "color" && bg.payload != null) {
|
|
88
|
+
const { swatchId, alpha } = bg.payload;
|
|
89
|
+
const swatch = swatches.find((s) => s && s.id === swatchId);
|
|
90
|
+
return { id: bg.id, type: "color", payload: { swatch, alpha } };
|
|
91
|
+
}
|
|
92
|
+
if (bg.type === "gradient" && bg.payload != null && bg.payload.stops.length > 0) {
|
|
93
|
+
return {
|
|
94
|
+
id: bg.id,
|
|
95
|
+
type: "gradient",
|
|
96
|
+
payload: {
|
|
97
|
+
angle: bg.payload.angle,
|
|
98
|
+
isRadial: bg.payload.isRadial,
|
|
99
|
+
stops: bg.payload.stops.map((_b2) => {
|
|
100
|
+
var _c = _b2, { color } = _c, restOfStop = __objRest(_c, ["color"]);
|
|
101
|
+
return __spreadProps(__spreadValues({}, restOfStop), {
|
|
102
|
+
color: color && {
|
|
103
|
+
swatch: swatches.find((s) => s && s.id === color.swatchId),
|
|
104
|
+
alpha: color.alpha
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
})
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
if (bg.type === "video" && bg.payload != null) {
|
|
112
|
+
const _d = bg.payload, { maskColor } = _d, restOfPayload = __objRest(_d, ["maskColor"]);
|
|
113
|
+
const swatch = maskColor && swatches.find((s) => s && s.id === maskColor.swatchId);
|
|
114
|
+
return {
|
|
115
|
+
id: bg.id,
|
|
116
|
+
type: "video",
|
|
117
|
+
payload: __spreadProps(__spreadValues({}, restOfPayload), {
|
|
118
|
+
maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha }
|
|
119
|
+
})
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
return null;
|
|
123
|
+
}).filter(Boolean)
|
|
124
|
+
});
|
|
125
|
+
});
|
|
126
|
+
}, [filesResult, swatchesResult, value]);
|
|
127
|
+
}
|
|
128
|
+
const clamp = (min, val, max) => Math.min(Math.max(min, val), max);
|
|
129
|
+
function isScrollable(element) {
|
|
130
|
+
const {
|
|
131
|
+
overflow,
|
|
132
|
+
overflowY,
|
|
133
|
+
overflowX
|
|
134
|
+
} = element.ownerDocument.defaultView.getComputedStyle(element);
|
|
135
|
+
return /(auto|scroll)/.test(overflow + overflowX + overflowY);
|
|
136
|
+
}
|
|
137
|
+
function getScrollParent(element) {
|
|
138
|
+
const {
|
|
139
|
+
parentElement
|
|
140
|
+
} = element;
|
|
141
|
+
if (!element || !parentElement)
|
|
142
|
+
return element;
|
|
143
|
+
if (isScrollable(element))
|
|
144
|
+
return element;
|
|
145
|
+
return getScrollParent(parentElement);
|
|
146
|
+
}
|
|
147
|
+
function Parallax(_a) {
|
|
148
|
+
var _b = _a, {
|
|
149
|
+
strength,
|
|
150
|
+
children
|
|
151
|
+
} = _b, rest = __objRest(_b, [
|
|
152
|
+
"strength",
|
|
153
|
+
"children"
|
|
154
|
+
]);
|
|
155
|
+
const container = useRef(null);
|
|
156
|
+
const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength);
|
|
157
|
+
const lastScrollParentScrollTop = useRef(0);
|
|
158
|
+
useIsomorphicLayoutEffect(() => {
|
|
159
|
+
if (!container.current || strength == null || strength === 0)
|
|
160
|
+
return void 0;
|
|
161
|
+
const containerDocument = container.current.ownerDocument;
|
|
162
|
+
const scrollParent = getScrollParent(container.current);
|
|
163
|
+
const eventTarget = containerDocument.documentElement === scrollParent ? containerDocument.defaultView : scrollParent;
|
|
164
|
+
lastScrollParentScrollTop.current = scrollParent.scrollTop;
|
|
165
|
+
setContainerScrollTop(strength);
|
|
166
|
+
function handleScroll() {
|
|
167
|
+
containerDocument.defaultView.requestAnimationFrame(() => {
|
|
168
|
+
if (!container.current)
|
|
169
|
+
return;
|
|
170
|
+
const {
|
|
171
|
+
top: containerTop,
|
|
172
|
+
bottom: containerBottom
|
|
173
|
+
} = container.current.getBoundingClientRect();
|
|
174
|
+
const {
|
|
175
|
+
top: scrollParentTop,
|
|
176
|
+
bottom: scrollParentBottom
|
|
177
|
+
} = scrollParent === containerDocument.documentElement ? {
|
|
178
|
+
top: 0,
|
|
179
|
+
bottom: containerDocument.defaultView.innerHeight
|
|
180
|
+
} : scrollParent.getBoundingClientRect();
|
|
181
|
+
const {
|
|
182
|
+
scrollTop: scrollParentScrollTop
|
|
183
|
+
} = scrollParent === containerDocument.documentElement ? {
|
|
184
|
+
scrollTop: containerDocument.defaultView.pageYOffset
|
|
185
|
+
} : scrollParent;
|
|
186
|
+
const scrollParentHeight = scrollParentBottom - scrollParentTop;
|
|
187
|
+
const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current;
|
|
188
|
+
lastScrollParentScrollTop.current = scrollParentScrollTop;
|
|
189
|
+
setContainerScrollTop((scrollTop) => {
|
|
190
|
+
const isContainerVisible = containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop;
|
|
191
|
+
const containerScrollRemaining = scrollParentScrollDelta > 0 ? 2 * strength - scrollTop : scrollTop;
|
|
192
|
+
const scrollParentScrollRemaining = scrollParentScrollDelta > 0 ? scrollParentTop + containerBottom : scrollParentHeight - containerTop;
|
|
193
|
+
const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining;
|
|
194
|
+
const containerScrollDelta = isContainerVisible ? parallaxRatio * scrollParentScrollDelta : 0;
|
|
195
|
+
return clamp(0, scrollTop + containerScrollDelta, strength * 2);
|
|
196
|
+
});
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
eventTarget.addEventListener("scroll", handleScroll);
|
|
200
|
+
return () => eventTarget.removeEventListener("scroll", handleScroll);
|
|
201
|
+
}, [strength]);
|
|
202
|
+
const getProps = useCallback((_a2) => {
|
|
203
|
+
var _b2 = _a2, {
|
|
204
|
+
style
|
|
205
|
+
} = _b2, restOfChildrenProps = __objRest(_b2, [
|
|
206
|
+
"style"
|
|
207
|
+
]);
|
|
208
|
+
return __spreadProps(__spreadValues({}, restOfChildrenProps), {
|
|
209
|
+
style: __spreadValues(__spreadProps(__spreadValues({}, style), {
|
|
210
|
+
position: "absolute",
|
|
211
|
+
left: 0,
|
|
212
|
+
right: 0,
|
|
213
|
+
top: 0,
|
|
214
|
+
bottom: 0
|
|
215
|
+
}), strength == null || strength === 0 ? {} : {
|
|
216
|
+
top: -strength,
|
|
217
|
+
bottom: -strength,
|
|
218
|
+
transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`
|
|
219
|
+
})
|
|
220
|
+
});
|
|
221
|
+
}, [strength, containerScrollTop]);
|
|
222
|
+
return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), {
|
|
223
|
+
ref: container,
|
|
224
|
+
style: {
|
|
225
|
+
position: "absolute",
|
|
226
|
+
top: 0,
|
|
227
|
+
left: 0,
|
|
228
|
+
right: 0,
|
|
229
|
+
bottom: 0
|
|
230
|
+
},
|
|
231
|
+
children: children(getProps)
|
|
232
|
+
}));
|
|
233
|
+
}
|
|
234
|
+
const Container = styled.div`
|
|
235
|
+
position: absolute;
|
|
236
|
+
top: 0;
|
|
237
|
+
left: 0;
|
|
238
|
+
right: 0;
|
|
239
|
+
bottom: 0;
|
|
240
|
+
pointer-events: none;
|
|
241
|
+
overflow: hidden;
|
|
242
|
+
`;
|
|
243
|
+
const Mask = styled.div`
|
|
244
|
+
position: absolute;
|
|
245
|
+
top: 0;
|
|
246
|
+
left: 0;
|
|
247
|
+
right: 0;
|
|
248
|
+
bottom: 0;
|
|
249
|
+
background: ${(props) => props.backgroundColor};
|
|
250
|
+
opacity: ${(props) => props.visible ? 1 : 0};
|
|
251
|
+
transition: opacity 1s;
|
|
252
|
+
`;
|
|
253
|
+
const getScale = (element, aspectRatio, zoom) => {
|
|
254
|
+
const {
|
|
255
|
+
offsetWidth: width,
|
|
256
|
+
offsetHeight: height
|
|
257
|
+
} = element;
|
|
258
|
+
const computedAspectRatio = width / height;
|
|
259
|
+
return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom;
|
|
260
|
+
};
|
|
261
|
+
function BackgroundVideo({
|
|
262
|
+
url = "",
|
|
263
|
+
aspectRatio = 16 / 9,
|
|
264
|
+
zoom = 1,
|
|
265
|
+
maskColor,
|
|
266
|
+
opacity
|
|
267
|
+
}) {
|
|
268
|
+
var _a;
|
|
269
|
+
const [ready, setReady] = useState(false);
|
|
270
|
+
const [scale, setScale] = useState(1);
|
|
271
|
+
const container = useRef(null);
|
|
272
|
+
useIsomorphicLayoutEffect(() => {
|
|
273
|
+
const {
|
|
274
|
+
current: containerEl
|
|
275
|
+
} = container;
|
|
276
|
+
if (!containerEl)
|
|
277
|
+
return void 0;
|
|
278
|
+
const {
|
|
279
|
+
defaultView
|
|
280
|
+
} = containerEl.ownerDocument;
|
|
281
|
+
const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom));
|
|
282
|
+
handleResize();
|
|
283
|
+
defaultView.addEventListener("resize", handleResize);
|
|
284
|
+
return () => defaultView.removeEventListener("resize", handleResize);
|
|
285
|
+
}, [aspectRatio, zoom]);
|
|
286
|
+
if (!ReactPlayer.canPlay(url))
|
|
287
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
288
|
+
return /* @__PURE__ */ jsxs(Container, {
|
|
289
|
+
ref: container,
|
|
290
|
+
children: [container.current && /* @__PURE__ */ jsx(ReactPlayer, {
|
|
291
|
+
url,
|
|
292
|
+
config: {
|
|
293
|
+
vimeo: {
|
|
294
|
+
playerOptions: {
|
|
295
|
+
background: true
|
|
296
|
+
}
|
|
297
|
+
},
|
|
298
|
+
youtube: {
|
|
299
|
+
playerVars: {
|
|
300
|
+
origin: (_a = container.current.ownerDocument.defaultView) == null ? void 0 : _a.location.origin
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
wistia: {
|
|
304
|
+
options: {
|
|
305
|
+
endVideoBehavior: "loop",
|
|
306
|
+
playbackRateControl: false,
|
|
307
|
+
playbar: false,
|
|
308
|
+
playButton: false,
|
|
309
|
+
volumeControl: false,
|
|
310
|
+
fullscreenButton: false,
|
|
311
|
+
muted: true
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
},
|
|
315
|
+
playing: true,
|
|
316
|
+
loop: true,
|
|
317
|
+
muted: true,
|
|
318
|
+
controls: false,
|
|
319
|
+
onReady: () => setReady(true),
|
|
320
|
+
style: {
|
|
321
|
+
transform: `scale3d(${scale}, ${scale}, 1)`,
|
|
322
|
+
opacity
|
|
323
|
+
},
|
|
324
|
+
width: "100%",
|
|
325
|
+
height: "100%"
|
|
326
|
+
}), /* @__PURE__ */ jsx(Mask, {
|
|
327
|
+
backgroundColor: maskColor,
|
|
328
|
+
visible: !ready
|
|
329
|
+
})]
|
|
330
|
+
});
|
|
331
|
+
}
|
|
332
|
+
function getColor(color) {
|
|
333
|
+
if (color == null)
|
|
334
|
+
return "black";
|
|
335
|
+
if (color.swatch == null) {
|
|
336
|
+
return colorToString(__spreadProps(__spreadValues({}, color), {
|
|
337
|
+
swatch: {
|
|
338
|
+
hue: 0,
|
|
339
|
+
saturation: 0,
|
|
340
|
+
lightness: 0
|
|
341
|
+
}
|
|
342
|
+
}));
|
|
343
|
+
}
|
|
344
|
+
return colorToString(color);
|
|
345
|
+
}
|
|
346
|
+
const getStopsStyle = (stops) => stops.map(({
|
|
347
|
+
color,
|
|
348
|
+
location
|
|
349
|
+
}) => `${getColor(color)} ${location}%`).join(",");
|
|
350
|
+
const absoluteFillStyle = {
|
|
351
|
+
position: "absolute",
|
|
352
|
+
top: 0,
|
|
353
|
+
right: 0,
|
|
354
|
+
bottom: 0,
|
|
355
|
+
left: 0
|
|
356
|
+
};
|
|
357
|
+
const containerStyle = __spreadProps(__spreadValues({}, absoluteFillStyle), {
|
|
358
|
+
borderRadius: "inherit"
|
|
359
|
+
});
|
|
360
|
+
function Backgrounds({
|
|
361
|
+
backgrounds
|
|
362
|
+
}) {
|
|
363
|
+
if (backgrounds == null)
|
|
364
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
365
|
+
return /* @__PURE__ */ jsx(Fragment, {
|
|
366
|
+
children: backgrounds.map(({
|
|
367
|
+
value,
|
|
368
|
+
deviceId
|
|
369
|
+
}) => {
|
|
370
|
+
const visibility = backgrounds.map((v) => ({
|
|
371
|
+
deviceId: v.deviceId,
|
|
372
|
+
value: v.deviceId === deviceId
|
|
373
|
+
}));
|
|
374
|
+
return /* @__PURE__ */ jsx(BackgroundDeviceLayer, {
|
|
375
|
+
layer: value,
|
|
376
|
+
visibility
|
|
377
|
+
}, deviceId);
|
|
378
|
+
})
|
|
379
|
+
});
|
|
380
|
+
}
|
|
381
|
+
function BackgroundDeviceLayer({
|
|
382
|
+
layer,
|
|
383
|
+
visibility
|
|
384
|
+
}) {
|
|
385
|
+
const visibilityStyle = responsiveStyle([visibility], ([v]) => ({
|
|
386
|
+
display: v === true ? "block" : "none"
|
|
387
|
+
}));
|
|
388
|
+
return /* @__PURE__ */ jsx("div", {
|
|
389
|
+
className: useStyle(__spreadProps(__spreadValues(__spreadValues({}, containerStyle), visibilityStyle), {
|
|
390
|
+
overflow: "hidden"
|
|
391
|
+
})),
|
|
392
|
+
children: [...layer].reverse().map((bg) => {
|
|
393
|
+
if (bg.type === "color") {
|
|
394
|
+
return /* @__PURE__ */ jsx(ColorBackground, {
|
|
395
|
+
color: getColor(bg.payload)
|
|
396
|
+
}, bg.id);
|
|
397
|
+
}
|
|
398
|
+
if (bg.type === "image" && bg.payload) {
|
|
399
|
+
return /* @__PURE__ */ createElement(ImageBackground, __spreadProps(__spreadValues({}, bg.payload), {
|
|
400
|
+
key: bg.id
|
|
401
|
+
}));
|
|
402
|
+
}
|
|
403
|
+
if (bg.type === "gradient" && bg.payload) {
|
|
404
|
+
return /* @__PURE__ */ createElement(GradientBackground, __spreadProps(__spreadValues({}, bg.payload), {
|
|
405
|
+
key: bg.id,
|
|
406
|
+
gradient: getStopsStyle(bg.payload.stops)
|
|
407
|
+
}));
|
|
408
|
+
}
|
|
409
|
+
if (bg.type === "video" && bg.payload) {
|
|
410
|
+
return /* @__PURE__ */ createElement(VideoBackground, __spreadProps(__spreadValues({}, bg.payload), {
|
|
411
|
+
key: bg.id,
|
|
412
|
+
maskColor: getColor(bg.payload.maskColor)
|
|
413
|
+
}));
|
|
414
|
+
}
|
|
415
|
+
return null;
|
|
416
|
+
})
|
|
417
|
+
});
|
|
418
|
+
}
|
|
419
|
+
function ColorBackground({
|
|
420
|
+
color
|
|
421
|
+
}) {
|
|
422
|
+
return /* @__PURE__ */ jsx("div", {
|
|
423
|
+
className: useStyle(__spreadProps(__spreadValues({}, containerStyle), {
|
|
424
|
+
backgroundColor: color
|
|
425
|
+
}))
|
|
426
|
+
});
|
|
427
|
+
}
|
|
428
|
+
const ImageBackgroundRepeat = {
|
|
429
|
+
NoRepeat: "no-repeat",
|
|
430
|
+
RepeatX: "repeat-x",
|
|
431
|
+
RepeatY: "repeat-y",
|
|
432
|
+
Repeat: "repeat"
|
|
433
|
+
};
|
|
434
|
+
const ImageBackgroundSize = {
|
|
435
|
+
Cover: "cover",
|
|
436
|
+
Contain: "contain",
|
|
437
|
+
Auto: "auto"
|
|
438
|
+
};
|
|
439
|
+
function ImageBackground({
|
|
440
|
+
publicUrl,
|
|
441
|
+
position,
|
|
442
|
+
repeat = ImageBackgroundRepeat.NoRepeat,
|
|
443
|
+
size = ImageBackgroundSize.Cover,
|
|
444
|
+
opacity,
|
|
445
|
+
parallax
|
|
446
|
+
}) {
|
|
447
|
+
const backgroundPosition = `${position.x}% ${position.y}%`;
|
|
448
|
+
const containerClassName = useStyle(containerStyle);
|
|
449
|
+
if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
|
|
450
|
+
return /* @__PURE__ */ jsx(Parallax, {
|
|
451
|
+
strength: parallax,
|
|
452
|
+
children: (getParallaxProps) => /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
|
|
453
|
+
style: {
|
|
454
|
+
opacity,
|
|
455
|
+
overflow: "hidden"
|
|
456
|
+
}
|
|
457
|
+
})), {
|
|
458
|
+
children: /* @__PURE__ */ jsx(NextImage, {
|
|
459
|
+
src: publicUrl,
|
|
460
|
+
layout: "fill",
|
|
461
|
+
objectPosition: backgroundPosition,
|
|
462
|
+
objectFit: size
|
|
463
|
+
})
|
|
464
|
+
}))
|
|
465
|
+
});
|
|
466
|
+
}
|
|
467
|
+
return /* @__PURE__ */ jsx(Parallax, {
|
|
468
|
+
strength: parallax,
|
|
469
|
+
children: (getParallaxProps) => /* @__PURE__ */ jsx("div", __spreadValues({
|
|
470
|
+
className: containerClassName
|
|
471
|
+
}, getParallaxProps({
|
|
472
|
+
style: {
|
|
473
|
+
backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
|
|
474
|
+
backgroundPosition,
|
|
475
|
+
backgroundRepeat: repeat,
|
|
476
|
+
backgroundSize: size,
|
|
477
|
+
opacity
|
|
478
|
+
}
|
|
479
|
+
})))
|
|
480
|
+
});
|
|
481
|
+
}
|
|
482
|
+
function GradientBackground({
|
|
483
|
+
gradient,
|
|
484
|
+
isRadial,
|
|
485
|
+
angle
|
|
486
|
+
}) {
|
|
487
|
+
return /* @__PURE__ */ jsx("div", {
|
|
488
|
+
className: useStyle(__spreadProps(__spreadValues({}, containerStyle), {
|
|
489
|
+
background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
|
|
490
|
+
}))
|
|
491
|
+
});
|
|
492
|
+
}
|
|
493
|
+
function getAspectRatio(aspectRatio) {
|
|
494
|
+
switch (aspectRatio) {
|
|
495
|
+
case "wide":
|
|
496
|
+
return 16 / 9;
|
|
497
|
+
case "standard":
|
|
498
|
+
return 4 / 3;
|
|
499
|
+
default:
|
|
500
|
+
return 16 / 9;
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
function VideoBackground({
|
|
504
|
+
url,
|
|
505
|
+
aspectRatio,
|
|
506
|
+
maskColor,
|
|
507
|
+
zoom,
|
|
508
|
+
opacity,
|
|
509
|
+
parallax
|
|
510
|
+
}) {
|
|
511
|
+
return /* @__PURE__ */ jsx(Parallax, {
|
|
512
|
+
strength: parallax,
|
|
513
|
+
children: (getParallaxProps) => /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
|
|
514
|
+
className: useStyle(containerStyle)
|
|
515
|
+
})), {
|
|
516
|
+
children: /* @__PURE__ */ jsx(BackgroundVideo, {
|
|
517
|
+
url,
|
|
518
|
+
zoom,
|
|
519
|
+
opacity,
|
|
520
|
+
aspectRatio: getAspectRatio(aspectRatio),
|
|
521
|
+
maskColor
|
|
522
|
+
})
|
|
523
|
+
}))
|
|
524
|
+
});
|
|
525
|
+
}
|
|
526
|
+
var BackgroundsContainer = forwardRef(function BackgroundsContainer2(_c, ref) {
|
|
527
|
+
var _d = _c, {
|
|
528
|
+
backgrounds,
|
|
529
|
+
children,
|
|
530
|
+
className
|
|
531
|
+
} = _d, restOfProps = __objRest(_d, [
|
|
532
|
+
"backgrounds",
|
|
533
|
+
"children",
|
|
534
|
+
"className"
|
|
535
|
+
]);
|
|
536
|
+
const [handle, setHandle] = useState(null);
|
|
537
|
+
useImperativeHandle(ref, () => handle, [handle]);
|
|
538
|
+
return /* @__PURE__ */ jsxs(motion.div, __spreadProps(__spreadValues({}, restOfProps), {
|
|
539
|
+
ref: setHandle,
|
|
540
|
+
className: cx(useStyle({
|
|
541
|
+
position: "relative",
|
|
542
|
+
width: "100%",
|
|
543
|
+
margin: "0 auto",
|
|
544
|
+
"> *": {
|
|
545
|
+
borderRadius: "inherit",
|
|
546
|
+
height: "inherit"
|
|
547
|
+
},
|
|
548
|
+
"> :last-child": {
|
|
549
|
+
position: "relative"
|
|
550
|
+
}
|
|
551
|
+
}), className),
|
|
552
|
+
children: [/* @__PURE__ */ jsx(Backgrounds, {
|
|
553
|
+
backgrounds: useBackgrounds(backgrounds)
|
|
554
|
+
}), Children.only(children)]
|
|
555
|
+
}));
|
|
556
|
+
});
|
|
557
|
+
function GridItem(_e) {
|
|
558
|
+
var _f = _e, {
|
|
559
|
+
as,
|
|
560
|
+
grid,
|
|
561
|
+
index,
|
|
562
|
+
columnGap,
|
|
563
|
+
rowGap,
|
|
564
|
+
className
|
|
565
|
+
} = _f, restOfProps = __objRest(_f, [
|
|
566
|
+
"as",
|
|
567
|
+
"grid",
|
|
568
|
+
"index",
|
|
569
|
+
"columnGap",
|
|
570
|
+
"rowGap",
|
|
571
|
+
"className"
|
|
572
|
+
]);
|
|
573
|
+
const gridItemClassName = useStyle(responsiveGridItem({
|
|
574
|
+
grid,
|
|
575
|
+
index,
|
|
576
|
+
columnGap,
|
|
577
|
+
rowGap
|
|
578
|
+
}));
|
|
579
|
+
const Component = as != null ? as : "div";
|
|
580
|
+
return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
|
|
581
|
+
className: cx(gridItemClassName, className)
|
|
582
|
+
}));
|
|
583
|
+
}
|
|
584
|
+
export { BackgroundsContainer as B, GridItem as G, useBackgrounds as u };
|
|
585
|
+
//# sourceMappingURL=grid-item.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid-item.es.js","sources":["../src/components/hooks/useBackgrounds.ts","../src/utils/clamp.ts","../src/components/shared/BackgroundsContainer/components/Parallax/index.tsx","../src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.tsx","../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx","../src/components/shared/BackgroundsContainer/index.tsx","../src/components/shared/grid-item.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { ColorValue as Color } from '../utils/types'\nimport { ResponsiveValue } from '../../prop-controllers'\nimport { FILES_BY_ID, SWATCHES_BY_ID } from '../utils/queries'\nimport { isNonNullable } from '../utils/isNonNullable'\nimport { BackgroundsValue as ResponsiveBackgroundsValue } from '../../prop-controllers/descriptors'\nimport { useQuery } from '../../api/react'\n\ntype BackgroundColorData = Color\n\ntype BackgroundGradientStopData = {\n id: string\n location: number\n color: Color | null | undefined\n}\n\ntype BackgroundGradientData = {\n angle: number\n isRadial: boolean\n stops: Array<BackgroundGradientStopData>\n}\n\ntype BackgroundImageData = {\n publicUrl?: string\n dimensions: { width: number; height: number } | null\n position: {\n x: number\n y: number\n }\n size: 'cover' | 'contain' | 'auto'\n repeat: 'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'\n opacity?: number\n parallax?: number\n}\n\ntype BackgroundVideoData = {\n url: string\n maskColor: Color | null | undefined\n aspectRatio: 'wide' | 'standard'\n opacity: number\n zoom: number\n parallax: number\n}\n\ntype BackgroundData =\n | { id: string; type: 'color'; payload: BackgroundColorData | null | undefined }\n | { id: string; type: 'image'; payload: BackgroundImageData | null | undefined }\n | { id: string; type: 'gradient'; payload: BackgroundGradientData | null | undefined }\n | { id: string; type: 'video'; payload: BackgroundVideoData | null | undefined }\n\nexport type BackgroundsData = Array<BackgroundData>\n\nexport type BackgroundsPropControllerData = ResponsiveValue<BackgroundsData>\n\nexport function useBackgrounds(\n value: ResponsiveBackgroundsValue | null | undefined,\n): BackgroundsPropControllerData | null | undefined {\n const fileIds =\n value == null\n ? []\n : value\n .map(({ value: backgrounds }) =>\n backgrounds\n .map(background =>\n background.type === 'image' && background.payload != null\n ? background.payload.imageId\n : null,\n )\n .filter(isNonNullable)\n .reduce((a, b) => a.concat(b), [] as string[]),\n )\n .reduce((a, b) => a.concat(b), [])\n const swatchIds =\n value == null\n ? []\n : value\n .map(({ value: backgrounds }) =>\n backgrounds\n .map(background => {\n if (background.type === 'color' && background.payload != null) {\n return [background.payload.swatchId]\n }\n\n if (background.type === 'gradient' && background.payload != null) {\n return background.payload.stops\n .map(stop => stop.color && stop.color.swatchId)\n .filter(isNonNullable)\n }\n\n if (background.type === 'video' && background.payload != null) {\n return [background.payload.maskColor && background.payload.maskColor.swatchId]\n }\n\n return null\n })\n .filter(isNonNullable)\n .reduce((a, b) => a.concat(b), []),\n )\n .reduce((a, b) => a.concat(b), [])\n .filter(isNonNullable)\n const skip = value == null\n const filesResult = useQuery(FILES_BY_ID, {\n skip: skip || fileIds.length === 0,\n variables: { ids: fileIds },\n })\n const swatchesResult = useQuery(SWATCHES_BY_ID, {\n skip: skip || swatchIds.length === 0,\n variables: { ids: swatchIds },\n })\n\n return useMemo(() => {\n const { data: filesData = {} } = filesResult\n const { data: swatchesData = {} } = swatchesResult\n\n if (value == null || filesResult.error != null || swatchesResult.error != null) {\n return null\n }\n\n const { files = [] } = filesData\n const { swatches = [] } = swatchesData\n\n return value.map(({ value: backgrounds, ...restOfValue }) => ({\n ...restOfValue,\n value: backgrounds\n .map(bg => {\n if (bg.type === 'image' && bg.payload != null && bg.payload.imageId != null) {\n const { imageId, ...restOfPayload } = bg.payload\n const file = files.find((f: any) => f && f.id === imageId)\n\n return (\n file && {\n id: bg.id,\n type: 'image',\n payload: {\n ...restOfPayload,\n publicUrl: file.publicUrl,\n dimensions: file.dimensions,\n },\n }\n )\n }\n\n if (bg.type === 'color' && bg.payload != null) {\n const { swatchId, alpha } = bg.payload\n const swatch = swatches.find((s: any) => s && s.id === swatchId)\n\n return { id: bg.id, type: 'color', payload: { swatch, alpha } }\n }\n\n if (bg.type === 'gradient' && bg.payload != null && bg.payload.stops.length > 0) {\n return {\n id: bg.id,\n type: 'gradient',\n payload: {\n angle: bg.payload.angle,\n isRadial: bg.payload.isRadial,\n stops: bg.payload.stops.map(({ color, ...restOfStop }) => ({\n ...restOfStop,\n color: color && {\n swatch: swatches.find((s: any) => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n })),\n },\n }\n }\n\n if (bg.type === 'video' && bg.payload != null) {\n const { maskColor, ...restOfPayload } = bg.payload\n const swatch = maskColor && swatches.find((s: any) => s && s.id === maskColor.swatchId)\n\n return {\n id: bg.id,\n type: 'video',\n payload: {\n ...restOfPayload,\n maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha },\n },\n }\n }\n\n return null\n })\n .filter(Boolean),\n }))\n }, [filesResult, swatchesResult, value])\n}\n","const clamp = (min: number, val: number, max: number): number => Math.min(Math.max(min, val), max)\n\nexport default clamp\n","import { useState, useRef, useCallback, ReactNode, CSSProperties } from 'react'\nimport clamp from '../../../../../utils/clamp'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nfunction isScrollable(element: HTMLElement) {\n const { overflow, overflowY, overflowX } =\n element.ownerDocument.defaultView!.getComputedStyle(element)\n\n return /(auto|scroll)/.test(overflow + overflowX + overflowY)\n}\n\nfunction getScrollParent(element: HTMLElement): HTMLElement {\n const { parentElement } = element\n\n if (!element || !parentElement) return element\n\n if (isScrollable(element)) return element\n\n return getScrollParent(parentElement)\n}\n\ntype Props = {\n strength: number | null | undefined\n children: (\n getParallaxProps: <P extends { style?: CSSProperties; [key: string]: unknown }>(props: P) => P,\n ) => ReactNode\n}\n\nexport default function Parallax({ strength, children, ...rest }: Props): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength)\n const lastScrollParentScrollTop = useRef(0)\n\n useIsomorphicLayoutEffect(() => {\n if (!container.current || strength == null || strength === 0) return undefined\n\n const containerDocument = container.current.ownerDocument\n const scrollParent = getScrollParent(container.current)\n const eventTarget =\n containerDocument.documentElement === scrollParent\n ? containerDocument.defaultView!\n : scrollParent\n\n lastScrollParentScrollTop.current = scrollParent.scrollTop\n setContainerScrollTop(strength)\n\n function handleScroll() {\n containerDocument.defaultView!.requestAnimationFrame(() => {\n if (!container.current) return\n\n const { top: containerTop, bottom: containerBottom } =\n container.current.getBoundingClientRect()\n const { top: scrollParentTop, bottom: scrollParentBottom } =\n scrollParent === containerDocument.documentElement\n ? { top: 0, bottom: containerDocument.defaultView!.innerHeight }\n : scrollParent.getBoundingClientRect()\n const { scrollTop: scrollParentScrollTop } =\n scrollParent === containerDocument.documentElement\n ? { scrollTop: containerDocument.defaultView!.pageYOffset }\n : scrollParent\n const scrollParentHeight = scrollParentBottom - scrollParentTop\n const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current\n\n lastScrollParentScrollTop.current = scrollParentScrollTop\n\n setContainerScrollTop(scrollTop => {\n const isContainerVisible =\n containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop\n const containerScrollRemaining =\n scrollParentScrollDelta > 0 ? 2 * strength! - scrollTop : scrollTop\n const scrollParentScrollRemaining =\n scrollParentScrollDelta > 0\n ? scrollParentTop + containerBottom\n : scrollParentHeight - containerTop\n const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining\n const containerScrollDelta = isContainerVisible\n ? parallaxRatio * scrollParentScrollDelta\n : 0\n\n return clamp(0, scrollTop + containerScrollDelta, strength! * 2)\n })\n })\n }\n\n eventTarget.addEventListener('scroll', handleScroll)\n\n return () => eventTarget.removeEventListener('scroll', handleScroll)\n }, [strength])\n\n const getProps = useCallback(\n ({ style, ...restOfChildrenProps }) => ({\n ...restOfChildrenProps,\n style: {\n ...style,\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n ...(strength == null || strength === 0\n ? {}\n : {\n top: -strength,\n bottom: -strength,\n transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`,\n }),\n },\n }),\n [strength, containerScrollTop],\n )\n\n return (\n <div\n {...rest}\n ref={container}\n style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}\n >\n {children(getProps)}\n </div>\n )\n}\n","import { useState, useRef } from 'react'\nimport ReactPlayer from 'react-player'\nimport styled from 'styled-components'\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nconst Container = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n overflow: hidden;\n`\n\nconst Mask = styled.div<{ backgroundColor: string | undefined; visible: boolean }>`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: ${props => props.backgroundColor};\n opacity: ${props => (props.visible ? 1 : 0)};\n transition: opacity 1s;\n`\n\nconst getScale = (element: HTMLElement, aspectRatio: number, zoom: number) => {\n const { offsetWidth: width, offsetHeight: height } = element\n const computedAspectRatio = width / height\n\n return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom\n}\n\ntype Props = {\n url?: string\n aspectRatio?: number\n zoom?: number\n opacity?: number\n maskColor?: string\n}\n\nexport default function BackgroundVideo({\n url = '',\n aspectRatio = 16 / 9,\n zoom = 1,\n maskColor,\n opacity,\n}: Props): JSX.Element {\n const [ready, setReady] = useState(false)\n const [scale, setScale] = useState(1)\n const container = useRef<HTMLDivElement>(null)\n\n useIsomorphicLayoutEffect(() => {\n const { current: containerEl } = container\n\n if (!containerEl) return undefined\n\n const { defaultView } = containerEl.ownerDocument\n const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom))\n\n handleResize()\n\n defaultView!.addEventListener('resize', handleResize)\n\n return () => defaultView!.removeEventListener('resize', handleResize)\n }, [aspectRatio, zoom])\n\n if (!ReactPlayer.canPlay(url)) return <></>\n\n return (\n <Container ref={container}>\n {container.current && (\n <ReactPlayer\n url={url}\n config={{\n vimeo: { playerOptions: { background: true } },\n youtube: {\n playerVars: {\n origin: container.current.ownerDocument.defaultView?.location.origin,\n },\n },\n wistia: {\n options: {\n endVideoBehavior: 'loop',\n playbackRateControl: false,\n playbar: false,\n playButton: false,\n volumeControl: false,\n fullscreenButton: false,\n muted: true,\n },\n },\n }}\n playing\n loop\n muted\n controls={false}\n onReady={() => setReady(true)}\n style={{\n transform: `scale3d(${scale}, ${scale}, 1)`,\n opacity,\n }}\n width=\"100%\"\n height=\"100%\"\n />\n )}\n <Mask backgroundColor={maskColor} visible={!ready} />\n </Container>\n )\n}\n","import NextImage from 'next/image'\n\nimport { BackgroundsPropControllerData, BackgroundsData } from '../../../../hooks'\nimport { ResponsiveValue } from '../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport BackgroundVideo from '../BackgroundVideo'\nimport { CSSObject } from '@emotion/css'\nimport { useStyle } from '../../../../../use-style'\nimport { responsiveStyle } from '../../../../utils/responsive-style'\n\nfunction getColor(color: Color | null | undefined) {\n if (color == null) return 'black'\n\n if (color.swatch == null) {\n return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } })\n }\n\n return colorToString(color)\n}\n\ntype GradientStop = { color: Color | null | undefined; location: number }\n\nconst getStopsStyle = (stops: GradientStop[]) =>\n stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(',')\n\nconst absoluteFillStyle: CSSObject = {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n}\n\nconst containerStyle: CSSObject = {\n ...absoluteFillStyle,\n borderRadius: 'inherit',\n}\n\ntype Props = { backgrounds: BackgroundsPropControllerData | null | undefined }\n\nexport default function Backgrounds({ backgrounds }: Props): JSX.Element {\n if (backgrounds == null) return <></>\n\n return (\n <>\n {backgrounds.map(({ value, deviceId }) => {\n const visibility = backgrounds.map(v => ({\n deviceId: v.deviceId,\n value: v.deviceId === deviceId,\n }))\n\n return <BackgroundDeviceLayer key={deviceId} layer={value} visibility={visibility} />\n })}\n </>\n )\n}\n\ntype BackgroundLayerProps = {\n layer: BackgroundsData\n visibility: ResponsiveValue<boolean>\n}\n\nfunction BackgroundDeviceLayer({ layer, visibility }: BackgroundLayerProps) {\n const visibilityStyle = responsiveStyle([visibility], ([v]) => ({\n display: v === true ? 'block' : 'none',\n }))\n\n return (\n <div className={useStyle({ ...containerStyle, ...visibilityStyle, overflow: 'hidden' })}>\n {[...layer].reverse().map(bg => {\n if (bg.type === 'color') {\n return <ColorBackground key={bg.id} color={getColor(bg.payload)} />\n }\n\n if (bg.type === 'image' && bg.payload) {\n return <ImageBackground {...bg.payload} key={bg.id} />\n }\n\n if (bg.type === 'gradient' && bg.payload) {\n return (\n <GradientBackground\n {...bg.payload}\n key={bg.id}\n gradient={getStopsStyle(bg.payload.stops)}\n />\n )\n }\n\n if (bg.type === 'video' && bg.payload) {\n return (\n <VideoBackground\n {...bg.payload}\n key={bg.id}\n maskColor={getColor(bg.payload.maskColor)}\n />\n )\n }\n\n return null\n })}\n </div>\n )\n}\n\ntype ColorBackgroundProps = { color: string }\n\nfunction ColorBackground({ color }: ColorBackgroundProps) {\n return <div className={useStyle({ ...containerStyle, backgroundColor: color })} />\n}\n\nconst ImageBackgroundRepeat = {\n NoRepeat: 'no-repeat',\n RepeatX: 'repeat-x',\n RepeatY: 'repeat-y',\n Repeat: 'repeat',\n} as const\n\ntype ImageBackgroundRepeat = typeof ImageBackgroundRepeat[keyof typeof ImageBackgroundRepeat]\n\nconst ImageBackgroundSize = {\n Cover: 'cover',\n Contain: 'contain',\n Auto: 'auto',\n} as const\n\ntype ImageBackgroundSize = typeof ImageBackgroundSize[keyof typeof ImageBackgroundSize]\n\ntype ImageBackgroundProps = {\n publicUrl?: string\n position: { x: number; y: number }\n repeat: ImageBackgroundRepeat\n size?: ImageBackgroundSize\n opacity?: number\n parallax?: number\n}\n\nfunction ImageBackground({\n publicUrl,\n position,\n repeat = ImageBackgroundRepeat.NoRepeat,\n size = ImageBackgroundSize.Cover,\n opacity,\n parallax,\n}: ImageBackgroundProps) {\n const backgroundPosition = `${position.x}% ${position.y}%`\n const containerClassName = useStyle(containerStyle)\n\n if (repeat === 'no-repeat' && size !== 'auto' && publicUrl != null) {\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div {...getParallaxProps({ style: { opacity, overflow: 'hidden' } })}>\n <NextImage\n src={publicUrl}\n layout=\"fill\"\n objectPosition={backgroundPosition}\n objectFit={size}\n />\n </div>\n )}\n </Parallax>\n )\n }\n\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div\n className={containerClassName}\n {...getParallaxProps({\n style: {\n backgroundImage: publicUrl != null ? `url('${publicUrl}')` : undefined,\n backgroundPosition,\n backgroundRepeat: repeat,\n backgroundSize: size,\n opacity,\n },\n })}\n />\n )}\n </Parallax>\n )\n}\n\ntype GradientBackgroundProps = {\n gradient: string\n angle: number\n isRadial: boolean\n}\n\nfunction GradientBackground({ gradient, isRadial, angle }: GradientBackgroundProps) {\n return (\n <div\n className={useStyle({\n ...containerStyle,\n background: isRadial\n ? `radial-gradient(${gradient})`\n : `linear-gradient(${angle}rad, ${gradient})`,\n })}\n />\n )\n}\n\nconst BackgroundVideoAspectRatio = {\n Wide: 'wide',\n Standard: 'standard',\n} as const\n\ntype BackgroundVideoAspectRatio =\n typeof BackgroundVideoAspectRatio[keyof typeof BackgroundVideoAspectRatio]\n\nfunction getAspectRatio(aspectRatio: BackgroundVideoAspectRatio): number {\n switch (aspectRatio) {\n case 'wide':\n return 16 / 9\n\n case 'standard':\n return 4 / 3\n\n default:\n return 16 / 9\n }\n}\n\ntype VideoBackgroundProps = {\n url: string\n aspectRatio: BackgroundVideoAspectRatio\n maskColor: string\n zoom: number\n opacity: number\n parallax: number\n}\n\nfunction VideoBackground({\n url,\n aspectRatio,\n maskColor,\n zoom,\n opacity,\n parallax,\n}: VideoBackgroundProps) {\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div {...getParallaxProps({ className: useStyle(containerStyle) })}>\n <BackgroundVideo\n url={url}\n zoom={zoom}\n opacity={opacity}\n aspectRatio={getAspectRatio(aspectRatio)}\n maskColor={maskColor}\n />\n </div>\n )}\n </Parallax>\n )\n}\n","import { cx } from '@emotion/css'\nimport { motion } from 'framer-motion'\nimport {\n Children,\n ComponentPropsWithoutRef,\n ElementType,\n forwardRef,\n ReactElement,\n Ref,\n useImperativeHandle,\n useState,\n} from 'react'\nimport { BackgroundsValue as BackgroundsPropControllerValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../use-style'\nimport { useBackgrounds } from '../../hooks'\nimport Backgrounds from './components/Backgrounds'\n\ntype BaseProps = {\n backgrounds: BackgroundsPropControllerValue | null | undefined\n children: ReactElement<ElementType>\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof motion.div>, keyof BaseProps>\n\nexport default forwardRef<HTMLDivElement | null, Props>(function BackgroundsContainer(\n { backgrounds, children, className, ...restOfProps }: Props,\n ref: Ref<HTMLDivElement | null>,\n) {\n const [handle, setHandle] = useState<HTMLDivElement | null>(null)\n\n useImperativeHandle(ref, () => handle, [handle])\n\n return (\n <motion.div\n {...restOfProps}\n ref={setHandle}\n className={cx(\n useStyle({\n position: 'relative',\n width: '100%',\n margin: '0 auto',\n '> *': {\n borderRadius: 'inherit',\n height: 'inherit',\n },\n '> :last-child': {\n position: 'relative',\n },\n }),\n className,\n )}\n >\n <Backgrounds backgrounds={useBackgrounds(backgrounds)} />\n {Children.only(children)}\n </motion.div>\n )\n})\n","import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { ResponsiveValue, Length as LengthValue } from '../../prop-controllers'\nimport { useStyle } from '../../use-style'\nimport { responsiveGridItem } from '../utils/responsive-style'\n\ntype BaseProps<T extends ElementType> = {\n as?: T\n className?: string\n grid: ResponsiveValue<{ spans: Array<Array<number>>; count: number }>\n index: number\n columnGap?: ResponsiveValue<LengthValue>\n rowGap?: ResponsiveValue<LengthValue>\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>\n\nexport function GridItem<T extends ElementType = 'div'>({\n as,\n grid,\n index,\n columnGap,\n rowGap,\n className,\n ...restOfProps\n}: Props<T>) {\n const gridItemClassName = useStyle(responsiveGridItem({ grid, index, columnGap, rowGap }))\n const Component = as ?? 'div'\n\n return <Component {...restOfProps} className={cx(gridItemClassName, className)} />\n}\n"],"names":["element","overflow","overflowY","overflowX","ownerDocument","defaultView","getComputedStyle","test","parentElement","isScrollable","getScrollParent","strength","children","rest","container","useRef","containerScrollTop","setContainerScrollTop","useState","lastScrollParentScrollTop","useIsomorphicLayoutEffect","current","undefined","containerDocument","scrollParent","eventTarget","documentElement","scrollTop","requestAnimationFrame","top","containerTop","bottom","containerBottom","getBoundingClientRect","scrollParentTop","scrollParentBottom","innerHeight","scrollParentScrollTop","pageYOffset","scrollParentHeight","scrollParentScrollDelta","isContainerVisible","containerScrollRemaining","scrollParentScrollRemaining","parallaxRatio","containerScrollDelta","clamp","addEventListener","handleScroll","removeEventListener","getProps","useCallback","style","restOfChildrenProps","position","left","right","transform","Container","styled","div","Mask","props","backgroundColor","visible","getScale","aspectRatio","zoom","offsetWidth","width","offsetHeight","height","computedAspectRatio","Math","max","url","maskColor","opacity","ready","setReady","scale","setScale","containerEl","handleResize","ReactPlayer","canPlay","_jsx","_Fragment","vimeo","playerOptions","background","youtube","playerVars","origin","location","wistia","options","endVideoBehavior","playbackRateControl","playbar","playButton","volumeControl","fullscreenButton","muted","color","swatch","colorToString","hue","saturation","lightness","getStopsStyle","stops","map","getColor","join","absoluteFillStyle","containerStyle","borderRadius","backgrounds","value","deviceId","visibility","v","layer","visibilityStyle","responsiveStyle","display","useStyle","reverse","bg","type","payload","id","ImageBackgroundRepeat","NoRepeat","RepeatX","RepeatY","Repeat","ImageBackgroundSize","Cover","Contain","Auto","publicUrl","repeat","size","parallax","backgroundPosition","x","y","containerClassName","getParallaxProps","backgroundImage","backgroundRepeat","backgroundSize","gradient","isRadial","angle","className","getAspectRatio","forwardRef","ref","restOfProps","handle","setHandle","useImperativeHandle","_jsxs","cx","margin","useBackgrounds","Children","only","as","grid","index","columnGap","rowGap","gridItemClassName","responsiveGridItem","Component"],"mappings":"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"}
|