Made a bunch of start.rjs stuff translatable, including
[rails.git] / app / views / browse / start.rjs
1 page.replace_html :sidebar_title, t('browse.start_rjs.data_frame_title')
2 page.replace_html :sidebar_content, :partial => 'start'
3 page << <<EOJ
4   var browseBoxControl;
5   var browseActive;
6   var browseMode = "auto";
7   var browseBounds;
8   var browseFeatureList;
9   var browseActiveFeature;
10   var browseDataLayer;
11   var browseSelectControl;
12   var browseObjectList;
13
14   OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
15   OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
16     
17   function startBrowse() {
18     browseActive = true;
19
20     openSidebar({ onclose: stopBrowse });
21
22     var vectors = new OpenLayers.Layer.Vector();
23     
24     browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 
25       handlerOptions: {
26         sides: 4,
27         snapAngle: 90,
28         irregular: true,
29         persist: true,
30         callbacks: { done: endDrag }
31       }
32     });
33     map.addControl(browseBoxControl);
34
35     map.events.register("moveend", map, showData);
36     map.events.triggerEvent("moveend");
37   }
38
39   function showData() {
40     if (browseMode == "auto") {
41       if (map.getZoom() >= 15) {
42           useMap();
43       } else {
44           setStatus("#{I18n.t('browse.start_rjs.zoom_or_select')}");
45       }    
46     }
47   }
48
49   function stopBrowse() {
50     if (browseActive) {
51       browseActive = false;
52
53       if (browseSelectControl) {   
54         browseSelectControl.destroy();  
55         browseSelectControl = null;
56       } 
57
58       if (browseBoxControl) {
59         browseBoxControl.destroy();
60         browseBoxControl = null;
61       }         
62
63       if (browseActiveFeature) {
64         browseActiveFeature.destroy(); 
65         browseActiveFeature = null; 
66       }
67
68       if (browseDataLayer) {
69         browseDataLayer.destroy();
70         browseDataLayer = null; 
71       } 
72
73       map.dataLayer.setVisibility(false);
74       map.events.unregister("moveend", map, showData);
75     }    
76   }
77
78   function startDrag() {
79     $("browse_select_box").innerHTML='#{I18n.t('browse.start_rjs.drag_a_box')}';
80
81     browseBoxControl.activate();
82
83     return false;
84   };
85
86   $("browse_select_box").onclick = startDrag;
87
88   function useMap() {
89     var bounds = map.getExtent();
90     var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
91
92     if (!browseBounds || !browseBounds.containsBounds(projected)) {
93       var center = bounds.getCenterLonLat();
94       var tileWidth = bounds.getWidth() * 1.2;
95       var tileHeight = bounds.getHeight() * 1.2;
96       var tileBounds = new OpenLayers.Bounds(center.lon - (tileWidth / 2),
97                                              center.lat - (tileHeight / 2),
98                                              center.lon + (tileWidth / 2),
99                                              center.lat + (tileHeight / 2));
100
101       browseBounds = tileBounds;
102       getData(tileBounds);
103
104       browseMode = "auto";
105
106       $("browse_select_view").style.display = "none";
107     }
108
109     return false;
110   }
111
112   $("browse_select_view").onclick = useMap;
113
114   function endDrag(bbox) {
115     var bounds = bbox.getBounds();
116     var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
117
118     browseBoxControl.deactivate();
119     browseBounds = projected;
120     getData(bounds);
121
122     browseMode = "manual";  
123
124     $("browse_select_box").innerHTML = "#{I18n.t('browse.start_rjs.manually_select')}";
125     $("browse_select_view").style.display = "inline";
126   }
127
128   function displayFeatureWarning() {
129     clearStatus();
130
131     var div = document.createElement("div");
132
133     var p = document.createElement("p");
134     p.appendChild(document.createTextNode("#{I18n.t('browse.start_rjs.loaded_an_area')} " + browseFeatureList.length + " #{I18n.t('browse.start_rjs.browsers')}"));
135     div.appendChild(p);
136
137     var input = document.createElement("input");
138     input.type = "submit";
139     input.value = "#{I18n.t('browse.start_rjs.load_data')}";
140     input.onclick = loadFeatureList;
141     div.appendChild(input); 
142
143     $("browse_content").innerHTML = "";
144     $("browse_content").appendChild(div);
145   }
146
147   function loadFeatureList() {
148     browseDataLayer.addFeatures(browseFeatureList);
149     browseDataLayer.events.triggerEvent("loadend");
150
151     browseFeatureList = []; 
152
153     return false;
154   }    
155
156   function customDataLoader(request) {
157     if (browseActive) {
158       var doc = request.responseXML;
159
160       if (!doc || !doc.documentElement) {
161         doc = request.responseText;
162       }
163
164       var options = {};
165
166       OpenLayers.Util.extend(options, this.formatOptions);
167
168       if (this.map && !this.projection.equals(this.map.getProjectionObject())) {
169         options.externalProjection = this.projection;
170         options.internalProjection = this.map.getProjectionObject();
171       }    
172
173       var gml = this.format ? new this.format(options) : new OpenLayers.Format.GML(options);
174
175       browseFeatureList = gml.read(doc);
176
177       if (!this.maxFeatures || browseFeatureList.length <= this.maxFeatures) {
178         loadFeatureList();
179       } else {
180         displayFeatureWarning();
181       }
182     }
183   }
184
185   function getData(bounds) {
186     var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
187     var size = projected.getWidth() * projected.getHeight();
188
189     if (size > 0.25) {
190       setStatus("#{I18n.t('browse.start_rjs.unable_to_load')} " + size + " #{I18n.t('browse.start_rjs.must_be_smaller')}");
191     } else {
192       loadGML("/api/#{API_VERSION}/map?bbox=" + projected.toBBOX());
193     }
194   }
195
196   function loadGML(url) {
197     setStatus("#{I18n.t('browse.start_rjs.loading')}");
198     $("browse_content").innerHTML = "";
199
200     if (!browseDataLayer) {
201       var style = new OpenLayers.Style();
202
203       style.addRules([new OpenLayers.Rule({
204         symbolizer: {
205           Polygon: { fillColor: '#ff0000', strokeColor: '#ff0000' },
206           Line: { fillColor: '#ffff00', strokeColor: '#000000', strokeOpacity: '0.4' },
207           Point: { fillColor: '#00ff00', strokeColor: '#00ff00' }
208         }
209       })]);
210
211       browseDataLayer = new OpenLayers.Layer.GML("Data", url, {
212         format: OpenLayers.Format.OSM,
213         formatOptions: {
214           checkTags: true, 
215           interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid']
216         },
217         maxFeatures: 100,
218         requestSuccess: customDataLoader,
219         displayInLayerSwitcher: false,
220         styleMap: new OpenLayers.StyleMap({
221           'default': style,
222           'select': { strokeColor: '#0000ff', strokeWidth: 8 }
223         })
224       });
225       browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded );
226       map.addLayer(browseDataLayer);
227             
228       browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect });
229       browseSelectControl.handlers.feature.stopDown = false;
230       browseSelectControl.handlers.feature.stopUp = false;
231       map.addControl(browseSelectControl);
232       browseSelectControl.activate();
233     } else {
234       browseDataLayer.setUrl(url);
235     }
236
237     browseActiveFeature = null;
238   }
239
240   function dataLoaded() {
241     if (browseActive) {
242       clearStatus();
243         
244       browseObjectList = document.createElement("div")
245
246       var heading = document.createElement("p");
247       heading.className = "browse_heading";
248       heading.appendChild(document.createTextNode("#{I18n.t('browse.start_rjs.object_list.heading')}"));
249       browseObjectList.appendChild(heading);
250
251       var list = document.createElement("ul");
252       // Pull in 118n names for node/way/relation
253       var typeTranslations = new Array();
254       typeTranslations['node']     = "#{I18n.t('browse.start_rjs.object_list.type.node')}"
255       typeTranslations['way']      = "#{I18n.t('browse.start_rjs.object_list.type.way')}"
256       typeTranslations['relation'] = "#{I18n.t('browse.start_rjs.object_list.type.relation')}"
257
258       for (var i = 0; i < this.features.length; i++) {
259         var feature = this.features[i]; 
260             
261         // Type, for linking
262         var type = featureType(feature);
263         var li = document.createElement("li");
264         li.appendChild(document.createTextNode(typeTranslations[type] + " "));
265             
266         // Link, for viewing in the tab
267         var link = document.createElement("a");
268         link.href =  "/browse/" + type + "/" + feature.osm_id; 
269         var name = feature.attributes.name || feature.osm_id;
270         link.appendChild(document.createTextNode(name));
271         link.feature = feature;
272         link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);   
273         li.appendChild(link);
274
275         list.appendChild(li);
276       }
277
278       browseObjectList.appendChild(list)
279
280       var link = document.createElement("a");
281       link.href = this.url;
282       link.appendChild(document.createTextNode("#{I18n.t('browse.start_rjs.object_list.api')}"));
283       browseObjectList.appendChild(link);
284
285       $("browse_content").innerHTML = "";
286       $("browse_content").appendChild(browseObjectList); 
287     }
288   }
289     
290   function viewFeatureLink() {
291     var layer = this.feature.layer;
292
293     for (var i = 0; i < layer.selectedFeatures.length; i++) {
294       var f = layer.selectedFeatures[i]; 
295       layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
296     }
297
298     onFeatureSelect(this.feature);
299
300     if (browseMode != "auto") {
301       map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
302     }
303
304     return false;
305   }
306     
307   function loadObjectList() {
308     $("browse_content").innerHTML="";
309     $("browse_content").appendChild(browseObjectList);
310
311     return false;
312   }
313       
314   function onFeatureSelect(feature) {
315     // Unselect previously selected feature
316     if (browseActiveFeature) {
317       browseActiveFeature.layer.drawFeature(
318         browseActiveFeature, 
319         browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default")
320       );
321     }
322
323     // Redraw in selected style
324     feature.layer.drawFeature(
325       feature, feature.layer.styleMap.createSymbolizer(feature, "select")
326     );
327
328     // If the current object is the list, don't innerHTML="", since that could clear it.
329     if ($("browse_content").firstChild == browseObjectList) { 
330       $("browse_content").removeChild(browseObjectList);
331     } else { 
332       $("browse_content").innerHTML = "";
333     }   
334         
335     // Create a link back to the object list
336     var div = document.createElement("div");
337     div.style.textAlign = "center";
338     div.style.marginBottom = "20px";
339     $("browse_content").appendChild(div);
340     var link = document.createElement("a");
341     link.href = "#";
342     link.onclick = loadObjectList;
343     link.appendChild(document.createTextNode("#{I18n.t('browse.start_rjs.object_list.back')}"));
344     div.appendChild(link);
345
346     var table = document.createElement("table");
347     table.width = "100%";
348     table.className = "browse_heading";
349     $("browse_content").appendChild(table);
350
351     var tr = document.createElement("tr");
352     table.appendChild(tr);
353
354     var heading = document.createElement("td");
355     heading.appendChild(document.createTextNode(featureNameSelect(feature)));
356     tr.appendChild(heading);
357
358     var td = document.createElement("td");
359     td.align = "right";
360     tr.appendChild(td);
361
362     var type = featureType(feature);
363     var link = document.createElement("a");   
364     link.href = "/browse/" + type + "/" + feature.osm_id;
365     link.appendChild(document.createTextNode("#{I18n.t('browse.start_rjs.object_list.details')}"));
366     td.appendChild(link);
367
368     var div = document.createElement("div");
369     div.className = "browse_details";
370
371     $("browse_content").appendChild(div);
372
373     // Now the list of attributes
374     var ul = document.createElement("ul");
375     for (var key in feature.attributes) {
376       var li = document.createElement("li");
377       var b = document.createElement("b");
378       b.appendChild(document.createTextNode(key));
379       li.appendChild(b);
380       li.appendChild(document.createTextNode(": " + feature.attributes[key]));
381       ul.appendChild(li);
382     }
383         
384     div.appendChild(ul);
385         
386     var link = document.createElement("a");   
387     link.href =  "/browse/" + type + "/" + feature.osm_id + "/history";
388     link.appendChild(document.createTextNode("#{I18n.t('browse.start_rjs.show_history')}"));
389     link.onclick = OpenLayers.Function.bind(loadHistory, {
390       type: type, feature: feature, link: link
391     });
392         
393     div.appendChild(link);
394
395     // Stash the currently drawn feature
396     browseActiveFeature = feature; 
397   }   
398
399   function loadHistory() {
400     this.link.href = "";
401     this.link.innerHTML = "#{I18n.t('browse.start_rjs.wait')}";
402
403     new Ajax.Request("/api/#{API_VERSION}/" + this.type + "/" + this.feature.osm_id + "/history", {
404       onComplete: OpenLayers.Function.bind(displayHistory, this)
405     });
406
407     return false;
408   }
409
410   function displayHistory(request) {
411     if (browseActiveFeature.osm_id != this.feature.osm_id || $("browse_content").firstChild == browseObjectList)  { 
412         return false;
413     } 
414
415     this.link.parentNode.removeChild(this.link);
416
417     var doc = request.responseXML;
418
419     var table = document.createElement("table");
420     table.width = "100%";
421     table.className = "browse_heading";
422     $("browse_content").appendChild(table);
423
424     var tr = document.createElement("tr");
425     table.appendChild(tr);
426
427     var heading = document.createElement("td");
428     heading.appendChild(document.createTextNode("#{I18n.t('browse.start_rjs.history_for')} " + featureNameHistory(this.feature)));
429     tr.appendChild(heading);
430
431     var td = document.createElement("td");
432     td.align = "right";
433     tr.appendChild(td);
434
435     var link = document.createElement("a");   
436     link.href = "/browse/" + this.type + "/" + this.feature.osm_id + "/history";
437     link.appendChild(document.createTextNode("#{I18n.t('browse.start_rjs.details')}"));
438     td.appendChild(link);
439
440     var div = document.createElement("div");
441     div.className = "browse_details";
442
443     var nodes = doc.getElementsByTagName(this.type);
444     var history = document.createElement("ul");  
445     for (var i = nodes.length - 1; i >= 0; i--) {
446       var user = nodes[i].getAttribute("user") || "#{I18n.t('browse.start_rjs.private_user')}";
447       var timestamp = nodes[i].getAttribute("timestamp");
448       var item = document.createElement("li");
449       item.appendChild(document.createTextNode("#{I18n.t('browse.start_rjs.edited_by')} " + user + " #{I18n.t('browse.start_rjs.at_timestamp')} " + timestamp));
450       history.appendChild(item);
451     }
452     div.appendChild(history);
453
454     $("browse_content").appendChild(div); 
455   }
456
457   function featureType(feature) {
458     if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
459       return "node";
460     } else {
461       return "way";
462     }
463   }
464   
465   function featureNameSelect(feature) {
466     if (feature.attributes.name) {
467       return feature.attributes.name;
468     } else {
469       // Pull in 118n names for node/way
470       var featureNameSelectTypeTranslations = new Array();
471       featureNameSelectTypeTranslations['node'] = "#{I18n.t('browse.start_rjs.object_list.selected.type.node')}"
472       featureNameSelectTypeTranslations['way']  = "#{I18n.t('browse.start_rjs.object_list.selected.type.way')}"
473       return featureNameSelectTypeTranslations[featureType(feature)] + " " + feature.osm_id;
474     }
475   }
476
477   function featureNameHistory(feature) {
478     if (feature.attributes.name) {
479       return feature.attributes.name;
480     } else {
481       // Pull in 118n names for node/way
482       var featureNameHistoryTypeTranslations = new Array();
483       featureNameHistoryTypeTranslations['node'] = "#{I18n.t('browse.start_rjs.object_list.history.type.node')}"
484       featureNameHistoryTypeTranslations['way']  = "#{I18n.t('browse.start_rjs.object_list.history.type.way')}"
485       return featureNameHistoryTypeTranslations[featureType(feature)] + " " + feature.osm_id;
486     }
487   }
488
489   function setStatus(status) {
490     $("browse_status").innerHTML = status;
491     $("browse_status").style.display = "block";
492   }
493   
494   function clearStatus() {
495     $("browse_status").innerHTML = "";
496     $("browse_status").style.display = "none";
497   }
498
499   function ucFirst(str) {
500     return str.substr(0,1).toUpperCase() + str.substr(1,str.length);
501   }
502
503   startBrowse();
504 EOJ