Skip to content

Commit

Permalink
[Westminster] Add cookie banner.
Browse files Browse the repository at this point in the history
  • Loading branch information
dracos committed May 9, 2024
1 parent a5cb4ff commit 8ec9729
Show file tree
Hide file tree
Showing 3 changed files with 231 additions and 0 deletions.
42 changes: 42 additions & 0 deletions templates/web/westminster/footer_extra_js.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,45 @@
);
END
%]

[% IF c.config.BASE_URL == "https://www.fixmystreet.com" OR c.config.BASE_URL == 'https://staging.fixmystreet.com';
scripts.push( version('/cobrands/westminster/vendor/banner.js') );
%]
<div class="westminster-cookie-banner">
<div class="alert cookiealert" role="alert">
<div class="row p-6">
<div class="col text-left">
<div>
<span class="header-4 text-white"
>We use cookies on this site to enhance your user experience</span
>
<p>By clicking the Accept button, you agree to us doing so.</p>
<div>
<a
href="https://www.westminster.gov.uk/data-protection/privacy"
class="text-link-colour underline hover:text-link-hover-colour"
target="_blank"
rel="noopener noreferrer"
>More info on our cookie policy</a
>
</div>
</div>
</div>
<div class="col ml-auto text-right">
<div class="text-center">
<button
type="button"
id="cookiepolicy"
class="primary-button bg-button-default"
>
Accept cookies policy
</button>
<div class="mt-3">
<a href="/report-it" id="declinepolicy">Decline cookies policy</a>
</div>
</div>
</div>
</div>
</div>
</div>
[% END %]
123 changes: 123 additions & 0 deletions web/cobrands/westminster/base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -272,3 +272,126 @@ body.alertpage, body.authpage, body.twothirdswidthpage {
@include btn-medium-primary
}
}

.westminster-cookie-banner {
*, ::before, ::after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}

.cookiealert.show {
opacity: 1;
visibility: visible;
transform: translateY(0%);
transition: all 200ms;
}

.cookiealert {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin: 0 !important;
z-index: 999;
opacity: 0;
visibility: hidden;
border-radius: 0;
transform: translateY(100%);
transition: all 200ms ease-out;
color: #fff;
background: #0B2265;
border-top: 0.4rem solid #ffd420;
font-family: "Source Sans Pro" !important;
font-size: 19px;
line-height: 1.78125rem;
}


.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
position: relative;
}

.p-6 {
padding: 1.5rem;
}

.text-left {
text-align: left;
}

.text-right {
text-align: right;
}

.text-center {
text-align: center;
}

.ml-auto {
margin-left: auto;
}


.header-4 {
font-size: 1.5rem;
font-family: "Source Sans Pro";
letter-spacing: 0;
color: #0B2265;
line-height: 1.9375rem;
}

.cookiealert p {
font-size: 1.0625rem;
line-height: 1.59375rem;
margin-top: 0;
margin-bottom: 0.625rem;
}

.cookiealert a {
color: #ffffff;
text-decoration: underline;
}

.text-link-colour {
color: rgb(0, 89, 175);
}

.text-white {
color: rgb(255, 255, 255);
}

button, [type='button'] {
background-color: transparent;
background-image: none;
cursor: pointer;
text-transform: none;
}

.primary-button {
font-size: 1.1475rem;
line-height: 1.336rem;
background-color: #0335ff;
color: #ffffff;
padding: 0.5em;
text-align: center;
text-decoration: none;
display: inline-block;
box-shadow: 0 0.125rem 0.735rem 0 rgba(0, 0, 0, 0.3);
outline: none;
border-radius: 0.4rem;
}

.bg-button-default {
background-color: rgb(3, 53, 255);
}

.mt-3 {
margin-top: 0.75rem;
}
}
66 changes: 66 additions & 0 deletions web/cobrands/westminster/vendor/banner.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
const reportItCookieDefault = "westminster-city-council_cookiecontrol-version";
const reportItCookieDefaultContent = "1.0.0";
const reportItCookie = "westminster-city-council_cookiecontrol";
const reportItCookieContent = "2";
const googleTagManagerUrl =
"https://www.googletagmanager.com/gtag/js?id=G-89XXDEKFEX";
const cookiePolicyButton = document.querySelector("#cookiepolicy");
const cookieAlert = document.querySelector(".cookiealert");
const declineLink = document.querySelector("#declinepolicy");

const loadGoogleAnalyticsScripts = () => {
var script1 = document.createElement("script");
script1.async = true;
script1.src = googleTagManagerUrl;

var script2 = document.createElement("script");
script2.innerHTML = `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-89XXDEKFEX');
`;

document.body.appendChild(script1);
document.body.appendChild(script2);
};

const isScriptAdded = (scriptUrl) => {
const scripts = document.getElementsByTagName("script");
const scriptExists = [...scripts].some((script) => script.src === scriptUrl);
return scriptExists;
};

const removeBanner = () => cookieAlert.classList.remove("show");

const placeGoogleAnalyticsCookie = () => {
document.cookie = `${reportItCookie}=${reportItCookieContent}`;
document.cookie = `${reportItCookieDefault}=${reportItCookieDefaultContent}`;
if (!isScriptAdded(googleTagManagerUrl)) {
loadGoogleAnalyticsScripts();
}
removeBanner();
};

const declineCookie = (event) => {
event.preventDefault();
document.cookie = `${reportItCookieDefault}=${reportItCookieDefaultContent}`;
removeBanner();
};

cookiePolicyButton.addEventListener("click", () =>
placeGoogleAnalyticsCookie()
);
declineLink.addEventListener("click", (event) => declineCookie(event));

window.addEventListener("load", () => {
const cookie = document.cookie;
if (cookie.includes(reportItCookieDefault)) {
cookieAlert.classList.remove("show");
} else {
cookieAlert.classList.add("show");
}
if (cookie.includes(reportItCookie) && !isScriptAdded(googleTagManagerUrl)) {
loadGoogleAnalyticsScripts();
}
});

0 comments on commit 8ec9729

Please sign in to comment.