1<#assign literalTools = serviceLocator.findService("com.vidacaixa.services.service", "com.vidacaixa.services.service.LiteralsToolsLocalService") />
2 <#assign respTablet = themeDisplay.getScopeGroup().getExpandoBridge().getAttribute("dimensiones-responsive-tablet")>
3 <#assign respMobile = themeDisplay.getScopeGroup().getExpandoBridge().getAttribute("dimensiones-responsive-mobile")>
4 <#assign titleMarked = "false">
5 <#assign titleVerVideo = generalTitle.textoVerVideo.getData()/>
6
7 <#assign image_folder=themeDisplay.getPathThemeImages()/>
8 <#assign autoplay="">
9 <div class="cv-banner-carrusel-modal">
10 <div id ="cv-banner-carrusel-modal-content" class="cv-banner-carrusel-modal-content">
11 <iframe class="yt_player_iframe" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true" allowscriptaccess="always" frameborder="0"></iframe>
12
13 <a class="cv-banner-carrusel-modal-close">
14 <img id="closeIframeID" src="${image_folder}/close-white.svg" alt="">
15 </a>
16 </div>
17
18 </div>
19
20 <#if carruselAutomaticoId??>
21 <#assign autoplay='data-slick={"autoplay":'+carruselAutomaticoId.getData()?string+'}'/>
22 </#if>
23
24 <#if generalTitle.getSiblings()?has_content>
25
26 <div id="carrusel_wrapper">
27 <div id="carrusel_momentosDestacados" class="cv-banner-carrusel">
28 <#list generalTitle.getSiblings() as cur_generalTitle>
29 <#if cur_generalTitle.selectorTipoBanner??>
30 <#if cur_generalTitle.selectorTipoBanner.getData()=="pop_up">
31 <#assign iframeString = cur_generalTitle.videoIframe.getData()/>
32 <#if iframeString?has_content && iframeString?starts_with("<iframe")>
33 <#assign iframeSrc = iframeString?substring(iframeString?index_of('src="')+5)/>
34 <#assign iframeSrc = iframeSrc?substring(0,iframeSrc?index_of('"'))/>
35 </#if>
36 <div class="cv-banner-carrusel-card-pop-up">
37 <div class="cv-banner-carrusel-img">
38
39 <#assign image_tablet = cur_generalTitle.image.getChild('imageTablet')! />
40 <#assign image_mobile = cur_generalTitle.image.getChild('imageMobile')! />
41
42 <#assign img_tablet_src = ""/>
43 <#assign img_mobile_src = "" />
44
45 <#if image_tablet?? && image_tablet?has_content>
46 <#assign img_tablet_src = image_tablet.getData() />
47 </#if>
48 <#if image_mobile?? && image_mobile?has_content>
49 <#assign img_mobile_src = image_mobile.getData() />
50 </#if>
51
52 <picture class="w-100">
53 <source media="(max-width: ${respMobile}px)" srcset="${img_mobile_src}">
54 <source media="(max-width: ${respTablet}px)" srcset="${img_tablet_src}">
55 <img src="${cur_generalTitle.image.getData()}" alt="${cur_generalTitle.image.imageDescription.getData()}">
56 </picture>
57
58 </div>
59 <div class="cv-banner-carrusel-text">
60 <div>
61 <#if cur_generalTitle_index == 0 && titleMarked=="false">
62 <#assign titleMarked = "true" />
63 <p class="cv-title--semibold cv-title--M specialTitle cv-text-title">${cur_generalTitle.getData()}</p>
64 <#else>
65 <p class="cv-title--semibold cv-title--M cv-text-title">${cur_generalTitle.getData()}</p>
66 </#if>
67 </div>
68 <div>
69 <p class="cv-title--semibold cv-title--S cv-text-body">${cur_generalTitle.subTitle.getData()}</p>
70 </div>
71
72 <#if cur_generalTitle.LinkTitle?? && cur_generalTitle.LinkTitle.getData()?replace(" ", "")?has_content>
73 <div>
74 <#assign link = cur_generalTitle.LinkTitle />
75 <#if link.LinkBlank.getData() == "SI">
76 <#assign blankText = "target='_blank'" />
77 <#else>
78 <#assign blankText = "" />
79 </#if>
80 <#if link.getChild('LinkColor')?? && link.getChild('LinkColor').getData()?has_content>
81 <#assign color = link.getChild('LinkColor').getData() />
82 <#else>
83 <#assign color = "--primary" />
84 </#if>
85 <#if link.LinkType.getData() == "Externo">
86 <a title="${link.LinkTooltip.getData()}" href="${link.LinkExterno.getData()}" ${blankText} class="cv-paragraph-regular cv-paragraph-regular--S cv-button cv-button${color} cv-separator--margin">
87 ${link.getData()}
88 </a>
89 <#elseif link.LinkType.getData() == "Interno">
90 <a title="${link.LinkTooltip.getData()}" href="${link.LinkInterno.getFriendlyUrl()}" ${blankText} class="cv-paragraph-regular cv-paragraph-regular--S cv-button cv-button${color} cv-separator--margin">
91 ${link.getData()}
92 </a>
93 </#if>
94 </div>
95 </#if>
96
97 <#if iframeString?has_content && iframeString?starts_with("<iframe")>
98
99
100 <a class="cv-banner-carrusel-play" data-src=${iframeSrc} style="color:${generalTitle.ColorBotonVerVideo.getData()} !important">
101 <p>${titleVerVideo}</p>
102 </a>
103
104 </#if>
105 </div>
106 </div>
107 </#if>
108 </#if>
109 <#if cur_generalTitle.selectorTipoBanner??>
110 <#if cur_generalTitle.selectorTipoBanner.getData()=="video_de_fondo">
111 <div class="cv-banner-carrusel-card">
112 <div class="cv-banner-carrusel-img">
113 <img src="${cur_generalTitle.image.getData()}" alt="${cur_generalTitle.image.imageDescription.getData()}"/>
114 <input class="video_src" type="hidden" value="${cur_generalTitle.video.getData()}">
115 <input class="video_iframe"type="hidden" value="${cur_generalTitle.videoIframe.getData()}">
116 </div>
117 <div class="cv-banner-carrusel-text">
118 <#if cur_generalTitle.getData()!="">
119 <div class="cv-text-title">
120 <p class="cv-title--semibold cv-title--M ">${cur_generalTitle.getData()}</p>
121
122 </div>
123 </#if>
124 <#if cur_generalTitle.subTitle.getData()?has_content>
125 <div class ="cv-text-body">
126 <p class="cv-title--semibold cv-title--S ">${cur_generalTitle.subTitle.getData()}</p>
127 </div>
128 </#if>
129
130 <a class="cv-banner-carrusel-play play-video-btn" style="color:${cur_generalTitle.ColorBotonVerVideo.getData()} !important">
131 <p>${titleVerVideo}</p>
132 </a>
133 </div>
134 </div>
135 </#if>
136 </#if>
137 </#list>
138 </div>
139 </div>
140 <#if h1Title?? && h1Title.getData()?has_content>
141 <h1 class="cv-data__title cv-title--semibold cv-title--M pt-5 pb-4">${h1Title.getData()}</h1>
142 </#if>
143 <#if h2Title?? && h2Title.getData()?has_content>
144 <h2 class="cv-data__type text-center cv-title--S">${h2Title.getData()}</h2>
145 </#if>
146
147 </#if>
148
149 <style>
150 /* ---------- Estilos generales ---------- */
151 #carrusel_momentosDestacados p.cv-title--semibold.cv-title--M {
152 margin: 0;
153 font-family: "Open Sans", Helvetica, sans-serif;
154 }
155
156 @media screen and (max-width: 769px) {
157 .cv-banner-carrusel-text a {
158 text-decoration: none;
159 }
160 }
161
162 /* ---------- Cartas sin hover (tipo video) ---------- */
163 .cv-banner-carrusel-card.no-hover {
164 background-color: transparent !important;
165 cursor: default !important;
166 }
167
168 .cv-banner-carrusel-card.no-hover:hover {
169 background-color: transparent !important;
170 }
171 .cv-banner-carrusel-card video {
172 display: none;
173 opacity: 0;
174 display: none;
175 pointer-events: none;
176 transition: opacity 0.5s ease;
177 }
178 .cv-banner-carrusel-card video.visible-video {
179 display: block ;
180 opacity: 1 !important;
181 visibility: visible !important;
182 pointer-events: auto !important;
183 }
184 .cv-banner-carrusel-play * {
185 margin: 0px 0px;
186 }
187 .cv-banner-carrusel-play {
188 display: flex;
189 gap: 8px;
190 padding: 8px 24px;
191 border-radius: 40px;
192 text-decoration: none;
193 text-align: center;
194 cursor: pointer;
195 border: 2px solid;
196 width: fit-content;
197 margin: 18px 0 0 34px !important;
198 transform: translate(0, 0) !important;
199 }
200 .cv-banner-carrusel-card:hover,
201 .cv-banner-carrusel-img img{
202 display: block !important;
203 }
204
205 .cv-banner-carrusel-card.video-playing .cv-text-title,
206 .cv-banner-carrusel-card.video-playing .cv-text-body,
207 .cv-banner-carrusel-card.video-playing .cv-banner-carrusel-img img {
208 display: none !important;
209 }
210
211 /* Textos dentro de la tarjeta */
212 .cv-banner-carrusel-text {
213 position: absolute;
214 top: 50%;
215 left: 50%;
216 transform: translate(-50%, -50%);
217 width: 100%;
218 max-width: 800px;
219 text-align: center;
220 padding: 2rem;
221 box-sizing: border-box;
222 transition: none;
223 }
224
225 /* Configuración general de las tarjetas */
226 .cv-banner-carrusel-card {
227 position: relative;
228 min-height: 400px;
229 overflow: hidden;
230 transform: none !important;
231 opacity: 1 !important;
232 visibility: visible !important;
233 filter: none !important;
234 transition: none !important;
235 background: none !important;
236 }
237
238 .cv-banner-carrusel-modal {
239 display: none;
240 }
241
242 .cv-banner-carrusel-modal.active {
243 display: block;
244 }
245
246 .hide-video{
247 display: none;
248 }
249
250 .cv-banner-carrusel-volume {
251 position: absolute;
252 right: 60px;
253 bottom: 40px;
254 }
255 .video-size{
256 max-width: 1000px;
257 }
258
259 </style>
260 <script>
261 const IMAGE_FOLDER = '${image_folder}';
262
263 function esURLDeYouTube(url) {
264 const patronYouTube = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\//;
265 return patronYouTube.test(url);
266 }
267
268 $(document).ready(function() {
269 const carrusel = $("#carrusel_momentosDestacados");
270 const videoModal = $(".cv-banner-carrusel-modal-content").find("video");
271 const iframeModal = $(".cv-banner-carrusel-modal-content").find("iframe");
272 const carruselModal = $(".cv-banner-carrusel-modal");
273
274
275 // Play / Pause
276 $(".play-video-btn").on("click", function(e) {
277 e.preventDefault();
278
279 const card = $(this).closest(".cv-banner-carrusel-card");
280 const video = card.find("video");
281 const videoSrc = video.find("source").attr("src");
282
283 const inputVideoSrc = card.find(".video_src");
284 const inputVideoYoutube = card.find(".video_iframe");
285
286 const btn = $(this);
287
288
289 if (inputVideoYoutube.attr("value")) {
290 if(videoModal != undefined){
291 videoModal.addClass("hide-video");
292
293 }
294 iframeModal.removeClass("hide-video");
295 carruselModal.addClass("active");
296 iframeModal.attr("src", inputVideoYoutube.attr("value"));
297
298 }else if(inputVideoSrc.attr("value")){
299
300 var videoModal = $('<video>', {
301 controls: true,
302 autoplay: true,
303 });
304 videoModal.addClass("video-size")
305 var source = $('<source>', {
306 src: 'ruta/del/video.mp4',
307 type: 'video/mp4'
308 });
309
310 videoModal.append(source);
311
312 $('#cv-banner-carrusel-modal-content').prepend(videoModal);
313 // VIDEO INTERNO
314 videoModal.removeClass("hide-video");
315 iframeModal.addClass("hide-video");
316 videoModal.find("source").attr("src", inputVideoSrc.attr("value"));
317 carruselModal.addClass("active");
318 }
319
320 });
321
322 $("#closeIframeID, .cv-banner-carrusel-modal").on("click", function(e) {
323 e.preventDefault();
324
325 carruselModal.removeClass("active");
326
327 $("#cv-banner-carrusel-modal-content video").remove();
328
329 iframeModal.attr("src", "");
330
331 $(".cv-banner-carrusel-card video").each(function() {
332 this.pause();
333 $(this).removeClass("visible-video");
334 const $btn = $(this).closest(".cv-banner-carrusel-card").find(".play-video-btn");
335 });
336 });
337
338 $(".cv-banner-carrusel-modal-content").on("click", function(e) {
339 e.stopPropagation();
340 });
341
342 $("#carrusel_wrapper").append('<button id="carrusel-toggle-play" aria-label="${literalTools.getLiteral(scopeGroupId, locale, 'corporativo.carrousel.stop.animation.aria.label')}" tabindex="0"></button>')
343
344
345 $("#carrusel-toggle-play").on("click", function(){
346 const carrouselWrapper = $("#carrusel_momentosDestacados")
347 if(carrouselWrapper.slick("getSlick")["paused"]){
348 carrouselWrapper.slick("slickPlay")
349 $(this).css("background-image",'url("${image_folder}/pause-carrousel.svg")')
350 carrouselWrapper.slick("slickNext")
351 $(this).attr("aria-label","${literalTools.getLiteral(scopeGroupId, locale, 'corporativo.carrousel.stop.animation.aria.label')}")
352 }else{
353 carrouselWrapper.slick("slickPause")
354 $(this).css("background-image",'url("${image_folder}/play-carrousel.svg")')
355 $(this).attr("aria-label","${literalTools.getLiteral(scopeGroupId, locale, 'corporativo.carrousel.start.animation.aria.label')}")
356 }
357 });
358
359 carrusel.on('afterChange', function(event, slick, currentSlide) {
360 $(".cv-banner-carrusel-card video").each(function() {
361 this.pause();
362 $(this).removeClass("visible-video");
363 const $btn = $(this).closest(".cv-banner-carrusel-card").find(".play-video-btn");
364 $btn.find("img").attr("src", IMAGE_FOLDER + "/play-video.svg");
365 });
366
367 carruselModal.removeClass("active");
368 iframeModal.attr("src", "");
369 });
370 });
371 </script>
