132 lines
4.3 KiB
Vue
132 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
class="site-header d-flex justify-content-center align-items-center flex-column py-2"
|
|
:style="logoBackgroundStyle">
|
|
<img
|
|
id="siteHeaderImage"
|
|
class="img-fluid"
|
|
:src="imageSrc"
|
|
:alt="altText" />
|
|
<menuModal />
|
|
</div>
|
|
<alert
|
|
v-if="displayGlobalAlert"
|
|
class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0"
|
|
cmsWidgetName="GlobalAlert"
|
|
:manualHeadline="globalAlertMessage.messageHeadline"
|
|
:manualCopy="globalAlertMessage.messageCopy"
|
|
:alertClass="globalAlertMessage.type"
|
|
:isDismissible="globalAlertMessage.isDismissible" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import menuModal from '@/iss-components/site-header/menu-modal/menu-modal.vue';
|
|
import alert from '@/ux-components/alert/alert.vue';
|
|
import { useMainStore } from '@/store';
|
|
import eventBus from '@/helpers/event-bus/event-bus';
|
|
import { globalEvents } from '@/constants/events';
|
|
|
|
export default ({
|
|
name: 'site-header',
|
|
components: {
|
|
menuModal,
|
|
alert
|
|
},
|
|
props: {
|
|
cmsWidgetName: String
|
|
},
|
|
data() {
|
|
return {
|
|
displayGlobalAlert: false,
|
|
globalAlertMessage: {
|
|
isDismissible: false,
|
|
messageCopy: '',
|
|
messageHeadline: '',
|
|
type: ''
|
|
},
|
|
cmsClientHeader: null
|
|
};
|
|
},
|
|
computed: {
|
|
imageSrc() {
|
|
return this.cmsClientHeader ? this.cmsClientHeader.imageUrl : '';
|
|
},
|
|
altText() {
|
|
return this.cmsClientHeader ? this.cmsClientHeader.altText : '';
|
|
},
|
|
logoBackgroundStyle() {
|
|
return {
|
|
'background-color': this.cmsClientHeader ? this.cmsClientHeader.hexCode : '#FFFFFF'
|
|
};
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(this.setupHeader);
|
|
|
|
// Check if alert event is on the bus
|
|
const alertEvent = eventBus.readAndPopEventFromBus(
|
|
globalEvents.Categories.GLOBAL_ALERT,
|
|
globalEvents.SubCategories.PAGE_NOT_FOUND
|
|
);
|
|
// If alert event is on the bus, then display the alert
|
|
if (alertEvent !== undefined) {
|
|
this.displayGlobalAlert = true;
|
|
this.globalAlertMessage = alertEvent;
|
|
}
|
|
|
|
// load client customization overrides
|
|
const clientOverrideClass = this.mainStore.issConfig.styleSheet.trim();
|
|
if (clientOverrideClass
|
|
&& clientOverrideClass !== ''
|
|
&& !document.getElementsByTagName('body')[0].className.split(' ').includes(clientOverrideClass)) {
|
|
document.getElementsByTagName('body')[0].className += ` ${clientOverrideClass}`;
|
|
}
|
|
},
|
|
methods: {
|
|
setupHeader() {
|
|
const overrideCmsHeaderAnswers = this.getCmsContent(this.cmsWidgetName, 'Answers');
|
|
if (overrideCmsHeaderAnswers && Array.isArray(overrideCmsHeaderAnswers)) {
|
|
const { parentAccountNumber } = useMainStore().issConfig;
|
|
let headerOverrideToUse = overrideCmsHeaderAnswers
|
|
.find((answer) => answer.AccountNumber === parentAccountNumber.toString());
|
|
if (headerOverrideToUse == null) {
|
|
headerOverrideToUse = overrideCmsHeaderAnswers
|
|
.find((answer) => answer.AccountNumber === '0');
|
|
}
|
|
|
|
if (headerOverrideToUse) {
|
|
this.cmsClientHeader = {
|
|
altText: headerOverrideToUse.AltText,
|
|
clientName: headerOverrideToUse.ClientName,
|
|
hexCode: headerOverrideToUse.HexCode,
|
|
imageId: headerOverrideToUse.ImageId,
|
|
imageUrl: headerOverrideToUse.AnswerImageUrl
|
|
};
|
|
|
|
return;
|
|
}
|
|
}
|
|
const { clientHeader } = useMainStore().issConfig;
|
|
if (clientHeader) {
|
|
this.cmsClientHeader = clientHeader;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.site-header {
|
|
height: 56px;
|
|
position: relative;
|
|
}
|
|
.alert {
|
|
left: 0;
|
|
top: 72px;
|
|
}
|
|
#siteHeaderImage {
|
|
height: 2.5rem;
|
|
}
|
|
</style>
|