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

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

rv_gmaps use colorbox instead of nyroModal

  • Property svn:eol-style set to LF
File size: 8.4 KB
Line 
1
2function PwgDataHandler( map, opts )
3{
4        this._map = map;
5        this._infoWindow = new google.maps.InfoWindow();
6        this.styler = opts.styler;
7        this.options = jQuery.fn.extend(
8                {
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                var markersToRemove=[], clustersToAdd=[], newMarkers=[], cluster, marker;
71                data.image_clusters.sort( function(a,b) { return PwgDataHandler.cmpll( a.position, b.position); } );
72                for (i=0; i<data.image_clusters.length; i++)
73                {
74                        cluster = data.image_clusters[i];
75                        while(this._markers.length)
76                        {
77                                marker = this._markers[0];
78                                if (PwgDataHandler.cmpll(cluster.position, marker.getPosition()) == 0)
79                                {
80                                        marker.setOptions(this.styler.changeStyle(cluster, marker.pwg));
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                        cluster = clustersToAdd[i];
114                       
115                        var theTitle = (cluster.nb_items>1) ? Localization.fmt1("%d photos", cluster.nb_items) : cluster.items[0].name;
116                        marker = markersToRemove.pop();
117                        if (marker && marker==infoWindowMarker)
118                        {
119                                marker.setMap(null);
120                                google.maps.event.clearInstanceListeners(marker);
121                                if (document.is_debug) glog('removed marker with infoWindow');
122                                marker = this._markers.pop();
123                        }
124
125                        if (!marker)
126                        {
127                                marker = new google.maps.Marker(this.styler.getStyle(cluster));
128                                marker.setPosition(cluster.position);
129                                marker.setTitle(theTitle);
130                                google.maps.event.addListener( marker, "click", pwgBind(this, this._onMarkerClick, marker) );
131                                google.maps.event.addListener( marker, "dblclick", pwgBind(this, this._onMarkerDblClick, marker) );
132                                marker.setMap(this._map);
133                        }
134                        else
135                        {
136                                marker.currentImageIndex=0;
137                                marker.setPosition( cluster.position );
138                                marker.setTitle(theTitle);
139                                marker.setOptions(this.styler.changeStyle(cluster, marker.pwg));
140                        }
141
142                        newMarkers.push(marker);
143
144                        marker.pwg = {
145                                nb_items: cluster.nb_items,
146                                images: cluster.items,
147                                bounds: cluster.bounds,
148                                blowup_url: cluster.blowup_url
149                                };
150                }
151
152                for (i=0; i<markersToRemove.length; i++)
153                {
154                        markersToRemove[i].setMap(null);
155                        google.maps.event.clearInstanceListeners(markersToRemove[i]);
156                }
157
158                this._markers = newMarkers;
159                this._markers.sort( function(a,b) { return PwgDataHandler.cmpll( a.getPosition(), b.getPosition()); } );
160                this._prevResult.nb_items=data.nb_items;
161        }
162
163        document.getElementById("dataLoadStatus").innerHTML = Localization.fmt1("%d photos", data.nb_items);
164},
165
166_onMarkerClick: function( marker )
167{
168        if (this._infoWindow.getAnchor() == marker )
169                return; // already open
170        var content = "";
171        if ( !marker.currentImageIndex )
172                marker.currentImageIndex = 0;
173        content += '<div class="gmiw_header" style="' + (marker.pwg.images.length>1 ? '': 'display:none')+ '">';
174        content += '<span id="pwgImageCounters">'+this.buildCurrentPictureCounterHtml(marker)+'</span> ';
175        content += '<a href="javascript:void(0);" id="'+this._navHtmlIds[0]+'">';
176        content +=    '<span>'+ "&laquo; " + Localization.get('Prev') + '</span>';
177        content += '</a>';
178        content += " ";
179        content += '<a href="javascript:void(0);" id="'+this._navHtmlIds[1]+'">';
180        content +=    '<span>'+Localization.get('Next') + " &raquo;"+'</span>';
181        content += '</a>';
182        content += " ";
183        var imgShowAll = '';
184        if (this.options.show_all_img_src)
185                imgShowAll = '<img src="'+this.options.show_all_img_src+'" alt="" style="border:0" /> ';
186        content += '<a id="pwgImageBlowup" href="'+marker.pwg.blowup_url+'" onclick="return PwgDataHandler.blowupUrl(this.href);" title='+Localization.getQ('show all photos around this location')+'>'+
187                                                imgShowAll+ '<span>'+Localization.get('Show all')+'</span>'+
188                                        '</a>';
189        content += '</div>';
190        content += '<div id="pwgImageDetail">' + this.buildCurrentPictureHtml( marker ) + '</div>';
191
192        var h;
193        while (h = this._navHtmlHandles.pop())
194                google.maps.event.removeListener(h);
195
196        google.maps.event.addListenerOnce( this._infoWindow, "domready", pwgBind(this, this._onInfoWindowDomReady) );
197        this._infoWindow.setContent( content );
198        this._infoWindow.setPosition( marker.getPosition() );
199        this._infoWindow.open( this._map, marker );
200},
201
202_onMarkerDblClick: function( marker )
203{
204        this._map.fitBounds( marker.pwg.bounds );
205},
206
207_onMapClick: function( marker )
208{
209        this._infoWindow.close();
210},
211
212buildCurrentPictureHtml: function( marker )
213{
214        var imageDetail = marker.pwg.images[marker.currentImageIndex];
215        var res = "";
216        res += '<div class="gmiw_imageTitle">' + imageDetail.name + "</div>";
217        res +=
218'<div class="gmiw_imageContent">' +
219'<div class="gmiw_imageWrap">'+
220  '<a href="'+imageDetail.page_url+'">' +
221  '<img src="' + imageDetail.tn + '" alt="thumb" />'+
222'</a></div>' +
223'<div class="gmiw_imageComment">' + imageDetail.comment + '</div>' +
224'</div>';
225        return res;
226},
227
228buildCurrentPictureCounterHtml: function( marker )
229{
230        var res =
231                '<b>'+(marker.currentImageIndex+1)+'</b>'+
232                '/' +
233                '<b>'+marker.pwg.images.length+'</b>';
234        if (marker.pwg.nb_items>marker.pwg.images.length)
235                res+= " "+Localization.fmt1("out of %d", marker.pwg.nb_items );
236        return res;
237},
238
239
240_onInfoWindowDomReady: function()
241{
242        if (!this._infoWindow.getAnchor() || this._infoWindow.getAnchor().pwg.images.length<2)
243                return;
244        for (var i=0; i< this._navHtmlIds.length; i++)
245        {
246                var elt = document.getElementById( this._navHtmlIds[i] );
247                if (elt)
248                        this._navHtmlHandles.push( google.maps.event.addDomListener(elt, "click", pwgBind(this, this._onPictureNavigate, this._infoWindow.getAnchor(), i) ) );
249        }
250},
251
252_onPictureNavigate: function(marker, dir )
253{
254        if (dir==0) dir=-1;
255        marker.currentImageIndex += dir;
256        if (marker.currentImageIndex<0)
257                marker.currentImageIndex = marker.pwg.images.length-1;
258        else if (marker.currentImageIndex >= marker.pwg.images.length)
259                marker.currentImageIndex = 0;
260
261        try {
262                var elt = document.getElementById( "pwgImageDetail" );
263                elt.innerHTML = this.buildCurrentPictureHtml( marker );
264        }
265        catch (e)
266        {
267                alert (e.message);
268        }
269
270        try {
271                var elt = document.getElementById( "pwgImageCounters" );
272                elt.innerHTML = this.buildCurrentPictureCounterHtml( marker );
273        }
274        catch (e)
275        {
276                alert (e.message);
277        }
278        return false;
279}
280
281}
282
283PwgDataHandler.blowupUrl = function(theUrl)
284{
285        jQuery.colorbox( {
286                href: theUrl,
287                iframe: 1,
288                width: "95%", height: "98%"
289        });
290        return false;
291}
292
293PwgDataHandler.cmpll = function(a,b) {
294        var d= a.lng() - b.lng();
295        if (d < -.5e-6)
296                return -1;
297        else if (d > .5e-6)
298                return 1;
299        d= a.lat() - b.lat();
300        if (d < -.5e-6)
301                return -1;
302        else if (d > .5e-6)
303                return 1;
304        return 0;
305}
306
307String.prototype.urlNoHtm = function()
308{
309        return this.replace( "&amp;", "&" );
310}
Note: See TracBrowser for help on using the repository browser.