@designcrowd/library.brand-page 5.6.4-fluid-6 → 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-fluid-6",
+  "version": "5.6.4-scroll-2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

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

@@ -17,7 +17,6 @@ import {
 } from '../../constants';
 import { getSlugFromContext } from '../../utils';
 import type { ComponentPublicInstance } from '@vue/runtime-core';
-import { BRAND_PAGE_TYPES } from '../../models';
 
 export default defineComponent({
   props: {
@@ -72,16 +71,6 @@ export default defineComponent({
     'page-header-container-click',
     'page-footer-container-click',
   ],
-  setup(props) {
-    return {
-      fluidText: JSON.stringify({
-        default:
-          props.context.brandPageType === BRAND_PAGE_TYPES.brandSite
-            ? 1200
-            : 768,
-      }),
-    };
-  },
   data() {
     return {
       isSideMenuOpen: false,
@@ -118,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 || {}),
       };
@@ -152,6 +162,7 @@ export default defineComponent({
           if (!this.context.isTemplate) {
             styles.position = 'fixed';
             styles.width = '100%';
+            styles.height = '100%';
           }
 
           delete styles.background;
@@ -167,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;
     },
 
@@ -341,7 +337,10 @@ export default defineComponent({
     },
   },
   watch: {
-    rootStyles() {
+    rootElementStyles() {
+      this.setRootStyles();
+    },
+    rootBackgroundStyles() {
       this.setRootStyles();
     },
   },
@@ -376,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
@@ -55,12 +56,12 @@
             </template>
           </MediaQuery>
         </div>
+
         <div
           :class="{
             'brand-page__content--default': !context.isBrandSite,
             'brand-page__content--desktop': context.isBrandSite,
           }"
-          :data-fluid-text="fluidText"
         >
           <div
             v-if="bpShowTopNavigationDesktop || bpShowTopNavigationMobile"
@@ -280,11 +281,6 @@ export default {
     BrandSiteNavigationLayout,
   },
   mixins: [PageMixin],
-  setup(props) {
-    return {
-      ...PageMixin.setup(props),
-    };
-  },
 };
 </script>
 

package/src/brand-page/components/text/Text.vue

@@ -7,11 +7,10 @@
         [containerClasses]: true,
       }"
     >
-      <TextWrapper
-        :key="index"
-        :text-style="viewModel.textStyle"
-        :text="renderText"
+      <p
         data-test-tag="text-content-text"
+        :style="viewModel.textStyle"
+        v-html="renderText"
       />
     </div>
     <div v-else :style="containerStyle">
@@ -22,24 +21,22 @@
           [gridClass]: context.isBrandSite,
         }"
       >
-        <TextWrapper
+        <p
           v-for="(item, index) in viewModel.textItems"
           :key="index"
-          :text-style="item.textStyle"
-          :text="renderTextItem(item.text)"
           class="tw-overflow-hidden"
           data-test-tag="text-content-text-item"
+          :style="item.textStyle"
+          v-html="renderTextItem(item.text)"
         />
       </div>
     </div>
   </div>
 </template>
 <script>
-import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import TextMixin from './Text.mixin.ts';
 
 export default {
-  components: { TextWrapper },
   mixins: [TextMixin],
 };
 </script>

package/src/brand-page/components/text-wrapper/TextWrapper.mixin.ts

@@ -0,0 +1,41 @@
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+
+export default defineComponent({
+  props: {
+    textStyle: {
+      type: Object as PropType<BrandPageCssStyle>,
+      required: false,
+      default: undefined,
+    },
+    text: {
+      type: String,
+      required: true,
+    },
+    element: {
+      type: String,
+      required: false,
+      default: () => 'p',
+    },
+  },
+  data: () => ({
+    isCollapsed: false as boolean,
+  }),
+  computed: {
+    textStyles() {
+      return {
+        backgroundColor: this.textStyle.backgroundColor,
+      };
+    },
+    style() {
+      const { backgroundColor, ...textStyle } = this.textStyle;
+
+      return textStyle;
+    },
+    padding() {
+      return this.textStyle.backgroundColor ? 'tw-py-2 tw-px-4' : '';
+    },
+  },
+  watch: {},
+  methods: {},
+});

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -1,175 +1,18 @@
 <template>
-  <div v-if="text" class="tw-w-full" :style="data.wrapperStyle">
-    <div class="tw-w-full" :style="style">
-      <component
-        :is="element"
-        :class="padding"
-        class="tw-box-decoration-clone tw-inline"
-        :style="textStyles"
-        v-html="text"
-      />
-    </div>
+  <div v-if="text" class="tw-w-full" :style="style">
+    <component
+      :is="element"
+      :class="padding"
+      class="tw-box-decoration-clone tw-inline"
+      :style="textStyles"
+      v-html="text"
+    />
   </div>
 </template>
-<script setup lang="ts">
-import { type FluidTextData } from '../../models';
-import {
-  computed,
-  reactive,
-  onMounted,
-  onUnmounted,
-  getCurrentInstance,
-} from 'vue';
+<script>
+import TextWrapper from './TextWrapper.mixin.ts';
 
-interface Props {
-  textStyle: BrandPageCssStyle;
-  text: string;
-  element?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  element: 'p',
-});
-
-const data = reactive<{
-  wrapperStyle: BrandPageCssStyle;
-  targetContainer: any;
-  targetContainerData: FluidTextData;
-}>({
-  wrapperStyle: {
-    fontSize: '100%',
-  },
-  targetContainer: null as any,
-  targetContainerData: null as any,
-});
-
-const textStyles = computed(() => {
-  return {
-    backgroundColor: props.textStyle.backgroundColor,
-  };
-});
-
-const style = computed<any>(() => {
-  const { backgroundColor, ...textStyle } = props.textStyle;
-
-  return textStyle;
-});
-
-const currentInstance = getCurrentInstance();
-
-const padding = computed(() =>
-  props.textStyle.backgroundColor ? 'tw-py-2 tw-px-4' : '',
-);
-
-onMounted(() => {
-  setTargetContainer();
-
-  applyScale();
-
-  window.addEventListener('resize', applyScale);
-  window.addEventListener('editor:viewport', applyScaleWithDelay);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', applyScale);
-  window.removeEventListener('editor:viewport', applyScaleWithDelay);
-});
-
-const applyScaleWithDelay = () => {
-  setTimeout(() => {
-    applyScale();
-  }, 350);
-};
-
-// Traversing back up the node tree to find the correct container element
-// There can be more than one due to template setting side bar if we use document selector
-const setTargetContainer = () => {
-  let p = (currentInstance as any).vnode.el.parentNode;
-  while (p) {
-    const dataFluidText = p.getAttribute('data-fluid-text');
-    if (dataFluidText) {
-      data.targetContainer = p;
-      data.targetContainerData = JSON.parse(dataFluidText);
-
-      return;
-    }
-
-    p = p.parentNode;
-  }
-};
-
-// EM PX
-// 1 16
-// 2 32
-// 3 48
-// 4 64
-// 4.5 72
-// 5 80
-// 6 96
-// 7 112
-// 8 128
-
-// minimum font size that will apply the scale
-// MUST be bigger than `minFontSizeInPxForVariableRate`
-const minFontSizeInPxToDisableScale = 23;
-
-// bigger the number smaller font will take less scale effect
-const minFontSizeInPxForVariableRate = 22;
-
-const applyScale = () => {
-  if (!data.targetContainer || !data.targetContainerData) {
-    return;
-  }
-
-  const currentFontSize = props.textStyle.fontSize || '1em';
-  const fontSizeValue = parseFloat(currentFontSize);
-  const fontSizeValueInPx = fontSizeValue * 16;
-  if (fontSizeValueInPx < minFontSizeInPxToDisableScale) {
-    return;
-  }
-
-  const targetContainerWidth = data.targetContainer.clientWidth;
-
-  const targetWidth = data.targetContainerData.default;
-  console.log(
-    'Text >',
-    props.text,
-    window.innerWidth,
-    targetContainerWidth,
-    targetWidth,
-  );
-
-  if (targetContainerWidth < targetWidth) {
-    let windowSizeChangeRate = targetContainerWidth / targetWidth;
-
-    const windowSizeChangeRateWeakeningRate = 0.3;
-
-    windowSizeChangeRate =
-      windowSizeChangeRate +
-      (1 - windowSizeChangeRate) * windowSizeChangeRateWeakeningRate;
-
-    // VariableRate that determines the how much windowSizeChangeRate to actually apply
-    const variableFontRate = minFontSizeInPxForVariableRate / fontSizeValueInPx;
-    const variableRate = 1 - variableFontRate;
-
-    // using math power to give variable factor
-    const changeRate = Math.pow(windowSizeChangeRate, variableRate);
-
-    const scaledPercentage = Math.min(changeRate * 100, 100);
-    console.log('   fontSize', currentFontSize, `${fontSizeValue * 16}px`);
-    console.log(
-      '   fontSizeScaled',
-      fontSizeValue * changeRate,
-      `${fontSizeValue * 16 * changeRate}px`,
-    );
-    console.log('   variableFontRate', variableFontRate);
-    console.log('   windowSizeChangeRate', windowSizeChangeRate);
-    console.log('   variableRate', variableRate);
-    console.log('   changeRate', changeRate);
-
-    data.wrapperStyle.fontSize = `${scaledPercentage}%`;
-  } else {
-    data.wrapperStyle.fontSize = '100%';
-  }
+export default {
+  mixins: [TextWrapper],
 };
 </script>

package/src/brand-page/models/index.ts

@@ -984,7 +984,3 @@ export interface PrimaryCta {
   title: string;
   description: string;
 }
-
-export interface FluidTextData {
-  default: number;
-}

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -147,7 +147,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1em",
+        "fontSize": "1rem",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "lineHeight": "1.1",
@@ -219,7 +219,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1em",
+        "fontSize": "1rem",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "lineHeight": "1.1",
@@ -275,7 +275,7 @@ BrandPageModel {
           "buttonText": "Get Started",
           "buttonTextStyle": {
             "fontFamily": "Lato",
-            "fontSize": "1em",
+            "fontSize": "1rem",
             "lineHeight": "1.5",
             "overflowWrap": "anywhere",
             "textAlign": "center",
@@ -285,7 +285,7 @@ BrandPageModel {
           "description": "",
           "descriptionStyle": {
             "fontFamily": "Lato",
-            "fontSize": "1em",
+            "fontSize": "1rem",
             "lineHeight": "1.5",
             "overflowWrap": "anywhere",
             "textAlign": "center",
@@ -300,7 +300,7 @@ BrandPageModel {
           "title": "This is a banner",
           "titleStyle": {
             "fontFamily": "Lato",
-            "fontSize": "2.25em",
+            "fontSize": "2.25rem",
             "lineHeight": "1.1",
             "overflowWrap": "anywhere",
             "textAlign": "center",
@@ -361,7 +361,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1em",
+            "fontSize": "1rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -377,7 +377,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1.5em",
+            "fontSize": "1.5rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -393,7 +393,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1em",
+            "fontSize": "1rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -409,7 +409,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "2.25em",
+            "fontSize": "2.25rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -423,7 +423,7 @@ BrandPageModel {
       },
     },
   },
-  "v": 3,
+  "v": 2,
 }
 `;
 
@@ -574,7 +574,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1em",
+        "fontSize": "1rem",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "lineHeight": "1.1",
@@ -646,7 +646,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1em",
+        "fontSize": "1rem",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "lineHeight": "1.1",
@@ -711,7 +711,7 @@ BrandPageModel {
             },
           ],
           "textSize": {
-            "fontSize": "1em",
+            "fontSize": "1rem",
             "lineHeight": "1.2",
           },
           "textStyle": {
@@ -772,7 +772,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1em",
+            "fontSize": "1rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -788,7 +788,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1.5em",
+            "fontSize": "1.5rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -804,7 +804,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1em",
+            "fontSize": "1rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -820,7 +820,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "2.25em",
+            "fontSize": "2.25rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -834,7 +834,7 @@ BrandPageModel {
       },
     },
   },
-  "v": 3,
+  "v": 2,
 }
 `;
 
@@ -985,7 +985,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1em",
+        "fontSize": "1rem",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "lineHeight": "1.1",
@@ -1057,7 +1057,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1em",
+        "fontSize": "1rem",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "lineHeight": "1.1",
@@ -1117,7 +1117,7 @@ BrandPageModel {
               "textStyle": {
                 "color": undefined,
                 "fontFamily": "Lato",
-                "fontSize": "1em",
+                "fontSize": "1rem",
                 "fontStyle": undefined,
                 "fontWeight": undefined,
                 "letterSpacing": undefined,
@@ -1129,7 +1129,7 @@ BrandPageModel {
             },
           ],
           "textSize": {
-            "fontSize": "1em",
+            "fontSize": "1rem",
             "lineHeight": "1.2",
           },
           "textStyle": {
@@ -1190,7 +1190,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1em",
+            "fontSize": "1rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -1206,7 +1206,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1.5em",
+            "fontSize": "1.5rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -1222,7 +1222,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1em",
+            "fontSize": "1rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -1238,7 +1238,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "2.25em",
+            "fontSize": "2.25rem",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": "0",
@@ -1252,6 +1252,6 @@ BrandPageModel {
       },
     },
   },
-  "v": 3,
+  "v": 2,
 }
 `;

package/src/brand-page/utils/migration.util.ts

@@ -1,7 +1,6 @@
 import { type BrandPageModel, type LogoImageModel } from '../models';
 import { migration01 } from './migration/migration-01';
 import { migration02 } from './migration/migration-02';
-import { migration03 } from './migration/migration-03';
 
 interface MigrationTableItem {
   version: number;
@@ -23,10 +22,6 @@ const MIGRATION_TABLE = [
     version: 2,
     migrateFn: migration02,
   },
-  {
-    version: 3,
-    migrateFn: migration03,
-  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>