DialogForms.vue
262 lines
| 1 | <script setup> |
| 2 | import AmDialog from '../../_components/dialog/AmDialog.vue' |
| 3 | |
| 4 | import SbsForm from '../StepForm/BookingStepForm.vue' |
| 5 | import CbfForm from '../CatalogForm/CatalogForm.vue' |
| 6 | import ElfForm from '../EventForm/EventListForm/EventsListForm.vue' |
| 7 | import EcfForm from '../EventForm/EventCalendarForm/EvensCalendarForm.vue' |
| 8 | |
| 9 | // * Import from Vue |
| 10 | import { markRaw, reactive, ref, inject, computed, onMounted, watchEffect, provide } from 'vue' |
| 11 | |
| 12 | // * Import composables |
| 13 | import { defaultCustomizeSettings } from '../../../assets/js/common/defaultCustomize' |
| 14 | import { useRenderAction } from '../../../assets/js/public/renderActions' |
| 15 | |
| 16 | // * Shortcode Data |
| 17 | let shortcodeData = inject('shortcodeData') |
| 18 | |
| 19 | // * List of forms |
| 20 | let formList = reactive({ |
| 21 | sbsNew: markRaw(SbsForm), |
| 22 | cbf: markRaw(CbfForm), |
| 23 | elf: markRaw(ElfForm), |
| 24 | ecf: markRaw(EcfForm), |
| 25 | }) |
| 26 | |
| 27 | let dialogWrapperWidth = ref(0) |
| 28 | provide('dialogWrapperWidth', dialogWrapperWidth) |
| 29 | |
| 30 | let dialogVisibility = ref(false) |
| 31 | provide('formDialogVisibility', dialogVisibility) |
| 32 | |
| 33 | let isRestored = computed(() => |
| 34 | 'isRestored' in shortcodeData.value ? shortcodeData.value.isRestored : false, |
| 35 | ) |
| 36 | |
| 37 | let externalButtons = |
| 38 | shortcodeData.value.trigger_type && shortcodeData.value.trigger_type === 'class' |
| 39 | ? [...document.getElementsByClassName(shortcodeData.value.trigger)] |
| 40 | : [document.getElementById(shortcodeData.value.trigger)] |
| 41 | |
| 42 | let resizeAfter = ref(100) |
| 43 | |
| 44 | let loadDialogCounter = ref(0) |
| 45 | provide('loadDialogCounter', loadDialogCounter) |
| 46 | |
| 47 | externalButtons.forEach((btn) => { |
| 48 | btn.addEventListener('click', (a) => { |
| 49 | a.preventDefault() |
| 50 | a.stopPropagation() |
| 51 | dialogVisibility.value = true |
| 52 | |
| 53 | if (!isRestored.value) { |
| 54 | loadDialogCounter.value++ |
| 55 | } |
| 56 | |
| 57 | setTimeout(() => { |
| 58 | window.dispatchEvent(new Event('resize')) |
| 59 | }, resizeAfter.value) |
| 60 | }) |
| 61 | }) |
| 62 | |
| 63 | watchEffect(() => { |
| 64 | if (isRestored.value) { |
| 65 | externalButtons.forEach((btn) => { |
| 66 | btn.dispatchEvent(new Event('click')) |
| 67 | }) |
| 68 | } |
| 69 | }) |
| 70 | |
| 71 | function resetDialogState() { |
| 72 | dialogVisibility.value = false |
| 73 | } |
| 74 | |
| 75 | let dynamicVh = ref(0) |
| 76 | function updateVH() { |
| 77 | dynamicVh.value = window.visualViewport.height |
| 78 | } |
| 79 | |
| 80 | window.addEventListener('resize', updateVH) |
| 81 | |
| 82 | // * Global flag for determination when component is fully loaded (used for Amelia popup) |
| 83 | let isMounted = inject('isMounted') |
| 84 | |
| 85 | onMounted(() => { |
| 86 | isMounted.value = true |
| 87 | |
| 88 | useRenderAction('renderPopup', { |
| 89 | resizeAfter, |
| 90 | }) |
| 91 | |
| 92 | updateVH() |
| 93 | }) |
| 94 | |
| 95 | // * Root Settings |
| 96 | const amSettings = inject('settings') |
| 97 | |
| 98 | // * Colors block |
| 99 | let amColors = computed(() => { |
| 100 | return amSettings.customizedData && |
| 101 | shortcodeData.value.triggered_form in amSettings.customizedData |
| 102 | ? amSettings.customizedData[shortcodeData.value.triggered_form].colors |
| 103 | : defaultCustomizeSettings[shortcodeData.value.triggered_form].colors |
| 104 | }) |
| 105 | |
| 106 | let formData = computed(() => { |
| 107 | return amSettings.customizedData && |
| 108 | shortcodeData.value.triggered_form in amSettings.customizedData |
| 109 | ? amSettings.customizedData[shortcodeData.value.triggered_form] |
| 110 | : defaultCustomizeSettings[shortcodeData.value.triggered_form] |
| 111 | }) |
| 112 | |
| 113 | let cssVars = computed(() => { |
| 114 | return { |
| 115 | '--am-c-primary': amColors.value.colorPrimary, |
| 116 | '--am-c-success': amColors.value.colorSuccess, |
| 117 | '--am-c-error': amColors.value.colorError, |
| 118 | '--am-c-warning': amColors.value.colorWarning, |
| 119 | '--am-c-main-bgr': amColors.value.colorMainBgr, |
| 120 | '--am-c-main-heading-text': amColors.value.colorMainHeadingText, |
| 121 | '--am-c-main-text': amColors.value.colorMainText, |
| 122 | '--am-dvh': dynamicVh.value ? `${dynamicVh.value}px` : '100dvh', |
| 123 | } |
| 124 | }) |
| 125 | |
| 126 | const dialogTitles = { |
| 127 | sbsNew: 'Appointment Booking', |
| 128 | cbf: 'Catalog Booking', |
| 129 | elf: 'Event Booking', |
| 130 | ecf: 'Event Calendar Booking', |
| 131 | } |
| 132 | |
| 133 | let dialogTitle = computed(() => { |
| 134 | return dialogTitles[shortcodeData.value.triggered_form] || 'Booking' |
| 135 | }) |
| 136 | |
| 137 | watchEffect( |
| 138 | () => { |
| 139 | if (shortcodeData.value.triggered_form === 'sbsNew') { |
| 140 | dialogWrapperWidth.value = formData.value.sidebar.options.self.visibility ? '760px' : '520px' |
| 141 | } |
| 142 | |
| 143 | if (shortcodeData.value.triggered_form === 'cbf') { |
| 144 | dialogWrapperWidth.value = '1140px' |
| 145 | } |
| 146 | |
| 147 | if (shortcodeData.value.triggered_form === 'elf') { |
| 148 | dialogWrapperWidth.value = '792px' |
| 149 | } |
| 150 | }, |
| 151 | { flush: 'post' }, |
| 152 | ) |
| 153 | </script> |
| 154 | |
| 155 | <script> |
| 156 | export default { |
| 157 | name: 'AmeliaDialogForms', |
| 158 | } |
| 159 | </script> |
| 160 | |
| 161 | <template> |
| 162 | <AmDialog |
| 163 | v-model="dialogVisibility" |
| 164 | :append-to-body="true" |
| 165 | :modal-class="`amelia-v2-booking am-forms-dialog am-${shortcodeData.triggered_form}`" |
| 166 | :close-on-click-modal="false" |
| 167 | :close-on-press-escape="false" |
| 168 | :custom-styles="cssVars" |
| 169 | :used-for-shortcode="true" |
| 170 | :width="dialogWrapperWidth" |
| 171 | @closed="resetDialogState" |
| 172 | > |
| 173 | <template #title> |
| 174 | <span class="am-sr-only">{{ dialogTitle }}</span> |
| 175 | </template> |
| 176 | <component :is="formList[shortcodeData.triggered_form]"></component> |
| 177 | </AmDialog> |
| 178 | </template> |
| 179 | |
| 180 | <style lang="scss"> |
| 181 | .amelia-v2-booking { |
| 182 | &.am-forms-dialog { |
| 183 | background-color: rgba(0, 0, 0, 0.5); |
| 184 | z-index: 9999999 !important; |
| 185 | |
| 186 | &.am-cbf { |
| 187 | .el-dialog { |
| 188 | margin-top: 32px; |
| 189 | } |
| 190 | } |
| 191 | |
| 192 | .el-dialog { |
| 193 | box-shadow: none; |
| 194 | border-radius: 8px; |
| 195 | |
| 196 | @media only screen and (max-width: 768px) { |
| 197 | margin-top: 0; |
| 198 | width: 100%; |
| 199 | max-width: 100%; |
| 200 | |
| 201 | #amelia-container { |
| 202 | &.am-fs { |
| 203 | &__wrapper { |
| 204 | max-height: unset; |
| 205 | height: var(--am-dvh, 100vh); |
| 206 | } |
| 207 | } |
| 208 | |
| 209 | .am-fs { |
| 210 | &-sb { |
| 211 | &__step-wrapper { |
| 212 | height: calc(var(--am-dvh, 100vh) - 182px); |
| 213 | } |
| 214 | } |
| 215 | |
| 216 | &__main-content { |
| 217 | height: calc(var(--am-dvh, 100vh) - 118px); |
| 218 | } |
| 219 | } |
| 220 | |
| 221 | .am-els { |
| 222 | &__wrapper { |
| 223 | &::-webkit-scrollbar { |
| 224 | width: 6px; |
| 225 | } |
| 226 | |
| 227 | &::-webkit-scrollbar-thumb { |
| 228 | border-radius: 6px; |
| 229 | background: var(--am-c-scroll-op30); |
| 230 | } |
| 231 | |
| 232 | &::-webkit-scrollbar-track { |
| 233 | border-radius: 6px; |
| 234 | background: var(--am-c-scroll-op10); |
| 235 | } |
| 236 | } |
| 237 | } |
| 238 | } |
| 239 | } |
| 240 | |
| 241 | &__footer { |
| 242 | display: none; |
| 243 | } |
| 244 | } |
| 245 | |
| 246 | #amelia-container { |
| 247 | * { |
| 248 | font-family: var(--am-font-family), sans-serif; |
| 249 | box-sizing: border-box; |
| 250 | word-break: break-word; |
| 251 | } |
| 252 | |
| 253 | &.am-fs { |
| 254 | &__wrapper { |
| 255 | margin: 0; |
| 256 | } |
| 257 | } |
| 258 | } |
| 259 | } |
| 260 | } |
| 261 | </style> |
| 262 |