@cntrl-site/sdk-nextjs 0.30.0 → 0.30.2

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.
Files changed (6) hide show
  1. package/cntrl-site-sdk-nextjs-0.30.2.tgz +0 -0
  2. package/lib/components/Item.js +4 -9
  3. package/lib/components/items/CodeEmbedItem.js +24 -7
  4. package/package.json +2 -2
  5. package/src/components/Item.tsx +5 -6
  6. package/src/components/items/CodeEmbedItem.tsx +30 -9
package/cntrl-site-sdk-nextjs-0.30.2.tgz ADDED
Binary file
package/lib/components/Item.js CHANGED
@@ -102,18 +102,14 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
102
102
  isInitialRef.current = false;
103
103
  }, []);
104
104
  const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
105
- return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
106
- opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
107
- top: `${stickyTop * 100}vw`,
108
- height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
109
- }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign(Object.assign({}, (dimensions ? {
105
+ return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: Object.assign({ opacity: (keyframes.length !== 0 && !layout) ? 0 : 1, top: `${stickyTop * 100}vw`, height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset' }, (scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, '-webkit-transform': `scale(${scale}) translateZ(0)` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (dimensions ? {
110
106
  width: `${sizingAxis.x === 'manual'
111
107
  ? isRichText
112
108
  ? `${dimensions.width * exemplary}px`
113
109
  : `${dimensions.width * 100}vw`
114
110
  : 'max-content'}`,
115
111
  height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}`
116
- } : {})), (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
112
+ } : {})), children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
117
113
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams], exemplary) => {
118
114
  const sizingAxis = parseSizing(layoutParams.sizing);
119
115
  const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
@@ -126,6 +122,8 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
126
122
  transition: opacity 0.1s linear;
127
123
  display: ${hidden ? 'none' : 'block'};
128
124
  height: fit-content;
125
+ transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
126
+ transform: scale(${area.scale});
129
127
  }
130
128
  .item-${item.id}-inner {
131
129
  transition: ${(0, HoverStyles_1.getTransitions)(['width', 'height', 'scale'], hoverParams)};
@@ -135,9 +133,6 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
135
133
  : `${area.width * 100}vw`
136
134
  : 'max-content'};
137
135
  height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
138
- transform: scale(${area.scale});
139
- transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
140
- --webkit-backface-visibility: hidden;
141
136
  }
142
137
  .item-wrapper-${item.id} {
143
138
  position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
package/lib/components/items/CodeEmbedItem.js CHANGED
@@ -36,20 +36,33 @@ const CodeEmbedItem = ({ item, sectionId, onResize }) => {
36
36
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
37
37
  const pos = stylesMap[anchor];
38
38
  const layoutValues = [item.area, item.layoutParams, item.state.hover];
39
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign({ opacity: `${opacity}`, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)` }, pos), ref: setRef, children: (0, jsx_runtime_1.jsx)("div", { className: "embed", dangerouslySetInnerHTML: { __html: html } }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
40
- .embed -wrapper-${item.id} {
39
+ (0, react_1.useEffect)(() => {
40
+ if (!ref)
41
+ return;
42
+ const scripts = ref.querySelectorAll('script');
43
+ for (const script of scripts) {
44
+ const newScript = document.createElement('script');
45
+ for (const attr of script.getAttributeNames()) {
46
+ newScript.setAttribute(attr, script.getAttribute(attr));
47
+ }
48
+ newScript.textContent = script.textContent;
49
+ script.parentNode.removeChild(script);
50
+ ref.appendChild(newScript);
51
+ }
52
+ }, [item.commonParams.html]);
53
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: { opacity: `${opacity}`, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)` }, ref: setRef, children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
54
+ .embed-wrapper-${item.id} {
41
55
  position: absolute;
42
56
  width: 100%;
43
57
  height: 100%;
44
58
  }
45
- .embed {
46
- width: 100%;
47
- height: 100%;
59
+ .embed-${item.id} {
60
+ transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
61
+ transform-origin: top left;
48
62
  z-index: 1;
49
63
  border: none;
50
- overflow: hidden;
51
64
  }
52
- ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
65
+ ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
53
66
  return (`
54
67
  .embed-wrapper-${item.id} {
55
68
  opacity: ${layoutParams.opacity};
@@ -57,6 +70,10 @@ const CodeEmbedItem = ({ item, sectionId, onResize }) => {
57
70
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
58
71
  transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
59
72
  }
73
+ .embed-${item.id} {
74
+ width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
75
+ height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
76
+ }
60
77
  .embed-wrapper-${item.id}:hover {
61
78
  ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
62
79
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "0.30.0",
3
+ "version": "0.30.2",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.ts",
@@ -23,7 +23,7 @@
23
23
  "dependencies": {
24
24
  "@cntrl-site/color": "^1.0.0",
25
25
  "@cntrl-site/effects": "^1.2.0",
26
- "@cntrl-site/sdk": "^1.12.0",
26
+ "@cntrl-site/sdk": "^1.12.1",
27
27
  "@types/vimeo__player": "^2.18.0",
28
28
  "@vimeo/player": "^2.20.1",
29
29
  "html-react-parser": "^3.0.1",
package/src/components/Item.tsx CHANGED
@@ -147,7 +147,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
147
147
  style={{
148
148
  opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
149
149
  top: `${stickyTop * 100}vw`,
150
- height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
150
+ height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
151
+ ...(scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, '-webkit-transform': `scale(${scale}) translateZ(0)` } : {}),
151
152
  }}
152
153
  >
153
154
  <RichTextWrapper isRichText={isRichText}>
@@ -160,8 +161,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
160
161
  ? `${dimensions.width * exemplary}px`
161
162
  : `${dimensions.width * 100}vw`
162
163
  : 'max-content'}`,
163
- height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}` } : {}),
164
- ...(scale !== undefined ? { transform: `scale(${scale})` } : {}),
164
+ height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}` } : {})
165
165
  }}
166
166
  >
167
167
  <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} articleHeight={articleHeight} />
@@ -181,6 +181,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
181
181
  transition: opacity 0.1s linear;
182
182
  display: ${hidden ? 'none' : 'block'};
183
183
  height: fit-content;
184
+ transform-origin: ${ScaleAnchorMap[scaleAnchor]};
185
+ transform: scale(${area.scale});
184
186
  }
185
187
  .item-${item.id}-inner {
186
188
  transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
@@ -190,9 +192,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
190
192
  : `${area.width * 100}vw`
191
193
  : 'max-content'};
192
194
  height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
193
- transform: scale(${area.scale});
194
- transform-origin: ${ScaleAnchorMap[scaleAnchor]};
195
- --webkit-backface-visibility: hidden;
196
195
  }
197
196
  .item-wrapper-${item.id} {
198
197
  position: ${area.positionType === PositionType.ScreenBased ? 'fixed': 'absolute'};
package/src/components/items/CodeEmbedItem.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ArticleItemType, getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
2
- import { FC, useId, useState } from 'react';
2
+ import { FC, useEffect, useId, useState } from 'react';
3
3
  import { useCntrlContext } from '../../provider/useCntrlContext';
4
4
  import { ItemProps } from '../Item';
5
5
  import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
@@ -32,29 +32,46 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
32
32
  const pos = stylesMap[anchor];
33
33
  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
34
34
 
35
+ useEffect(() => {
36
+ if (!ref) return;
37
+ const scripts = ref.querySelectorAll('script');
38
+ for (const script of scripts) {
39
+ const newScript = document.createElement('script');
40
+ for (const attr of script.getAttributeNames()) {
41
+ newScript.setAttribute(attr, script.getAttribute(attr)!);
42
+ }
43
+ newScript.textContent = script.textContent;
44
+ script.parentNode!.removeChild(script);
45
+ ref.appendChild(newScript);
46
+ }
47
+ }, [item.commonParams.html]);
48
+
35
49
  return (
36
50
  <LinkWrapper url={item.link?.url} target={item.link?.target}>
37
51
  <div
38
52
  className={`embed-wrapper-${item.id}`}
39
- style={{ opacity: `${opacity}`, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)`, ...pos}}
53
+ style={{ opacity: `${opacity}`, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)` }}
40
54
  ref={setRef}
41
55
  >
42
- <div className="embed" dangerouslySetInnerHTML={{ __html: html }}></div>
56
+ <div
57
+ className={`embed-${item.id}`}
58
+ style={{ ...pos }}
59
+ dangerouslySetInnerHTML={{ __html: html }}
60
+ />
43
61
  </div>
44
62
  <JSXStyle id={id}>{`
45
- .embed -wrapper-${item.id} {
63
+ .embed-wrapper-${item.id} {
46
64
  position: absolute;
47
65
  width: 100%;
48
66
  height: 100%;
49
67
  }
50
- .embed {
51
- width: 100%;
52
- height: 100%;
68
+ .embed-${item.id} {
69
+ transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
70
+ transform-origin: top left;
53
71
  z-index: 1;
54
72
  border: none;
55
- overflow: hidden;
56
73
  }
57
- ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
74
+ ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
58
75
  return (`
59
76
  .embed-wrapper-${item.id} {
60
77
  opacity: ${layoutParams.opacity};
@@ -62,6 +79,10 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
62
79
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
63
80
  transition: ${getTransitions<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
64
81
  }
82
+ .embed-${item.id} {
83
+ width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
84
+ height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
85
+ }
65
86
  .embed-wrapper-${item.id}:hover {
66
87
  ${getHoverStyles<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
67
88
  }