source: extensions/rv_gmaps/trunk/template/data_handler.js @ 12706

Last change on this file since 12706 was 12706, checked in by rvelices, 12 years ago

rv_gmaps use places autocomplete + added new markers + better algo for displaying markers

  • Property svn:eol-style set to LF
File size: 9.8 KB
Line 
1
2function 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
16PwgDataHandler.prototype =  {
17
18_map: null,
19_infoWindow: null,
20options: {},
21_markers: [],
22_navHtmlIds: ["gotoPrevImage", "gotoNextImage"],
23_navHtmlHandles: [],
24_prevResult: { nb_items:0 },
25
26
27terminate: 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
38handle: 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>'+ "&laquo; " + 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') + " &raquo;"+'</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
272buildCurrentPictureHtml: 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
288buildCurrentPictureCounterHtml: 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
343PwgDataHandler.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
354PwgDataHandler.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
368String.prototype.urlNoHtm = function()
369{
370        return this.replace( "&amp;", "&" );
371}
Note: See TracBrowser for help on using the repository browser.