1 | |
---|
2 | function PwgDataHandler( map, opts ) |
---|
3 | { |
---|
4 | this._map = map; |
---|
5 | this.options = Object.extend( |
---|
6 | { |
---|
7 | icon: G_DEFAULT_ICON, |
---|
8 | show_all_img_src: null |
---|
9 | } |
---|
10 | , opts || {} ); |
---|
11 | |
---|
12 | GEvent.addListener( map, "infowindowclose", function() {map.getInfoWindow().pwgMarker=null;} ); |
---|
13 | } |
---|
14 | |
---|
15 | PwgDataHandler.prototype = { |
---|
16 | |
---|
17 | _map: null, |
---|
18 | options: {}, |
---|
19 | _markers: [], |
---|
20 | _navHtmlIds: ["gotoPrevImage", "gotoNextImage"], |
---|
21 | _timerBindPictureNavigation: null, |
---|
22 | _prevResult: { nb_items:0 }, |
---|
23 | |
---|
24 | |
---|
25 | terminate: function() |
---|
26 | { |
---|
27 | this._map = null; |
---|
28 | try { |
---|
29 | for (i=0; i<this._markers.length; i++) |
---|
30 | this._markers[i].pwg = null; |
---|
31 | this._markers.length = 0; |
---|
32 | } |
---|
33 | catch(e){} |
---|
34 | }, |
---|
35 | |
---|
36 | handle: function( data ) |
---|
37 | { |
---|
38 | var i; |
---|
39 | if (document.title != data.title ) |
---|
40 | document.title = data.title; |
---|
41 | var elt = document.getElementById("aPageUrl"); |
---|
42 | if (elt && elt.href!=data.page_url.urlNoHtm() ) |
---|
43 | { |
---|
44 | elt.href = data.page_url.urlNoHtm(); |
---|
45 | elt.innerHTML = data.title; |
---|
46 | elt.title = Localization.fmt1("go to %s", data.title); |
---|
47 | } |
---|
48 | var elt = document.getElementById("aBlowup"); |
---|
49 | if (elt && elt.href!=data.blowup_url.urlNoHtm()) |
---|
50 | elt.href = data.blowup_url.urlNoHtm(); |
---|
51 | |
---|
52 | var elt = document.getElementById("aKml"); |
---|
53 | if (elt && elt.href!=data.kml_url.urlNoHtm()) |
---|
54 | { |
---|
55 | elt.href = data.kml_url.urlNoHtm(); |
---|
56 | elt.title = Localization.fmt1("opens %s in Google Earth", data.title); |
---|
57 | } |
---|
58 | var changed = true; |
---|
59 | if (this._prevResult.nb_items==data.nb_items && this._markers.length==data.image_clusters.length ) |
---|
60 | { |
---|
61 | changed = false; |
---|
62 | if (this._markers.length>0 && !this._markers[0].getLatLng().equals( data.image_clusters[0].position ) ) |
---|
63 | changed=true; |
---|
64 | } |
---|
65 | |
---|
66 | if (changed) |
---|
67 | { |
---|
68 | var newMarkers = []; |
---|
69 | var infoWindowMarker = this._map.getInfoWindow().pwgMarker; |
---|
70 | |
---|
71 | for (i=0; i<data.image_clusters.length; i++) |
---|
72 | { |
---|
73 | var cluster = data.image_clusters[i]; |
---|
74 | var theTitle = ""; |
---|
75 | if (cluster.nb_items>1) |
---|
76 | theTitle = Localization.fmt1("%d elements", cluster.nb_items); |
---|
77 | else |
---|
78 | theTitle = cluster.items[0].name; |
---|
79 | |
---|
80 | var marker; |
---|
81 | marker = this._markers.pop(); |
---|
82 | if (marker && marker==infoWindowMarker) |
---|
83 | { |
---|
84 | this._map.removeOverlay( marker ); |
---|
85 | GEvent.clearListeners(marker, "click" ); |
---|
86 | GEvent.clearListeners(marker, "dblclick" ); |
---|
87 | this._map.getInfoWindow().pwgMarker = infoWindowMarker = null; |
---|
88 | if (document.is_debug) GLog.write('removed marker with infoWindow'); |
---|
89 | marker = this._markers.pop(); |
---|
90 | } |
---|
91 | |
---|
92 | if (!marker) |
---|
93 | { |
---|
94 | marker = new GMarker( cluster.position, {title: theTitle, icon: this.options.icon } ); |
---|
95 | GEvent.addListener( marker, "click", this._onMarkerClick.bind(this, marker) ); |
---|
96 | GEvent.addListener( marker, "dblclick", this._onMarkerDblClick.bind(this, marker) ); |
---|
97 | this._map.addOverlay( marker ); |
---|
98 | } |
---|
99 | else |
---|
100 | { |
---|
101 | marker.currentImageIndex=0; |
---|
102 | marker.setLatLng( cluster.position ); |
---|
103 | // changing the marker title is undocumented so we hack it |
---|
104 | if (!this.hack) |
---|
105 | { |
---|
106 | this.hack = {}; |
---|
107 | for (var prop in marker) |
---|
108 | { |
---|
109 | if ( typeof(marker[prop])!='object') continue; |
---|
110 | if (!this.hack.markerHtmlElemWithTitle ) |
---|
111 | { |
---|
112 | try { |
---|
113 | if (eval("typeof marker." + prop + "[0].src") == "string" && eval("typeof marker." + prop + "[0].title") == "string" ) |
---|
114 | this.hack.markerHtmlElemWithTitle = prop; |
---|
115 | } |
---|
116 | catch (e) {} |
---|
117 | } |
---|
118 | if (!this.hack.markerOptions) |
---|
119 | try { |
---|
120 | if ( eval("typeof marker."+prop+".title")=="string" && eval("typeof marker."+prop+".src")=="undefined") |
---|
121 | this.hack.markerOptions = prop; |
---|
122 | } |
---|
123 | catch (e) {} |
---|
124 | } |
---|
125 | } |
---|
126 | //undocumented marker.K , marker.ch and marker.jb and marker.l |
---|
127 | if (this.hack.markerOptions) |
---|
128 | eval( 'marker.'+this.hack.markerOptions+'.title=theTitle'); |
---|
129 | if (this.hack.markerHtmlElemWithTitle) |
---|
130 | eval( 'marker.'+this.hack.markerHtmlElemWithTitle+'[0].title=theTitle'); |
---|
131 | } |
---|
132 | |
---|
133 | newMarkers.push(marker); |
---|
134 | |
---|
135 | marker.pwg = { |
---|
136 | nb_items: cluster.nb_items, |
---|
137 | images: cluster.items, |
---|
138 | bounds: cluster.bounds, |
---|
139 | blowup_url: cluster.blowup_url |
---|
140 | }; |
---|
141 | } |
---|
142 | |
---|
143 | for (i=0; i<this._markers.length; i++) |
---|
144 | { |
---|
145 | this._map.removeOverlay( this._markers[i] ); |
---|
146 | GEvent.clearListeners(this._markers[i], "click" ); |
---|
147 | GEvent.clearListeners(this._markers[i], "dblclick" ); |
---|
148 | } |
---|
149 | |
---|
150 | this._markers = newMarkers; |
---|
151 | |
---|
152 | this._prevResult.nb_items=data.nb_items; |
---|
153 | } |
---|
154 | |
---|
155 | document.getElementById("dataLoadStatus").innerHTML = Localization.fmt1("%d elements", data.nb_items); |
---|
156 | }, |
---|
157 | |
---|
158 | _onMarkerClick: function( marker ) |
---|
159 | { |
---|
160 | if (this._map.getInfoWindow().pwgMarker == marker ) |
---|
161 | return; // already open |
---|
162 | var content = ""; |
---|
163 | if ( !marker.currentImageIndex ) |
---|
164 | marker.currentImageIndex = 0; |
---|
165 | content += '<div class="gmiw_header" style="' + (marker.pwg.images.length>1 ? '': 'display:none')+ '">'; |
---|
166 | content += '<span id="pwgImageCounters">'+this.buildCurrentPictureCounterHtml(marker)+'</span> '; |
---|
167 | content += '<a href="javascript:void(0);" id="'+this._navHtmlIds[0]+'">'; |
---|
168 | content += '<span>'+ "« " + Localization.get('Prev') + '</span>'; |
---|
169 | content += '</a>'; |
---|
170 | content += " "; |
---|
171 | content += '<a href="javascript:void(0);" id="'+this._navHtmlIds[1]+'">'; |
---|
172 | content += '<span>'+Localization.get('Next') + " »"+'</span>'; |
---|
173 | content += '</a>'; |
---|
174 | content += " "; |
---|
175 | var imgShowAll = ''; |
---|
176 | if (this.options.show_all_img_src) |
---|
177 | imgShowAll = '<img src="'+this.options.show_all_img_src+'" alt="" style="border:0" /> '; |
---|
178 | content += '<a id="pwgImageBlowup" href="'+marker.pwg.blowup_url+'" onclick="return PwgDataHandler.blowupUrl(this.href);" title='+Localization.getQ('show all pictures around this location')+'>'+ |
---|
179 | imgShowAll+ '<span>'+Localization.get('Show all')+'</span>'+ |
---|
180 | '</a>'; |
---|
181 | content += '</div>'; |
---|
182 | content += '<div id="pwgImageDetail">' + this.buildCurrentPictureHtml( marker ) + '</div>'; |
---|
183 | |
---|
184 | marker.openInfoWindowHtml( content ); |
---|
185 | |
---|
186 | // bind to next / prev a little later because sometimes the nodes are not immediately created |
---|
187 | if (this._timerBindPictureNavigation) clearTimeout(this._timerBindPictureNavigation); |
---|
188 | this._timerBindPictureNavigation = null; |
---|
189 | if (marker.pwg.images.length>1) |
---|
190 | this._timerBindPictureNavigation = setTimeout( this._onTimeoutBindPictureNavigation.bind(this, marker), 250 ); |
---|
191 | }, |
---|
192 | |
---|
193 | _onMarkerDblClick: function( marker ) |
---|
194 | { |
---|
195 | this._map.setCenter( marker.pwg.bounds.getCenter(), this._map.getBoundsZoomLevel( marker.pwg.bounds ) ); |
---|
196 | }, |
---|
197 | |
---|
198 | buildCurrentPictureHtml: function( marker ) |
---|
199 | { |
---|
200 | var imageDetail = marker.pwg.images[marker.currentImageIndex]; |
---|
201 | var res = ""; |
---|
202 | res += '<div class="gmiw_imageTitle">' + imageDetail.name + "</div>"; |
---|
203 | res += |
---|
204 | '<div class="gmiw_imageContent">' + |
---|
205 | '<div class="gmiw_imageWrap">'+ |
---|
206 | '<a href="'+imageDetail.page_url+'">' + |
---|
207 | '<img src="' + imageDetail.tn + '" alt="thumb" />'+ |
---|
208 | '</a></div>' + |
---|
209 | '<div class="gmiw_imageComment">' + imageDetail.comment + '</div>' + |
---|
210 | '</div>'; |
---|
211 | return res; |
---|
212 | }, |
---|
213 | |
---|
214 | buildCurrentPictureCounterHtml: function( marker ) |
---|
215 | { |
---|
216 | var res = |
---|
217 | '<b>'+(marker.currentImageIndex+1)+'</b>'+ |
---|
218 | '/' + |
---|
219 | '<b>'+marker.pwg.images.length+'</b>'; |
---|
220 | if (marker.pwg.nb_items>marker.pwg.images.length) |
---|
221 | res+= " "+Localization.fmt1("out of %d", marker.pwg.nb_items ); |
---|
222 | return res; |
---|
223 | }, |
---|
224 | |
---|
225 | |
---|
226 | _onTimeoutBindPictureNavigation: function( marker ) |
---|
227 | { |
---|
228 | clearTimeout(this._timerBindPictureNavigation); |
---|
229 | this._timerBindPictureNavigation = null; |
---|
230 | this._map.getInfoWindow().pwgMarker = marker; |
---|
231 | for (var i=0; i< this._navHtmlIds.length; i++) |
---|
232 | { |
---|
233 | var elt = document.getElementById( this._navHtmlIds[i] ); |
---|
234 | if (elt) |
---|
235 | GEvent.addDomListener(elt, "click", this._onPictureNavigate.bind(this, marker, i) ); |
---|
236 | } |
---|
237 | }, |
---|
238 | |
---|
239 | _onPictureNavigate: function(marker, dir ) |
---|
240 | { |
---|
241 | if (dir==0) dir=-1; |
---|
242 | marker.currentImageIndex += dir; |
---|
243 | if (marker.currentImageIndex<0) |
---|
244 | marker.currentImageIndex = marker.pwg.images.length-1; |
---|
245 | else if (marker.currentImageIndex >= marker.pwg.images.length) |
---|
246 | marker.currentImageIndex = 0; |
---|
247 | |
---|
248 | try { |
---|
249 | var elt = document.getElementById( "pwgImageDetail" ); |
---|
250 | elt.innerHTML = this.buildCurrentPictureHtml( marker ); |
---|
251 | } |
---|
252 | catch (e) |
---|
253 | { |
---|
254 | alert (e.message); |
---|
255 | } |
---|
256 | |
---|
257 | try { |
---|
258 | var elt = document.getElementById( "pwgImageCounters" ); |
---|
259 | elt.innerHTML = this.buildCurrentPictureCounterHtml( marker ); |
---|
260 | } |
---|
261 | catch (e) |
---|
262 | { |
---|
263 | alert (e.message); |
---|
264 | } |
---|
265 | return false; |
---|
266 | } |
---|
267 | |
---|
268 | } |
---|
269 | |
---|
270 | PwgDataHandler.blowupUrl = function(theUrl) |
---|
271 | { |
---|
272 | var win = new Window({ |
---|
273 | title: document.title, |
---|
274 | url: theUrl, |
---|
275 | classname: "alphacube", |
---|
276 | left: 0, top: 0, |
---|
277 | width:"640", height:"480", |
---|
278 | minimizable: false, |
---|
279 | maximizable: false, |
---|
280 | draggable: false, |
---|
281 | resizable: false, |
---|
282 | destroyOnClose: true, |
---|
283 | hideEffect: Element.hide, |
---|
284 | showEffectOptions: {duration:1.5} |
---|
285 | }); |
---|
286 | |
---|
287 | win.setConstraint(true, {top:20, left:20, bottom:30, right:20} ); |
---|
288 | win.maximize(); |
---|
289 | win.showCenter(true, 20, 20); |
---|
290 | return false; |
---|
291 | } |
---|
292 | |
---|
293 | |
---|
294 | String.prototype.urlNoHtm = function() |
---|
295 | { |
---|
296 | return this.replace( "&", "&" ); |
---|
297 | } |
---|