@saltcorn/markup - npm Package Compare versions

Comparing version 0.7.2-beta.5 to 0.7.2-beta.6

dist/form.js

@@ -171,3 +171,5 @@ "use strict";
     $(this).unbind('submit').submit(); // continue the submit unbind preventDefault
-   })`)));
+   })
+   setTimeout(()=>repeaterCopyValuesToForm($('#menuForm').closest("form"), editor), 0);
+   `)));
 };
@@ -422,3 +424,3 @@ const repeater_icons = div({ class: "float-end" }, span({ onclick: "rep_up(this)" }, i({ class: "fa fa-arrow-up pull-right" })), " ", span({ onclick: "rep_del(this)" }, i({ class: "fa fa-times pull-right" })), " ", span({ onclick: "rep_down(this)" }, i({ class: "fa fa-arrow-down pull-right" })));
     };
-    return renderLayout({ blockDispatch, layout: form.layout });
+    return renderLayout({ blockDispatch, layout: form.layout, req: form.req });
 };
@@ -425,0 +427,0 @@ /**

dist/layout.js

@@ -10,3 +10,3 @@ "use strict";
 const tags = require("./tags");
-const { div, a, span, text, img, p, h1, h2, h3, h4, h5, h6, label, ul, button, li, i, genericElement, } = tags;
+const { div, a, span, text, img, p, h1, h2, h3, h4, h5, h6, label, ul, button, li, i, genericElement, script, domReady, } = tags;
 const { alert, breadcrumbs } = require("./layout_utils");
@@ -193,4 +193,6 @@ const helpers = require("./helpers");
         if (segment.type === "image") {
+            const isWeb = typeof window === "undefined" && !req?.smr;
             const srctype = segment.srctype || "File";
-            return wrap(segment, isTop, ix, img({
+            const elementId = `_sc_file_id_${segment.fileid}_`;
+            const image = img({
                 class: segment.style && segment.style.width ? null : "w-100",
@@ -205,4 +207,12 @@ alt: segment.alt,
                     : undefined,
-                src: srctype === "File" ? `/files/serve/${segment.fileid}` : segment.url,
-            }));
+                src: isWeb
+                    ? srctype === "File"
+                        ? `/files/serve/${segment.fileid}`
+                        : segment.url
+                    : undefined,
+                id: elementId,
+            });
+            return wrap(segment, isTop, ix, isWeb
+                ? image
+                : div(image, script(domReady(`buildEncodedImage(${segment.fileid}, '${elementId}')`))));
         }
@@ -236,5 +246,5 @@ if (segment.type === "dropdown_menu") {
                 href: segment.in_modal
-                    ? typeof window === "undefined" ?
-                        `javascript:ajax_modal('${segment.url}');` :
-                        `javascript:mobile_modal('${segment.url}');`
+                    ? typeof window === "undefined"
+                        ? `javascript:ajax_modal('${segment.url}');`
+                        : `javascript:mobile_modal('${segment.url}');`
                     : segment.url,
@@ -287,3 +297,3 @@ class: [segment.link_style || "", segment.link_size || ""],
         if (segment.type === "container") {
-            const { bgFileId, bgType, bgColor, vAlign, hAlign, block, display, imageSize, borderWidth, borderStyle, setTextColor, textColor, showForRole, hide, customClass, customCSS, minScreenWidth, maxScreenWidth, showIfFormulaInputs, show_for_owner, borderDirection, borderRadius, borderRadiusUnit, borderColor, url, hoverColor, gradStartColor, gradEndColor, gradDirection, fullPageWidth, overflow, rotate, style, imgResponsiveWidths, htmlElement, } = segment;
+            const { bgFileId, bgType, bgColor, vAlign, hAlign, block, display, imageSize, borderWidth, borderStyle, setTextColor, textColor, showForRole, hide, customClass, customCSS, minScreenWidth, maxScreenWidth, showIfFormulaInputs, show_for_owner, borderDirection, borderColor, url, hoverColor, gradStartColor, gradEndColor, gradDirection, fullPageWidth, overflow, rotate, style, imgResponsiveWidths, htmlElement, } = segment;
             if (hide)
@@ -325,2 +335,27 @@ return "";
             const useImgTagAsBg = hasImgBg && imageSize !== "repeat";
+            let image = undefined;
+            const isWeb = typeof window === "undefined" && !req?.smr;
+            if (hasImgBg && useImgTagAsBg) {
+                const elementId = `_sc_file_id_${bgFileId}_`;
+                const imgTag = img({
+                    class: `containerbgimage `,
+                    srcset: imgResponsiveWidths
+                        ? imgResponsiveWidths
+                            .split(",")
+                            .map((w) => `/files/resize/${bgFileId}/${w.trim()} ${w.trim()}w`)
+                            .join(",")
+                        : undefined,
+                    style: { "object-fit": imageSize || "contain" },
+                    alt: "",
+                    src: isWeb ? `/files/serve/${bgFileId}` : undefined,
+                    id: elementId,
+                });
+                image = isWeb
+                    ? imgTag
+                    : div(imgTag, script(domReady(`buildEncodedImage(${bgFileId}, '${elementId}')`)));
+            }
+            const bgImageScriptId = // in really rare cases not unique, but shouldn't cause problems
+             !isWeb && hasImgBg && !useImgTagAsBg
+                ? `_segment_${ix}_bg_file_${bgFileId}_${Math.floor(Math.random() * 100000)}`
+                : undefined;
             return wrap(segment, isTop, ix, genericElement(htmlElement || "div", {
@@ -341,6 +376,8 @@ class: [
                 onclick: segment.url ? `location.href='${segment.url}'` : false,
-                style: `${flexStyles}${ppCustomCSS(customCSS || "")}${sizeProp("minHeight", "min-height")}${sizeProp("height", "height")}${sizeProp("width", "width")}${sizeProp("widthPct", "width", "%")}border${borderDirection ? `-${borderDirection}` : ""}: ${borderWidth || 0}px ${borderStyle} ${borderColor || "black"};${sizeProp("borderRadius", "border-radius")}${ppBox("padding")}${ppBox("margin")}${overflow && overflow !== "visible"
+                style: `${flexStyles}${ppCustomCSS(customCSS || "")}${sizeProp("minHeight", "min-height")}${sizeProp("height", "height")}${sizeProp("width", "width")}${sizeProp("widthPct", "width", "%")}border${borderDirection ? `-${borderDirection}` : ""}: ${borderWidth || 0}px ${borderStyle || "none"} ${borderColor || "black"};${sizeProp("borderRadius", "border-radius")}${ppBox("padding")}${ppBox("margin")}${overflow && overflow !== "visible"
                     ? ` overflow: ${overflow};`
                     : ""} ${hasImgBg && !useImgTagAsBg
-                    ? `background-image: url('/files/serve/${bgFileId}'); background-size: ${imageSize === "repeat" ? "auto" : imageSize || "contain"}; background-repeat: ${imageSize === "repeat" ? "repeat" : "no-repeat"};`
+                    ? ` ${isWeb
+                        ? `background-image: url('/files/serve/${bgFileId}');`
+                        : ""} background-size: ${imageSize === "repeat" ? "auto" : imageSize || "contain"}; background-repeat: ${imageSize === "repeat" ? "repeat" : "no-repeat"};`
                     : ""} ${renderBg && bgType === "Color"
@@ -356,16 +393,6 @@ ? `background-color: ${bgColor};`
                     : {}),
-            }, hasImgBg &&
-                useImgTagAsBg &&
-                img({
-                    class: `containerbgimage `,
-                    srcset: imgResponsiveWidths
-                        ? imgResponsiveWidths
-                            .split(",")
-                            .map((w) => `/files/resize/${bgFileId}/${w.trim()} ${w.trim()}w`)
-                            .join(",")
-                        : undefined,
-                    style: { "object-fit": imageSize || "contain" },
-                    alt: "",
-                    src: `/files/serve/${bgFileId}`,
-                }), go(segment.contents)));
+            }, hasImgBg && useImgTagAsBg && image, go(segment.contents)) +
+                (!isWeb && hasImgBg && !useImgTagAsBg
+                    ? script(domReady(`buildEncodedBgImage(${bgFileId}, '${bgImageScriptId}')`), { id: bgImageScriptId })
+                    : ""));
         }
@@ -372,0 +399,0 @@ if (segment.type === "line_break") {

package.json

 {
   "name": "@saltcorn/markup",
-  "version": "0.7.2-beta.5",
+  "version": "0.7.2-beta.6",
   "description": "Markup for Saltcorn, open-source no-code platform",
@@ -36,6 +36,6 @@ "homepage": "https://saltcorn.com",
   "devDependencies": {
-    "@saltcorn/types": "0.7.2-beta.5",
+    "@saltcorn/types": "0.7.2-beta.6",
     "@types/escape-html": "^1.0.1",
     "@types/jest": "^27.0.3",
-    "@types/node": "^16.11.9",
+    "@types/node": "^16.11.7",
     "jest": "^27.1.0",
@@ -42,0 +42,0 @@ "ts-jest": "^27.1.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

234953

decreased by-22.37%

Number of package files

58

decreased by-17.14%

Lines of code

2559

decreased by-21.7%

No dependency changes