<div class="sitewide-message">
<p class="sitewide-message__text">
This is a sitewide message. </p>
</div>
.sitewide-message,
.cookie-message {
@include rem(padding, $grid-typo-spacing-xxs);
background: $sitewideMessageBackgroundColour;
box-sizing: border-box;
color: $sitewideMessageColour;
position: relative;
z-index: 5;
a {
color: $sitewideMessageColour;
}
}
.sitewide-message {
bottom: 0;
left: 0;
position: fixed;
width: 100vw;
.enhanced & {
display: none;
}
.show-sitewide-message & {
// class is added to the body with javascript if cookie present, meaning the message has already been displayed.
display: block;
}
}
.sitewide-message__text,
.cookie-message__text {
@include font-size-with-line-height($bodyFontSize, $smallTextLineHeight);
margin: 0;
padding-right: $grid-typo-spacing-xs + $grid-typo-spacing-xxxs;
}
.cookie-message {
background: $cookieMessageBackgroundColour;
border-bottom: 1px $ruleAndSeparatorColour solid;
color: $cookieMesssageColour;
.enhanced & {
bottom: 0;
display: none;
left: 0;
position: fixed;
width: calc(100vw - #{$grid-typo-spacing-l});
z-index: 6;
@include respond-to($grid-breakpoint-s) {
width: 100vw;
}
}
.show-cookie-message & {
// class is added to the body with javascript if cookie present, meaning the message has already been displayed.
display: block;
}
a {
color: $cookieMesssageColour;
}
}
.cookie-message__button,
.sitewide-message__button {
@include image-replacement;
background-color: $transparent;
height: 1.5em;
margin: 0;
padding: 0;
position: absolute;
right: $grid-typo-spacing-xs;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 1.5em;
.enhanced &:focus,
.enhanced &:hover {
background-color: $transparent;
transform: translateY(-50%) rotate(35deg);
}
&:before {
content: none;
}
}
.cookie-message__button {
@extend %icon--cross--white;
background-size: 15px 15px;
}
button.cookie-message__button {
// over rides
@extend %button__overrides--general;
min-width: auto;
}
.sitewide-message__button {
@extend %icon--cross--black;
background-size: 10px 10px;
transform: translateY(-50%) rotate(45deg);
.enhanced &:hover {
transform: translateY(-50%) rotate(40deg);
}
}
import Cookies from '../../../libraries/js.cookie.js';
import { Button } from '../../utils/dom-builders.js';
/**
* This function manages cookie and sitewide messages
*/
const cookieMessage = function() {
const sitewideMessage = document.querySelector('.sitewide-message');
const cookieMessage = document.querySelector('.cookie-message');
const cookieValue = Cookies.get('cookieSeen');
const sitewideMessageCookie = Cookies.get('swSeen');
const dismissButton = Button(['cookie-message__button'], 'Remove cookie message');
const swDismissButton = Button(['sitewide-message__button'], 'Remove sitewide message');
if (!sitewideMessage) {
document.body.classList.add('sitewide-message-not-present');
}
if (typeof cookieValue === 'undefined') { // then show the cookie message, add the button and set the cookie
document.body.classList.add('show-cookie-message');
if (cookieMessage) {
cookieMessage.appendChild(dismissButton);
dismissButton.addEventListener('click', e => {
document.body.classList.add('show-sitewide-message');
document.body.classList.remove('show-cookie-message');
});
}
Cookies.set('cookieSeen', 'true', { expires: 28 });
} else {
document.body.classList.add('show-sitewide-message');
}
if (typeof sitewideMessageCookie === 'undefined') { // then show the sitewide message, add the button and set the cookie
if (sitewideMessage) {
sitewideMessage.appendChild(swDismissButton);
swDismissButton.addEventListener('click', e => {
Cookies.set('swSeen', 'true', { expires: 1 });
document.body.classList.remove('show-sitewide-message');
});
}
}
};
export {
cookieMessage
};
This is a universal sitewide message component. It has two display modes, sitewide-message or cookie-message. The modes can be switched by specifiyng the class variable.
As of now, the close button is attached in JS in the messages.js module.
{
"class": "sitewide-message",
"message_text": "This is a sitewide message."
}