132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
<template>
|
|
<div class="row" :style="`padding-bottom: ${paddingHeight}px`"></div>
|
|
<footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
|
|
<div class="row d-flex flex-row-reverse align-items-center vw-100">
|
|
<div class="col button-col d-flex" id="stacked">
|
|
<buttonMain
|
|
ref="buttonMain"
|
|
isPrimary
|
|
:buttonText="buttonText"
|
|
loaderColor="white"
|
|
:class="isForwardActionDisabled && 'form-test-invalid'"
|
|
:aria-disabled="isForwardActionDisabled"
|
|
:isDisabled="isForwardActionDisabled"
|
|
@click-event="buttonClick"
|
|
data-bs-target="#footerModal"
|
|
data-bs-dismiss="modal"
|
|
/>
|
|
</div>
|
|
<div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
|
|
<textLink
|
|
linkType="navigation"
|
|
:text="backLink"
|
|
@click-event="linkClick"
|
|
href="javascript:void(0)"
|
|
data-bs-target="#footerModal"
|
|
data-bs-dismiss="modal"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<script>
|
|
import textLink from "@/ux-components/text-link/text-link";
|
|
import buttonMain from "@/ux-components/button-main/button-main";
|
|
|
|
export default {
|
|
name: "funnelFooter",
|
|
props: {
|
|
isForwardActionDisabled: Boolean,
|
|
isBackButtonHidden: {type: Boolean, default: false},
|
|
cmsWidgetName: String,
|
|
},
|
|
components: {
|
|
textLink,
|
|
buttonMain
|
|
},
|
|
data() {
|
|
return {
|
|
paddingHeight: 0,
|
|
customButtontext: '',
|
|
}
|
|
},
|
|
mounted() {
|
|
this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
|
|
this.$nextTick(() => {
|
|
window.addEventListener('resize', this.onResize);
|
|
})
|
|
},
|
|
beforeUnmount() {
|
|
window.removeEventListener('resize', this.onResize);
|
|
},
|
|
unmounted() {
|
|
document.onkeydown = null;
|
|
},
|
|
computed: {
|
|
backLink(){
|
|
return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
|
|
},
|
|
buttonText(){
|
|
return this.customButtontext ? this.customButtontext : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
|
|
},
|
|
},
|
|
methods: {
|
|
onResize() {
|
|
this.paddingHeight = this.getFooterInfoBoxHeight();
|
|
},
|
|
updateButtonText(newText) {
|
|
this.customButtontext = newText;
|
|
},
|
|
removeLoader(){
|
|
this.$refs.buttonMain.removeLoader();
|
|
document.onkeydown = function (e) {
|
|
return true;
|
|
};
|
|
},
|
|
buttonClick() {
|
|
//prevent keyboard input after button click
|
|
document.onkeydown = function (e) {
|
|
return false;
|
|
};
|
|
this.$emit("ForwardClicked");
|
|
},
|
|
linkClick() {
|
|
this.$emit("BackClicked");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.footer {
|
|
display: flex;
|
|
a {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.col,
|
|
.col-auto,
|
|
.col button {
|
|
width: 100%;
|
|
}
|
|
@media only screen and (min-width: 340px) {
|
|
.col,
|
|
.col-auto,
|
|
.col button {
|
|
width: auto;
|
|
justify-content: flex-end;
|
|
}
|
|
.btn-primary {
|
|
width: auto;
|
|
}
|
|
a {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
& > .container-fluid {
|
|
overflow-x: visible; // needed to fix hidden footer on some iphones
|
|
}
|
|
}
|
|
</style>
|