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",
"glightbox": "^3.0.9",
"jquery": "^3.6.0",
"lazyframe": "^2.2.7",
"lazysizes": "^4.1.8",
"leaflet": "^1.7.1",
"normalize.css": "^8.0.1",
@@ -6179,11 +6178,6 @@
"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": {
"version": "4.1.8",
"resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz",
@@ -15862,11 +15856,6 @@
"integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
"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": {
"version": "4.1.8",
"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",
"glightbox": "^3.0.9",
"jquery": "^3.6.0",
"lazyframe": "^2.2.7",
"lazysizes": "^4.1.8",
"leaflet": "^1.7.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'
smoothscroll.polyfill()
// Video lazy loading
import lazyframe from 'lazyframe'
lazyframe('.lazyframe')
// Add pacode to external links
document.addEventListener('DOMContentLoaded', () => {
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/tiles";
@import "components/tooltips";
@import "~lazyframe/src/scss/lazyframe";
}
@layer utilities {
@@ -72,4 +71,8 @@
text-shadow: none;
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}">
<div class="bg-gray-50 p-4 mb-4"
data-controller="lightbox">
<p class="font-bold mb-2">
Pistenplan
</p>
<f:for each="{region.regionMaps}" as="regionMap" iteration="iteration">
<a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}"
data-action="lightbox#open"
data-lightbox-target="thumb"
data-lightbox-index="{iteration.cycle}"
data-lightbox-caption="Pistenplan {region.name}"
title="Pistenplan {region.name}">
<ep:lazyLoadImage image="{regionMap}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="330"
alt="{regionMap.alternative}"
title="{regionMap.title}"/>
</a>
</f:for>
</div>
</f:if>
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:if condition="{region.regionMaps}">
<div class="bg-gray-50 p-4 mb-4"
data-controller="lightbox">
<p class="font-bold mb-2">
Pistenplan
</p>
<div class="flex flex-col space-y-2">
<f:for each="{region.regionMaps}" as="regionMap" iteration="iteration">
<a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}"
data-action="lightbox#open"
data-lightbox-target="thumb"
data-lightbox-index="{iteration.cycle}"
data-lightbox-caption="Pistenplan {region.name}"
title="Pistenplan {region.name}">
<ep:lazyLoadImage image="{regionMap}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
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:section name="Main">
<div class="lazyframe"
data-vendor="{f:if(condition: '{data.layout} == 0', then: 'youtube_nocookie', else: 'vimeo')}"
data-ratio="16:9"
data-src="{ep:uri.video(value: data.header_link, layout: data.layout)}">
<div class="relative w-full aspect-w-16 aspect-h-9 bg-cover bg-center"
style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')})">
<iframe class="absolute top-0 left-0 w-full h-full"
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>
</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 partial="Facts" arguments="{facts: product.facts}"/>
<f:if condition="{product.video}">
<div class="lazyframe mb-4"
data-vendor="vimeo"
data-ratio="16:9"
data-src="{ep:uri.video(value: product.video)}">
<div class="relative w-full aspect-w-16 aspect-h-9 bg-cover bg-center mb-4"
style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')})">
<iframe class="absolute top-0 left-0 w-full h-full"
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>
</f:if>
<div class="bg-gray-50 p-4 mb-4">