FileMaster

Edit File: DialogForms.vue

import SbsForm from "../StepForm/BookingStepForm.vue"
import CbfForm from "../CatalogForm/CatalogForm.vue"
import ElfForm from "../EventForm/EventListForm/EventsListForm.vue"
import EcfForm from "../EventForm/EventCalendarForm/EvensCalendarForm.vue"

// * Import from Vue
import {
  markRaw,
  reactive,
  ref,
  inject,
  computed,
  onMounted,
  watchEffect,
  provide
} from "vue";

// * Import composables
import {
  defaultCustomizeSettings
} from "../../../assets/js/common/defaultCustomize";
import {
  useRenderAction
} from "../../../assets/js/public/renderActions";

// * Shortcode Data
let shortcodeData = inject('shortcodeData')

// * List of forms
let formList = reactive({
  sbsNew: markRaw(SbsForm),
  cbf: markRaw(CbfForm),
  elf: markRaw(ElfForm),
  ecf: markRaw(EcfForm)
})

let dialogWrapperWidth = ref(0)
provide('dialogWrapperWidth', dialogWrapperWidth)

let dialogVisibility = ref(false)
provide('formDialogVisibility', dialogVisibility)

let isRestored = computed(() => 'isRestored' in shortcodeData.value ? shortcodeData.value.isRestored : false)

let externalButtons = shortcodeData.value.trigger_type && shortcodeData.value.trigger_type === 'class' ? [...document.getElementsByClassName(shortcodeData.value.trigger)]
  : [document.getElementById(shortcodeData.value.trigger)]

let resizeAfter = ref(100)

let loadDialogCounter = ref(0)
provide('loadDialogCounter', loadDialogCounter)

externalButtons.forEach(btn => {
  btn.addEventListener('click', (a) => {
    a.preventDefault()
    a.stopPropagation()
    dialogVisibility.value = true

if (!isRestored.value) {
      loadDialogCounter.value++
    }

setTimeout(() => {
      window.dispatchEvent(new Event('resize'));
    }, resizeAfter.value)
  })
})

watchEffect(() => {
  if(isRestored.value) {
    externalButtons.forEach(btn => {
      btn.dispatchEvent(new Event('click'))
    })
  }
})

function resetDialogState () {
  dialogVisibility.value = false
}

let dynamicVh = ref(0)
function updateVH() {
  dynamicVh.value = window.visualViewport.height
}

window.addEventListener('resize', updateVH)

// * Global flag for determination when component is fully loaded (used for Amelia popup)
let isMounted = inject('isMounted')

onMounted(() => {
  isMounted.value = true

useRenderAction(
    'renderPopup',
    {
      resizeAfter
    },
  )

updateVH()
})

// * Root Settings
const amSettings = inject('settings')

// * Colors block
let amColors = computed(() => {
  return amSettings.customizedData && shortcodeData.value.triggered_form in amSettings.customizedData ? amSettings.customizedData[shortcodeData.value.triggered_form].colors : defaultCustomizeSettings[shortcodeData.value.triggered_form].colors
})

let formData = computed(() => {
  return amSettings.customizedData && shortcodeData.value.triggered_form in amSettings.customizedData ? amSettings.customizedData[shortcodeData.value.triggered_form] : defaultCustomizeSettings[shortcodeData.value.triggered_form]
})

let cssVars = computed(() => {
  return {
    '--am-c-primary': amColors.value.colorPrimary,
    '--am-c-success': amColors.value.colorSuccess,
    '--am-c-error': amColors.value.colorError,
    '--am-c-warning': amColors.value.colorWarning,
    '--am-c-main-bgr': amColors.value.colorMainBgr,
    '--am-c-main-heading-text': amColors.value.colorMainHeadingText,
    '--am-c-main-text': amColors.value.colorMainText,
    '--am-dvh': dynamicVh.value ? `${dynamicVh.value}px` : '100dvh',
  }
})

watchEffect(() => {
  if (shortcodeData.value.triggered_form === 'sbsNew') {
    dialogWrapperWidth.value = formData.value.sidebar.options.self.visibility ? '760px' : '520px'
  }

if (shortcodeData.value.triggered_form === 'cbf') {
    dialogWrapperWidth.value = '1140px'
  }

if (shortcodeData.value.triggered_form === 'elf') {
    dialogWrapperWidth.value = '792px'
  }

}, {flush: 'post'})
</script>

&.am-cbf {
      .el-dialog {
        margin-top: 32px;
        &__headerbtn {
          top: -32px;
          right: 0;
          width: 22px;
          height: 22px;
          display: flex;
          background-color: var(--am-c-main-bgr);
          border-radius: 50%;
          align-items: center;
          justify-content: center;

&:active {
            position: absolute;
            border: none;
            outline: 0;
          }
        }
      }
    }

.el-dialog {
      box-shadow: none;
      border-radius: 8px;
      background-color: transparent;

@media only screen and (max-width: 768px) {
        margin-top: 0;
        width: 100%;
        max-width: 100%;

#amelia-container {
          &.am-fs {
            &__wrapper {
              max-height: unset;
              height: var(--am-dvh, 100vh);
            }
          }

.am-fs {
            &-sb {
              &__step-wrapper {
                height: calc(var(--am-dvh, 100vh) - 182px);
              }
            }

&__main-content {
              height: calc(var(--am-dvh, 100vh) - 118px);
            }
          }

.am-els {
            &__wrapper {
              overflow-x: hidden;
              height: calc(var(--am-dvh, 100vh) - 230px);

&::-webkit-scrollbar {
                width: 6px;
              }

&::-webkit-scrollbar-thumb {
                border-radius: 6px;
                background: var(--am-c-scroll-op30);
              }

&::-webkit-scrollbar-track {
                border-radius: 6px;
                background: var(--am-c-scroll-op10);
              }
            }
          }
        }
      }

.el-dialog__header {
        padding: 0;
      }

&__headerbtn {
        z-index: 10;
        top: 16px;
        right: 16px;

&:active {
          position: absolute;
          border: none;
          outline: 0;
          background-color: initial;
        }

&:hover {
          border: none;
        }

.el-dialog__close {
          color: var(--am-c-main-text);
        }
      }

.el-dialog__body {
        padding: 0;
      }

&__footer {
        display: none;
      }
    }

#amelia-container {
      * {
        font-family: var(--am-font-family), sans-serif;
        box-sizing: border-box;
        word-break: break-word;
      }

&.am-fs {
        &__wrapper {
          margin: 0;
        }
      }
    }
  }
}
</style>

Back