1<#import "/blaues-gut-portal.web-resources_SERVLET_CONTEXT_/common_macros.ftl" as common>
2
3<#assign layoutService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService") />
4<#assign namespace = randomNamespace />
5
6<section class="slider-hero" id="slider_${namespace}">
7 <div class="slides-list" aria-roledescription="Karusell">
8
9 <#list Slide.getSiblings() as curSlide>
10
11 <#assign hasLink = false />
12 <#assign linkTarget = "" />
13 <#assign linkHref= "" />
14 <#assign linkText = "weiterlesen" />
15 <#assign linkTitle = "Artikel weiterlesen" />
16 <#assign slideUniqueId = namespace + '_' + curSlide?index />
17
18
19 <#if curSlide.Headline?? && curSlide.Headline.getData()?has_content>
20 <#assign AltText = curSlide.Headline.getData() />
21 </#if>
22
23 <#assign Copyright = "" />
24 <#if (common.getCopyrightText(curSlide.Image.data)!"") != "">
25 <#assign Copyright = common.getCopyrightTag("",curSlide.Image.data) />
26 </#if>
27
28 <div class="slide" role="group" aria-roledescription="Folie" aria-label="Folie ${curSlide?index + 1} von ${Slide.siblings?size}">
29 <div class="slide-content">
30 <#if (curSlide.Youtube?? && curSlide.Youtube.getData()?has_content) && (curSlide.Image?? && curSlide.Image?has_content)>
31 <#assign videoId = curSlide.Youtube.getData()/>
32
33 <#if videoId?starts_with("http")>
34 <#assign videoId = videoId?split("/")[3]>
35 </#if>
36
37 <div class="slide-content-video video" id="video_${slideUniqueId}">
38 <img src="${common.getScaledImageURL(curSlide.Image.getData())}" data-src="${common.getScaledImageURL(curSlide.Image.getData())}" class="slide__image video-preview-image" id="video-preview-image_${slideUniqueId}" alt="${common.getAltText(curSlide.Image.data, AltText)}" role="img"/>
39 <div class="video-trigger-overlay video-trigger " id="video-trigger_${slideUniqueId}" data-tns-slide="tns1-item${curSlide?index}" data-videoid="${slideUniqueId}" data-source="${videoId}" title="Video abspielen">
40 <p class="text-center video-trigger-overlay-text video-trigger" data-videoid="${slideUniqueId}" >
41 Um das Video zu sehen, müssen Sie dieses Feld durch einen Klick aktivieren. Dadurch werden
42 Informationen an Youtube übermittelt und unter Umständen dort verarbeitet. Bitte beachten Sie unsere
43 Hinweise und Informationen zum <a href="/datenschutz" target="_blank"
44 class="no-icon">Datenschutz</a>.
45 </p>
46 <span class="icon-bg icon-bg--play video-trigger" data-videoid="${slideUniqueId}" ></span>
47 </div>
48 <div class="video-layer" style="display: none" id="video-layer_${slideUniqueId}">
49 <iframe class="video-frame" src="" frameborder="0" allowfullscreen="" width="100%" height="530" id="iframe_${slideUniqueId}"></iframe>
50 </div>
51 </div>
52 <#else>
53 <div class="slide-content-image image-with-caption">
54 <img src="${common.getScaledImageURL(curSlide.Image.getData())}" data-src="${common.getScaledImageURL(curSlide.Image.getData())}" class="slide__image" alt="${common.getAltText(curSlide.Image.data, AltText)}"/>
55 ${Copyright}
56 </div>
57 </#if>
58 </div>
59 </div>
60
61 </#list>
62 </div>
63</section>
64
65<script>
66
67 var updateIframeHeight = function() {
68 var dwidth = window.innerWidth;
69 var videoHeight = dwidth*0.5625;
70
71 /*
72 if (dwidth > 1600) {
73 videoHeight = dwidth*0.40;
74 }
75 */
76
77 var videoFrames = document.getElementsByClassName('video-frame');
78 for (var i=0; i < videoFrames.length;i++) {
79 videoFrames[i].setAttribute('height',videoHeight);
80 videoFrames[i].style.height = videoHeight+'px';
81 }
82 }
83
84 var updateVideoWrapper = function () {
85
86 var triggers = document.getElementsByClassName('video-trigger');
87
88 for (var i=0; i < triggers.length;i++) {
89 triggers[i].addEventListener('click',function(e) {
90
91 var triggersTarget = this.getAttribute('data-videoid');
92 var tnsSlide = this.getAttribute('data-tns-slide');
93
94 var youtubeId = document.querySelector("#" + tnsSlide + ' #video-trigger_'+triggersTarget).getAttribute('data-source');
95 var videoLayer = document.querySelector("#" + tnsSlide + ' #video-layer_'+triggersTarget);
96 var iframe = document.querySelector("#" + tnsSlide + ' #iframe_'+triggersTarget);
97 iframe.setAttribute('src', 'https://www.youtube-nocookie.com/embed/' + youtubeId + '?autoplay=1&rel=0&cc_load_policy=1&modestbranding=0&enablejsapi=1');
98
99 document.querySelector("#" + tnsSlide + ' #video-preview-image_'+triggersTarget).style.display='none';
100 document.querySelector("#" + tnsSlide + ' #video-trigger_'+triggersTarget).style.display='none';
101 videoLayer.style.display='block';
102 });
103 }
104 };
105
106 window.addEventListener("load", function () {
107 updateVideoWrapper();
108 updateIframeHeight();
109 });
110 window.addEventListener("resize", function () {
111 updateIframeHeight();
112 });
113 // Liferay.on('endNavigate', updateVideoWrapper);
114 // $(document).ready(updateVideoWrapper);
115
116 window.addEventListener("load", function () {
117 function ${namespace}_updateInfo(info) {
118 for (var i = 0; i < info.navItems.length; i++) {
119 info.navItems[i].setAttribute('aria-label','Folie ' + (i+1));
120 }
121
122 info.navItems[info.navCurrentIndex].setAttribute('aria-label','Folie ' + (info.navCurrentIndex + 1) + ' (aktuell)');
123
124 info.controlsContainer.setAttribute('aria-label', 'Navigationselemente');
125 info.prevButton.setAttribute('aria-label','zur vorhergehenden Folie springen');
126 info.nextButton.setAttribute('aria-label','zur nächsten Folie springen');
127 info.navContainer.setAttribute('aria-label','Auswahl der Folien')
128 }
129
130 var slider = tns({
131 container: '#slider_${namespace} .slides-list',
132 items: 1,
133 slideBy: 'page',
134 center: true,
135 controlsPosition: 'bottom',
136 navPosition: 'bottom',
137 touch: true,
138 mouseDrag: true,
139 freezable: true,
140 speed: 600,
141 loop: false,
142 arrowKeys: true,
143 lazyload: true,
144 autoHeight: true,
145 lazyloadSelector: '.slide__image',
146 controlsText: ['<span class="icon-bg icon-bg--arrow1-left"></span>','<span class="icon-bg icon-bg--arrow1-right"></span>'],
147 onInit: function (info) {
148 ${namespace}_updateInfo(info);
149 }
150 });
151
152 slider.events.on('indexChanged', function(info) {
153 ${namespace}_updateInfo(info);
154 });
155
156 slider.events.on('transitionStart', function(info, eventName) {
157 var currentSlideId = '#tns1-item' + info.navCurrentIndex;
158
159 var otherSlides = info.container.querySelectorAll('.tns-item:not(' + currentSlideId + ')')
160
161 otherSlides.forEach(function(slide) {
162 var iframe = slide.querySelector( 'iframe');
163
164 if (iframe != null) {
165 var src = iframe.getAttribute('src');
166 if (src) {
167 if ((src.indexOf('youtube.com/embed') != -1) || (src.indexOf('youtube-nocookie.com/embed') != -1)) {
168 iframe.contentWindow.postMessage(JSON.stringify({
169 'event': 'command',
170 'func': 'pauseVideo',
171 'args': []
172 }), "*");
173 }
174 }
175 }
176 });
177 });
178 });
179</script>