Manual open of modal
This commit is contained in:
Leah Schumann
parent
91df4b3165
commit
23d30d6037
5 changed files with 132 additions and 6 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<!-- Modal -->
|
||||
<div
|
||||
class="modal fade modal-component"
|
||||
v-on="{ 'hidden.bs.modal': resetButtonStyle, 'shown.bs.modal': onShownCallback }"
|
||||
v-on="{ 'hidden.bs.modal': resetButtonStyle, 'shown.bs.modal': onModalOpenedCallback }"
|
||||
:id="cmsWidgetName"
|
||||
tabindex="-1"
|
||||
aria-labelledby="ModalComponentLabel"
|
||||
|
|
@ -44,12 +44,13 @@
|
|||
|
||||
<script>
|
||||
import buttonMain from "@/ux-components/button-main/button-main";
|
||||
import { Modal } from "bootstrap";
|
||||
|
||||
export default {
|
||||
name: "modal",
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
onShownCallback: {
|
||||
onModalOpenedCallback: {
|
||||
type: Function,
|
||||
},
|
||||
|
||||
|
|
@ -59,6 +60,15 @@ export default {
|
|||
// if undefined, footer button closes modal
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myModal: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.myModal = new Modal(document.getElementById(this.cmsWidgetName));
|
||||
|
||||
},
|
||||
computed: {
|
||||
ModalHeadline() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||
|
|
@ -86,8 +96,11 @@ export default {
|
|||
resetButtonStyle() {
|
||||
this.$refs.buttonMain.resetButtonStyle();
|
||||
},
|
||||
openModal() {
|
||||
this.myModal.show();
|
||||
},
|
||||
closeModal() {
|
||||
this.$refs.modalXButton.click();
|
||||
this.myModal.hide();
|
||||
},
|
||||
async footerButtonClick() {
|
||||
if (this.footerButtonCallback) {
|
||||
|
|
|
|||
|
|
@ -117,7 +117,10 @@ export default {
|
|||
}),
|
||||
},
|
||||
validationRules: String,
|
||||
captureApartmentNumberOrBusinessName: false,
|
||||
captureApartmentNumberOrBusinessName: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div class="text-center">
|
||||
<label
|
||||
:for="displayModalLink"
|
||||
:aria-label="questionText"
|
||||
class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
|
||||
:class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
|
||||
v-html="questionText"></label>
|
||||
<div class="update-mobile-location-text-link">
|
||||
<textLink
|
||||
id="displayModalLink"
|
||||
linkType="text"
|
||||
:text="this.mobileLocationDisplayText"
|
||||
href="#!"
|
||||
data-bs-toggle="modal"
|
||||
:data-bs-target="getModalId"
|
||||
aria-label="Modal window" />
|
||||
</div>
|
||||
</div>
|
||||
<modal
|
||||
ref="mobileServiceModal"
|
||||
:cmsWidgetName="this.modalWidgetName"
|
||||
:onModalOpenedCallback="onModalOpened"
|
||||
:footerButtonCallback="saveMobileLocationData">
|
||||
<div class="ps-4 pe-4 pb-4">
|
||||
<addressQuestions ref="addressQuestions" captureApartmentNumberOrBusinessName ="true" />
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import modal from "@/digital-components/modal/modal";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
||||
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
|
||||
|
||||
//Supporting Files
|
||||
import { defineRule } from "vee-validate";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { isNoUnitNumericStyleProp } from "@vue/shared";
|
||||
|
||||
// Define Validation Rules
|
||||
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
|
||||
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
|
||||
|
||||
export default {
|
||||
name: "mobile-location-modal-question",
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
modalWidgetName: String,
|
||||
textboxQuestionWidgetName: String,
|
||||
alertNonServiceableZipWidgetName: String,
|
||||
alertInvalidZipWidgetName: String,
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
getModalId() {
|
||||
return "#" + this.modalWidgetName;
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||
},
|
||||
mobileLocationDisplayText() {
|
||||
|
||||
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
modal,
|
||||
addressQuestions
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.update-zip-text-link::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 13px;
|
||||
height: 16px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.49635 1.00142e-07C5.64734 -0.000153295 4.80722 0.175918 4.0274 0.517444C3.24757 0.858969 2.54443 1.35877 1.96099 1.98626C0.765713 3.27588 0.0999756 4.98141 0.0999756 6.75394C0.0999756 8.52646 0.765713 10.232 1.96099 11.5216L5.98324 15.777C6.04954 15.8475 6.12918 15.9036 6.21736 15.9419C6.30555 15.9802 6.40045 16 6.49635 16C6.59225 16 6.68716 15.9802 6.77534 15.9419C6.86353 15.9036 6.94317 15.8475 7.00946 15.777L11.0317 11.52C12.2391 10.2383 12.909 8.52914 12.8999 6.75394C12.9094 4.97818 12.2394 3.26832 11.0317 1.98626C10.4481 1.35899 9.74493 0.859347 8.96514 0.517839C8.18535 0.176331 7.34532 0.000130509 6.49635 1.00142e-07V1.00142e-07ZM6.49635 9.13131C6.02507 9.13131 5.56437 8.98913 5.17251 8.72275C4.78065 8.45637 4.47524 8.07776 4.29488 7.63479C4.11453 7.19181 4.06734 6.70438 4.15928 6.23412C4.25123 5.76387 4.47817 5.33191 4.81142 4.99287C5.14467 4.65384 5.56925 4.42295 6.03148 4.32941C6.49371 4.23587 6.97282 4.28388 7.40823 4.46736C7.84364 4.65085 8.21579 4.96157 8.47762 5.36023C8.73945 5.7589 8.87921 6.2276 8.87921 6.70707C8.87921 7.34974 8.62837 7.96611 8.18185 8.4207C7.73532 8.87528 7.12964 9.13088 6.49794 9.13131H6.49635Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
||||
background-size: contain;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,6 +10,10 @@ fmg
|
|||
textboxQuestionWidgetName="ServiceZipQuestionWidget"
|
||||
alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
|
||||
alertInvalidZipWidgetName="AlertInvalidZipWidget" />
|
||||
<mobileLocationModalQuestion
|
||||
cmsWidgetName="MobileLocationModalWidget"
|
||||
modalWidgetName="LocationModalWidget"
|
||||
textboxQuestionWidgetName="MobileLocationQuestionWidget" />
|
||||
<funnel-footer
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
|
|
@ -22,6 +26,7 @@ fmg
|
|||
<script>
|
||||
// Components
|
||||
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
|
||||
import mobileLocationModalQuestion from "@/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question";
|
||||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
|
|
@ -65,6 +70,7 @@ export default {
|
|||
},
|
||||
components: {
|
||||
serviceZipModalQuestion,
|
||||
mobileLocationModalQuestion,
|
||||
funnelHeader,
|
||||
funnelFooter,
|
||||
funnelSubHeader,
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
<template>
|
||||
<div class="text-center">
|
||||
<label
|
||||
:for="serviceZipCodeInput"
|
||||
:for="displayModalLink"
|
||||
:aria-label="questionText"
|
||||
class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
|
||||
:class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
|
||||
v-html="questionText"></label>
|
||||
<div class="update-zip-text-link">
|
||||
<textLink
|
||||
id="displayModalLink"
|
||||
linkType="text"
|
||||
:text="this.serviceZipDisplayText"
|
||||
href="#!"
|
||||
data-bs-toggle="modal"
|
||||
@click-event="openZipCodeModal"
|
||||
:data-bs-target="getModalId"
|
||||
aria-label="Modal window" />
|
||||
</div>
|
||||
|
|
@ -87,6 +88,9 @@ export default {
|
|||
alertInvalidZipWidgetName: String,
|
||||
},
|
||||
methods: {
|
||||
openZipCodeModal() {
|
||||
this.$refs.zipCodeInputModal.myModal.show();
|
||||
},
|
||||
getZipFromStore() {
|
||||
return this.$store.getters.order.serviceLocation.zipCode;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue