@nascentdigital/funnel-editor 4.5.2 → 4.5.4

package/dist/page/components/config/MessagePanelEditor.js

@@ -5,9 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessagePanelEditor = MessagePanelEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
+const core_1 = require("../../../core");
 // component
-function MessagePanelEditor({ className }) {
+function MessagePanelEditor({ className, anchor, open, onClose, configuration }) {
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "MessagePanelEditor" }));
+    return ((0, jsx_runtime_1.jsx)(core_1.QuickEditor, { className: (0, classnames_1.default)(className), title: "Message Configuration", tip: "Medium and Large are relative to this block's text area, not the page width.", anchor: anchor, placement: "left", anchorOffset: 4, viewportPadding: 4, open: open, onClose: onClose, size: "sm", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-l4", children: Object.values(configuration.messageFields)
+                .filter(funnel_core_1.Value.isDefined)
+                .map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: field, size: "xs" }, field.id)) }) }));
 }

package/dist/page/components/config/VisualPanelEditor.d.ts

@@ -1,6 +1,8 @@
-export declare function VisualPanelEditor({ className }: VisualPanelEditor.Props): import("react/jsx-runtime").JSX.Element;
+import { BlockConfiguration, Popup } from '../../../core';
+export declare function VisualPanelEditor({ className, anchor, open, onClose, configuration }: VisualPanelEditor.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace VisualPanelEditor {
-    type Props = {
+    type Props = Pick<Popup.Props, 'open' | 'onClose' | 'anchor'> & {
         className?: string;
+        configuration: BlockConfiguration;
     };
 }

package/dist/page/components/config/VisualPanelEditor.js

@@ -6,8 +6,71 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VisualPanelEditor = VisualPanelEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const core_1 = require("../../../core");
+const FieldHeader_1 = require("../../../core/components/fields/FieldHeader");
+const framer_motion_1 = require("framer-motion");
 // component
-function VisualPanelEditor({ className }) {
+function VisualPanelEditor({ className, anchor, open, onClose, configuration }) {
+    var _a;
+    // get fields
+    const { visualFields: { aspect: aspectField, anchor: anchorField, width: widthField, horizontalAlign: horizontalAlignField } } = configuration;
+    const { value } = (_a = configuration.getFieldData('visual')) !== null && _a !== void 0 ? _a : {};
+    const visual = funnel_core_1.Schema.AssetField.LinkedValue.Visual.filter(value)
+        ? value
+        : undefined;
+    // sync config
+    (0, core_1.useBlockConfiguration)(configuration);
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "MessagePanelEditor" }));
+    return ((0, jsx_runtime_1.jsx)(core_1.QuickEditor, { className: (0, classnames_1.default)(className), title: "Visual Configuration", tip: "Cropping changes how the image appears on your site, not your original file.", anchor: anchor, placement: "left", anchorOffset: 4, viewportPadding: 4, open: open, onClose: onClose, size: "sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l9", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-l4", children: [aspectField &&
+                            (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: aspectField, size: "xs" }), anchorField
+                            ? (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: anchorField, size: "xs" })
+                            :
+                                (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { label: "Anchor", size: "xs" }), (0, jsx_runtime_1.jsx)("p", { className: "label-xs text-content-secondary text-pretty", children: "Your current image size and aspect ratio don't require and anchor (there's no cropping)." })] })] }), visual && renderVisual({
+                    configuration,
+                    visual,
+                    aspectField: aspectField,
+                    anchorField: anchorField
+                })] }) }));
+}
+function renderVisual({ configuration, visual, aspectField, anchorField }) {
+    var _a, _b, _c;
+    // determine layout info
+    const { metadata, name, description } = visual;
+    const { dimensions: { width, height } } = metadata;
+    const isPortrait = width < height;
+    const aspect = (_b = (_a = aspectField === null || aspectField === void 0 ? void 0 : aspectField.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'auto';
+    const anchor = (_c = anchorField === null || anchorField === void 0 ? void 0 : anchorField.value) === null || _c === void 0 ? void 0 : _c.value;
+    const anchorDirection = anchorField
+        ? anchorField.schema.isValidOption('left')
+            ? 'x'
+            : 'y'
+        : undefined;
+    // render
+    return ((0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)('w-full h-[210px]', 'flex flex-col justify-center items-center', 'bg-background rounded-xs'), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('relative bg-destructive', {
+                'h-full max-h-full w-auto': isPortrait,
+                'w-full': !isPortrait
+            }), children: [funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(visual)
+                    ? renderImage({ configuration, visual })
+                    : renderVideo({ configuration, visual }), aspect !== 'auto' && anchor && anchorDirection &&
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-supersurface flex', {
+                            'flex-col': anchorDirection === 'y'
+                        }), children: (0, jsx_runtime_1.jsxs)(framer_motion_1.AnimatePresence, { mode: "popLayout", children: [anchor !== 'left' && anchor !== 'top' &&
+                                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "flex-1 bg-content-button-contrast/backdrop", layout: true, variants: core_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, "crop.start"), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: (0, classnames_1.default)('shrink-0 outline outline-1 outline-ix-primary', {
+                                        'h-full w-auto': anchorDirection === 'x',
+                                        'w-full h-auto': anchorDirection === 'y',
+                                        'aspect-square': aspect === 'square',
+                                        'aspect-phone': aspect === 'phone',
+                                        'aspect-tv': aspect === 'tv',
+                                        'aspect-widescreen': aspect === 'widescreen',
+                                        'aspect-cinema': aspect === 'cinema'
+                                    }), layout: true }, "visible"), anchor !== 'right' && anchor !== 'bottom' &&
+                                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "flex-1 bg-content-button-contrast/backdrop", layout: true, variants: core_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, "crop.end")] }) })] }) }));
+}
+function renderImage({ visual }) {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)("img", { className: "max-w-full max-h-full", src: visual.url, alt: (_a = visual.description) !== null && _a !== void 0 ? _a : visual.name }));
+}
+function renderVideo({ visual }) {
+    return ((0, jsx_runtime_1.jsx)("video", { className: "max-w-full max-h-full", src: visual.url, autoPlay: true, muted: true, loop: true, playsInline: true }));
 }