@designcrowd/library.brand-page 5.18.1 → 5.18.2-ast-padding-1

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

@@ -1,213 +0,0 @@
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type {
-  BannerSectionViewModel,
-  ButtonViewModel,
-} from '@brand-page/view-models';
-import {
-  isURL,
-  hasValidButton as shouldShowButtonUtil,
-} from '../../../utils/validator.util';
-import type { BrandPageContext } from '@brand-page/models';
-import {
-  ALIGN_CENTERED,
-  ALIGN_LEFT_ALIGNED,
-  ALIGN_RIGHT_ALIGNED,
-  BIG_IMAGE,
-  ALIGN_LEFT_BIG_IMAGE,
-  ALIGN_RIGHT_FULL_IMAGE,
-  ALIGN_LEFT_FULL_IMAGE,
-  ALIGN_CARD_CENTER_IMAGE,
-  ALIGN_CARD_LEFT_IMAGE,
-} from '../../constants';
-import { getRenderText, escapeContentText } from '@brand-page/utils';
-import { hasRTEContent } from '@brand-page-maker/utils';
-
-export default defineComponent({
-  mixins: [ComponentCommonMixin],
-  props: {
-    viewModel: {
-      type: Object as PropType<BannerSectionViewModel>,
-      required: true,
-    },
-    context: {
-      type: Object as PropType<BrandPageContext>,
-      required: true,
-    },
-    containerClientWidth: {
-      type: Number as PropType<number | undefined>,
-      required: false,
-      default: undefined,
-    },
-    containerClientHeight: {
-      type: Number as PropType<number | undefined>,
-      required: false,
-      default: undefined,
-    },
-    contentIndex: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      shouldStackOnTop: false,
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      window.addEventListener('resize', this.onResize);
-    });
-  },
-  unmounted() {
-    if (typeof window !== undefined) {
-      window.removeEventListener(`resize`, this.onResize);
-    }
-  },
-  computed: {
-    displayAlignClass() {
-      switch (this.viewModel.displayStyle) {
-        case ALIGN_CENTERED:
-          return 'tw-items-center tw-w-full';
-        case BIG_IMAGE:
-          return 'tw-items-center tw-w-full';
-        case ALIGN_LEFT_ALIGNED:
-          return 'tw-items-start tw-w-2/3';
-        case ALIGN_RIGHT_ALIGNED:
-          return 'tw-items-end tw-w-2/3';
-        case ALIGN_LEFT_BIG_IMAGE:
-          return 'tw-items-start tw-w-2/3';
-        case ALIGN_CARD_CENTER_IMAGE:
-          return 'tw-items-center tw-w-full';
-        case ALIGN_CARD_LEFT_IMAGE:
-          return 'tw-items-end';
-        default:
-          return '';
-      }
-    },
-    displayButtonClass() {
-      if (this.viewModel.buttonTextStyle) {
-        switch (this.viewModel.buttonTextStyle.textAlign) {
-          case 'left':
-            return 'tw-justify-start';
-          case 'center':
-            return 'tw-justify-center';
-          case 'right':
-            return 'tw-justify-end';
-          default:
-            return '';
-        }
-      } else {
-        return this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
-          this.viewModel.displayStyle === ALIGN_CENTERED
-          ? 'tw-justify-center'
-          : 'tw-justify-start';
-      }
-    },
-    isLeftImageAligned(): boolean {
-      if (this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE) {
-        return true;
-      }
-
-      return false;
-    },
-    isRightImageAligned(): boolean {
-      if (this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE) {
-        return true;
-      }
-
-      return false;
-    },
-
-    isDividedContent(): boolean {
-      if (
-        this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE ||
-        this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE
-      ) {
-        return true;
-      }
-
-      return false;
-    },
-    isCardBannerContent(): boolean {
-      if (
-        this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
-        this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE
-      ) {
-        return true;
-      }
-
-      return false;
-    },
-    isCardAlignedOnLeft() {
-      return this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE;
-    },
-    getbuttonViewModel(): ButtonViewModel {
-      const { buttonViewModel, buttonLinkType, pageSlug } = this.viewModel;
-
-      buttonViewModel.buttonLinkType = buttonLinkType;
-      buttonViewModel.pageSlug = pageSlug;
-
-      return buttonViewModel;
-    },
-
-    shouldShowButton(): boolean {
-      return shouldShowButtonUtil({
-        buttonText: this.viewModel.buttonText,
-        buttonViewModel: this.viewModel.buttonViewModel,
-      });
-    },
-
-    isHorizontalAligned(): boolean {
-      return (
-        this.viewModel.displayStyle === ALIGN_LEFT_ALIGNED ||
-        this.viewModel.displayStyle === ALIGN_RIGHT_ALIGNED ||
-        this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE ||
-        this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE
-      );
-    },
-    isBigImageAligned(): boolean {
-      return (
-        this.viewModel.displayStyle === ALIGN_LEFT_BIG_IMAGE ||
-        this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE
-      );
-    },
-    renderText(): string {
-      if (!this.viewModel.description) {
-        return '';
-      }
-
-      if (hasRTEContent(this.viewModel.description)) {
-        return this.viewModel.description;
-      } else {
-        return getRenderText(this.viewModel.description);
-      }
-    },
-    hasDescriptionText(): boolean {
-      if (hasRTEContent(this.viewModel.description)) {
-        return escapeContentText(this.viewModel.description) !== '';
-      } else {
-        return this.viewModel?.description?.length > 0;
-      }
-    },
-    overlayColor(): BrandPageCssStyle {
-      return this.viewModel.overlayColor || 'rgb(0,0,0)';
-    },
-    opacity(): number {
-      return this.viewModel.overlayOpacity;
-    },
-    backgroundOverlay(): BrandPageCssStyle {
-      return {
-        background: this.overlayColor.backgroundColor,
-        opacity: `${this.opacity}%`,
-      };
-    },
-  },
-  methods: {
-    onResize() {
-      this.shouldStackOnTop = window.innerWidth < 640;
-    },
-  },
-});