diff --git a/assets/js/components-noncritical.js b/assets/js/components-noncritical.js
index 821a6093d..11f7276f8 100644
--- a/assets/js/components-noncritical.js
+++ b/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',
+ cookiePolicyShow: '.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);
diff --git a/assets/js/components/CookieControl.component.js b/assets/js/components/CookieControl.component.js
index d6250931d..0eb2d39d7 100644
--- a/assets/js/components/CookieControl.component.js
+++ b/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.cookiePolicyShow = element.querySelector(options.cookiePolicyShow);
+ 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.cookiePolicyShow.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);
diff --git a/assets/js/components/FetchPageAndRender.component.js b/assets/js/components/FetchPageAndRender.component.js
new file mode 100644
index 000000000..dcfc3964b
--- /dev/null
+++ b/assets/js/components/FetchPageAndRender.component.js
@@ -0,0 +1,72 @@
+/* REQUIRED HTML STRUCTURE FOR IT TO WORK
+
+FETCH PAGE AND RENDER WRAPPER
+
+
+ FETCHED PAGE PLACEHOLDER
+
+
+ WRAPPED FETCH TRIGGER LINK FOR EZRICHTEXT TEXTS
+
+ OR JUST FETCH TRIGGER LINK
+
+
+ FETCHED PAGE REMOVAL LINK FROM PLACEHOLDER
+
+
+
+
+*/
+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 = '';
+ });
+ }
+}
diff --git a/assets/sass/_cookie_control.scss b/assets/sass/_cookie_control.scss
index 633e7bfac..9e0265431 100644
--- a/assets/sass/_cookie_control.scss
+++ b/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: #fff;
+ 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
}
diff --git a/assets/sass/bootstrap_import/_bootstrap_override.scss b/assets/sass/bootstrap_import/_bootstrap_override.scss
index bd87a6c2b..95e7e5bcc 100644
--- a/assets/sass/bootstrap_import/_bootstrap_override.scss
+++ b/assets/sass/bootstrap_import/_bootstrap_override.scss
@@ -127,6 +127,37 @@
transform: translate(0, -50%);
}
}
+ &.btn-icon-chevron-left {
+ &:active,
+ &.active,
+ &:not(:disabled):not(.disabled):active,
+ &:not(:disabled):not(.disabled).active,
+ &:hover,
+ &:focus-visible {
+ &:after {
+ filter: brightness(0) invert(1);
+ }
+ }
+ &:after {
+ content: "";
+ @extend %icon-chevron-left;
+ width: 1.125rem;
+ height: 1.125rem;
+ flex: 0 0 auto;
+ background-size: contain;
+ @include media-breakpoint-down(lg) {
+ width: .875rem;
+ height: .875rem;
+ }
+ }
+ align-items: center;
+ gap: 1rem;
+ display: inline-flex;
+ flex-direction: row-reverse;
+ justify-content: flex-end;
+ padding-left: 1.25rem;
+ width: auto!important;
+ }
}
.container {
diff --git a/config/app/routes.yaml b/config/app/routes.yaml
index e69de29bb..8c4a0affb 100644
--- a/config/app/routes.yaml
+++ b/config/app/routes.yaml
@@ -0,0 +1,3 @@
+ngsite_view_payload:
+ path: /view-payload/{contentId}
+ controller: App\Controller\ViewPayload
\ No newline at end of file
diff --git a/src/Controller/ViewPayload.php b/src/Controller/ViewPayload.php
new file mode 100644
index 000000000..8960b8b8b
--- /dev/null
+++ b/src/Controller/ViewPayload.php
@@ -0,0 +1,21 @@
+getContentRenderer()->renderContent(
+ $this->getLoadService()->loadContent($contentId),
+ 'payload',
+ ),
+ );
+ }
+}
diff --git a/templates/themes/app/content/views/payload/ng_article.html.twig b/templates/themes/app/content/views/payload/ng_article.html.twig
index 397de6e2f..b12af7044 100644
--- a/templates/themes/app/content/views/payload/ng_article.html.twig
+++ b/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 %}
-
+
{{ content_fields.image(content, location, 'i320') }}
@@ -17,5 +17,12 @@
{{ content_fields.intro(content) }}
+
+ {% if content.fields.body is defined and not content.fields.body.empty %}
+
+ {{ ng_render_field(content.fields.body) }}
+
+ {% endif %}
+
diff --git a/templates/themes/app/pagelayout/cookie_control.html.twig b/templates/themes/app/pagelayout/cookie_control.html.twig
index 9d9e49436..8ebe5e9d9 100644
--- a/templates/themes/app/pagelayout/cookie_control.html.twig
+++ b/templates/themes/app/pagelayout/cookie_control.html.twig
@@ -1,12 +1,30 @@
{% if ngsite.siteInfoContent.hasField('related_cookie_policy') and 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') %}
+ {% if cookie_policy.hasField('cookie_policy_text') and not cookie_policy.fields.cookie_policy_text.empty %}
+
+ {% else %}
+ {% endif %}
+
+ {# cookie policy addition #}
+
+ {# /cookie policy addition #}
+
-
+
{% if not cookie_policy.fields.ribbon_description.empty %}
{{ ng_render_field(cookie_policy.fields.ribbon_description) }}
{% endif %}
diff --git a/translations/messages.de.yaml b/translations/messages.de.yaml
index 93e35e351..6d5e81607 100644
--- a/translations/messages.de.yaml
+++ b/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: "Go back"
ngsite.layout.sponsored: 'Gesponsert'
ngsite.search.placeholder: 'Suche'
diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml
index b0a148e8e..eb236a8de 100644
--- a/translations/messages.en.yaml
+++ b/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'