Context Navigation

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

Last change on this file since 6651 was 6651, checked in by rvelices, 14 years ago
rv_gmaps - start using google.maps JS namespace + upgrade prototype.js
Property svn:eol-style set to `LF`
File size: 8.5 KB

Line
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	google.maps.Event.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 images", 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	google.maps.Event.clearListeners(marker, "click" );
86	google.maps.Event.clearListeners(marker, "dblclick" );
87	this._map.getInfoWindow().pwgMarker = infoWindowMarker = null;
88	if (document.is_debug) google.maps.Log.write('removed marker with infoWindow');
89	marker = this._markers.pop();
90	}
91
92	if (!marker)
93	{
94	marker = new google.maps.Marker( cluster.position, {title: theTitle, icon: this.options.icon } );
95	google.maps.Event.addListener( marker, "click", this._onMarkerClick.bind(this, marker) );
96	google.maps.Event.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	google.maps.Event.clearListeners(this._markers[i], "click" );
147	google.maps.Event.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 images", 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	google.maps.Event.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	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats: