DigitalConsumer.FixMyGlass/src/fmg-components/nav-bar/nav-bar.vue

<template>
    <div class="row"></div>
    <div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
        <div
            class="row d-flex justify-content-between vw-100"
            :class="[
                buttonSize
                    ? 'flex-column align-items-stretch'
                    : 'flex-row-reverse align-items-center',
            ]">
            <div
                :class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
                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-test-id="nav-bar-main-button"
                    data-bs-dismiss="modal"
                    v-if="!isSubmitHidden" />
            </div>
            <div
                v-if="!isBackButtonHidden"
                class="col-auto link-col py-1 text-break"
                :class="[buttonSize ? 'back-centered-below mt-5' : '']">
                <textLink
                    linkType="navigation"
                    :text="backLink"
                    useLoadingModal
                    @click-event="linkClick"
                    href="javascript:void(0)"
                    data-bs-target="#footerModal"
                    data-bs-dismiss="modal" />
            </div>
        </div>
    </div>
</template>

<script>
import textLink from "@/ux-components/text-link/text-link";
import buttonMain from "@/ux-components/button-main/button-main";
import analyticsMixin from "@/mixins/analytics-mixin";

export default {
    name: "navbar",
    emits: ["BackClicked", "ForwardClicked"], // <--- should remove oodles of warnings in dev tools
    props: {
        isForwardActionDisabled: Boolean,
        isBackButtonHidden: { type: Boolean, default: false },
        cmsWidgetName: String,
        buttonSize: { type: Boolean, default: false },
        isSubmitHidden: { type: Boolean, default: false },
    },
    components: {
        textLink,
        buttonMain,
    },
    data() {
        return {
            customButtontext: "",
        };
    },

    unmounted() {
        document.onkeydown = null;
    },
    computed: {
        backLink() {
            return this.getCmsContent(this.cmsWidgetName, "BackButtonText");
        },
        buttonText() {
            return this.customButtontext
                ? this.customButtontext
                : this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
        },
    },
    methods: {
        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;
            };
            // check session expired and initSession to recreate cookies
            if (analyticsMixin.methods.sessionExpired()) {
                this.routeReturnUser();
            } else {
                this.$emit("ForwardClicked");
            }
        },
        linkClick() {
            // check session expired and initSession to recreate cookies
            if (analyticsMixin.methods.sessionExpired()) {
                this.routeReturnUser();
            } else {
                this.$emit("BackClicked");
            }
        },
        routeReturnUser() {
            this.$router.sendToReturnUser();
        },
    },
};
</script>

<style lang="scss" scoped>
.nav-bar {
    overflow: visible;
    display: flex;
    padding: 0;
    position: relative;
    z-index: 2;
    a {
        display: flex;
        justify-content: center;
    }
    .col,
    .col-auto,
    .col button {
        width: 100%;
    }

    .back-centered-below {
        display: flex;
        justify-content: center;
    }

    @media only screen and (min-width: 340px) {
        .col,
        .col-auto,
        .col button {
            width: auto;
            justify-content: flex-end;
        }

        .back-centered-below {
            display: flex;
            justify-content: center;
        }

        .btn-primary {
            width: auto;
        }
        a {
            display: flex;
            justify-content: flex-start;
        }
    }
    & > .container-fluid {
        overflow-x: visible; // needed to fix hidden footer on some iphones
    }
    .medium-button {
        // Define styles for a medium button (default size)
        justify-content: flex-end;
        width: auto;
    }
    .large-button {
        justify-content: center;
        .btn-primary {
            width: 100%;
            justify-content: center;
        }
    }
}
</style>