@designcrowd/library.brand-page 5.6.3 → 5.6.4-fluid-2

package/lib/src/shared/my-uploads/MyMedia.mixin.d.ts

@@ -1,6 +1,5 @@
 import type { PropType } from 'vue';
 import type { UserMediaItemWithDimensions } from './models';
-import { UserMediaClient } from '../../clients/user-media-client';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isDeleteEnabled: {
         type: BooleanConstructor;
@@ -62,7 +61,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDeleting: boolean;
     selectedDeleteMediaItem: UserMediaItemWithDimensions | null;
     userMedia: UserMediaItemWithDimensions[];
-    userMediaClient: UserMediaClient | null;
     loading: boolean;
 }, {
     filteredUserMedia(): UserMediaItemWithDimensions[];
@@ -76,8 +74,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onMediaDeleteConfirmClick(image: UserMediaItemWithDimensions): Promise<void>;
     deleteSelectedDeleteMediaItem(): Promise<void>;
     isSvg(imageUrl: string | undefined): boolean;
-    onMediaStatusUpdatedToDone(data: any): Promise<void>;
-    isImageUploaded(image: any): boolean;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     isDeleteEnabled: {
         type: BooleanConstructor;

package/lib/src/shared/my-uploads/MyMedia.mixin.js

@@ -1,6 +1,6 @@
 import { UI_EVENTS } from '../../brand-page-maker/constants';
 import { computed, defineComponent } from 'vue';
-import { getInstance as getUserMediaClientInstance, UserMediaClient, } from '../../clients/user-media-client';
+import { getInstance as getUserMediaClientInstance } from '../../clients/user-media-client';
 import { preloadImage } from '../../brand-page/utils';
 import { useUiStore } from '../../brand-page-maker/stores';
 import { MEDIA_TYPES } from '../../brand-page/models/brand-page-context.model';
@@ -33,7 +33,6 @@ export default defineComponent({
             isDeleting: false,
             selectedDeleteMediaItem: null,
             userMedia: [],
-            userMediaClient: null,
             loading: false,
         };
     },
@@ -52,7 +51,6 @@ export default defineComponent({
         },
     },
     async mounted() {
-        this.userMediaClient = getUserMediaClientInstance(this.endpoints);
         await this.loadUserMedia();
         if (window) {
             window.addEventListener(UI_EVENTS.refreshUserMediaEvent, this.onRefreshMedia);
@@ -66,7 +64,8 @@ export default defineComponent({
     methods: {
         async loadUserMedia() {
             this.loading = true;
-            const images = await this.userMediaClient.getUserMediaAsync(this.supportedFileExtensions, true, this.mediaType);
+            const userMediaClient = getUserMediaClientInstance(this.endpoints);
+            const images = await userMediaClient.getUserMediaAsync(this.supportedFileExtensions, true, this.mediaType);
             if (Array.isArray(images)) {
                 await Promise.all(images.map(async (x) => {
                     const image = await preloadImage(x.thumbnailUrl || x.url);
@@ -115,7 +114,8 @@ export default defineComponent({
             }
             this.isDeleting = true;
             try {
-                const deleted = await this.userMediaClient.deleteUserMediaByUserMediaToken(this.selectedDeleteMediaItem.media.token);
+                const userMediaClient = getUserMediaClientInstance(this.endpoints);
+                const deleted = await userMediaClient.deleteUserMediaByUserMediaToken(this.selectedDeleteMediaItem.media.token);
                 if (deleted) {
                     this.selectedDeleteMediaItem = null;
                     await this.onRefreshMedia();
@@ -128,24 +128,5 @@ export default defineComponent({
         isSvg(imageUrl) {
             return imageUrl?.endsWith('.svg') || false;
         },
-        async onMediaStatusUpdatedToDone(data) {
-            const newMedia = this.userMedia.map((m) => {
-                if (m.media.token === data.media.token) {
-                    return {
-                        imagePreviewSrc: data.thumbnailUrl,
-                        imageSrc: data.url,
-                        ...data,
-                    };
-                }
-                return m;
-            });
-            this.userMedia = newMedia;
-        },
-        isImageUploaded(image) {
-            if (image.media && image.media.status) {
-                return image.media.status === 'done';
-            }
-            return true;
-        },
     },
 });

package/lib/src/shared/my-uploads/MyUploads.mixin.js

@@ -137,7 +137,7 @@ export default defineComponent({
         async onDropzoneImageUploaderSuccess(file) {
             const { mediaToken, name, type } = file;
             if (this.userMediaClient) {
-                await this.userMediaClient.insertUserMediaAsync(mediaToken, name, type, true, undefined, this.mediaType, true);
+                await this.userMediaClient.insertUserMediaAsync(mediaToken, name, type, true, undefined, this.mediaType);
             }
             this.dropzoneImageUploaderRef?.removeAllFiles();
             // Dispatch the refresh event in the dropzone success event handler

package/lib/src/shared/my-uploads/models.d.ts

@@ -4,7 +4,6 @@ interface UserMediaItemMedia {
     name: string;
     mimeType: string;
     createdOn: string;
-    status: string;
 }
 export interface UserMediaItem {
     url: string;

package/package.json

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

package/src/brand-page/components/banner-section/BannerSection.mixin.ts

@@ -52,6 +52,11 @@ export default defineComponent({
       window.addEventListener('resize', this.onResize);
     });
   },
+  unmounted() {
+    if (typeof window !== undefined) {
+      window.removeEventListener(`resize`, this.onResize);
+    }
+  },
   computed: {
     displayAlignClass() {
       switch (this.viewModel.displayStyle) {

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

@@ -58,6 +58,7 @@
 
         <div
           :class="{
+            'brand-page-container': true,
             'brand-page__content--default': !context.isBrandSite,
             'brand-page__content--desktop': context.isBrandSite,
           }"
@@ -226,7 +227,10 @@
           />
         </div>
 
-        <MediaQuery :viewport="viewport">
+        <MediaQuery
+          v-if="!context.options?.disableNavigationSideMenu"
+          :viewport="viewport"
+        >
           <template #desktop>
             <NavigationSideMenu
               :context="context"

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

@@ -1,18 +1,162 @@
 <template>
-  <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 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>
 </template>
-<script>
-import TextWrapper from './TextWrapper.mixin.ts';
+<script setup lang="ts">
+import {
+  computed,
+  reactive,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+} from 'vue';
 
-export default {
-  mixins: [TextWrapper],
+interface Props {
+  textStyle: BrandPageCssStyle;
+  text: string;
+  element?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  element: 'p',
+});
+
+const data = reactive({
+  wrapperStyle: {
+    fontSize: '100%',
+  },
+  thisElement: null as any,
+  targetContainer: null as any,
+});
+
+const textStyles = computed(() => {
+  return {
+    backgroundColor: props.textStyle.backgroundColor,
+  };
+});
+
+const style = computed<any>(() => {
+  const { backgroundColor, ...textStyle } = props.textStyle;
+
+  return textStyle;
+});
+
+const context = getCurrentInstance();
+
+const padding = computed(() =>
+  props.textStyle.backgroundColor ? 'tw-py-2 tw-px-4' : '',
+);
+
+onMounted(() => {
+  setTargetContainer();
+
+  window.addEventListener('resize', applyScale);
+  window.addEventListener('editor:viewport', applyScaleWithDelay);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', applyScale);
+  window.removeEventListener('editor:viewport', applyScaleWithDelay);
+});
+
+const applyScaleWithDelay = (e) => {
+  setTimeout(() => {
+    applyScale(e);
+  }, 350);
+};
+
+const defaultTargetContainer = 'brand-page-container';
+
+// 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 = () => {
+  data.thisElement = (context as any).vnode.el;
+
+  let p = data.thisElement.parentNode;
+  while (p) {
+    if (p.className?.split(' ').includes(defaultTargetContainer)) {
+      data.targetContainer = p;
+      return;
+    }
+
+    p = p.parentNode;
+  }
+
+  data.targetContainer = null;
+};
+
+// 1 16
+// 2 32
+// 3 48
+// 4 64
+// 4.5 72
+// 5 80
+// 6 96
+// 7 112
+// 8 128
+
+// 13 length - higest
+// 8 length
+// 6 length - average
+
+// 100% - 41.5%  - roughly maximum scale reduction is -60%
+// 768px - 320px
+
+// Original -> newFont -> reduced
+// 128px -> 51 = -77      .. require drastic change
+// 100px -> 40 = -60      ..
+// 50px -> 20 = -30       .. require shallow change
+
+const applyScale = (e) => {
+  // console.log('ee2e', e.type, e);
+
+  const currentFontSize = props.textStyle.fontSize || '1em';
+  const fontSizeValue = parseFloat(currentFontSize);
+  const fontSizeValueInPx = fontSizeValue * 16;
+  if (fontSizeValue < 2) {
+    return;
+  }
+
+  const minFontSizeInPx = 18;
+  const maxWidth = 768;
+  const targetContainerWidth = data.targetContainer.clientWidth;
+
+  console.log('Text >', props.text, window.innerWidth, targetContainerWidth);
+
+  if (targetContainerWidth < maxWidth) {
+    const windowSizeChangeRate = targetContainerWidth / maxWidth;
+
+    // VariableRate that determines the how much windowSizeChangeRate to actually apply
+    const variableFontRate = minFontSizeInPx / 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%';
+  }
 };
 </script>

package/src/brand-page/models/brand-page-context.model.ts

@@ -45,4 +45,7 @@ export interface BrandPageContext {
   isBrandPageOrIsBrandContact: boolean;
   isBrandSite: boolean;
   isBrandContact: boolean;
+  options?: {
+    disableNavigationSideMenu: boolean;
+  };
 }

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

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

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

@@ -0,0 +1,40 @@
+import { type BrandPageModel, type LogoImageModel } from '../..';
+
+const handleRecursiveFontSizeMigration = (object: object) => {
+  if (!object) {
+    return;
+  }
+
+  if (object['fontSize']) {
+    // Handle conversion here
+    object['fontSize'] = object['fontSize'].replace('rem', 'em');
+  }
+
+  Object.keys(object).forEach((k) => {
+    if (typeof object[k] === 'object' && !Array.isArray(object[k])) {
+      handleRecursiveFontSizeMigration(object[k]);
+    }
+  });
+};
+
+export const migration03 = (
+  brandPageModel: BrandPageModel,
+  options: {
+    logoImage?: LogoImageModel;
+    isUserDraft: boolean;
+  },
+): BrandPageModel => {
+  handleRecursiveFontSizeMigration(brandPageModel.pageHeaderDesktop);
+  handleRecursiveFontSizeMigration(brandPageModel.pageHeaderMobile);
+  handleRecursiveFontSizeMigration(brandPageModel.pageFooterDesktop);
+  handleRecursiveFontSizeMigration(brandPageModel.pageFooterMobile);
+  handleRecursiveFontSizeMigration(brandPageModel.styles);
+
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      handleRecursiveFontSizeMigration(content);
+    });
+  });
+
+  return brandPageModel;
+};

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

@@ -1,6 +1,7 @@
 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;
@@ -22,6 +23,10 @@ const MIGRATION_TABLE = [
     version: 2,
     migrateFn: migration02,
   },
+  {
+    version: 3,
+    migrateFn: migration03,
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

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({