mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-09 16:39:49 -04:00
Cookie streamlining (#493)
* remove cookie banner * remove form from cookies.html * move cookie content to privacy page
This commit is contained in:
Steven Reilly
@@ -1,84 +0,0 @@
|
||||
window.GOVUK = window.GOVUK || {};
|
||||
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
||||
|
||||
(function (Modules) {
|
||||
function CookieSettings () {}
|
||||
|
||||
CookieSettings.prototype.start = function ($module) {
|
||||
this.$module = $module[0];
|
||||
|
||||
this.$module.submitSettingsForm = this.submitSettingsForm.bind(this);
|
||||
|
||||
document.querySelector('form[data-module=cookie-settings]')
|
||||
.addEventListener('submit', this.$module.submitSettingsForm);
|
||||
|
||||
this.setInitialFormValues();
|
||||
};
|
||||
|
||||
CookieSettings.prototype.setInitialFormValues = function () {
|
||||
var currentConsentCookie = window.GOVUK.getConsentCookie('consent');
|
||||
|
||||
if (!currentConsentCookie) { return; }
|
||||
|
||||
var radioButton;
|
||||
|
||||
if (currentConsentCookie.analytics) {
|
||||
radioButton = document.querySelector('input[name=cookies-analytics][value=on]');
|
||||
} else {
|
||||
radioButton = document.querySelector('input[name=cookies-analytics][value=off]');
|
||||
}
|
||||
|
||||
radioButton.checked = true;
|
||||
};
|
||||
|
||||
CookieSettings.prototype.submitSettingsForm = function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var formInputs = event.target.querySelectorAll("input[name=cookies-analytics]");
|
||||
var options = {};
|
||||
|
||||
for ( var i = 0; i < formInputs.length; i++ ) {
|
||||
var input = formInputs[i];
|
||||
if (input.checked) {
|
||||
var value = input.value === "on" ? true : false;
|
||||
|
||||
options.analytics = value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
window.GOVUK.setConsentCookie(options);
|
||||
|
||||
this.showConfirmationMessage();
|
||||
|
||||
if(window.GOVUK.hasConsentFor('analytics')) {
|
||||
window.GOVUK.initAnalytics();
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
CookieSettings.prototype.showConfirmationMessage = function () {
|
||||
var confirmationMessage = document.querySelector('div[data-cookie-confirmation]');
|
||||
var previousPageLink = document.querySelector('.cookie-settings__prev-page');
|
||||
var referrer = CookieSettings.prototype.getReferrerLink();
|
||||
|
||||
document.body.scrollTop = document.documentElement.scrollTop = 0;
|
||||
|
||||
if (referrer && referrer !== document.location.pathname) {
|
||||
previousPageLink.href = referrer;
|
||||
previousPageLink.style.display = "block";
|
||||
} else {
|
||||
previousPageLink.style.display = "none";
|
||||
}
|
||||
|
||||
confirmationMessage.style.display = "block";
|
||||
};
|
||||
|
||||
CookieSettings.prototype.getReferrerLink = function () {
|
||||
return document.referrer ? new URL(document.referrer).pathname : false;
|
||||
};
|
||||
|
||||
Modules.CookieSettings = CookieSettings;
|
||||
})(window.GOVUK.Modules);
|
||||
|
||||
@@ -1,122 +0,0 @@
|
||||
// GOV.UK Publishing components cookie banner styles
|
||||
// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
|
||||
|
||||
// component uses .govuk-body and .govuk-button classes from govuk-frontend
|
||||
@import 'core/typography';
|
||||
@import 'components/button/_button';
|
||||
|
||||
.notify-cookie-banner__wrapper {
|
||||
@include govuk-responsive-padding(4, "top");
|
||||
@include govuk-responsive-padding(5, "bottom");
|
||||
}
|
||||
|
||||
// component should only be shown if JS is available, by the cookieMessage JS, so hide by default
|
||||
.notify-cookie-banner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notify-cookie-banner__buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__button,
|
||||
.notify-cookie-banner__link {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.notify-cookie-banner__button {
|
||||
display: inline-block;
|
||||
flex: 1 0;
|
||||
padding-left: govuk-spacing(9);
|
||||
padding-right: govuk-spacing(9);
|
||||
margin-bottom: govuk-spacing(2);
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
flex: 0 0 150px;
|
||||
padding-left: govuk-spacing(2);
|
||||
padding-right: govuk-spacing(2);
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__button-accept {
|
||||
margin-right: govuk-spacing(4);
|
||||
}
|
||||
|
||||
.notify-cookie-banner__link {
|
||||
@include govuk-font(19);
|
||||
line-height: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 9px 0px 6px;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
display: inline;
|
||||
width: auto;
|
||||
margin-left: govuk-spacing(6);
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__confirmation {
|
||||
display: none;
|
||||
position: relative;
|
||||
padding: govuk-spacing(4) 0;
|
||||
|
||||
@include govuk-media-query($from: desktop) {
|
||||
padding: govuk-spacing(4);
|
||||
}
|
||||
|
||||
// This element is focused using JavaScript so that it's being read out by screen readers
|
||||
// for this reason we don't want to show the default outline or emphasise it visually using `govuk-focused-text`
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__confirmation-message,
|
||||
.notify-cookie-banner__hide-button {
|
||||
display: block;
|
||||
|
||||
@include govuk-media-query($from: desktop) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__confirmation-message {
|
||||
margin-right: govuk-spacing(4);
|
||||
|
||||
@include govuk-media-query($from: desktop) {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__hide-button {
|
||||
@include govuk-font($size: 19);
|
||||
color: $govuk-link-colour;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
padding: govuk-spacing(0);
|
||||
margin-top: govuk-spacing(2);
|
||||
right: govuk-spacing(3);
|
||||
cursor: pointer;
|
||||
|
||||
@include govuk-media-query($from: desktop) {
|
||||
margin-top: govuk-spacing(0);
|
||||
position: absolute;
|
||||
right: govuk-spacing(4);
|
||||
}
|
||||
}
|
||||
|
||||
// Additions
|
||||
|
||||
// Override margin-bottom, inherited from using .govuk-body class
|
||||
.notify-cookie-banner__confirmation-message {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -37,7 +37,6 @@ $path: '/static/images/';
|
||||
// Specific to this application
|
||||
@import 'local/typography';
|
||||
@import 'grids';
|
||||
@import 'components/cookie-message';
|
||||
@import 'components/site-footer';
|
||||
@import 'components/placeholder';
|
||||
@import 'components/sms-message';
|
||||
@@ -81,7 +80,6 @@ $path: '/static/images/';
|
||||
@import 'views/send';
|
||||
@import 'views/get_started';
|
||||
@import 'views/history';
|
||||
@import 'views/cookies';
|
||||
@import 'views/webauthn';
|
||||
|
||||
// TODO: break this up
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
.cookie-settings__form-wrapper {
|
||||
display: none;
|
||||
|
||||
.js-enabled & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-settings__no-js {
|
||||
.js-enabled & {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user