@designcrowd/library.brand-page 5.6.4-scroll-1 → 5.6.4-scroll-3

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -70,6 +70,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             fontWeight?: string | undefined;
             height?: string | undefined;
             left?: string | undefined;
+            right?: string | undefined;
             letterSpacing?: string | undefined;
             lineHeight?: string | undefined;
             marginBottom?: string | undefined;
@@ -82,6 +83,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
+            bottom?: string | undefined;
             transform?: string | undefined;
             transformOrigin?: string | undefined;
             transition?: string | undefined;
@@ -118,6 +120,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             fontWeight?: string | undefined;
             height?: string | undefined;
             left?: string | undefined;
+            right?: string | undefined;
             letterSpacing?: string | undefined;
             lineHeight?: string | undefined;
             marginBottom?: string | undefined;
@@ -130,6 +133,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
+            bottom?: string | undefined;
             transform?: string | undefined;
             transformOrigin?: string | undefined;
             transition?: string | undefined;
@@ -165,6 +169,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             fontWeight?: string | undefined;
             height?: string | undefined;
             left?: string | undefined;
+            right?: string | undefined;
             letterSpacing?: string | undefined;
             lineHeight?: string | undefined;
             marginBottom?: string | undefined;
@@ -177,6 +182,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
+            bottom?: string | undefined;
             transform?: string | undefined;
             transformOrigin?: string | undefined;
             transition?: string | undefined;
@@ -210,6 +216,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             fontWeight?: string | undefined;
             height?: string | undefined;
             left?: string | undefined;
+            right?: string | undefined;
             letterSpacing?: string | undefined;
             lineHeight?: string | undefined;
             marginBottom?: string | undefined;
@@ -222,6 +229,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
+            bottom?: string | undefined;
             transform?: string | undefined;
             transformOrigin?: string | undefined;
             transition?: string | undefined;
@@ -257,6 +265,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             fontWeight?: string | undefined;
             height?: string | undefined;
             left?: string | undefined;
+            right?: string | undefined;
             letterSpacing?: string | undefined;
             lineHeight?: string | undefined;
             marginBottom?: string | undefined;
@@ -269,6 +278,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
+            bottom?: string | undefined;
             transform?: string | undefined;
             transformOrigin?: string | undefined;
             transition?: string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.6.4-scroll-1",
+  "version": "5.6.4-scroll-3",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/page/Page.mixin.ts

@@ -107,7 +107,28 @@ export default defineComponent({
       return backgroundShapes;
     },
 
-    rootStyles(): BrandPageCssStyle {
+    rootElementStyles(): BrandPageCssStyle {
+      const styles: BrandPageCssStyle = {};
+
+      Object.assign(styles, this.viewModel?.styles?.textStyles?.style);
+
+      const textFontFamilyKey =
+        this.viewModel.styles?.textStyles.textFontFamily ||
+        DEFAULT_FONT_FAMILY_KEY;
+
+      const textFontFamilyConfig = FONT_FAMILY_CONFIGS[textFontFamilyKey];
+
+      if (textFontFamilyConfig) {
+        styles.fontFamily = [
+          `"${textFontFamilyConfig.name}"`,
+          ...FALLBACK_FONT_FAMILIES,
+        ].join(', ');
+      }
+
+      return styles;
+    },
+
+    rootBackgroundStyles(): BrandPageCssStyle {
       const styles: BrandPageCssStyle = {
         ...(this.viewModel?.styles?.backgroundStyles?.style || {}),
       };
@@ -139,7 +160,11 @@ export default defineComponent({
           styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl})`;
 
           if (!this.context.isTemplate) {
-            styles.width = '100%';
+            styles.position = 'fixed';
+            styles.top = '0';
+            styles.bottom = '0';
+            styles.left = '0';
+            styles.right = '0';
           }
 
           delete styles.background;
@@ -155,21 +180,6 @@ export default defineComponent({
         styles.backgroundAttachment = 'fixed';
       }
 
-      Object.assign(styles, this.viewModel?.styles?.textStyles?.style);
-
-      const textFontFamilyKey =
-        this.viewModel.styles?.textStyles.textFontFamily ||
-        DEFAULT_FONT_FAMILY_KEY;
-
-      const textFontFamilyConfig = FONT_FAMILY_CONFIGS[textFontFamilyKey];
-
-      if (textFontFamilyConfig) {
-        styles.fontFamily = [
-          `"${textFontFamilyConfig.name}"`,
-          ...FALLBACK_FONT_FAMILIES,
-        ].join(', ');
-      }
-
       return styles;
     },
 
@@ -329,7 +339,10 @@ export default defineComponent({
     },
   },
   watch: {
-    rootStyles() {
+    rootElementStyles() {
+      this.setRootStyles();
+    },
+    rootBackgroundStyles() {
       this.setRootStyles();
     },
   },
@@ -364,12 +377,19 @@ export default defineComponent({
      */
     setRootStyles() {
       if (this.context.isPreview) {
-        this.$emit('on-set-preview-styles', this.rootStyles);
+        this.$emit(
+          'on-set-preview-styles',
+          Object.assign({}, this.rootElementStyles, this.rootBackgroundStyles),
+        );
 
         return;
       }
 
-      this.styles = Object.assign(this.styles, this.rootStyles);
+      this.styles = Object.assign(
+        this.styles,
+        this.rootElementStyles,
+        this.rootBackgroundStyles,
+      );
     },
     scrollToLastContent() {
       if (!this.contents.length) {

package/src/brand-page/components/page/Page.vue

@@ -1,7 +1,8 @@
 <template>
+  <div class="brand-page-root-background" :style="rootBackgroundStyles" />
   <div
     class="brand-page-root"
-    :style="styles"
+    :style="rootElementStyles"
     :data-test-device-type="
       typeof isMobileDevice !== 'undefined'
         ? isMobileDevice

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -164,7 +164,7 @@ export default defineComponent({
       : null;
 
     if (!this.containerStore.baseFabricRenderUrl) {
-      throw new Error('base fabric render url is undefined');
+      // throw new Error('base fabric render url is undefined');
     }
 
     FabricRenderClient.setInstance({