Merge branch '129-revise-cookie-compliance-to-meet-eu-regs'

Author: delphidabbler

_config.yml

@@ -31,7 +31,7 @@ defaults:
       layout: "default"
 
 # change the following to false to re-enable flash pop-ups
-ignore-flash: true
+ignore-flash: false
 
 # minify CSS geerated from SASS
 sass:

_includes/footer.html

@@ -22,10 +22,13 @@
     <p>
       <span role="license" class="hidden-xs">Website content copyright &copy; {{ "now" | date: "%Y" }}, <a href="https://gravatar.com/delphidabbler">Peter Johnson</a> and licensed under the Creative Commons Attribution 4.0 International (<a href="{{ site.data.core.cc-40-url }}" aria-label="{{ site.data.core.cc-40-link-title }}">CC BY-4.0</a>) license.</span> For full details of license, copyright and 3rd party code see the <a href="{{ site.data.core.credits-link }}" aria-label="{{ site.data.core.credits-link-title }}">license &amp; credits page</a>.
     </p>
+    <p id="cookie-consent--opt-out-text">
+      <small>You are opted in to <a href="/cookies.html">cookies</a>. <a href="#" id="cookie-consent--revoke">Opt out</a>.</small>
+    </p>
     <p>
       <small>Build date: {{ site.time }}</small>
     </p>
   </div> <!-- .pagefoot-credits -->
 
 </footer> <!-- /.pagefoot -->
-<!-- END footer -->
+<!-- END footer -->

_sass/_dd-custom-styles.scss

@@ -879,13 +879,24 @@ a {
 // ** Custom
 #cookie-popup {
 
-  background-color: $brand-danger;
+  background-color: $navbar-default-bg;
   color: white;
   border: 1px white solid;
   padding: 1rem;
+  font-size: $font-size-small;
+  position: fixed;
+  bottom: 0px;
+  z-index: 999;
+  margin: 0;
+  width: 100%;
+
+  &:hover {
+    opacity: 1;
+  }
 
   p.cookie-msg {
     padding: 0;
+    margin-bottom: $line-height-computed / 4;
 
     a {
       text-decoration: underline;
@@ -894,19 +905,26 @@ a {
 }
 
   p.cookie-btn {
+
     padding: 0;
-    text-align: right;
+    text-align: center;
+    margin-bottom: 0;
+    margin-top: 0;
 
     button {
-      text-align: center;
-      background-color: transparent;
-      color: white;
+
       border: 1px white solid;
-      padding: 4px 2rem;
-      &:hover {
-        background-color: lighten($brand-danger, 10%);
+      margin-right: 1rem;
+      font-size: $font-size-small;
+      padding: 2px 8px;
+
+      &:last-child {
+        margin-right: 0;
       }
     }
   }
+}
 
+#cookie-consent--opt-out-text {
+  display: none;
 }

assets/scripts/cookieConsent.js

@@ -7,32 +7,79 @@
  * To style this item provide CSS for:
  *    #cookie-popup (bounding <div>)
  *    p.cookie-msg (message string <p>)
- *    p.cookie-btn (<p> containing close button)
- *    p.cookie-btn button (close <button> itself)
+ *    p.cookie-btn (<p> containing accept/reject buttons)
+ *    p.cookie-btn button (accept/reject buttons)
+ *    #cookie-consent-reject-btn (reject button)
+ *    #cookie-consent-accept-btn (accept button)
  */
 
-var CookieConsent = {
-    exec: function() {
-        let cookieName = 'dd_inhibit_cookie_consent';
-        if ( Cookie.isSet(cookieName) ) {
-            return;
-        }
-        $(document.body).prepend(
-            '<div id="cookie-popup" class="container-fluid">'
-            + '<p class="cookie-msg">This website uses a minimum number of cookies. '
-            + 'There are no trackers or advertising cookies. '
-            + '<a href="/cookies">More info</a>.'
-            + '</p>'
-            + '<p class="cookie-btn"><button id="cookie-close-btn">Dismiss</button></p>'
-            + '</div>'
-        );
-        $('#cookie-close-btn').click(function() {
-            Cookie.set(cookieName, "dismissed", 91);  // expires in apx 3 mths
-            $('#cookie-popup').hide();
+$( function() {
+
+    const cookieName = 'dd-base--cookies-accepted';
+    const sessionCookieName = 'dd-base--cookie-reject-session';
+    const optOutPara = '#cookie-consent--opt-out-text';
+    const messageHTMLPath = '/assets/scripts/includes/cookie-consent-msg.html';
+
+    // Remove redundant cookies
+    Cookie.delete('cookieconsent_status');
+    Cookie.delete('dd_inhibit_cookie_consent');
+    Cookie.delete('dd_flash_1');
+
+    if ( Cookie.isSet(cookieName) ) {
+        // User has accepted cookies: add opt-out link to footer
+        const revokeBtn = '#cookie-consent--revoke';
+        $(optOutPara).css('display', 'block');
+        $(revokeBtn).on('click', function() {
+            Cookie.delete(cookieName);
+            location.reload(true);
         });
     }
-}
 
-$( function() {
-    CookieConsent.exec();
+    else if ( sessionStorage[sessionCookieName] !== '1' ) {
+        // No cookie decision recorded: display pop-up message
+        $(document.body).prepend('<div id="cookie-message"></div>');
+        $('#cookie-message').load(
+            messageHTMLPath,
+            function (response, status, jqHXR) {
+
+                $('#cookie-consent-accept-btn').click(function() {
+                    Cookie.set(cookieName, "1", 182);  // expires in apx 6 mths
+                    $('#cookie-popup').fadeOut();
+                    $(optOutPara).css('display', 'block');
+                    location.reload(true);
+                });
+
+                $('#cookie-consent-reject-btn').click(function() {
+                    Cookie.delete(cookieName);
+                    sessionStorage[sessionCookieName] = '1';
+                    $('#cookie-popup').fadeOut();
+                    location.reload(true);
+                });
+
+                $(window).on('scroll', function() {
+
+                    let documentHeight = document.body.scrollHeight;
+                    let currentScroll = window.scrollY + window.innerHeight;
+                    // When the user is [modifier]px from the bottom, fire the event.
+                    let pageEndDelta = 150;
+                    if(currentScroll + pageEndDelta > documentHeight) {
+                        // at end: hide the message
+                        console.log('At end');
+                        if ($('#cookie-popup').css('display') !== 'none') {
+                            console.log('hiding')
+                            $('#cookie-popup').fadeOut();
+                        }
+                    }
+                    else {
+                        // not at end
+                        if ($('#cookie-popup').css('display') === 'none') {
+                            console.log('showing')
+                            $('#cookie-popup').fadeIn();
+                        }
+                    }
+                });
+            }
+        );
+    }
+
 });

assets/scripts/flashMessage.js

@@ -15,7 +15,7 @@ $( function() {
         return;
     }
     const id = flash.data('flash-id');
-    const cookieName = 'dd_flash_' + id;
+    const cookieName = 'dd-base--flash-' + id;
     flash.on('closed.bs.alert', function () {
         // set cookie for 1yr: can't set for more per EU regs
         Cookie.set(cookieName, "dismissed", 365);

assets/scripts/includes/cookie-consent-msg.html

@@ -0,0 +1,4 @@
+<div id="cookie-popup">
+    <p class="cookie-msg">This website uses a limited number of preferences cookies, but no tracking or marketing cookies. Please read the <a href="/cookies">cookies information page</a> before deciding whether to accept or reject cookies by clicking one of the buttons below.</p>
+    <p class="cookie-btn"><button class="btn btn-success" id="cookie-consent-accept-btn">Accept</button><button class="btn btn-danger" id="cookie-consent-reject-btn">Reject</button></p>
+</div>