DigitalConsumer.ISS/src/iss-components/site-footer/site-footer.vue

<template>
    <div class="footerImage" id="imgCity" v-if="footerImageURL" >
        <img id="siteFooterImage" :src="footerImageURL" />
    </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
                    v-if="!isForwardButtonHidden"
                    ref="buttonMain"
                    isPrimary
                    :buttonText="buttonText"
                    loaderColor="white"
                    :class="(disableForwardAction || isForwardActionDisabled) && 'form-test-invalid'"
                    :aria-disabled="isForwardActionDisabled"
                    :isDisabled="isForwardActionDisabled"
                    @click-event="buttonClick"
                    data-bs-target="#footerModal"
                    data-bs-dismiss="modal"
                    data-test-id="site-footer-main-button" />
            </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"
                    data-test-id="site-footer-back-button" />
            </div>
        </div>
    </footer>
</template>

<script>
import textLink from "@/ux-components/text-link/text-link";
import buttonMain from "@/ux-components/button-main/button-main";
import { issPageValues } from "@/router/router-constants/issPage-values"

export default {
    name: "siteFooter",
    emits: ['backClicked', 'forwardClicked'],
    props: {
        isForwardActionDisabled: Boolean,
        isBackButtonHidden: { type: Boolean, default: false },
        isForwardButtonHidden: { type: Boolean, default: false },
        cmsWidgetName: String,
    },
    components: {
        textLink,
        buttonMain,
    },
    data() {
        return {
            paddingHeight: 0,
            customButtontext: "",
            disableForwardAction: false,
        };
    },
    mounted() {
        this.paddingHeight = this.includeFooterImage ?  this.getFooterInfoBoxHeight() + 16 : 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");
        },
        footerImageURL()
        {
            return this.getCmsContent(this.cmsWidgetName, "FooterImageURL");
        },
        includeFooterImage()
        {
            const currentPageName = this.getPageNameByQueryString();
            return (currentPageName.toLowerCase() == issPageValues.WELCOME_PAGE);
        }
    },
    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");
        },
        disableForwardButton() {
            this.disableForwardAction = true;
        },
        enableForwardAction() {
            this.disableForwardAction = false;
        }
    },
};
</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
    }
}
.footerImage
{
    text-align: center;
    position: sticky;
}

@media only screen and (max-width: 340px) {
    .footerImage
    {
        bottom: 78px;
    }
}

#siteFooterImage
{
    width: 100%;
}
</style>