1<#-- 

2  PLANTILLA DE ELEMENTO PARA EL PUBLICADOR DE LIFERAY 

3  La galería queda DENTRO del desplegable, después de documentos. 

4  Sustituye todo el contenido de la plantilla por este archivo. 

5--> 

6<#function rand min max> 

7    <#local now = .now?long?c /> 

8    <#local randomNum = _rand + ("0." + now?substring(now?length - 1) + now?substring(now?length - 2))?number /> 

9    <#if randomNum gt 1> 

10        <#assign _rand = randomNum % 1 /> 

11    <#else> 

12        <#assign _rand = randomNum /> 

13    </#if> 

14    <#return (min + ((max - min) * _rand))?round /> 

15</#function> 

16 

17<#assign _rand = 0.36 /> 

18<#assign numrand = rand(1, 1000) /> 

19<#assign uid = "directorio" + numrand /> 

20 

21<li class="item-directorio"> 

22    <input type="checkbox" name="list" id="${Nombre.getData()?html}${numrand}" /> 

23    <label for="${Nombre.getData()?html}${numrand}">${Nombre.getData()}</label> 

24 

25    <ul class="interior"> 

26        <li class="contenido-interior"> 

27            <div class="ficha-servicio"> 

28                <div class="top-content m-0 pl-4"> 

29                    <#if Imagen.getData()?has_content> 

30                        <div class="image"> 

31                            <img 

32                                alt="${Imagen.getAttribute('alt')!''?html}" 

33                                data-fileentryid="${Imagen.getAttribute('fileEntryId')!''?html}" 

34                                src="${Imagen.getData()?html}" 

35                            /> 

36                        </div> 

37                    </#if> 

38 

39                    <div class="content"> 

40                        <#if Descripcion.getData()?has_content> 

41                            <div class="description">${Descripcion.getData()}</div> 

42                        </#if> 

43 

44                        <div class="share"> 

45                            <#if twitter?exists && twitter.getData()?has_content> 

46                                <a href="${twitter.getData()?html}" target="_blank" rel="noopener noreferrer" aria-label="X"> 

47                                    <i class="fa-brands fa-x-twitter" aria-hidden="true"></i> 

48                                </a> 

49                            </#if> 

50                            <#if facebook?exists && facebook.getData()?has_content> 

51                                <a href="${facebook.getData()?html}" target="_blank" rel="noopener noreferrer" aria-label="Facebook"> 

52                                    <i class="fa fa-facebook" aria-hidden="true"></i> 

53                                </a> 

54                            </#if> 

55                            <#if instagram?exists && instagram.getData()?has_content> 

56                                <a href="${instagram.getData()?html}" target="_blank" rel="noopener noreferrer" aria-label="Instagram"> 

57                                    <i class="fa fa-instagram" aria-hidden="true"></i> 

58                                </a> 

59                            </#if> 

60                        </div> 

61 

62                        <#if Direccion.getData()?has_content> 

63                            <span class="text-direccion"><i class="fa-light fa-location-dot" aria-hidden="true"></i> ${Direccion.getData()}</span> 

64                        </#if> 

65 

66                        <#if Latitud.getData()?has_content && Longitud.getData()?has_content> 

67                            <a href="https://www.google.es/maps/dir/${Direccion.getData()?url('UTF-8')},/@${Latitud.getData()?url('UTF-8')},${Longitud.getData()?url('UTF-8')}" class="link-arrow" target="_blank" rel="noopener noreferrer"> 

68                                ¿CÓMO LLEGAR? <i class="fa-solid fa-chevron-right" aria-hidden="true"></i> 

69                            </a> 

70                        </#if> 

71 

72                        <#if horario?exists && horario.getData()?has_content> 

73                            <p class="link-mail"><i class="fa-light fa-clock" aria-hidden="true"></i> ${horario.getData()}</p> 

74                        </#if> 

75 

76                        <#if Email.getData()?has_content && Email.getSiblings()?has_content> 

77                            <div class="d-flex flex-wrap"> 

78                                <#list Email.getSiblings() as curEmail> 

79                                    <#if curEmail.getData()?has_content> 

80                                        <a href="mailto:${curEmail.getData()?html}" class="<#if curEmail?index == 0>link-mail<#else>ml-2</#if>" <#if curEmail?index != 0>style="color:#2b2b2b"</#if>> 

81                                            <#if curEmail?index == 0><i class="fa-light fa-envelope" aria-hidden="true"></i><#else>/</#if> ${curEmail.getData()} 

82                                        </a> 

83                                    </#if> 

84                                </#list> 

85                            </div> 

86                        </#if> 

87 

88                        <#if Fax.getData()?has_content> 

89                            <p class="link-mail"><i class="fa-light fa-fax" aria-hidden="true"></i> ${Fax.getData()}</p> 

90                        </#if> 

91 

92                        <#if Telefono.getData()?has_content && Telefono.getSiblings()?has_content> 

93                            <div class="d-flex flex-wrap"> 

94                                <#list Telefono.getSiblings() as curTelefono> 

95                                    <#if curTelefono.getData()?has_content> 

96                                        <a href="tel:${curTelefono.getData()?html}" class="<#if curTelefono?index == 0>link-telephone<#else>ml-2</#if>" <#if curTelefono?index != 0>style="color:#2b2b2b"</#if>> 

97                                            <#if curTelefono?index == 0><i class="fa-light fa-phone-volume" aria-hidden="true"></i><#else>/</#if> ${curTelefono.getData()} 

98                                        </a> 

99                                    </#if> 

100                                </#list> 

101                            </div> 

102                        </#if> 

103 

104                        <#if Web.getData()?has_content> 

105                            <a href="${Web.getData()?html}" target="_blank" rel="noopener noreferrer" class="link-web"><i class="fa-light fa-globe" aria-hidden="true"></i> ${Web.getData()}</a> 

106                        </#if> 

107 

108                        <#if accesos?exists && accesos.getData()?has_content> 

109                            <p class="mb-2"><strong class="blue-color">Accesos:</strong> ${accesos.getData()}</p> 

110                        </#if> 

111                        <#if otrosDatos?exists && otrosDatos.getData()?has_content> 

112                            <p>${otrosDatos.getData()}</p> 

113                        </#if> 

114 

115                        <#assign hayEnlaces = false /> 

116                        <#assign hayDocumentos = false /> 

117                        <#if GrupoDeCampos89655952?exists && GrupoDeCampos89655952.getSiblings()?has_content> 

118                            <#list GrupoDeCampos89655952.getSiblings() as item> 

119                                <#if item.enlaceExterno?exists && item.enlaceExterno.getData()?has_content><#assign hayEnlaces = true /></#if> 

120                                <#if item.documento?exists && item.documento.getData()?has_content><#assign hayDocumentos = true /></#if> 

121                            </#list> 

122                        </#if> 

123 

124                        <#if hayEnlaces || hayDocumentos> 

125                            <div class="grid-2"> 

126                                <#if hayEnlaces> 

127                                    <div class="grid"> 

128                                        <p class="title-column">Enlaces de interés</p> 

129                                        <div class="d-flex flex-wrap"> 

130                                            <#list GrupoDeCampos89655952.getSiblings() as item> 

131                                                <#if item.enlaceExterno?exists && item.enlaceExterno.getData()?has_content> 

132                                                    <a href="${item.enlaceExterno.getData()?html}" target="_blank" rel="noopener noreferrer" class="link-icon w-100"><i class="fa-light fa-link" aria-hidden="true"></i> ${item.titulo.getData()}</a> 

133                                                </#if> 

134                                            </#list> 

135                                        </div> 

136                                    </div> 

137                                </#if> 

138                                <#if hayDocumentos> 

139                                    <div class="grid"> 

140                                        <p class="title-column">Documentos</p> 

141                                        <div class="d-flex flex-wrap"> 

142                                            <#list GrupoDeCampos89655952.getSiblings() as item> 

143                                                <#if item.documento?exists && item.documento.getData()?has_content> 

144                                                    <a href="${item.documento.getData()?html}" target="_blank" rel="noopener noreferrer" class="link-icon w-100" download><i class="fa-light fa-file-arrow-down" aria-hidden="true"></i> ${item.titulo.getData()}</a> 

145                                                </#if> 

146                                            </#list> 

147                                        </div> 

148                                    </div> 

149                                </#if> 

150                            </div> 

151                        </#if> 

152                    </div> 

153                </div> 

154            </div> 

155 

156            <#-- GALERÍA: sigue dentro de .interior y se ocultará con el desplegable. --> 

157            <#if ImagenExtra?exists && ImagenExtra.getSiblings()?has_content> 

158                <#assign hayImagenes = false /> 

159                <#list ImagenExtra.getSiblings() as imagen> 

160                    <#if imagen.getData()?has_content><#assign hayImagenes = true /></#if> 

161                </#list> 

162                <#if hayImagenes> 

163                    <section class="galeria-multimedia" data-galeria="${uid}" aria-labelledby="titulo-${uid}"> 

164                        <h2 id="titulo-${uid}" class="title-underline-dest text-primary titulo-galeria">Galería multimedia</h2> 

165                        <div class="galeria-carrusel"> 

166                            <button type="button" class="galeria-flecha galeria-anterior" aria-label="Imágenes anteriores">&#10094;</button> 

167                            <div class="galeria-ventana"> 

168                                <div class="galeria-pista"> 

169                                    <#list ImagenExtra.getSiblings() as imagen> 

170                                        <#if imagen.getData()?has_content> 

171                                            <#assign altImagen = imagen.getAttribute('alt')!'Imagen de la galería' /> 

172                                            <div class="galeria-item"> 

173                                                <button type="button" class="galeria-boton" data-imagen="${imagen.getData()?html}" data-alt="${altImagen?html}" aria-label="Ampliar imagen: ${altImagen?html}"> 

174                                                    <img src="${imagen.getData()?html}" alt="${altImagen?html}" loading="lazy" /> 

175                                                </button> 

176                                            </div> 

177                                        </#if> 

178                                    </#list> 

179                                </div> 

180                            </div> 

181                            <button type="button" class="galeria-flecha galeria-siguiente" aria-label="Imágenes siguientes">&#10095;</button> 

182                        </div> 

183                    </section> 

184 

185                    <div class="visor-galeria" data-visor="${uid}" role="dialog" aria-modal="true" aria-label="Visor de imágenes" aria-hidden="true"> 

186                        <button type="button" class="visor-cerrar" aria-label="Cerrar imagen ampliada">&times;</button> 

187                        <button type="button" class="visor-anterior" aria-label="Imagen anterior">&#10094;</button> 

188                        <div class="visor-contenido"> 

189                            <img class="visor-imagen" src="" alt="" /> 

190                            <p class="visor-pie"></p> 

191                            <a class="visor-descargar" href="#" download aria-label="Descargar imagen mostrada" title="Descargar imagen"> 

192                                <i class="fa-light fa-download" aria-hidden="true"></i><span>Descargar imagen</span> 

193                            </a> 

194                        </div> 

195                        <button type="button" class="visor-siguiente" aria-label="Imagen siguiente">&#10095;</button> 

196                    </div> 

197                </#if> 

198            </#if> 

199        </li> 

200    </ul> 

201</li> 

202 

203<style> 

204.interior > .contenido-interior { width:100%; margin:0; padding:0; list-style:none; } 

205.interior .galeria-multimedia { clear:both; width:100%; margin:25px 0 45px; padding:0 20px; box-sizing:border-box; } 

206.titulo-galeria { margin:0 0 20px; text-align:center; } 

207.galeria-carrusel { position:relative; display:flex; align-items:center; gap:12px; } 

208.galeria-ventana { width:100%; overflow:hidden; } 

209.galeria-pista { display:flex; justify-content:center; transition:transform .3s ease; } 

210.galeria-item { flex:0 0 33.333%; padding:7px; box-sizing:border-box; } 

211.galeria-boton { display:block; width:100%; height:260px; padding:0; overflow:hidden; cursor:pointer; background:#f2f2f2; border:1px solid #333; border-radius:3px; } 

212.galeria-boton img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; } 

213.galeria-boton:hover img, .galeria-boton:focus img { transform:scale(1.04); } 

214.galeria-flecha { flex:0 0 40px; width:40px; height:40px; padding:0; color:#fff; background:#378fc6; border:0; border-radius:50%; font-size:25px; cursor:pointer; } 

215.galeria-flecha[hidden] { display:none; } 

216.galeria-flecha:disabled { opacity:.35; cursor:default; } 

217.visor-galeria { position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:60px 80px; background:rgba(0,0,0,.88); } 

218.visor-galeria.visor-abierto { display:flex; } 

219.visor-contenido { display:flex; flex-direction:column; align-items:center; max-width:100%; max-height:100%; } 

220.visor-imagen { max-width:90vw; max-height:80vh; object-fit:contain; background:#fff; } 

221.visor-pie { margin:14px 0 0; color:#fff; text-align:center; } 

222.visor-descargar { display:inline-flex; align-items:center; gap:8px; margin-top:14px; min-height:40px; padding:9px 16px; color:#fff; background:#378fc6; border-radius:4px; font-size:14px; font-weight:600; line-height:1; text-decoration:none; } 

223.visor-descargar:hover,.visor-descargar:focus { color:#fff; background:#0066b3; text-decoration:none; } 

224.visor-cerrar,.visor-anterior,.visor-siguiente { position:absolute; z-index:2; color:#fff; border:0; cursor:pointer; } 

225.visor-cerrar { top:12px; right:22px; width:50px; height:50px; background:transparent; font-size:46px; } 

226.visor-anterior,.visor-siguiente { top:50%; width:48px; height:70px; background:rgba(0,0,0,.4); font-size:40px; transform:translateY(-50%); } 

227.visor-anterior { left:14px; }.visor-siguiente { right:14px; } 

228body.visor-sin-scroll { overflow:hidden; } 

229@media (max-width:1025px) { .galeria-item { flex-basis:50%; } } 

230@media (max-width:600px) { .interior .galeria-multimedia { padding:0; }.galeria-item { flex-basis:100%; }.galeria-boton { height:230px; }.galeria-flecha { flex-basis:34px; width:34px; height:34px; }.visor-galeria { padding:55px 42px; }.visor-imagen { max-width:100%; max-height:74vh; }.visor-descargar { margin-top:12px; padding:9px 14px; } } 

231</style> 

232 

233<script> 

234(function () { 

235    function iniciarGalerias() { 

236        var galerias = document.querySelectorAll('[data-galeria]:not([data-iniciada="true"])'); 

237        Array.prototype.forEach.call(galerias, function (galeria) { 

238            galeria.setAttribute('data-iniciada', 'true'); 

239            var uid = galeria.getAttribute('data-galeria'); 

240            var visor = document.querySelector('[data-visor="' + uid + '"]'); 

241            var pista = galeria.querySelector('.galeria-pista'); 

242            var botones = Array.prototype.slice.call(galeria.querySelectorAll('.galeria-boton')); 

243            var anterior = galeria.querySelector('.galeria-anterior'); 

244            var siguiente = galeria.querySelector('.galeria-siguiente'); 

245            var cerrar = visor.querySelector('.visor-cerrar'); 

246            var visorAnterior = visor.querySelector('.visor-anterior'); 

247            var visorSiguiente = visor.querySelector('.visor-siguiente'); 

248            var imagenVisor = visor.querySelector('.visor-imagen'); 

249            var pieVisor = visor.querySelector('.visor-pie'); 

250            var descargar = visor.querySelector('.visor-descargar'); 

251            var posicion = 0, indice = 0, ultimoBoton = null; 

252            function visibles() { return window.innerWidth <= 600 ? 1 : (window.innerWidth <= 1025 ? 2 : 3); } 

253            function actualizar() { 

254                var numeroVisibles = visibles(); 

255                var max = Math.max(0, botones.length - numeroVisibles); 

256                var hayDesplazamiento = max > 0; 

257 

258                posicion = Math.max(0, Math.min(posicion, max)); 

259                pista.style.transform = 'translateX(-' + (posicion * (100 / numeroVisibles)) + '%)'; 

260 

261                /* 

262                 * Si todas las imágenes caben en pantalla, la pista las 

263                 * centra y se retiran las flechas, que no tendrían función. 

264                 */ 

265                galeria.classList.toggle('galeria-sin-desplazamiento', !hayDesplazamiento); 

266                anterior.hidden = !hayDesplazamiento; 

267                siguiente.hidden = !hayDesplazamiento; 

268                anterior.disabled = posicion === 0; 

269                siguiente.disabled = posicion === max; 

270            } 

271            function mostrar(n) { var urlImagen; if (n < 0) { n = botones.length - 1; } if (n >= botones.length) { n = 0; } indice = n; urlImagen = botones[n].getAttribute('data-imagen'); imagenVisor.src = urlImagen; imagenVisor.alt = botones[n].getAttribute('data-alt') || ''; pieVisor.textContent = imagenVisor.alt; descargar.href = urlImagen; descargar.setAttribute('download', 'imagen-galeria-' + (n + 1)); visorAnterior.style.display = botones.length > 1 ? '' : 'none'; visorSiguiente.style.display = botones.length > 1 ? '' : 'none'; } 

272            function abrir(n, boton) { ultimoBoton = boton; mostrar(n); visor.classList.add('visor-abierto'); visor.setAttribute('aria-hidden', 'false'); document.body.classList.add('visor-sin-scroll'); cerrar.focus(); } 

273            function cerrarVisor() { visor.classList.remove('visor-abierto'); visor.setAttribute('aria-hidden', 'true'); document.body.classList.remove('visor-sin-scroll'); imagenVisor.src = ''; if (ultimoBoton) { ultimoBoton.focus(); } } 

274            anterior.addEventListener('click', function () { posicion--; actualizar(); }); 

275            siguiente.addEventListener('click', function () { posicion++; actualizar(); }); 

276            botones.forEach(function (boton, n) { boton.addEventListener('click', function () { abrir(n, boton); }); }); 

277            cerrar.addEventListener('click', cerrarVisor); visorAnterior.addEventListener('click', function () { mostrar(indice - 1); }); visorSiguiente.addEventListener('click', function () { mostrar(indice + 1); }); 

278            visor.addEventListener('click', function (e) { if (e.target === visor) { cerrarVisor(); } }); 

279            document.addEventListener('keydown', function (e) { if (!visor.classList.contains('visor-abierto')) { return; } if (e.key === 'Escape') { cerrarVisor(); } else if (e.key === 'ArrowLeft') { mostrar(indice - 1); } else if (e.key === 'ArrowRight') { mostrar(indice + 1); } }); 

280            window.addEventListener('resize', actualizar); actualizar(); 

281        }); 

282    } 

283    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', iniciarGalerias); } else { iniciarGalerias(); } 

284    if (window.Liferay && typeof Liferay.on === 'function') { Liferay.on('endNavigate', function () { window.setTimeout(iniciarGalerias, 100); }); } 

285})(); 

286</script>