@designcrowd/library.brand-page 5.12.9 → 5.12.10-shape-1

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.js

@@ -125,6 +125,11 @@ export default defineComponent({
                     CUSTOM_DOMAIN_STATUSES.active);
         },
     },
+    watch: {
+        customDomain(newCustomDomain) {
+            this.selectedDomain = newCustomDomain;
+        },
+    },
     methods: {
         closeModal() {
             this.$emit('on-close');

package/package.json

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

package/src/brand-page/components/background-shape/BackgroundShape.mixin.ts

@@ -6,6 +6,7 @@ import axios from 'axios';
 import { applyColorToSvgString } from '../../utils/svg-color.util';
 import { isURL } from '../../../utils/validator.util';
 import { PROXY_SHAPE_URL_REGEX } from '../../../brand-page/constants';
+import { getRegexToMatchAttributeInSvgTag } from '../../../brand-page/utils/svg.util';
 
 const SUPPORTED_SHAPE_HOSTS = [
   'https://bc-user-uploads.brandcrowd.com/public',
@@ -21,7 +22,7 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', originalSvgData: '' };
+    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
   },
   computed: {
     useObjectElement(): boolean {
@@ -39,15 +40,12 @@ export default defineComponent({
       );
     },
 
-    svgAttributes(): string {
-      const attributes: string[] = [];
-
-      if (this.isFullBackground) {
-        attributes.push('preserveAspectRatio="xMidYMid slice"');
-        attributes.push('style="width: 100%; height: 100%;"');
+    objectUrl(): string {
+      if (!this.useObjectElement) {
+        return this.svgDataObjectUrl;
       }
 
-      return attributes.join(' ');
+      return this.viewModel.name;
     },
   },
   watch: {
@@ -74,6 +72,49 @@ export default defineComponent({
       );
     },
 
+    applySvgAttributes(svgData: string): string {
+      const attributes: string[] = [];
+
+      if (this.isFullBackground) {
+        const widthRegex = getRegexToMatchAttributeInSvgTag('width');
+
+        if (svgData.match(widthRegex)) {
+          svgData = svgData.replace(widthRegex, `$1width="100%"`);
+        } else {
+          attributes.push(`width="100%"`);
+        }
+
+        const heightRegex = getRegexToMatchAttributeInSvgTag('height');
+
+        if (svgData.match(heightRegex)) {
+          svgData = svgData.replace(heightRegex, `$1height="100%"`);
+        } else {
+          attributes.push(`height="100%"`);
+        }
+
+        const preserveAspectRatioRegex = getRegexToMatchAttributeInSvgTag(
+          'preserveAspectRatio',
+        );
+
+        if (svgData.match(preserveAspectRatioRegex)) {
+          svgData = svgData.replace(
+            preserveAspectRatioRegex,
+            `$1preserveAspectRatio="xMidYMid slice"`,
+          );
+        } else {
+          attributes.push(`preserveAspectRatio="xMidYMid slice"`);
+        }
+      }
+
+      const svgAttributes = attributes.join(' ');
+
+      if (svgAttributes) {
+        svgData = svgData.replace('<svg ', `<svg ${svgAttributes} `);
+      }
+
+      return svgData;
+    },
+
     async render() {
       if (this.useObjectElement) {
         return;
@@ -96,12 +137,23 @@ export default defineComponent({
           this.originalSvgData,
           this.viewModel.style.color,
         );
+      } else {
+        this.svgData = this.originalSvgData;
       }
 
-      this.svgData = this.svgData.replace(
-        '<svg ',
-        `<svg ${this.svgAttributes} `,
-      );
+      this.svgData = this.applySvgAttributes(this.svgData);
+
+      const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
+
+      const oldSvgDataObjectUrl = this.svgDataObjectUrl;
+
+      // Create an Object URL
+      this.svgDataObjectUrl = URL.createObjectURL(blob);
+
+      if (oldSvgDataObjectUrl) {
+        // clean up previous Object URL
+        URL.revokeObjectURL(oldSvgDataObjectUrl);
+      }
     },
   },
 });

package/src/brand-page/components/background-shape/BackgroundShape.vue

@@ -1,18 +1,8 @@
 <template>
   <div class="c-shape-background">
-    <div
-      v-if="useObjectElement"
-      :style="backgroundShapesStyle"
-      class="c-shape c-shape-object"
-    >
-      <object class="tw-w-full tw-h-full" :data="viewModel.name" />
+    <div :style="backgroundShapesStyle" class="c-shape c-shape-object">
+      <object class="tw-w-full tw-h-full" :data="objectUrl" />
     </div>
-    <div
-      v-else
-      :style="backgroundShapesStyle"
-      class="c-shape"
-      v-html="svgData"
-    />
   </div>
 </template>
 <script>

package/src/brand-page/components/media/Shape.mixin.ts

@@ -5,6 +5,7 @@ import ComponentCommonMixin from '../mixins/component-common.mixin';
 import axios from 'axios';
 import { applyColorReplacementsToSvgString } from '../../utils/svg-color.util';
 import { PROXY_SHAPE_URL_REGEX } from '../../../brand-page/constants';
+import { getRegexToMatchAttributeInSvgTag } from '../../../brand-page/utils/svg.util';
 
 export default defineComponent({
   mixins: [ComponentCommonMixin],
@@ -34,7 +35,7 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', originalSvgData: '' };
+    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
   },
   computed: {
     useObjectElement(): boolean {
@@ -53,6 +54,10 @@ export default defineComponent({
     },
 
     objectUrl() {
+      if (!this.useObjectElement) {
+        return this.svgDataObjectUrl;
+      }
+
       let dimensionQuery = ``;
 
       if (this.size) {
@@ -63,21 +68,17 @@ export default defineComponent({
 
       return `${this.imageUrl}${dimensionQuery}`;
     },
-
-    svgAttributes(): string {
-      const attributes: string[] = [];
-
-      if (this.size) {
-        attributes.push(`height=${this.size} width=${this.size}`);
-      }
-
-      return attributes.join(' ');
-    },
   },
   watch: {
     colorReplacements: {
-      handler() {
-        this.renderAsInnerHtml();
+      handler(newVal, oldVal) {
+        if (
+          newVal &&
+          oldVal &&
+          JSON.stringify(newVal) !== JSON.stringify(oldVal)
+        ) {
+          this.renderAsInnerHtml();
+        }
       },
       deep: true,
     },
@@ -120,6 +121,35 @@ export default defineComponent({
     }
   },
   methods: {
+    applySvgAttributes(svgData: string): string {
+      const attributes: string[] = [];
+
+      if (this.size) {
+        const widthRegex = getRegexToMatchAttributeInSvgTag('width');
+
+        if (svgData.match(widthRegex)) {
+          svgData = svgData.replace(widthRegex, `$1width="${this.size}"`);
+        } else {
+          attributes.push(`width="${this.size}"`);
+        }
+
+        const heightRegex = getRegexToMatchAttributeInSvgTag('height');
+
+        if (svgData.match(heightRegex)) {
+          svgData = svgData.replace(heightRegex, `$1height="${this.size}"`);
+        } else {
+          attributes.push(`height="${this.size}"`);
+        }
+      }
+
+      const svgAttributes = attributes.join(' ');
+
+      if (svgAttributes) {
+        svgData = svgData.replace('<svg ', `<svg ${svgAttributes} `);
+      }
+
+      return svgData;
+    },
     async renderAsInnerHtml() {
       if (!this.originalSvgData) {
         return;
@@ -130,10 +160,19 @@ export default defineComponent({
         this.colorReplacements,
       );
 
-      this.svgData = this.svgData.replace(
-        '<svg ',
-        `<svg ${this.svgAttributes} `,
-      );
+      this.svgData = this.applySvgAttributes(this.svgData);
+
+      const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
+
+      const oldSvgDataObjectUrl = this.svgDataObjectUrl;
+
+      // Create an Object URL
+      this.svgDataObjectUrl = URL.createObjectURL(blob);
+
+      if (oldSvgDataObjectUrl) {
+        // clean up previous Object URL
+        URL.revokeObjectURL(oldSvgDataObjectUrl);
+      }
     },
   },
 });

package/src/brand-page/components/media/Shape.vue

@@ -1,18 +1,11 @@
 <template>
   <div :class="imgClasses">
     <div
-      v-if="useObjectElement"
       class="c-shape c-shape-object"
       :class="{ 'tw-flex tw-justify-center tw-items-center': size }"
     >
       <object :style="objectStyle" :data="objectUrl" />
     </div>
-    <div
-      v-else
-      class="c-shape"
-      :class="{ 'tw-flex tw-justify-center tw-items-center': size }"
-      v-html="svgData"
-    />
   </div>
 </template>
 <script>

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

@@ -24,3 +24,7 @@ export const setSvgCssStyle = (svgData: string, cssStyle: string): string => {
 export const appendSvgIdSuffix = (svgData: string, svgIdSuffix: string) => {
   return svgData.replace(/(SVGID(?:_\d+)+)/g, `$1_${svgIdSuffix}`);
 };
+
+export const getRegexToMatchAttributeInSvgTag = (attribute: string) => {
+  return new RegExp(`(<svg\\b[^>]*?)${attribute}="[^"]*"`, 'i');
+};

package/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.ts

@@ -167,6 +167,11 @@ export default defineComponent({
       );
     },
   },
+  watch: {
+    customDomain(newCustomDomain) {
+      this.selectedDomain = newCustomDomain;
+    },
+  },
   methods: {
     closeModal() {
       this.$emit('on-close');