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 #} +
-
+