Merge pull request #23 from diodechain/hansr/cookies

Cookie consent

_includes/cookies-consent.liquid

@@ -0,0 +1,24 @@
+{%- if include.data -%}
+    {% assign data = page[include.data] %}
+{% else %}
+    {% assign data = page.popup %}
+{% endif %}
+
+<div class="popup" id="{{ include.id }}">
+    <div class="popup__space">
+        <aside class="popup__content">
+            <header class="popup__header">
+                <h3 class="popup__title">Cookie consent</h3>
+            </header>
+            <div class="cookies-consent">
+                <p>Cookies help us to know which of our marketing efforts are working.  Click Accept if you want to help us figure that out.  Click Reject if you'd rather just do your thing.</p>
+                <p>By clicking "Accept", you consent to our use of cookies. <a href="{{ site.links.privacy.url }}">Privacy Policy</a>.</p>
+                <hr>
+                <div class="cookies-consent__buttons">
+                    <button type="button" class="btn cookie-accept">Accept</button>
+                    <button type="button" class="btn btn--bordered cookie-reject">Reject</button>
+                </div>
+            </div>
+        </aside>
+    </div>
+</div>

_layouts/page.html

@@ -21,5 +21,7 @@
 
 	{%- include download-popup.liquid id="download-app" -%}
 
+    {%- include cookies-consent.liquid id="cookies-consent" -%}
+
 </body>
 </html>

_sass/blocks/_popup.scss

@@ -32,6 +32,11 @@
     right: 10px;
     z-index: 10;
     cursor: pointer;
+    @include media-breakpoint-down(xss) {
+      + .popup__header {
+        margin-top: 30px;
+      }
+    }
     @include media-breakpoint-up(lg) {
       top: 20px;
       right: 20px;
@@ -54,6 +59,31 @@
     &::after {transform: rotate(-45deg);}
   }
 
+  &__header {
+    font-size: 14px;
+    margin-bottom: 20px;
+    @include media-breakpoint-up(xss) {
+      font-size: 15px;
+    }
+    @include media-breakpoint-up(md) {
+      margin-bottom: 24px;
+      font-size: 16px;
+    }
+    @include media-breakpoint-up(xl) {
+      margin-bottom: 30px;
+      font-size: 18px;
+    }
+
+    h2, h3 {margin-bottom: .25em;}
+    h3 {
+      @include media-breakpoint-down(xss) {
+        font-size: 22px;
+      }
+    }
+    &:last-child {margin-bottom: 0;}
+
+  }
+
   &__space {
     height: 100%;
     padding: 15px;
@@ -66,7 +96,7 @@
     position: relative;
     z-index: 5;
     transition: opacity $effect;
-    background: rgba(black, .8);
+    background: rgba(black, .5);
     opacity: 0;
     -webkit-overflow-scrolling: touch;
 
@@ -80,7 +110,7 @@
 
   &__content {
     max-width: 100%;
-    padding: 50px 15px 20px;
+    padding: 20px 15px;
     margin-right: auto;
     margin-left: auto;
     position: relative;
@@ -89,41 +119,22 @@
     @include media-breakpoint-up(xss) {
       padding: 30px 20px;
     }
-    @include media-breakpoint-up(xss) {
-      padding-right: 25px;
-      padding-left: 25px;
-    }
     @include media-breakpoint-up(xsl) {
       max-width: 560px;
-      padding-right: 30px;
-      padding-left: 30px;
+      padding-right: 25px;
+      padding-left: 25px;
     }
     @include media-breakpoint-up(md) {
       max-width: 680px;
+      padding-right: 30px;
+      padding-left: 30px;
     }
     @include media-breakpoint-up(lg) {
       max-width: 840px;
+      #cookies-consent & {max-width: 680px;}
     }
     @include media-breakpoint-up(xl) {
       max-width: 920px;
     }
   }
-
-  &__header {
-    font-size: 14px;
-    margin-bottom: 30px;
-    @include media-breakpoint-up(xss) {
-      font-size: 15px;
-    }
-    @include media-breakpoint-up(md) {
-      font-size: 16px;
-    }
-    @include media-breakpoint-up(xl) {
-      font-size: 18px;
-    }
-
-    h2 {margin-bottom: .25em;}
-    &:last-child {margin-bottom: 0;}
-
-  }
 }

_sass/blocks/cookies-consent.scss

@@ -0,0 +1,53 @@
+/* ==========================================================================
+   COOKIES CONSENT
+   ========================================================================== */
+.cookies-consent {
+  font-size: 14px;
+  line-height: 1.428em;
+  @include media-breakpoint-up(md) {
+    font-size: 16px;
+  }
+  @include media-breakpoint-up(xl) {
+    font-size: 17px;
+  }
+
+  hr {
+    margin: 1em 0;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    @include media-breakpoint-up(sm) {
+      gap: 20px;
+    }
+    @include media-breakpoint-up(xl) {
+      gap: 50px;
+    }
+
+    .btn {
+      cursor: pointer;
+      @include media-breakpoint-down(sm) {
+        min-width: 120px;
+        padding-right: 10px;
+        padding-left: 10px;
+      }
+      @include media-breakpoint-up(xl) {
+        min-width: 220px;
+        padding-right: 40px;
+        padding-left: 40px;
+      }
+    }
+  }
+}
+#cookies-consent {
+  .popup__space {
+    padding: 0;
+    justify-content: flex-end;
+  }
+
+  .popup__content {
+    max-width: none;
+  }
+}

_sass/style.scss

@@ -27,6 +27,7 @@
         'blocks/features',
         'blocks/download',
         'blocks/download-popup',
+        'blocks/cookies-consent',
         'blocks/pricing',
         'blocks/three',
         'blocks/video',

assets/js/script.js

@@ -61,8 +61,7 @@ function initPopup() {
     }
   }
 
-  function toggleClick(event) {
-
+  function togglePopup(event) {
     var target = event.currentTarget.area, isNavbar = event.currentTarget.navbar;
     if (target) {
       if (target.classList.contains('visible')) {
@@ -92,35 +91,106 @@ function initPopup() {
     return false;
   }
 
+  function showPopup(target) {
+    target.classList.add('visible');
+    setTimeout(function () {
+      target.classList.add('open');
+    }, 25);
+    setTimeout(function () {
+      if (isNavbar) {
+        document.body.classList.add('menu-open');
+      }
+    }, 300);
+    return false;
+  }
+
+  function closePopups(event) {
+    var target = event.target.closest('.popup');
+    setTimeout(function () {
+      target.classList.remove('open');
+      setTimeout(function () {
+        target.classList.remove('visible');
+      }, 250);
+    }, 25);
+    return false;
+  }
+
+  function setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+    let expires = "expires=" + d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+  }
+
+  function getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === ' ') {
+        c = c.substring(1);
+      }
+      if (c.indexOf(name) === 0) {
+        return c.substring(name.length, c.length);
+      }
+    }
+    return "";
+  }
+
+  function acceptConsent(event) {
+    setCookie('Consent_Status', 'granted', 90);
+    closePopups.call(this, event);
+  }
+
+  function rejectConsent(event) {
+    setCookie('Consent_Status', 'denied', 90);
+    closePopups.call(this, event);
+  }
+
   var navbar = document.querySelector('.header__nav'),
     toggle = document.querySelector('.header__toggle'),
     close = navbar.querySelector('.header__close');
 
   toggle.area = navbar;
   toggle.navbar = true;
-  toggle.addEventListener('click', toggleClick, false);
+  toggle.addEventListener('click', togglePopup, false);
 
   close.area = navbar;
   close.navbar = true;
-  close.addEventListener('click', toggleClick, false);
+  close.addEventListener('click', togglePopup, false);
 
   document.querySelectorAll('.close-nav').forEach((link) => {
     link.area = navbar;
-    link.addEventListener('click', toggleClick, false);
+    link.addEventListener('click', togglePopup, false);
     link.navbar = true;
   });
 
   document.querySelectorAll('.popup-open').forEach((link) => {
     var target = link.getAttribute('href'),
       popup = document.querySelector(target);
-
     link.area = popup;
-    link.addEventListener('click', toggleClick, false);
+    link.addEventListener('click', togglePopup, false);
+  });
 
-    var close = popup.querySelector('.popup__close');
-    close.area = popup;
-    close.addEventListener('click', toggleClick, false);
+  document.querySelectorAll('.popup').forEach((popup) => {
+    let link = popup.querySelector('.popup__close');
+    if (link) {
+      link.area = popup;
+      link.addEventListener('click', closePopups, false);
+    }
   });
+
+  let c = getCookie('Consent_Status');
+  if (!c) {
+    document.querySelectorAll('.cookies-consent').forEach((consent) => {
+      consent.querySelector('.cookie-accept').addEventListener('click', acceptConsent, false);
+      consent.querySelector('.cookie-reject').addEventListener('click', rejectConsent, false);
+    });
+
+    let t = document.querySelector('#cookies-consent');
+    showPopup(t);
+  }
 }
 
 function initTestimonials() {
@@ -212,9 +282,7 @@ function initTags() {
     let updating = false
     const handleScroll = () => {
       if (window.scrollY >= offsetTop || window.pageYOffset >= offsetTop) {
-        console.log(offsetTop, allHeight);
         tags.classList.add(fixedClass);
-        console.log(window.scrollY, allHeight)
         if (window.scrollY >= allHeight || window.pageYOffset >= allHeight) {
           tags.classList.add(fixedClassBottom);
         } else {

index.md

@@ -266,6 +266,4 @@ partners:
 
 {%- include box.liquid data="how-works" -%}
 
-{%- include partners.liquid -%}
-
-{%- include download-popup.liquid id="download-app" -%}
+{%- include partners.liquid -%}