Ngstack 833 cookie consent cookie policy improvements new

assets/js/components-noncritical.js

@@ -16,6 +16,7 @@ import SwiperBase from './components/SwiperBase.component';
 import SwiperThumb from './components/SwiperThumb.component';
 import VideoPoster from './components/VideoPoster.component';
 import SkipToMainContent from './components/SkipToMainContent.component';
+import FetchPageAndRender from './components/FetchPageAndRender.component';
 
 // Configuration
 const componentConfiguration = [
@@ -38,6 +39,11 @@ const componentConfiguration = [
       optionalListToggle: '.optional-list-toggle',
       rotateArrowClass: 'rotate-arrow',
       shownClass: 'shown',
+      cookieModal: '.ng-cc-modal',
+      cookiePolicyShowTrigger: '.ng-cc-js-link-cookie-policy a',
+      cookiePolicyHide: '.cookie-policy-hide',
+      cookiePolicyText: '.ng-cc-cookie-policy-text',
+      cookiePolicyShownClass: 'cookie-policy-shown',
     },
   },
   {
@@ -214,6 +220,15 @@ const componentConfiguration = [
     Component: SkipToMainContent,
     selector: '#skip-to-main-content',
   },
+  {
+    Component: FetchPageAndRender,
+    selector: '.js-fetch-page',
+    options: {
+      triggerWrapper: '.js-fetch-page-trigger-wrapper',
+      pagePlaceholder: '.js-fetch-page-placeholder',
+      pageRemove: '.js-fetch-page-remove',
+    },
+  },
 ];
 
 addDocumentEventListeners(componentConfiguration);

assets/js/components/CookieControl.component.js

@@ -8,6 +8,11 @@ export default class CookieControl {
     this.optionalSaveBtn = element.querySelectorAll(options.optionalSaveBtn);
     this.optionalList = element.querySelector(options.optionalList);
     this.optionalListToggle = element.querySelector(options.optionalListToggle);
+    this.cookieModal = element.querySelector(options.cookieModal);
+    this.cookiePolicyShowTrigger = element.querySelector(options.cookiePolicyShowTrigger);
+    this.cookiePolicyHide = element.querySelector(options.cookiePolicyHide);
+    this.cookiePolicyText = element.querySelector(options.cookiePolicyText);
+    this.cookiePolicyShownClass = options.cookiePolicyShownClass;
 
     this.init();
   }
@@ -18,9 +23,21 @@ export default class CookieControl {
     this.optionalSaveBtn.forEach((element) =>
       element.addEventListener('click', CookieControl.handleConsentChange)
     );
+    this.cookiePolicyShowTrigger.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.cookieModal.classList.add(this.cookiePolicyShownClass);
+      document.querySelector('.ng-cc-cookie-policy-text').scrollTop = 0;
+    });
+    this.cookiePolicyHide.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.cookieModal.classList.remove(this.cookiePolicyShownClass);
+    });
   }
 
   static initNetgenCookieControl() {
+    if (this.element === null) {
+      return;
+    }
     // eslint-disable-next-line no-underscore-dangle
     const cookieControl = new NetgenCookieControl(window.__ngCcConfig);
     cookieControl.init();
@@ -38,6 +55,9 @@ export default class CookieControl {
   }
 
   static handleConsentChange(event) {
+    if (this.element === null) {
+      return;
+    }
     event.preventDefault();
 
     GTM.push('ngcc', GTM.EVENTS.CHANGED);

assets/js/components/FetchPageAndRender.component.js

@@ -0,0 +1,72 @@
+/* REQUIRED HTML STRUCTURE FOR IT TO WORK
+
+FETCH PAGE AND RENDER WRAPPER
+<div class="js-fetch-page" data-fetch-page-content-id="CONTENT_ID">
+
+  FETCHED PAGE PLACEHOLDER
+  <div class="js-fetch-page-placeholder"></div>
+
+  WRAPPED FETCH TRIGGER LINK FOR EZRICHTEXT TEXTS
+  <div class="js-fetch-page-trigger-wrapper"><a href=""></a></div>
+  OR JUST FETCH TRIGGER LINK
+  <a class="js-fetch-page-trigger-wrapper"></a>
+
+  FETCHED PAGE REMOVAL LINK FROM PLACEHOLDER
+  <a class="js-fetch-page-remove"></a>
+
+</div>
+
+*/
+export default class FetchPageAndRender {
+  constructor(element, options) {
+    this.element = element;
+    this.options = options;
+
+    this.triggerWrapper = document.querySelector(options.triggerWrapper);
+    this.pagePlaceholder = document.querySelector(options.pagePlaceholder);
+    this.pageRemove = document.querySelector(options.pageRemove);
+
+    this.init();
+  }
+
+  init() {
+    if (this.triggerWrapper instanceof HTMLAnchorElement) {
+      this.triggerWrapper.addEventListener('click', this.handleFetchPage.bind(this));
+    } else {
+      this.triggerWrapper
+        .querySelector('a')
+        .addEventListener('click', this.handleFetchPage.bind(this));
+    }
+  }
+
+  handleFetchPage(event) {
+    event.preventDefault();
+
+    const url = `/view-payload/${this.element.dataset.fetchPageContentId}`;
+
+    fetch(url)
+      .then((response) => {
+        console.log(url, response);
+        if (!response.ok) {
+          throw new Error();
+        }
+        return response.text();
+      })
+      .then(this.handleRenderPage.bind(this))
+      .catch((error) => {
+        console.error(`Failed to fetch page content: ${error}`);
+      });
+  }
+
+  handleRenderPage(page) {
+    const template = document.createElement('template');
+    template.innerHTML = page.trim();
+
+    this.pagePlaceholder.appendChild(template.content);
+
+    this.pageRemove.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.pagePlaceholder.innerHTML = '';
+    });
+  }
+}

assets/sass/_cookie_control.scss

@@ -389,4 +389,67 @@
     &[open] {
         opacity: 1;
     }
+
+    // cookie policy addition
+    .ng-cc-cookie-policy-text {
+        position: absolute;
+        inset: 0;
+        z-index: 10000000;
+        transition: transform .3s ease;
+        transform: translateX(100%);
+        background: $white;
+        overflow-y: auto;
+        .wrapper {
+            padding: 2rem 0 1rem 0;
+            margin: 0 2.5rem;
+            > * + * {
+                margin-top: 2rem;
+            }
+        }
+        .title {
+            margin-top: 2rem;
+        }
+        .intro {
+            margin-top: 1rem;
+        }
+        .body h3 {
+            margin-top: 2rem;
+            font-size: 1.25rem;
+        }
+        p {
+            margin-top: 1rem;
+        }
+    }
+    .ng-cc-modal {
+        overflow-x: hidden;
+        min-height: 180px;
+        max-width: calc(100% - 60px);
+        transition: min-height .3s ease, max-width .3s ease;
+        overscroll-behavior: contain;
+        &.cookie-policy-shown {
+            overflow: hidden;
+            min-height: 75vh;
+            max-width: 1024px;
+            .ng-cc-cookie-policy-text {
+                transform: translateX(0);
+                overscroll-behavior: contain;
+            }
+        }
+    }
+    @include media-breakpoint-down(lg) {
+        .ng-cc-modal {
+            min-height: 180px;
+            max-width: none;
+            &.cookie-policy-shown {
+                min-height: 75vh;
+                .ng-cc-cookie-policy-text {
+                    .wrapper {
+                        padding: 1rem 0;
+                        margin: 0 1rem;
+                    }
+                }
+            }
+        }
+    }
+    // /cookie policy addition
 }

assets/sass/bootstrap_import/_bootstrap_override.scss

@@ -127,6 +127,48 @@
             transform: translate(0, -50%);
         }
     }
+    &[class*="btn-icon-"] {
+        &.btn-default {
+            &:active,
+            &.active,
+            &:not(:disabled):not(.disabled):active,
+            &:not(:disabled):not(.disabled).active,
+            &:hover,
+            &:focus-visible {
+                &:after {
+                    filter: brightness(0) invert(1);
+                }
+            }
+        }
+        &.btn-secondary {
+            &:after {
+                filter: brightness(0) invert(1);
+            }
+        }
+        &:after {
+            content: "";
+            width: 1.125rem;
+            height: 1.125rem;
+            flex: 0 0 auto;
+            background-size: contain;
+            @include media-breakpoint-down(lg) {
+                width: .875rem;
+                height: .875rem;
+            }
+        }
+        display: inline-flex;
+        align-items: center;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        gap: 1rem;
+        padding-left: 1.25rem;
+        width: auto!important;
+    }
+    &.btn-icon-chevron-left {
+        &:after {
+            @extend %icon-chevron-left;
+        }
+    }
 }
 
 .container {

config/app/routes.yaml

@@ -0,0 +1,3 @@
+ngsite_view_payload:
+    path: /view-payload/{contentId}
+    controller: App\Controller\ViewPayload

src/Controller/ViewPayload.php

@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Controller;
+
+use Netgen\Bundle\SiteBundle\Controller\Controller;
+use Symfony\Component\HttpFoundation\Response;
+
+final class ViewPayload extends Controller
+{
+    public function __invoke(int $contentId): Response
+    {
+        return new Response(
+            $this->getContentRenderer()->renderContent(
+                $this->getLoadService()->loadContent($contentId),
+                'payload',
+            ),
+        );
+    }
+}

templates/themes/app/content/views/payload/ng_article.html.twig

@@ -3,7 +3,7 @@
 
 {% import '@ibexadesign/content/macros/content_fields.html.twig' as content_fields %}
 
-<article class="view-type view-type-{{ view_type }} ng-article vl4">
+<article class="view-type view-type-{{ view_type }} ng-article">
 
     {{ content_fields.image(content, location, 'i320') }}
 
@@ -17,5 +17,12 @@
         <div class="short">
             {{ content_fields.intro(content) }}
         </div>
+
+        {% if content.fields.body is defined and not content.fields.body.empty %}
+            <div class="body">
+                {{ ng_render_field(content.fields.body) }}
+            </div>
+        {% endif %}
+
     </div>
 </article>

templates/themes/app/pagelayout/cookie_control.html.twig

@@ -1,12 +1,28 @@
 {% if not ngsite.siteInfoContent.fields.related_cookie_policy.empty %}
     {% set cookie_policy = ngsite.siteInfoContent.fieldRelation('related_cookie_policy') %}
+    {% set cookie_policy_text = cookie_policy.fieldRelation('cookie_policy_text') %}
 
     <div id="ng-cc">
         <div class="ng-cc-overlay"></div>
 
+        {% if cookie_policy.hasField('cookie_policy_text') and not cookie_policy.fields.cookie_policy_text.empty %}
+        <div class="ng-cc-modal js-fetch-page" data-fetch-page-content-id="{{ cookie_policy_text.id }}">
+        {% else %}
         <div class="ng-cc-modal">
+        {% endif %}
+
+            <div class="ng-cc-cookie-policy-text">
+                <div class="wrapper">
+                    <div class="ng-cc-header-in">
+                        <a href="#" class="btn btn-default btn-icon-chevron-left cookie-policy-hide js-fetch-page-remove">{{ 'ngsite.layout.cookie_settings.go_back'|trans }}</a>
+                    </div>
+                    <div class="js-fetch-page-placeholder">
+                    </div>
+                </div>
+            </div>
+
             <div class="ng-cc-content">
-              <div class="wrapper">
+              <div class="wrapper ng-cc-js-link-cookie-policy js-fetch-page-trigger-wrapper">
                 {% if not cookie_policy.fields.ribbon_description.empty %}
                     {{ ng_render_field(cookie_policy.fields.ribbon_description) }}
                 {% endif %}

translations/messages.de.yaml

@@ -7,6 +7,7 @@ ngsite.layout.powered_by: "Unterstützt durch"
 ngsite.layout.cookie_settings: "Cookie Einstellungen"
 ngsite.layout.cookie_settings.accepted: "Akzeptiert"
 ngsite.layout.cookie_settings.not_accepted: "Nicht akzeptiert"
+ngsite.layout.cookie_settings.go_back: "Zurück"
 ngsite.layout.sponsored: 'Gesponsert'
 
 ngsite.search.placeholder: 'Suche'

translations/messages.en.yaml

@@ -7,6 +7,7 @@ ngsite.layout.powered_by: "Powered by"
 ngsite.layout.cookie_settings: "Cookie settings"
 ngsite.layout.cookie_settings.accepted: "Accepted"
 ngsite.layout.cookie_settings.not_accepted: "Not accepted"
+ngsite.layout.cookie_settings.go_back: "Go back"
 ngsite.layout.sponsored: 'Sponsored'
 
 ngsite.search.placeholder: 'Search'