1<#-- instance id -->
2<#assign instanceId = themeDisplay.getPortletDisplay().getId()?keep_after("INSTANCE_") />
3
4<#-- Ricavo servizi utili in seguito -->
5<#-- Servizio per i layout di pagina -->
6<#assign layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService") />
7<#-- Servizio utile per ricavare i documenti della DM -->
8<#assign dlFileEntryLocalService = serviceLocator.findService('com.liferay.document.library.kernel.service.DLFileEntryLocalService') />
9
10<#-- Etichette -->
11<#assign label_cosa_vedere = languageUtil.get(locale , "label_cosa_vedere")/>
12<#assign label_cosa_vedere_a = languageUtil.get(locale , "label_cosa_vedere_a")/>
13<#assign label_apri_mappa = languageUtil.get(locale , "label_apri_mappa")/>
14<#assign label_vai_dettaglio = languageUtil.get(locale , "label_vai_dettaglio")/>
15<#assign label_chiama_telefono = languageUtil.get(locale, "label_chiama_telefono") />
16<#assign label_invia_email_a = languageUtil.get(locale, "label_invia_email_a") />
17<#assign label_e_mail = languageUtil.get(locale, "label_e_mail") />
18<#assign label_sito_web = languageUtil.get(locale, "label_sito_web") />
19<#assign label_vai_sito_web = languageUtil.get(locale, "label_vai_sito_web") />
20<#assign label_vai_immagine_precedente = languageUtil.get(locale , "label_vai_immagine_precedente")/>
21<#assign label_vai_immagine_successiva = languageUtil.get(locale , "label_vai_immagine_successiva")/>
22
23<#-- Inclusione widget template con macros e relativi servizi -->
24<#include "${templatesPath}/RICERCA_COMMON_MACROS" />
25
26<#if request.getAttribute("ricerca_extra_field_place")??>
27
28 <#-- ricavo il valore della citta corrente dalla request -->
29 <#assign curDestinationPlace = "" />
30 <#assign curDestinationPlace = request.getAttribute("ricerca_extra_field_place") />
31
32 <#-- html -->
33 <div class="col-12">
34 <div class="search-template search-template-attrazioni-dettaglio-localita">
35 <div class="cluster-slider-container bg-gray">
36
37 <#-- titolo principale -->
38 <div class="container-center">
39 <#-- aggiunta classe m-0 -->
40 <div class="row text-center intro-section pady m-0">
41 <div class="col-12">
42 <h2 class="h2 par">
43 <#-- prelevo il nome della pagina che deve essere uguale al titolo dell'articolo -->
44 <#if curDestinationPlace?? && curDestinationPlace != "">
45 ${label_cosa_vedere_a} ${curDestinationPlace}
46 <#else>
47 ${label_cosa_vedere}
48 </#if>
49 </h2>
50 <div class="open-map-container">
51 <a href="#map-container-desktop" class="position-relative transition tit-link open-map-link" data-toggle="collapse"
52 aria-expanded="false" aria-controls="map-container-desktop">
53 ${label_apri_mappa}
54 </a>
55 </div>
56 </div>
57 </div>
58 </div>
59
60 <#-- form ricerca -->
61 <@ricerca_components["ricerca-form"] searchUrl="${searchUrl}" method="get" id="search-attrazioni-dettaglio-localita-form-desktop">
62
63 <#-- codice aggiunto per la ricerca geo su mappa, funziona con la variabile impostata a true nell'init -->
64 <#assign latValue="" />
65 <#if searchInput.lat?has_content>
66 <#assign latValue="${searchInput.lat}" />
67 </#if>
68 <#assign lngValue="" />
69 <#if searchInput.lng?has_content>
70 <#assign lngValue="${searchInput.lng}" />
71 </#if>
72 <#assign distanceValue="" />
73 <#if searchInput.distance?has_content>
74 <#assign distanceValue="${searchInput.distance}" />
75 </#if>
76
77 <#-- richiamo taglib mappa: ha il suo html base -->
78 <#-- rich-map: wrapper class for rich marker -->
79 <div class="container-center">
80 <div id="map-container-desktop" class="rich-map-container collapse px-3 mb-6">
81 <@ricerca_components["ricerca-map"]>
82 </@>
83 </div>
84 </div>
85
86 <#-- IMPORTANTE: inizializzo la mappa, da fare subito dopo la chiusura della taglib -->
87 <#-- poichè il form ha un id custom, lo riporto come parametro nell'init -->
88 <script>
89 TglSearchMap.init({
90 centerLatitude: 43.3285259,
91 centerLongitude: 13.0509109,
92 initialZoom: 13,
93 geoSearch: false,
94 searchFormId: "search-attrazioni-dettaglio-localita-form-desktop",
95 submitOnGeoSearch: false
96 });
97 </script>
98
99 <#-- nel caso di una ricerca geo, passo alla mappa i valori impostati nelle variabili sopra create-->
100 <script type="text/javascript">
101 TglSearchMap.setSearchCircle('${latValue}', '${lngValue}', '${distanceValue}');
102 </script>
103
104 </@>
105
106 <#-- slider centrale -->
107 <div class="slider-container">
108 <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true; autoplay: true; autoplay-interval: 3000; pause-on-hover: true">
109 <#if entries?has_content>
110 <#list entries as curEntry>
111 <#-- lista risultati -->
112 <#if curEntry.records?has_content>
113 <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-2@s uk-child-width-1-4@m">
114 <#-- ciclo sugli elementi restituiti dalla ricerca -->
115 <#list curEntry.records as record>
116 <#if record.metadata?has_content>
117
118 <#-- assegno alla variabile il titolo di liferay o di struttura, ripulito dai caratteri accentati, da usare come alt o title -->
119 <#assign titoloScheda = "" />
120 <#if record.title?has_content>
121 <#assign titoloScheda = htmlUtil.escapeAttribute(record.title) />
122 </#if>
123 <#if record.metadata.destinationDestinationName?has_content && record.metadata.destinationDestinationName.value?has_content>
124 <#assign titoloScheda = htmlUtil.escapeAttribute(record.metadata.destinationDestinationName.value) />
125 </#if>
126
127 <#-- singolo elemento -->
128 <li class="link-container">
129 <div class="content position-relative">
130 <#-- cè bisogno che esista un tag a: per cui verifico che esista l'url altrimenti imposto l'href con javascript:void(0) -->
131 <#if record.detailUrl?has_content>
132 <a href="${record.detailUrl}" title="${label_vai_dettaglio} ${titoloScheda}">
133 <#else>
134 <a href="javascript:void(0);" title="${label_vai_dettaglio} ${titoloScheda}">
135 </#if>
136
137 <#-- richiamo l'immagine: fa parte di un fieldset ripetibile, e potrebbe essere una sequenza o una semplice stringa -->
138 <#-- creo una variabile di appoggio per l'url dell'img da usare nella mappa -->
139 <#assign mapImageUrlJs = "" />
140 <#if record.metadata.destinationImage?has_content && record.metadata.destinationImage.value?has_content>
141 <#if record.metadata.destinationImage.value?is_sequence>
142 <#assign numImg = 0 />
143 <#list record.metadata.destinationImage.value as curImage>
144 <#if curImage?? && curImage?has_content>
145 <#attempt>
146 <#assign curImageJson = jsonFactoryUtil.createJSONObject(curImage) />
147 <#if curImageJson?? && curImageJson?has_content && curImageJson.uuid?? && curImageJson.groupId??>
148 <#assign numImg = numImg + 1 />
149 <#assign curImageDLFileEntry = dlFileEntryLocalService.getFileEntryByUuidAndGroupId(curImageJson.uuid,curImageJson.groupId?number) />
150 <#assign curImageUrl = "/documents/"+groupId+"/"+curImageDLFileEntry.getFolderId()+"/"+curImageDLFileEntry.getFileName()+"/"+curImageJson.uuid />
151 <#assign mapImageUrlJs = curImageUrl />
152
153 <img src="${curImageUrl}" class="card-object-fit" alt="${titoloScheda}">
154
155 </#if>
156 <#recover>
157 <#-- in caso di problemi sull'immagine, non visualizzo nulla -->
158 </#attempt>
159 </#if>
160 <#if numImg == 1>
161 <#break>
162 </#if>
163 </#list>
164 <#else>
165 <#attempt>
166 <#assign imageJson = jsonFactoryUtil.createJSONObject(record.metadata.destinationImage.value) />
167 <#if imageJson?? && imageJson?has_content && imageJson.uuid?? && imageJson.groupId??>
168 <#assign imageDLFileEntry = dlFileEntryLocalService.getFileEntryByUuidAndGroupId(imageJson.uuid,imageJson.groupId?number) />
169 <#assign imageUrl = "/documents/"+groupId+"/"+imageDLFileEntry.getFolderId()+"/"+imageDLFileEntry.getFileName()+"/"+imageJson.uuid />
170 <#assign mapImageUrlJs = imageUrl />
171
172 <img src="${imageUrl}" class="card-object-fit" alt="${titoloScheda}">
173 </#if>
174 <#recover>
175 <#-- in caso di problemi sull'immagine, non visualizzo nulla -->
176 </#attempt>
177 </#if>
178 </#if>
179
180 <#-- titolo -->
181 <#if record.metadata.destinationDestinationName?has_content && record.metadata.destinationDestinationName.value?has_content>
182 <div class="d-flex justify-content-center align-items-center position-absolute info transition">
183 <div class="text-center">
184 <span class="h2 white">${record.metadata.destinationDestinationName.value?trim}</span>
185 </div>
186 </div>
187 </#if>
188
189 <#-- informazioni usate solo per il marker -->
190 <#-- luogo -->
191 <#assign mapAddressJs = "" />
192 <#if record.metadata.destinationAddressStreetName?has_content && record.metadata.destinationAddressStreetName.value?has_content>
193 <#assign mapAddressJs = mapAddressJs + record.metadata.destinationAddressStreetName.value + " " />
194 <#if record.metadata.destinationAddressStreetNumber?has_content && record.metadata.destinationAddressStreetNumber.value?has_content>
195 <#assign mapAddressJs = mapAddressJs + record.metadata.destinationAddressStreetNumber.value + ", " />
196 </#if>
197 </#if>
198 <#if record.metadata.destinationAddressCity?has_content && record.metadata.destinationAddressCity.value?has_content>
199 <#assign mapAddressJs = mapAddressJs + record.metadata.destinationAddressCity.value + " "/>
200 </#if>
201 <#if record.metadata.destinationAddressZipCode?has_content && record.metadata.destinationAddressZipCode.value?has_content>
202 <#assign mapAddressJs = mapAddressJs + "- "+ record.metadata.destinationAddressZipCode.value + " " />
203 </#if>
204 <#if record.metadata.destinationAddressProvince?has_content && record.metadata.destinationAddressProvince.value?has_content>
205 <#assign mapAddressJs = mapAddressJs + "("+record.metadata.destinationAddressProvince.value+") " />
206 </#if>
207 <#if record.metadata.destinationAddressCountry?has_content && record.metadata.destinationAddressCountry.value?has_content>
208 <#assign mapAddressJs = mapAddressJs + record.metadata.destinationAddressCountry.value />
209 </#if>
210
211 <#-- sito web, telefono e email -->
212 <#assign mapInfoJs = "" />
213 <#if record.metadata.destinationWebsite?has_content && record.metadata.destinationWebsite.value?has_content>
214 <#assign mapInfoJs += "<a href='${record.metadata.destinationWebsite.value?ensure_starts_with('[a-zA-Z]+://', 'http://')}' target='_blank' class='link sito d-inline-block mx-1' title='${label_vai_sito_web}: ${record.metadata.destinationWebsite.value}'><span class='fa-solid fa-earth' aria-hidden='true'></span> ${label_sito_web}</a>" />
215 </#if>
216 <#if record.metadata.destinationPhoneNumber?has_content && record.metadata.destinationPhoneNumber.value?has_content && record.metadata.destinationPhoneNumber.value != "0039">
217 <#assign mapInfoJs += "<a href='tel:${record.metadata.destinationPhoneNumber.value}' class='link tel d-inline-block mx-1' title='${label_chiama_telefono}: ${record.metadata.destinationPhoneNumber.value}'><span class='fa-solid fa-phone' aria-hidden='true'></span> ${record.metadata.destinationPhoneNumber.value}</a>" />
218 </#if>
219 <#if record.metadata.destinationEmail?? && record.metadata.destinationEmail.value?has_content>
220 <#assign mapInfoJs += "<a href='mailto:${record.metadata.destinationEmail.value}' class='link sito d-inline-block mx-1' title='${label_invia_email_a}: ${record.metadata.destinationEmail.value}'><span class='fa-solid fa-envelope' aria-hidden='true'></span> ${label_e_mail}</a>" />
221 </#if>
222
223 </a>
224 </div>
225
226
227 <#-- valorizzo il marker sulla mappa, se esiste latitudine e longitudine -->
228 <#if (record.latitude?has_content && record.latitude != 0) && (record.longitude?has_content && record.longitude != 0)>
229 <script>
230 var marker = L.marker(L.latLng([${record.latitude},${record.longitude}]));
231
232 var infoBox = "";
233 // apertura contenitore infobox e card
234 infoBox += "<div class='info-box'><div class='card bg-white m-0 border-0 shadow-none'>";
235 // immagine
236 <#if mapImageUrlJs?? && mapImageUrlJs != "">
237 infoBox += "<div class='card-img-wrapper'><img src='${mapImageUrlJs}' class='card-img-top' alt='${titoloScheda}'></div>";
238 </#if>
239 // inizio body
240 infoBox += "<div class='card-body p-2'>"
241 //titolo
242 infoBox += "<h2 class='card-title mb-2'><a href='${record.detailUrl}' title='${label_vai_dettaglio} ${titoloScheda}'>${titoloScheda}</a></h2>"
243 // indirizzo
244 <#if mapAddressJs?? && mapAddressJs != "">
245 infoBox += "<p class='mt-0 mb-2'><span class='fa fa-map-marker mr-1'></span><strong>${mapAddressJs}</strong></p>"
246 </#if>
247 // info
248 <#if mapInfoJs?? && mapInfoJs != "">
249 infoBox += "<p class='mt-0 mb-2'>${mapInfoJs}</p>"
250 </#if>
251 // fine body
252 infoBox += "</div>"
253 // fine contenitore infobox e card
254 infoBox += "</div></div>"
255
256 var popup = marker.bindPopup(infoBox);
257 TglSearchMap.addMarker(marker);
258 </script>
259 </#if>
260 </li>
261 </#if>
262 </#list>
263 <#-- fine ciclo -->
264 </ul>
265 <div class="position-absolute nav-arrows">
266 <a class="prev" href="#" uk-slidenav-previous uk-slider-item="previous" title="${label_vai_immagine_precedente}"></a>
267 <a class="next" href="#" uk-slidenav-next uk-slider-item="next" title="${label_vai_immagine_successiva}"></a>
268 </div>
269 </#if>
270 <#-- fine curEntry -->
271 </#list>
272 </#if>
273
274 </div>
275 </div>
276 </div>
277 </div>
278 </div>
279
280 <script>
281 $(document).ready(function(){
282 // carico la mappa
283 TglSearchMap.loadMap(true);
284
285 // quando il container collapsed viene visualizzato, ricostruisco la mappa e applico il fitbounds, oltre che a visualizzare il popover, se non ancora visualizzato
286 $('#map-container-desktop').on('shown.bs.collapse', function () {
287 TglSearchMap.getMap().invalidateSize();
288 TglSearchMap.fitBounds();
289
290 // popover on draw circle function
291 if( $('.leaflet-draw-draw-circle').length === 1){
292 if (sessionStorage.getItem('showedPopoverMap') == undefined) {
293 showTooltipOnMap('.search-template-attrazioni-dettaglio-localita .leaflet-draw-draw-circle');
294 }
295 if(isShowedPopover){
296 hideTooltipOnMap('.search-template-attrazioni-dettaglio-localita .leaflet-draw-draw-circle','body');
297 }
298 }
299 });
300 });
301 </script>
302
303</#if>
