EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace video facade with cookiefirst consent banner

Browse Source
This commit is contained in:
Björn Fromme
2021-12-28 12:45:29 +01:00
parent b1aa473b04
commit 111811876e
7 changed files with 58 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
-11
View File
@@ -22,7 +22,6 @@
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"glightbox": "^3.0.9", "glightbox": "^3.0.9",
"jquery": "^3.6.0", "jquery": "^3.6.0",
"lazyframe": "^2.2.7",
"lazysizes": "^4.1.8", "lazysizes": "^4.1.8",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
@@ -6179,11 +6178,6 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/lazyframe": {
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/lazyframe/-/lazyframe-2.2.7.tgz",
"integrity": "sha512-S4Cj6r+8ePZnH0Izn8Y9+Ht0/xylcKwhXljOwllPI8u6zB9gq9j+9BlxeKx7TNP8W/lovek8s6xQD1sSq5dLDw=="
},
"node_modules/lazysizes": { "node_modules/lazysizes": {
"version": "4.1.8", "version": "4.1.8",
"resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz", "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz",
@@ -15862,11 +15856,6 @@
"integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==", "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
"dev": true "dev": true
}, },
"lazyframe": {
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/lazyframe/-/lazyframe-2.2.7.tgz",
"integrity": "sha512-S4Cj6r+8ePZnH0Izn8Y9+Ht0/xylcKwhXljOwllPI8u6zB9gq9j+9BlxeKx7TNP8W/lovek8s6xQD1sSq5dLDw=="
},
"lazysizes": { "lazysizes": {
"version": "4.1.8", "version": "4.1.8",
"resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz", "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz",
package.json
-1
View File
@@ -25,7 +25,6 @@
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"glightbox": "^3.0.9", "glightbox": "^3.0.9",
"jquery": "^3.6.0", "jquery": "^3.6.0",
"lazyframe": "^2.2.7",
"lazysizes": "^4.1.8", "lazysizes": "^4.1.8",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
-4
View File
@@ -7,10 +7,6 @@ require('picturefill')
import smoothscroll from 'smoothscroll-polyfill' import smoothscroll from 'smoothscroll-polyfill'
smoothscroll.polyfill() smoothscroll.polyfill()
// Video lazy loading
import lazyframe from 'lazyframe'
lazyframe('.lazyframe')
// Add pacode to external links // Add pacode to external links
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const configElement = document.getElementById('appconfig') const configElement = document.getElementById('appconfig')
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+4 -1
View File
@@ -32,7 +32,6 @@
@import "components/teaser"; @import "components/teaser";
@import "components/tiles"; @import "components/tiles";
@import "components/tooltips"; @import "components/tooltips";
@import "~lazyframe/src/scss/lazyframe";
} }
@layer utilities { @layer utilities {
@@ -72,4 +71,8 @@
text-shadow: none; text-shadow: none;
border: 0; border: 0;
} }
iframe:not([src]) {
display: none;
}
} }
public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
+32 -23
View File
@@ -1,23 +1,32 @@
<f:if condition="{region.regionMaps}"> <html data-namespace-typo3-fluid="true" lang="en"
<div class="bg-gray-50 p-4 mb-4" xmlns="http://www.w3.org/1999/xhtml"
data-controller="lightbox"> xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
<p class="font-bold mb-2"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
Pistenplan
</p> <f:if condition="{region.regionMaps}">
<f:for each="{region.regionMaps}" as="regionMap" iteration="iteration"> <div class="bg-gray-50 p-4 mb-4"
<a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}" data-controller="lightbox">
data-action="lightbox#open" <p class="font-bold mb-2">
data-lightbox-target="thumb" Pistenplan
data-lightbox-index="{iteration.cycle}" </p>
data-lightbox-caption="Pistenplan {region.name}" <div class="flex flex-col space-y-2">
title="Pistenplan {region.name}"> <f:for each="{region.regionMaps}" as="regionMap" iteration="iteration">
<ep:lazyLoadImage image="{regionMap}" <a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" data-action="lightbox#open"
class="block w-full h-auto" data-lightbox-target="thumb"
width="330" data-lightbox-index="{iteration.cycle}"
alt="{regionMap.alternative}" data-lightbox-caption="Pistenplan {region.name}"
title="{regionMap.title}"/> title="Pistenplan {region.name}">
</a> <ep:lazyLoadImage image="{regionMap}"
</f:for> loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
</div> class="block w-full h-auto"
</f:if> width="330"
alt="{regionMap.alternative}"
title="{regionMap.title}"/>
</a>
</f:for>
</div>
</div>
</f:if>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html
+11 -4
View File
@@ -6,10 +6,17 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="lazyframe" <div class="relative w-full aspect-w-16 aspect-h-9 bg-cover bg-center"
data-vendor="{f:if(condition: '{data.layout} == 0', then: 'youtube_nocookie', else: 'vimeo')}" style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')})">
data-ratio="16:9" <iframe class="absolute top-0 left-0 w-full h-full"
data-src="{ep:uri.video(value: data.header_link, layout: data.layout)}"> width="640" height="360" allowfullscreen
data-src="{ep:uri.video(value: data.header_link, layout: data.layout)}"
data-cookiefirst-category="advertising"></iframe>
<div class="cookiefirst-disabled-resource">
<div class="absolute top-1/2 left-1/2 tranform -translate-xy-1/2">
Bitte <a href="#" onclick="CookieFirst.acceptCategory('advertising'); return false" class="underline">Marketing-Cookies akzeptieren</a>, um dieses Video anzusehen.
</div>
</div>
</div> </div>
</f:section> </f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+11 -4
View File
@@ -200,10 +200,17 @@
<f:render section="Calendar" arguments="{_all}"/> <f:render section="Calendar" arguments="{_all}"/>
<f:render partial="Facts" arguments="{facts: product.facts}"/> <f:render partial="Facts" arguments="{facts: product.facts}"/>
<f:if condition="{product.video}"> <f:if condition="{product.video}">
<div class="lazyframe mb-4" <div class="relative w-full aspect-w-16 aspect-h-9 bg-cover bg-center mb-4"
data-vendor="vimeo" style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')})">
data-ratio="16:9" <iframe class="absolute top-0 left-0 w-full h-full"
data-src="{ep:uri.video(value: product.video)}"> width="640" height="360" allowfullscreen
data-src="{ep:uri.video(value: product.video)}"
data-cookiefirst-category="advertising"></iframe>
<div class="cookiefirst-disabled-resource">
<div class="absolute top-1/2 left-1/2 tranform -translate-xy-1/2">
Bitte <a href="#" onclick="CookieFirst.acceptCategory('advertising'); return false" class="underline">Marketing-Cookies akzeptieren</a>, um dieses Video anzusehen.
</div>
</div>
</div> </div>
</f:if> </f:if>
<div class="bg-gray-50 p-4 mb-4"> <div class="bg-gray-50 p-4 mb-4">