From b9c035fdab8553bc3d0acdd2bdc4a49828c926b5 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 17 Oct 2019 10:40:48 +0100 Subject: [PATCH] Put cookies message back in The cookie_message block was part of GOV.UK template but is not included in the GOV.UK Frontend template. This adds it back in along with JS to set the cookies from GOV.UK template and styles, taken from the Design System's website (which I assume has the right colour contrast). --- app/assets/javascripts/cookieMessage.js | 16 +++++ .../javascripts/govuk/cookie-functions.js | 62 +++++++++++++++++++ app/assets/javascripts/main.js | 2 + .../components/cookie-message.scss | 8 +++ app/assets/stylesheets/main.scss | 1 + app/templates/admin_template.html | 14 +++-- gulpfile.js | 2 + 7 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 app/assets/javascripts/cookieMessage.js create mode 100644 app/assets/javascripts/govuk/cookie-functions.js create mode 100644 app/assets/stylesheets/components/cookie-message.scss diff --git a/app/assets/javascripts/cookieMessage.js b/app/assets/javascripts/cookieMessage.js new file mode 100644 index 000000000..4e17cbec7 --- /dev/null +++ b/app/assets/javascripts/cookieMessage.js @@ -0,0 +1,16 @@ +(function () { + "use strict"; + + var root = this; + if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; } + + GOVUK.addCookieMessage = function () { + var message = document.getElementById('global-cookie-message'), + hasCookieMessage = (message && GOVUK.cookie('seen_cookie_message') === null); + + if (hasCookieMessage) { + message.style.display = 'block'; + GOVUK.cookie('seen_cookie_message', 'yes', { days: 28 }); + } + }; +}).call(this); diff --git a/app/assets/javascripts/govuk/cookie-functions.js b/app/assets/javascripts/govuk/cookie-functions.js new file mode 100644 index 000000000..fdabe48e3 --- /dev/null +++ b/app/assets/javascripts/govuk/cookie-functions.js @@ -0,0 +1,62 @@ +(function () { + "use strict"; + + var root = this; + if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; } + + /* + Cookie methods + ============== + + Usage: + + Setting a cookie: + GOVUK.cookie('hobnob', 'tasty', { days: 30 }); + + Reading a cookie: + GOVUK.cookie('hobnob'); + + Deleting a cookie: + GOVUK.cookie('hobnob', null); + */ + GOVUK.cookie = function (name, value, options) { + if(typeof value !== 'undefined'){ + if(value === false || value === null) { + return GOVUK.setCookie(name, '', { days: -1 }); + } else { + return GOVUK.setCookie(name, value, options); + } + } else { + return GOVUK.getCookie(name); + } + }; + GOVUK.setCookie = function (name, value, options) { + if(typeof options === 'undefined') { + options = {}; + } + var cookieString = name + "=" + value + "; path=/"; + if (options.days) { + var date = new Date(); + date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000)); + cookieString = cookieString + "; expires=" + date.toGMTString(); + } + if (document.location.protocol == 'https:'){ + cookieString = cookieString + "; Secure"; + } + document.cookie = cookieString; + }; + GOVUK.getCookie = function (name) { + var nameEQ = name + "="; + var cookies = document.cookie.split(';'); + for(var i = 0, len = cookies.length; i < len; i++) { + var cookie = cookies[i]; + while (cookie.charAt(0) == ' ') { + cookie = cookie.substring(1, cookie.length); + } + if (cookie.indexOf(nameEQ) === 0) { + return decodeURIComponent(cookie.substring(nameEQ.length)); + } + } + return null; + }; +}).call(this); diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 10d0b2a50..3f9166828 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -1,5 +1,7 @@ window.GOVUKFrontend.initAll(); +$(() => GOVUK.addCookieMessage()); + $(() => $("time.timeago").timeago()); $(() => GOVUK.stickAtTopWhenScrolling.init()); diff --git a/app/assets/stylesheets/components/cookie-message.scss b/app/assets/stylesheets/components/cookie-message.scss new file mode 100644 index 000000000..559e07bbf --- /dev/null +++ b/app/assets/stylesheets/components/cookie-message.scss @@ -0,0 +1,8 @@ +.notify-cookie-message { + @include govuk-font($size: 16); + padding: govuk-spacing(3) 0; + + .js-enabled & { + display: none; + } +} diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index a5dcef4ac..d415fbda5 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -37,6 +37,7 @@ $path: '/static/images/'; // Specific to this application @import 'globals'; @import 'grids'; +@import 'components/cookie-message'; @import 'components/site-footer'; @import 'components/placeholder'; @import 'components/sms-message'; diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html index 3152a60d5..c69abfb15 100644 --- a/app/templates/admin_template.html +++ b/app/templates/admin_template.html @@ -25,11 +25,15 @@ {% block per_page_title %}{% endblock %} – GOV.UK Notify {% endblock %} -{% block cookie_message %} -

- GOV.UK Notify uses cookies to make the site simpler. - Find out more about cookies -

+{% block bodyStart %} + {% block cookie_message %} +
+

+ GOV.UK Notify uses cookies to make the site simpler. + Find out more about cookies +

+
+ {% endblock %} {% endblock %} {% block header %} diff --git a/gulpfile.js b/gulpfile.js index 9b790fc52..aeb0b19af 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -85,6 +85,8 @@ const javascripts = () => { return src([ paths.toolkit + 'javascripts/govuk/modules.js', paths.toolkit + 'javascripts/govuk/show-hide-content.js', + paths.src + 'javascripts/govuk/cookie-functions.js', + paths.src + 'javascripts/cookieMessage.js', paths.src + 'javascripts/stick-to-window-when-scrolling.js', paths.src + 'javascripts/detailsPolyfill.js', paths.src + 'javascripts/apiKey.js',