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

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-2",
   "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,9 @@ export default defineComponent({
           styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl})`;
 
           if (!this.context.isTemplate) {
+            styles.position = 'fixed';
             styles.width = '100%';
+            styles.height = '100%';
           }
 
           delete styles.background;
@@ -155,21 +178,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 +337,10 @@ export default defineComponent({
     },
   },
   watch: {
-    rootStyles() {
+    rootElementStyles() {
+      this.setRootStyles();
+    },
+    rootBackgroundStyles() {
       this.setRootStyles();
     },
   },
@@ -364,12 +375,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({