@cntrl-site/sdk-nextjs 0.30.1 → 0.30.3

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/lib/components/items/CodeEmbedItem.js

@@ -36,20 +36,41 @@ const CodeEmbedItem = ({ item, sectionId, onResize }) => {
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const pos = stylesMap[anchor];
     const layoutValues = [item.area, item.layoutParams, item.state.hover];
-    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: `
-      .embed -wrapper-${item.id} {
+    (0, react_1.useEffect)(() => {
+        if (!ref)
+            return;
+        const scripts = ref.querySelectorAll('script');
+        for (const script of scripts) {
+            const newScript = document.createElement('script');
+            for (const attr of script.getAttributeNames()) {
+                newScript.setAttribute(attr, script.getAttribute(attr));
+            }
+            newScript.textContent = script.textContent;
+            script.parentNode.removeChild(script);
+            ref.appendChild(newScript);
+        }
+    }, [item.commonParams.html]);
+    (0, react_1.useEffect)(() => {
+        if (!ref)
+            return;
+        const iframe = ref.querySelector(`[data-embed="${item.id}"]`);
+        if (!iframe)
+            return;
+        iframe.srcdoc = item.commonParams.html;
+    }, [item.commonParams.html, item.commonParams.iframe, ref]);
+    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: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((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: `
+      .embed-wrapper-${item.id} {
         position: absolute;
         width: 100%;
         height: 100%;
       }
-      .embed {
-        width: 100%;
-        height: 100%;
+      .embed-${item.id} {
+        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
+        transform-origin: top left;
         z-index: 1;
         border: none;
-        overflow: hidden;
       }
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
                     return (`
           .embed-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
@@ -57,6 +78,10 @@ const CodeEmbedItem = ({ item, sectionId, onResize }) => {
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
             transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
           }
+          .embed-${item.id} {
+            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
+            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
+          }
           .embed-wrapper-${item.id}:hover {
             ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.30.1",
+  "version": "0.30.3",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.12.0",
+    "@cntrl-site/sdk": "^1.12.2",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/items/CodeEmbedItem.tsx

@@ -1,5 +1,5 @@
 import { ArticleItemType, getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
-import { FC, useId, useState } from 'react';
+import { FC, useEffect, useId, useState } from 'react';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
@@ -32,29 +32,64 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
   const pos = stylesMap[anchor];
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
 
+  useEffect(() => {
+    if (!ref) return;
+    const scripts = ref.querySelectorAll('script');
+    for (const script of scripts) {
+      const newScript = document.createElement('script');
+      for (const attr of script.getAttributeNames()) {
+        newScript.setAttribute(attr, script.getAttribute(attr)!);
+      }
+      newScript.textContent = script.textContent;
+      script.parentNode!.removeChild(script);
+      ref.appendChild(newScript);
+    }
+  }, [item.commonParams.html])
+
+  useEffect(() => {
+    if (!ref) return;
+    const iframe: HTMLIFrameElement | null = ref.querySelector(`[data-embed="${item.id}"]`);
+    if (!iframe) return;
+    iframe.srcdoc = item.commonParams.html;
+  }, [item.commonParams.html, item.commonParams.iframe, ref]);
+
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
         className={`embed-wrapper-${item.id}`}
-        style={{ opacity: `${opacity}`, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)`, ...pos}}
+        style={{ opacity: `${opacity}`, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)` }}
         ref={setRef}
       >
-        <div className="embed" dangerouslySetInnerHTML={{ __html: html }}></div>
+        {item.commonParams.iframe ? (
+          <iframe
+            data-embed={item.id}
+            className={`embed-${item.id}`}
+            style={{
+              ...pos,
+              border: 'unset'
+            }}
+          />
+        ) : (
+          <div
+            className={`embed-${item.id}`}
+            style={{ ...pos }}
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        )}
       </div>
       <JSXStyle id={id}>{`
-      .embed -wrapper-${item.id} {
+      .embed-wrapper-${item.id} {
         position: absolute;
         width: 100%;
         height: 100%;
       }
-      .embed {
-        width: 100%;
-        height: 100%;
+      .embed-${item.id} {
+        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
+        transform-origin: top left;
         z-index: 1;
         border: none;
-        overflow: hidden;
       }
-      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
         return (`
           .embed-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
@@ -62,6 +97,10 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
             transition: ${getTransitions<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
           }
+          .embed-${item.id} {
+            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
+            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
+          }
           .embed-wrapper-${item.id}:hover {
             ${getHoverStyles<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
           }