1 | |
---|
2 | function PwgDataHandler( map, opts ) |
---|
3 | { |
---|
4 | this._map = map; |
---|
5 | this._infoWindow = new google.maps.InfoWindow(); |
---|
6 | this.options = jQuery.fn.extend( |
---|
7 | { |
---|
8 | markerOptions: {}, |
---|
9 | show_all_img_src: null |
---|
10 | } |
---|
11 | , opts || {} ); |
---|
12 | |
---|
13 | google.maps.event.bind( this._map, "click", this, this._onMapClick); |
---|
14 | } |
---|
15 | |
---|
16 | PwgDataHandler.prototype = { |
---|
17 | |
---|
18 | _map: null, |
---|
19 | _infoWindow: null, |
---|
20 | options: {}, |
---|
21 | _markers: [], |
---|
22 | _navHtmlIds: ["gotoPrevImage", "gotoNextImage"], |
---|
23 | _navHtmlHandles: [], |
---|
24 | _prevResult: { nb_items:0 }, |
---|
25 | |
---|
26 | |
---|
27 | terminate: function() |
---|
28 | { |
---|
29 | this._map = null; |
---|
30 | try { |
---|
31 | for (i=0; i<this._markers.length; i++) |
---|
32 | this._markers[i].pwg = null; |
---|
33 | this._markers.length = 0; |
---|
34 | } |
---|
35 | catch(e){} |
---|
36 | }, |
---|
37 | |
---|
38 | handle: function( data ) |
---|
39 | { |
---|
40 | var i; |
---|
41 | if (document.title != data.title ) |
---|
42 | document.title = data.title; |
---|
43 | var elt = document.getElementById("aPageUrl"); |
---|
44 | if (elt && elt.href!=data.page_url.urlNoHtm() ) |
---|
45 | { |
---|
46 | elt.href = data.page_url.urlNoHtm(); |
---|
47 | elt.innerHTML = data.title; |
---|
48 | elt.title = Localization.fmt1("go to %s", data.title); |
---|
49 | } |
---|
50 | var elt = document.getElementById("aBlowup"); |
---|
51 | if (elt && elt.href!=data.blowup_url.urlNoHtm()) |
---|
52 | elt.href = data.blowup_url.urlNoHtm(); |
---|
53 | |
---|
54 | var elt = document.getElementById("aKml"); |
---|
55 | if (elt && elt.href!=data.kml_url.urlNoHtm()) |
---|
56 | { |
---|
57 | elt.href = data.kml_url.urlNoHtm(); |
---|
58 | elt.title = Localization.fmt1("opens %s in Google Earth", data.title); |
---|
59 | } |
---|
60 | var changed = true; |
---|
61 | if (this._prevResult.nb_items==data.nb_items && this._markers.length==data.image_clusters.length ) |
---|
62 | { |
---|
63 | changed = false; |
---|
64 | if (this._markers.length>0 && !this._markers[0].getPosition().equals( data.image_clusters[0].position ) ) |
---|
65 | changed=true; |
---|
66 | } |
---|
67 | |
---|
68 | if (changed) |
---|
69 | { |
---|
70 | // BEGIN NEW **************** |
---|
71 | var markersToRemove=[], clustersToAdd=[], newMarkers=[]; |
---|
72 | data.image_clusters.sort( function(a,b) { return PwgDataHandler.cmpll( a.position, b.position); } ); |
---|
73 | for (i=0; i<data.image_clusters.length; i++) |
---|
74 | { |
---|
75 | var cluster = data.image_clusters[i]; |
---|
76 | while(this._markers.length) |
---|
77 | { |
---|
78 | var marker = this._markers[0]; |
---|
79 | if (PwgDataHandler.cmpll(cluster.position, marker.getPosition()) == 0) |
---|
80 | { |
---|
81 | marker.pwg = { |
---|
82 | nb_items: cluster.nb_items, |
---|
83 | images: cluster.items, |
---|
84 | bounds: cluster.bounds, |
---|
85 | blowup_url: cluster.blowup_url |
---|
86 | }; |
---|
87 | newMarkers.push(marker); |
---|
88 | this._markers.shift(); |
---|
89 | cluster = null; |
---|
90 | break; |
---|
91 | } |
---|
92 | else if (PwgDataHandler.cmpll(cluster.position, marker.getPosition()) < 0) |
---|
93 | { |
---|
94 | break; |
---|
95 | } |
---|
96 | else |
---|
97 | { |
---|
98 | markersToRemove.push(marker); |
---|
99 | this._markers.shift(); |
---|
100 | } |
---|
101 | } |
---|
102 | |
---|
103 | if (cluster) |
---|
104 | clustersToAdd.push(cluster); |
---|
105 | } |
---|
106 | |
---|
107 | if (document.is_debug) glog('reused ' + newMarkers.length + ' exact markers'); |
---|
108 | markersToRemove = markersToRemove.concat( this._markers ); |
---|
109 | |
---|
110 | var infoWindowMarker = this._infoWindow.getAnchor(); |
---|
111 | for (i=0; i<clustersToAdd.length; i++) |
---|
112 | { |
---|
113 | var cluster = clustersToAdd[i]; |
---|
114 | var theTitle = ""; |
---|
115 | if (cluster.nb_items>1) |
---|
116 | theTitle = Localization.fmt1("%d photos", cluster.nb_items); |
---|
117 | else |
---|
118 | theTitle = cluster.items[0].name; |
---|
119 | |
---|
120 | var marker = markersToRemove.pop(); |
---|
121 | if (marker && marker==infoWindowMarker) |
---|
122 | { |
---|
123 | marker.setMap(null); |
---|
124 | google.maps.event.clearInstanceListeners(marker); |
---|
125 | if (document.is_debug) glog('removed marker with infoWindow'); |
---|
126 | marker = this._markers.pop(); |
---|
127 | } |
---|
128 | |
---|
129 | if (!marker) |
---|
130 | { |
---|
131 | marker = new google.maps.Marker(this.options.markerOptions); |
---|
132 | marker.setPosition(cluster.position); |
---|
133 | marker.setTitle(theTitle); |
---|
134 | google.maps.event.addListener( marker, "click", pwgBind(this, this._onMarkerClick, marker) ); |
---|
135 | google.maps.event.addListener( marker, "dblclick", pwgBind(this, this._onMarkerDblClick, marker) ); |
---|
136 | marker.setMap(this._map); |
---|
137 | } |
---|
138 | else |
---|
139 | { |
---|
140 | marker.currentImageIndex=0; |
---|
141 | marker.setPosition( cluster.position ); |
---|
142 | marker.setTitle(theTitle); |
---|
143 | } |
---|
144 | |
---|
145 | newMarkers.push(marker); |
---|
146 | |
---|
147 | marker.pwg = { |
---|
148 | nb_items: cluster.nb_items, |
---|
149 | images: cluster.items, |
---|
150 | bounds: cluster.bounds, |
---|
151 | blowup_url: cluster.blowup_url |
---|
152 | }; |
---|
153 | } |
---|
154 | |
---|
155 | for (i=0; i<markersToRemove.length; i++) |
---|
156 | { |
---|
157 | markersToRemove[i].setMap(null); |
---|
158 | google.maps.event.clearInstanceListeners(markersToRemove[i]); |
---|
159 | } |
---|
160 | |
---|
161 | this._markers = newMarkers; |
---|
162 | this._markers.sort( function(a,b) { return PwgDataHandler.cmpll( a.getPosition(), b.getPosition()); } ); |
---|
163 | // END new |
---|
164 | |
---|
165 | /* var newMarkers = []; |
---|
166 | var infoWindowMarker = this._infoWindow.getAnchor(); |
---|
167 | |
---|
168 | for (i=0; i<data.image_clusters.length; i++) |
---|
169 | { |
---|
170 | var cluster = data.image_clusters[i]; |
---|
171 | var theTitle = ""; |
---|
172 | if (cluster.nb_items>1) |
---|
173 | theTitle = Localization.fmt1("%d photos", cluster.nb_items); |
---|
174 | else |
---|
175 | theTitle = cluster.items[0].name; |
---|
176 | |
---|
177 | var marker; |
---|
178 | marker = this._markers.pop(); |
---|
179 | if (marker && marker==infoWindowMarker) |
---|
180 | { |
---|
181 | marker.setMap(null); |
---|
182 | google.maps.event.clearInstanceListeners(marker); |
---|
183 | if (document.is_debug) glog('removed marker with infoWindow'); |
---|
184 | marker = this._markers.pop(); |
---|
185 | } |
---|
186 | |
---|
187 | if (!marker) |
---|
188 | { |
---|
189 | marker = new google.maps.Marker(this.options.markerOptions); |
---|
190 | marker.setPosition(cluster.position); |
---|
191 | marker.setTitle(theTitle); |
---|
192 | google.maps.event.addListener( marker, "click", pwgBind(this, this._onMarkerClick, marker) ); |
---|
193 | google.maps.event.addListener( marker, "dblclick", pwgBind(this, this._onMarkerDblClick, marker) ); |
---|
194 | } |
---|
195 | else |
---|
196 | { |
---|
197 | marker.currentImageIndex=0; |
---|
198 | marker.setPosition( cluster.position ); |
---|
199 | marker.setTitle(theTitle); |
---|
200 | } |
---|
201 | marker.setMap(this._map); |
---|
202 | |
---|
203 | newMarkers.push(marker); |
---|
204 | |
---|
205 | marker.pwg = { |
---|
206 | nb_items: cluster.nb_items, |
---|
207 | images: cluster.items, |
---|
208 | bounds: cluster.bounds, |
---|
209 | blowup_url: cluster.blowup_url |
---|
210 | }; |
---|
211 | } |
---|
212 | |
---|
213 | for (i=0; i<this._markers.length; i++) |
---|
214 | { |
---|
215 | this._markers[i].setMap(null); |
---|
216 | google.maps.event.clearInstanceListeners(this._markers[i]); |
---|
217 | } |
---|
218 | */ |
---|
219 | this._markers = newMarkers; |
---|
220 | this._prevResult.nb_items=data.nb_items; |
---|
221 | } |
---|
222 | |
---|
223 | document.getElementById("dataLoadStatus").innerHTML = Localization.fmt1("%d photos", data.nb_items); |
---|
224 | }, |
---|
225 | |
---|
226 | _onMarkerClick: function( marker ) |
---|
227 | { |
---|
228 | if (this._infoWindow.getAnchor() == marker ) |
---|
229 | return; // already open |
---|
230 | var content = ""; |
---|
231 | if ( !marker.currentImageIndex ) |
---|
232 | marker.currentImageIndex = 0; |
---|
233 | content += '<div class="gmiw_header" style="' + (marker.pwg.images.length>1 ? '': 'display:none')+ '">'; |
---|
234 | content += '<span id="pwgImageCounters">'+this.buildCurrentPictureCounterHtml(marker)+'</span> '; |
---|
235 | content += '<a href="javascript:void(0);" id="'+this._navHtmlIds[0]+'">'; |
---|
236 | content += '<span>'+ "« " + Localization.get('Prev') + '</span>'; |
---|
237 | content += '</a>'; |
---|
238 | content += " "; |
---|
239 | content += '<a href="javascript:void(0);" id="'+this._navHtmlIds[1]+'">'; |
---|
240 | content += '<span>'+Localization.get('Next') + " »"+'</span>'; |
---|
241 | content += '</a>'; |
---|
242 | content += " "; |
---|
243 | var imgShowAll = ''; |
---|
244 | if (this.options.show_all_img_src) |
---|
245 | imgShowAll = '<img src="'+this.options.show_all_img_src+'" alt="" style="border:0" /> '; |
---|
246 | content += '<a id="pwgImageBlowup" href="'+marker.pwg.blowup_url+'" onclick="return PwgDataHandler.blowupUrl(this.href);" title='+Localization.getQ('show all photos around this location')+'>'+ |
---|
247 | imgShowAll+ '<span>'+Localization.get('Show all')+'</span>'+ |
---|
248 | '</a>'; |
---|
249 | content += '</div>'; |
---|
250 | content += '<div id="pwgImageDetail">' + this.buildCurrentPictureHtml( marker ) + '</div>'; |
---|
251 | |
---|
252 | var h; |
---|
253 | while (h = this._navHtmlHandles.pop()) |
---|
254 | google.maps.event.removeListener(h); |
---|
255 | |
---|
256 | google.maps.event.addListenerOnce( this._infoWindow, "domready", pwgBind(this, this._onInfoWindowDomReady) ); |
---|
257 | this._infoWindow.setContent( content ); |
---|
258 | this._infoWindow.setPosition( marker.getPosition() ); |
---|
259 | this._infoWindow.open( this._map, marker ); |
---|
260 | }, |
---|
261 | |
---|
262 | _onMarkerDblClick: function( marker ) |
---|
263 | { |
---|
264 | this._map.fitBounds( marker.pwg.bounds ); |
---|
265 | }, |
---|
266 | |
---|
267 | _onMapClick: function( marker ) |
---|
268 | { |
---|
269 | this._infoWindow.close(); |
---|
270 | }, |
---|
271 | |
---|
272 | buildCurrentPictureHtml: function( marker ) |
---|
273 | { |
---|
274 | var imageDetail = marker.pwg.images[marker.currentImageIndex]; |
---|
275 | var res = ""; |
---|
276 | res += '<div class="gmiw_imageTitle">' + imageDetail.name + "</div>"; |
---|
277 | res += |
---|
278 | '<div class="gmiw_imageContent">' + |
---|
279 | '<div class="gmiw_imageWrap">'+ |
---|
280 | '<a href="'+imageDetail.page_url+'">' + |
---|
281 | '<img src="' + imageDetail.tn + '" alt="thumb" />'+ |
---|
282 | '</a></div>' + |
---|
283 | '<div class="gmiw_imageComment">' + imageDetail.comment + '</div>' + |
---|
284 | '</div>'; |
---|
285 | return res; |
---|
286 | }, |
---|
287 | |
---|
288 | buildCurrentPictureCounterHtml: function( marker ) |
---|
289 | { |
---|
290 | var res = |
---|
291 | '<b>'+(marker.currentImageIndex+1)+'</b>'+ |
---|
292 | '/' + |
---|
293 | '<b>'+marker.pwg.images.length+'</b>'; |
---|
294 | if (marker.pwg.nb_items>marker.pwg.images.length) |
---|
295 | res+= " "+Localization.fmt1("out of %d", marker.pwg.nb_items ); |
---|
296 | return res; |
---|
297 | }, |
---|
298 | |
---|
299 | |
---|
300 | _onInfoWindowDomReady: function() |
---|
301 | { |
---|
302 | if (!this._infoWindow.getAnchor() || this._infoWindow.getAnchor().pwg.images.length<2) |
---|
303 | return; |
---|
304 | for (var i=0; i< this._navHtmlIds.length; i++) |
---|
305 | { |
---|
306 | var elt = document.getElementById( this._navHtmlIds[i] ); |
---|
307 | if (elt) |
---|
308 | this._navHtmlHandles.push( google.maps.event.addDomListener(elt, "click", pwgBind(this, this._onPictureNavigate, this._infoWindow.getAnchor(), i) ) ); |
---|
309 | } |
---|
310 | }, |
---|
311 | |
---|
312 | _onPictureNavigate: function(marker, dir ) |
---|
313 | { |
---|
314 | if (dir==0) dir=-1; |
---|
315 | marker.currentImageIndex += dir; |
---|
316 | if (marker.currentImageIndex<0) |
---|
317 | marker.currentImageIndex = marker.pwg.images.length-1; |
---|
318 | else if (marker.currentImageIndex >= marker.pwg.images.length) |
---|
319 | marker.currentImageIndex = 0; |
---|
320 | |
---|
321 | try { |
---|
322 | var elt = document.getElementById( "pwgImageDetail" ); |
---|
323 | elt.innerHTML = this.buildCurrentPictureHtml( marker ); |
---|
324 | } |
---|
325 | catch (e) |
---|
326 | { |
---|
327 | alert (e.message); |
---|
328 | } |
---|
329 | |
---|
330 | try { |
---|
331 | var elt = document.getElementById( "pwgImageCounters" ); |
---|
332 | elt.innerHTML = this.buildCurrentPictureCounterHtml( marker ); |
---|
333 | } |
---|
334 | catch (e) |
---|
335 | { |
---|
336 | alert (e.message); |
---|
337 | } |
---|
338 | return false; |
---|
339 | } |
---|
340 | |
---|
341 | } |
---|
342 | |
---|
343 | PwgDataHandler.blowupUrl = function(theUrl) |
---|
344 | { |
---|
345 | jQuery.fx.off = true; |
---|
346 | jQuery.nyroModalManual( { |
---|
347 | url: theUrl, |
---|
348 | forceType: 'iframe', |
---|
349 | width: 1920 |
---|
350 | }); |
---|
351 | return false; |
---|
352 | } |
---|
353 | |
---|
354 | PwgDataHandler.cmpll = function(a,b) { |
---|
355 | var d= a.lng() - b.lng(); |
---|
356 | if (d < -.5e-6) |
---|
357 | return -1; |
---|
358 | else if (d > .5e-6) |
---|
359 | return 1; |
---|
360 | d= a.lat() - b.lat(); |
---|
361 | if (d < -.5e-6) |
---|
362 | return -1; |
---|
363 | else if (d > .5e-6) |
---|
364 | return 1; |
---|
365 | return 0; |
---|
366 | } |
---|
367 | |
---|
368 | String.prototype.urlNoHtm = function() |
---|
369 | { |
---|
370 | return this.replace( "&", "&" ); |
---|
371 | } |
---|