diff --git a/app/assets/javascripts/browse.js b/app/assets/javascripts/browse.js index d67f04477..b7e9c01d5 100644 --- a/app/assets/javascripts/browse.js +++ b/app/assets/javascripts/browse.js @@ -1,17 +1,17 @@ -var browseBoxControl; -var browseMode = "auto"; -var browseBounds; -var browseFeatureList; -var browseActiveFeature; -var browseDataLayer; -var browseSelectControl; -var browseObjectList; -var areasHidden = false; - -OpenLayers.Feature.Vector.style['default'].strokeWidth = 3; -OpenLayers.Feature.Vector.style['default'].cursor = "pointer"; - function startBrowse(sidebarHtml) { + var browseBoxControl; + var browseMode = "auto"; + var browseBounds; + var browseFeatureList; + var browseActiveFeature; + var browseDataLayer; + var browseSelectControl; + var browseObjectList; + var areasHidden = false; + + OpenLayers.Feature.Vector.style['default'].strokeWidth = 3; + OpenLayers.Feature.Vector.style['default'].cursor = "pointer"; + map.dataLayer.active = true; $("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title')); @@ -42,508 +42,508 @@ function startBrowse(sidebarHtml) { $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); $("#browse_hide_areas_box").show(); $("#browse_hide_areas_box").click(hideAreas); -} -function updateData() { - if (browseMode == "auto") { - if (map.getZoom() >= 15) { - useMap(false); - } else { - setStatus(I18n.t('browse.start_rjs.zoom_or_select')); - } - } -} - -function stopBrowse() { - if (map.dataLayer.active) { - map.dataLayer.active = false; - - if (browseSelectControl) { - browseSelectControl.destroy(); - browseSelectControl = null; - } - - if (browseBoxControl) { - browseBoxControl.destroy(); - browseBoxControl = null; - } - - if (browseActiveFeature) { - browseActiveFeature.destroy(); - browseActiveFeature = null; - } - - if (browseDataLayer) { - browseDataLayer.destroy(); - browseDataLayer = null; - } - - map.dataLayer.setVisibility(false); - map.events.unregister("moveend", map, updateData); - } -} - -function startDrag() { - $("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box')); - - browseBoxControl.activate(); - - return false; -} - -function useMap(reload) { - var bounds = map.getExtent(); - var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); - - if (!browseBounds || !browseBounds.containsBounds(projected)) { - var center = bounds.getCenterLonLat(); - var tileWidth = bounds.getWidth() * 1.2; - var tileHeight = bounds.getHeight() * 1.2; - var tileBounds = new OpenLayers.Bounds(center.lon - (tileWidth / 2), - center.lat - (tileHeight / 2), - center.lon + (tileWidth / 2), - center.lat + (tileHeight / 2)); - - browseBounds = tileBounds; - getData(tileBounds, reload); - - browseMode = "auto"; - - $("#browse_select_view").hide(); - } - - return false; -} - -function hideAreas() { - $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas')); - $("#browse_hide_areas_box").show(); - $("#browse_hide_areas_box").click(showAreas); - - areasHidden = true; - - useMap(true); -} - -function showAreas() { - $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); - $("#browse_hide_areas_box").show(); - $("#browse_hide_areas_box").click(hideAreas); - - areasHidden = false; - - useMap(true); -} - -function endDrag(bbox) { - var bounds = bbox.getBounds(); - var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); - - browseBoxControl.deactivate(); - browseBounds = projected; - getData(bounds); - - browseMode = "manual"; - - $("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select')); - $("#browse_select_view").show(); -} - -function displayFeatureWarning(count, limit, callback) { - clearStatus(); - - var div = document.createElement("div"); - - var p = document.createElement("p"); - p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit }))); - div.appendChild(p); - - var input = document.createElement("input"); - input.type = "submit"; - input.value = I18n.t('browse.start_rjs.load_data'); - input.onclick = callback; - div.appendChild(input); - - $("#browse_content").html(""); - $("#browse_content").append(div); -} - -function customDataLoader(resp, options) { - if (map.dataLayer.active) { - var request = resp.priv; - var doc = request.responseXML; - - if (!doc || !doc.documentElement) { - doc = request.responseText; - } - - resp.features = this.format.read(doc); - - if (!this.maxFeatures || resp.features.length <= this.maxFeatures) { - options.callback.call(options.scope, resp); - } else { - displayFeatureWarning(resp.features.length, this.maxFeatures, function () { - options.callback.call(options.scope, resp); - }); - } - } -} - -function getData(bounds, reload) { - var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326")); - var size = projected.getWidth() * projected.getHeight(); - - if (size > OSM.MAX_REQUEST_AREA) { - setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size })); - } else { - loadData("/api/" + OSM.API_VERSION + "/map?bbox=" + projected.toBBOX(), reload); - } -} - -function loadData(url, reload) { - setStatus(I18n.t('browse.start_rjs.loading')); - - $("#browse_content").empty(); - - var formatOptions = { - checkTags: true, - interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid'] - }; - - if (areasHidden) formatOptions.areaTags = []; - - if (!browseDataLayer || reload) { - var style = new OpenLayers.Style(); - - style.addRules([new OpenLayers.Rule({ - symbolizer: { - Polygon: { fillColor: '#ff0000', strokeColor: '#ff0000' }, - Line: { fillColor: '#ffff00', strokeColor: '#000000', strokeOpacity: '0.4' }, - Point: { fillColor: '#00ff00', strokeColor: '#00ff00' } + function updateData() { + if (browseMode == "auto") { + if (map.getZoom() >= 15) { + useMap(false); + } else { + setStatus(I18n.t('browse.start_rjs.zoom_or_select')); } - })]); - - if (browseDataLayer) browseDataLayer.destroyFeatures(); - - /* - * Modern browsers are quite happy showing far more than 100 features in - * the data browser, so increase the limit to 2000 by default, but keep - * it restricted to 500 for IE8 and 100 for older IEs. - */ - var maxFeatures = 2000; - - /*@cc_on - if (navigator.appVersion < 8) { - maxFeatures = 100; - } else if (navigator.appVersion < 9) { - maxFeatures = 500; - } - @*/ - - browseDataLayer = new OpenLayers.Layer.Vector("Data", { - strategies: [ - new OpenLayers.Strategy.Fixed() - ], - protocol: new OpenLayers.Protocol.HTTP({ - url: url, - format: new OpenLayers.Format.OSM(formatOptions), - maxFeatures: maxFeatures, - handleRead: customDataLoader - }), - projection: new OpenLayers.Projection("EPSG:4326"), - displayInLayerSwitcher: false, - styleMap: new OpenLayers.StyleMap({ - 'default': style, - 'select': { strokeColor: '#0000ff', strokeWidth: 8 } - }) - }); - browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded ); - map.addLayer(browseDataLayer); - - browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect }); - browseSelectControl.handlers.feature.stopDown = false; - browseSelectControl.handlers.feature.stopUp = false; - map.addControl(browseSelectControl); - browseSelectControl.activate(); - } else { - browseDataLayer.destroyFeatures(); - browseDataLayer.refresh({ url: url }); + } } - browseActiveFeature = null; -} + function stopBrowse() { + if (map.dataLayer.active) { + map.dataLayer.active = false; -function dataLoaded() { - if (this.map.dataLayer.active) { + if (browseSelectControl) { + browseSelectControl.destroy(); + browseSelectControl = null; + } + + if (browseBoxControl) { + browseBoxControl.destroy(); + browseBoxControl = null; + } + + if (browseActiveFeature) { + browseActiveFeature.destroy(); + browseActiveFeature = null; + } + + if (browseDataLayer) { + browseDataLayer.destroy(); + browseDataLayer = null; + } + + map.dataLayer.setVisibility(false); + map.events.unregister("moveend", map, updateData); + } + } + + function startDrag() { + $("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box')); + + browseBoxControl.activate(); + + return false; + } + + function useMap(reload) { + var bounds = map.getExtent(); + var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); + + if (!browseBounds || !browseBounds.containsBounds(projected)) { + var center = bounds.getCenterLonLat(); + var tileWidth = bounds.getWidth() * 1.2; + var tileHeight = bounds.getHeight() * 1.2; + var tileBounds = new OpenLayers.Bounds(center.lon - (tileWidth / 2), + center.lat - (tileHeight / 2), + center.lon + (tileWidth / 2), + center.lat + (tileHeight / 2)); + + browseBounds = tileBounds; + getData(tileBounds, reload); + + browseMode = "auto"; + + $("#browse_select_view").hide(); + } + + return false; + } + + function hideAreas() { + $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas')); + $("#browse_hide_areas_box").show(); + $("#browse_hide_areas_box").click(showAreas); + + areasHidden = true; + + useMap(true); + } + + function showAreas() { + $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); + $("#browse_hide_areas_box").show(); + $("#browse_hide_areas_box").click(hideAreas); + + areasHidden = false; + + useMap(true); + } + + function endDrag(bbox) { + var bounds = bbox.getBounds(); + var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); + + browseBoxControl.deactivate(); + browseBounds = projected; + getData(bounds); + + browseMode = "manual"; + + $("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select')); + $("#browse_select_view").show(); + } + + function displayFeatureWarning(count, limit, callback) { clearStatus(); - browseObjectList = document.createElement("div"); + var div = document.createElement("div"); - var heading = document.createElement("p"); - heading.className = "browse_heading"; - heading.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.heading'))); - browseObjectList.appendChild(heading); + var p = document.createElement("p"); + p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit }))); + div.appendChild(p); - var list = document.createElement("ul"); + var input = document.createElement("input"); + input.type = "submit"; + input.value = I18n.t('browse.start_rjs.load_data'); + input.onclick = callback; + div.appendChild(input); - for (var i = 0; i < this.features.length; i++) { - var feature = this.features[i]; - - // Type, for linking - var type = featureType(feature); - var typeName = featureTypeName(feature); - var li = document.createElement("li"); - li.appendChild(document.createTextNode(typeName + " ")); - - // Link, for viewing in the tab - var link = document.createElement("a"); - link.href = "/browse/" + type + "/" + feature.osm_id; - var name = featureName(feature); - link.appendChild(document.createTextNode(name)); - link.feature = feature; - link.onclick = OpenLayers.Function.bind(viewFeatureLink, link); - li.appendChild(link); + $("#browse_content").html(""); + $("#browse_content").append(div); + } - list.appendChild(li); + function customDataLoader(resp, options) { + if (map.dataLayer.active) { + var request = resp.priv; + var doc = request.responseXML; + + if (!doc || !doc.documentElement) { + doc = request.responseText; + } + + resp.features = this.format.read(doc); + + if (!this.maxFeatures || resp.features.length <= this.maxFeatures) { + options.callback.call(options.scope, resp); + } else { + displayFeatureWarning(resp.features.length, this.maxFeatures, function () { + options.callback.call(options.scope, resp); + }); + } + } + } + + function getData(bounds, reload) { + var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326")); + var size = projected.getWidth() * projected.getHeight(); + + if (size > OSM.MAX_REQUEST_AREA) { + setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size })); + } else { + loadData("/api/" + OSM.API_VERSION + "/map?bbox=" + projected.toBBOX(), reload); + } + } + + function loadData(url, reload) { + setStatus(I18n.t('browse.start_rjs.loading')); + + $("#browse_content").empty(); + + var formatOptions = { + checkTags: true, + interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid'] + }; + + if (areasHidden) formatOptions.areaTags = []; + + if (!browseDataLayer || reload) { + var style = new OpenLayers.Style(); + + style.addRules([new OpenLayers.Rule({ + symbolizer: { + Polygon: { fillColor: '#ff0000', strokeColor: '#ff0000' }, + Line: { fillColor: '#ffff00', strokeColor: '#000000', strokeOpacity: '0.4' }, + Point: { fillColor: '#00ff00', strokeColor: '#00ff00' } + } + })]); + + if (browseDataLayer) browseDataLayer.destroyFeatures(); + + /* + * Modern browsers are quite happy showing far more than 100 features in + * the data browser, so increase the limit to 2000 by default, but keep + * it restricted to 500 for IE8 and 100 for older IEs. + */ + var maxFeatures = 2000; + + /*@cc_on + if (navigator.appVersion < 8) { + maxFeatures = 100; + } else if (navigator.appVersion < 9) { + maxFeatures = 500; + } + @*/ + + browseDataLayer = new OpenLayers.Layer.Vector("Data", { + strategies: [ + new OpenLayers.Strategy.Fixed() + ], + protocol: new OpenLayers.Protocol.HTTP({ + url: url, + format: new OpenLayers.Format.OSM(formatOptions), + maxFeatures: maxFeatures, + handleRead: customDataLoader + }), + projection: new OpenLayers.Projection("EPSG:4326"), + displayInLayerSwitcher: false, + styleMap: new OpenLayers.StyleMap({ + 'default': style, + 'select': { strokeColor: '#0000ff', strokeWidth: 8 } + }) + }); + browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded ); + map.addLayer(browseDataLayer); + + browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect }); + browseSelectControl.handlers.feature.stopDown = false; + browseSelectControl.handlers.feature.stopUp = false; + map.addControl(browseSelectControl); + browseSelectControl.activate(); + } else { + browseDataLayer.destroyFeatures(); + browseDataLayer.refresh({ url: url }); } - browseObjectList.appendChild(list); + browseActiveFeature = null; + } + + function dataLoaded() { + if (this.map.dataLayer.active) { + clearStatus(); + + browseObjectList = document.createElement("div"); + + var heading = document.createElement("p"); + heading.className = "browse_heading"; + heading.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.heading'))); + browseObjectList.appendChild(heading); + + var list = document.createElement("ul"); + + for (var i = 0; i < this.features.length; i++) { + var feature = this.features[i]; + + // Type, for linking + var type = featureType(feature); + var typeName = featureTypeName(feature); + var li = document.createElement("li"); + li.appendChild(document.createTextNode(typeName + " ")); + + // Link, for viewing in the tab + var link = document.createElement("a"); + link.href = "/browse/" + type + "/" + feature.osm_id; + var name = featureName(feature); + link.appendChild(document.createTextNode(name)); + link.feature = feature; + link.onclick = OpenLayers.Function.bind(viewFeatureLink, link); + li.appendChild(link); + + list.appendChild(li); + } + + browseObjectList.appendChild(list); + + var link = document.createElement("a"); + link.href = this.protocol.url; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.api'))); + browseObjectList.appendChild(link); + + $("#browse_content").html(browseObjectList); + } + } + + function viewFeatureLink() { + var layer = this.feature.layer; + + for (var i = 0; i < layer.selectedFeatures.length; i++) { + var f = layer.selectedFeatures[i]; + layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default")); + } + + onFeatureSelect(this.feature); + + if (browseMode != "auto") { + map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); + } + + return false; + } + + function loadObjectList() { + $("#browse_content").empty(); + $("#browse_content").append(browseObjectList); + + return false; + } + + function onFeatureSelect(feature) { + // Unselect previously selected feature + if (browseActiveFeature) { + browseActiveFeature.layer.drawFeature( + browseActiveFeature, + browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default") + ); + } + + // Redraw in selected style + feature.layer.drawFeature( + feature, feature.layer.styleMap.createSymbolizer(feature, "select") + ); + + // If the current object is the list, don't innerHTML="", since that could clear it. + if ($("#browse_content").firstChild == browseObjectList) { + $("#browse_content").removeChild(browseObjectList); + } else { + $("#browse_content").empty(); + } + + // Create a link back to the object list + var div = document.createElement("div"); + div.style.textAlign = "center"; + div.style.marginBottom = "20px"; + $("#browse_content").append(div); + var link = document.createElement("a"); + link.href = "#"; + link.onclick = loadObjectList; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.back'))); + div.appendChild(link); + + var table = document.createElement("table"); + table.width = "100%"; + table.className = "browse_heading"; + $("#browse_content").append(table); + + var tr = document.createElement("tr"); + table.appendChild(tr); + + var heading = document.createElement("td"); + heading.appendChild(document.createTextNode(featureNameSelect(feature))); + tr.appendChild(heading); + + var td = document.createElement("td"); + td.align = "right"; + tr.appendChild(td); + + var type = featureType(feature); + var link = document.createElement("a"); + link.href = "/browse/" + type + "/" + feature.osm_id; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.details'))); + td.appendChild(link); + + var div = document.createElement("div"); + div.className = "browse_details"; + + $("#browse_content").append(div); + + // Now the list of attributes + var ul = document.createElement("ul"); + for (var key in feature.attributes) { + var li = document.createElement("li"); + var b = document.createElement("b"); + b.appendChild(document.createTextNode(key)); + li.appendChild(b); + li.appendChild(document.createTextNode(": " + feature.attributes[key])); + ul.appendChild(li); + } + + div.appendChild(ul); var link = document.createElement("a"); - link.href = this.protocol.url; - link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.api'))); - browseObjectList.appendChild(link); + link.href = "/browse/" + type + "/" + feature.osm_id + "/history"; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.show_history'))); + link.onclick = OpenLayers.Function.bind(loadHistory, { + type: type, feature: feature, link: link + }); - $("#browse_content").html(browseObjectList); - } -} - -function viewFeatureLink() { - var layer = this.feature.layer; + div.appendChild(link); - for (var i = 0; i < layer.selectedFeatures.length; i++) { - var f = layer.selectedFeatures[i]; - layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default")); + // Stash the currently drawn feature + browseActiveFeature = feature; } - onFeatureSelect(this.feature); + function loadHistory() { + this.link.href = ""; + this.link.innerHTML = I18n.t('browse.start_rjs.wait'); - if (browseMode != "auto") { - map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); + $.ajax("/api/" + OSM.API_VERSION + "/" + this.type + "/" + this.feature.osm_id + "/history", { + complete: OpenLayers.Function.bind(displayHistory, this) + }); + + return false; } - return false; -} - -function loadObjectList() { - $("#browse_content").empty(); - $("#browse_content").append(browseObjectList); + function displayHistory(request) { + if (browseActiveFeature.osm_id != this.feature.osm_id || $("#browse_content").firstChild == browseObjectList) { + return false; + } - return false; -} - -function onFeatureSelect(feature) { - // Unselect previously selected feature - if (browseActiveFeature) { - browseActiveFeature.layer.drawFeature( - browseActiveFeature, - browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default") - ); + this.link.parentNode.removeChild(this.link); + + var doc = request.responseXML; + + var table = document.createElement("table"); + table.width = "100%"; + table.className = "browse_heading"; + $("#browse_content").append(table); + + var tr = document.createElement("tr"); + table.appendChild(tr); + + var heading = document.createElement("td"); + heading.appendChild(document.createTextNode(I18n.t("browse.start_rjs.history_for_feature", { feature: featureNameHistory(this.feature) }))); + tr.appendChild(heading); + + var td = document.createElement("td"); + td.align = "right"; + tr.appendChild(td); + + var link = document.createElement("a"); + link.href = "/browse/" + this.type + "/" + this.feature.osm_id + "/history"; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.details'))); + td.appendChild(link); + + var div = document.createElement("div"); + div.className = "browse_details"; + + var nodes = doc.getElementsByTagName(this.type); + var history = document.createElement("ul"); + for (var i = nodes.length - 1; i >= 0; i--) { + var user = nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'); + var timestamp = nodes[i].getAttribute("timestamp"); + var item = document.createElement("li"); + item.appendChild(document.createTextNode(I18n.t("browse.start_rjs.edited_by_user_at_timestamp", { user: user, timestamp: timestamp }))); + history.appendChild(item); + } + div.appendChild(history); + + $("#browse_content").append(div); } - // Redraw in selected style - feature.layer.drawFeature( - feature, feature.layer.styleMap.createSymbolizer(feature, "select") - ); - - // If the current object is the list, don't innerHTML="", since that could clear it. - if ($("#browse_content").firstChild == browseObjectList) { - $("#browse_content").removeChild(browseObjectList); - } else { - $("#browse_content").empty(); - } - - // Create a link back to the object list - var div = document.createElement("div"); - div.style.textAlign = "center"; - div.style.marginBottom = "20px"; - $("#browse_content").append(div); - var link = document.createElement("a"); - link.href = "#"; - link.onclick = loadObjectList; - link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.back'))); - div.appendChild(link); - - var table = document.createElement("table"); - table.width = "100%"; - table.className = "browse_heading"; - $("#browse_content").append(table); - - var tr = document.createElement("tr"); - table.appendChild(tr); - - var heading = document.createElement("td"); - heading.appendChild(document.createTextNode(featureNameSelect(feature))); - tr.appendChild(heading); - - var td = document.createElement("td"); - td.align = "right"; - tr.appendChild(td); - - var type = featureType(feature); - var link = document.createElement("a"); - link.href = "/browse/" + type + "/" + feature.osm_id; - link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.details'))); - td.appendChild(link); - - var div = document.createElement("div"); - div.className = "browse_details"; - - $("#browse_content").append(div); - - // Now the list of attributes - var ul = document.createElement("ul"); - for (var key in feature.attributes) { - var li = document.createElement("li"); - var b = document.createElement("b"); - b.appendChild(document.createTextNode(key)); - li.appendChild(b); - li.appendChild(document.createTextNode(": " + feature.attributes[key])); - ul.appendChild(li); + function featureType(feature) { + if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") { + return "node"; + } else { + return "way"; + } } - - div.appendChild(ul); - - var link = document.createElement("a"); - link.href = "/browse/" + type + "/" + feature.osm_id + "/history"; - link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.show_history'))); - link.onclick = OpenLayers.Function.bind(loadHistory, { - type: type, feature: feature, link: link - }); - - div.appendChild(link); - // Stash the currently drawn feature - browseActiveFeature = feature; -} - -function loadHistory() { - this.link.href = ""; - this.link.innerHTML = I18n.t('browse.start_rjs.wait'); - - $.ajax("/api/" + OSM.API_VERSION + "/" + this.type + "/" + this.feature.osm_id + "/history", { - complete: OpenLayers.Function.bind(displayHistory, this) - }); - - return false; -} - -function displayHistory(request) { - if (browseActiveFeature.osm_id != this.feature.osm_id || $("#browse_content").firstChild == browseObjectList) { - return false; - } - - this.link.parentNode.removeChild(this.link); - - var doc = request.responseXML; - - var table = document.createElement("table"); - table.width = "100%"; - table.className = "browse_heading"; - $("#browse_content").append(table); - - var tr = document.createElement("tr"); - table.appendChild(tr); - - var heading = document.createElement("td"); - heading.appendChild(document.createTextNode(I18n.t("browse.start_rjs.history_for_feature", { feature: featureNameHistory(this.feature) }))); - tr.appendChild(heading); - - var td = document.createElement("td"); - td.align = "right"; - tr.appendChild(td); - - var link = document.createElement("a"); - link.href = "/browse/" + this.type + "/" + this.feature.osm_id + "/history"; - link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.details'))); - td.appendChild(link); - - var div = document.createElement("div"); - div.className = "browse_details"; - - var nodes = doc.getElementsByTagName(this.type); - var history = document.createElement("ul"); - for (var i = nodes.length - 1; i >= 0; i--) { - var user = nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'); - var timestamp = nodes[i].getAttribute("timestamp"); - var item = document.createElement("li"); - item.appendChild(document.createTextNode(I18n.t("browse.start_rjs.edited_by_user_at_timestamp", { user: user, timestamp: timestamp }))); - history.appendChild(item); + function featureTypeName(feature) { + if (featureType(feature) == "node") { + return I18n.t('browse.start_rjs.object_list.type.node'); + } else if (featureType(feature) == "way") { + return I18n.t('browse.start_rjs.object_list.type.way'); + } } - div.appendChild(history); - $("#browse_content").append(div); -} + function featureName(feature) { + var lang = $('html').attr('lang'); + if (feature.attributes['name:' + lang]) { + return feature.attributes['name:' + lang]; + } else if (feature.attributes.name) { + return feature.attributes.name; + } else { + return feature.osm_id; + } + } -function featureType(feature) { - if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") { - return "node"; - } else { - return "way"; + function featureNameSelect(feature) { + var lang = $('html').attr('lang'); + if (feature.attributes['name:' + lang]) { + return feature.attributes['name:' + lang]; + } else if (feature.attributes.name) { + return feature.attributes.name; + } else if (featureType(feature) == "node") { + return I18n.t("browse.start_rjs.object_list.selected.type.node", { id: feature.osm_id }); + } else if (featureType(feature) == "way") { + return I18n.t("browse.start_rjs.object_list.selected.type.way", { id: feature.osm_id }); + } + } + + function featureNameHistory(feature) { + var lang = $('html').attr('lang'); + if (feature.attributes['name:' + lang]) { + return feature.attributes['name:' + lang]; + } else if (feature.attributes.name) { + return feature.attributes.name; + } else if (featureType(feature) == "node") { + return I18n.t("browse.start_rjs.object_list.history.type.node", { id: feature.osm_id }); + } else if (featureType(feature) == "way") { + return I18n.t("browse.start_rjs.object_list.history.type.way", { id: feature.osm_id }); + } + } + + function setStatus(status) { + $("#browse_status").html(status); + $("#browse_status").show(); + } + + function clearStatus() { + $("#browse_status").html(""); + $("#browse_status").hide(); } } - -function featureTypeName(feature) { - if (featureType(feature) == "node") { - return I18n.t('browse.start_rjs.object_list.type.node'); - } else if (featureType(feature) == "way") { - return I18n.t('browse.start_rjs.object_list.type.way'); - } -} - -function featureName(feature) { - var lang = $('html').attr('lang'); - if (feature.attributes['name:' + lang]) { - return feature.attributes['name:' + lang]; - } else if (feature.attributes.name) { - return feature.attributes.name; - } else { - return feature.osm_id; - } -} - -function featureNameSelect(feature) { - var lang = $('html').attr('lang'); - if (feature.attributes['name:' + lang]) { - return feature.attributes['name:' + lang]; - } else if (feature.attributes.name) { - return feature.attributes.name; - } else if (featureType(feature) == "node") { - return I18n.t("browse.start_rjs.object_list.selected.type.node", { id: feature.osm_id }); - } else if (featureType(feature) == "way") { - return I18n.t("browse.start_rjs.object_list.selected.type.way", { id: feature.osm_id }); - } -} - -function featureNameHistory(feature) { - var lang = $('html').attr('lang'); - if (feature.attributes['name:' + lang]) { - return feature.attributes['name:' + lang]; - } else if (feature.attributes.name) { - return feature.attributes.name; - } else if (featureType(feature) == "node") { - return I18n.t("browse.start_rjs.object_list.history.type.node", { id: feature.osm_id }); - } else if (featureType(feature) == "way") { - return I18n.t("browse.start_rjs.object_list.history.type.way", { id: feature.osm_id }); - } -} - -function setStatus(status) { - $("#browse_status").html(status); - $("#browse_status").show(); -} - -function clearStatus() { - $("#browse_status").html(""); - $("#browse_status").hide(); -} diff --git a/app/assets/javascripts/export.js b/app/assets/javascripts/export.js index bc1a87910..a1953a130 100644 --- a/app/assets/javascripts/export.js +++ b/app/assets/javascripts/export.js @@ -1,10 +1,10 @@ -var vectors; -var box; -var transform; -var markerLayer; -var markerControl; - function startExport(sidebarHtml) { + var vectors; + var box; + var transform; + var markerLayer; + var markerControl; + vectors = new OpenLayers.Layer.Vector("Vector Layer", { displayInLayerSwitcher: false }); @@ -60,273 +60,273 @@ function startExport(sidebarHtml) { $("#viewanchor").removeClass("active"); $("#exportanchor").addClass("active"); -} -function stopExport() { - $("#viewanchor").addClass("active"); - $("#exportanchor").removeClass("active"); - - clearBox(); - clearMarker(); - map.events.unregister("moveend", map, mapMoved); - map.events.unregister("changebaselayer", map, htmlUrlChanged); - map.removeLayer(vectors); -} - -function boundsChanged() { - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), - $("#maxlon").val(), $("#maxlat").val()); - - bounds.transform(epsg4326, map.getProjectionObject()); - - map.events.unregister("moveend", map, mapMoved); - map.zoomToExtent(bounds); - - clearBox(); - drawBox(bounds); - - validateControls(); - mapnikSizeChanged(); -} - -function startDrag() { - $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box')); - - clearBox(); - box.activate(); -}; - -function endDrag(bbox) { - var bounds = bbox.getBounds(); - - map.events.unregister("moveend", map, mapMoved); - setBounds(bounds); - drawBox(bounds); - box.deactivate(); - validateControls(); - - $("#drag_box").html(I18n.t('export.start_rjs.manually_select')); -} - -function transformComplete(event) { - setBounds(event.feature.geometry.bounds); - validateControls(); -} - -function startMarker() { - $("#add_marker").html(I18n.t('export.start_rjs.click_add_marker')); - - if (!markerLayer) { - markerLayer = new OpenLayers.Layer.Vector("",{ - displayInLayerSwitcher: false, - style: { - externalGraphic: OpenLayers.Util.getImageLocation("marker.png"), - graphicXOffset: -10.5, - graphicYOffset: -25, - graphicWidth: 21, - graphicHeight: 25 - } - }); - map.addLayer(markerLayer); - - markerControl = new OpenLayers.Control.DrawFeature(markerLayer, OpenLayers.Handler.Point); - map.addControl(markerControl); - - markerLayer.events.on({ "featureadded": endMarker }); - } - - markerLayer.destroyFeatures(); - markerControl.activate(); - - return false; -} - -function endMarker(event) { - markerControl.deactivate(); - - $("#add_marker").html(I18n.t('export.start_rjs.change_marker')); - $("#marker_inputs").show(); - - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var epsg900913 = new OpenLayers.Projection("EPSG:900913"); - var geom = event.feature.geometry.clone().transform(epsg900913, epsg4326); - - $("#marker_lon").val(geom.x.toFixed(5)); - $("#marker_lat").val(geom.y.toFixed(5)); - - htmlUrlChanged(); -} - -function clearMarker() { - $("#marker_lon").val(""); - $("#marker_lat").val(""); - $("#marker_inputs").hide(); - $("#add_marker").html(I18n.t('export.start_rjs.add_marker')); - - if (markerLayer) { - markerControl.destroy(); - markerLayer.destroy(); - markerLayer = null; - markerControl = null; - } -} - -function mapMoved() { - setBounds(map.getExtent()); - validateControls(); -} - -function setBounds(bounds) { - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var decimals = Math.pow(10, Math.floor(map.getZoom() / 3)); - - bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326); - - $("#minlon").val(Math.round(bounds.left * decimals) / decimals); - $("#minlat").val(Math.round(bounds.bottom * decimals) / decimals); - $("#maxlon").val(Math.round(bounds.right * decimals) / decimals); - $("#maxlat").val(Math.round(bounds.top * decimals) / decimals); - - mapnikSizeChanged(); - htmlUrlChanged(); -} - -function clearBox() { - transform.deactivate(); - vectors.destroyFeatures(); -} - -function drawBox(bounds) { - var feature = new OpenLayers.Feature.Vector(bounds.toGeometry()); - - vectors.addFeatures(feature); - transform.setFeature(feature); -} - -function validateControls() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); - - if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) { - $("#export_osm_too_large").show(); - } else { - $("#export_osm_too_large").hide(); - } - - var max_scale = maxMapnikScale(); - var disabled = true; - - if ($("#format_osm").prop("checked")) { - disabled = bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA; - } else if ($("#format_mapnik").prop("checked")) { - disabled = $("#mapnik_scale").val() < max_scale; - } - - $("#export_commit").prop("disabled", disabled); - $("#mapnik_max_scale").html(roundScale(max_scale)); -} - -function htmlUrlChanged() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); - var layerName = map.baseLayer.keyid; - var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&layer=" + layerName; - var markerUrl = ""; - - if ($("#marker_lat").val() && $("#marker_lon").val()) { - markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val(); - url += "&marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val(); - } - - var html = ''; - - // Create "larger map" link - var center = bounds.getCenterLonLat(); - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var epsg900913 = new OpenLayers.Projection("EPSG:900913"); - - bounds.transform(epsg4326, epsg900913); - var zoom = map.getZoomForExtent(bounds); - - var layers = getMapLayers(); - - var text = I18n.t('export.start_rjs.view_larger_map'); - var escaped = []; - - for (var i = 0; i < text.length; ++i) { - var c = text.charCodeAt(i); - escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";"); - } - - html += '
'+escaped.join("")+''; - - $("#export_html_text").val(html); - - if ($("#format_html").prop("checked")) { - $("#export_html_text").prop("selected", true); - } -} - -function formatChanged() { - $("#export_commit").show(); - - if ($("#format_osm").prop("checked")) { - $("#export_osm").show(); - } else { - $("#export_osm").hide(); - } - - if ($("#format_mapnik").prop("checked")) { - $("#mapnik_scale").val(roundScale(map.getScale())); - $("#export_mapnik").show(); - } else { - $("#export_mapnik").hide(); - } - - if ($("#format_html").prop("checked")) { - $("#export_html").show(); - $("#export_commit").hide(); - $("#export_html_text").prop("selected", true); - } else { - $("#export_html").hide(); + function stopExport() { + $("#viewanchor").addClass("active"); + $("#exportanchor").removeClass("active"); + clearBox(); clearMarker(); + map.events.unregister("moveend", map, mapMoved); + map.events.unregister("changebaselayer", map, htmlUrlChanged); + map.removeLayer(vectors); } - validateControls(); -} - -function maxMapnikScale() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var epsg900913 = new OpenLayers.Projection("EPSG:900913"); - - bounds.transform(epsg4326, epsg900913); - - return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136)); -} - -function mapnikImageSize(scale) { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var epsg900913 = new OpenLayers.Projection("EPSG:900913"); - - bounds.transform(epsg4326, epsg900913); - - return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028), - Math.round(bounds.getHeight() / scale / 0.00028)); -} - -function roundScale(scale) { - var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2); - - return precision * Math.ceil(scale / precision); -} - -function mapnikSizeChanged() { - var size = mapnikImageSize($("#mapnik_scale").val()); - - $("#mapnik_image_width").html(size.w); - $("#mapnik_image_height").html(size.h); - - validateControls(); + function boundsChanged() { + var epsg4326 = new OpenLayers.Projection("EPSG:4326"); + var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), + $("#maxlon").val(), $("#maxlat").val()); + + bounds.transform(epsg4326, map.getProjectionObject()); + + map.events.unregister("moveend", map, mapMoved); + map.zoomToExtent(bounds); + + clearBox(); + drawBox(bounds); + + validateControls(); + mapnikSizeChanged(); + } + + function startDrag() { + $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box')); + + clearBox(); + box.activate(); + }; + + function endDrag(bbox) { + var bounds = bbox.getBounds(); + + map.events.unregister("moveend", map, mapMoved); + setBounds(bounds); + drawBox(bounds); + box.deactivate(); + validateControls(); + + $("#drag_box").html(I18n.t('export.start_rjs.manually_select')); + } + + function transformComplete(event) { + setBounds(event.feature.geometry.bounds); + validateControls(); + } + + function startMarker() { + $("#add_marker").html(I18n.t('export.start_rjs.click_add_marker')); + + if (!markerLayer) { + markerLayer = new OpenLayers.Layer.Vector("",{ + displayInLayerSwitcher: false, + style: { + externalGraphic: OpenLayers.Util.getImageLocation("marker.png"), + graphicXOffset: -10.5, + graphicYOffset: -25, + graphicWidth: 21, + graphicHeight: 25 + } + }); + map.addLayer(markerLayer); + + markerControl = new OpenLayers.Control.DrawFeature(markerLayer, OpenLayers.Handler.Point); + map.addControl(markerControl); + + markerLayer.events.on({ "featureadded": endMarker }); + } + + markerLayer.destroyFeatures(); + markerControl.activate(); + + return false; + } + + function endMarker(event) { + markerControl.deactivate(); + + $("#add_marker").html(I18n.t('export.start_rjs.change_marker')); + $("#marker_inputs").show(); + + var epsg4326 = new OpenLayers.Projection("EPSG:4326"); + var epsg900913 = new OpenLayers.Projection("EPSG:900913"); + var geom = event.feature.geometry.clone().transform(epsg900913, epsg4326); + + $("#marker_lon").val(geom.x.toFixed(5)); + $("#marker_lat").val(geom.y.toFixed(5)); + + htmlUrlChanged(); + } + + function clearMarker() { + $("#marker_lon").val(""); + $("#marker_lat").val(""); + $("#marker_inputs").hide(); + $("#add_marker").html(I18n.t('export.start_rjs.add_marker')); + + if (markerLayer) { + markerControl.destroy(); + markerLayer.destroy(); + markerLayer = null; + markerControl = null; + } + } + + function mapMoved() { + setBounds(map.getExtent()); + validateControls(); + } + + function setBounds(bounds) { + var epsg4326 = new OpenLayers.Projection("EPSG:4326"); + var decimals = Math.pow(10, Math.floor(map.getZoom() / 3)); + + bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326); + + $("#minlon").val(Math.round(bounds.left * decimals) / decimals); + $("#minlat").val(Math.round(bounds.bottom * decimals) / decimals); + $("#maxlon").val(Math.round(bounds.right * decimals) / decimals); + $("#maxlat").val(Math.round(bounds.top * decimals) / decimals); + + mapnikSizeChanged(); + htmlUrlChanged(); + } + + function clearBox() { + transform.deactivate(); + vectors.destroyFeatures(); + } + + function drawBox(bounds) { + var feature = new OpenLayers.Feature.Vector(bounds.toGeometry()); + + vectors.addFeatures(feature); + transform.setFeature(feature); + } + + function validateControls() { + var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); + + if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) { + $("#export_osm_too_large").show(); + } else { + $("#export_osm_too_large").hide(); + } + + var max_scale = maxMapnikScale(); + var disabled = true; + + if ($("#format_osm").prop("checked")) { + disabled = bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA; + } else if ($("#format_mapnik").prop("checked")) { + disabled = $("#mapnik_scale").val() < max_scale; + } + + $("#export_commit").prop("disabled", disabled); + $("#mapnik_max_scale").html(roundScale(max_scale)); + } + + function htmlUrlChanged() { + var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); + var layerName = map.baseLayer.keyid; + var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&layer=" + layerName; + var markerUrl = ""; + + if ($("#marker_lat").val() && $("#marker_lon").val()) { + markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val(); + url += "&marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val(); + } + + var html = ''; + + // Create "larger map" link + var center = bounds.getCenterLonLat(); + var epsg4326 = new OpenLayers.Projection("EPSG:4326"); + var epsg900913 = new OpenLayers.Projection("EPSG:900913"); + + bounds.transform(epsg4326, epsg900913); + var zoom = map.getZoomForExtent(bounds); + + var layers = getMapLayers(); + + var text = I18n.t('export.start_rjs.view_larger_map'); + var escaped = []; + + for (var i = 0; i < text.length; ++i) { + var c = text.charCodeAt(i); + escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";"); + } + + html += '
'+escaped.join("")+''; + + $("#export_html_text").val(html); + + if ($("#format_html").prop("checked")) { + $("#export_html_text").prop("selected", true); + } + } + + function formatChanged() { + $("#export_commit").show(); + + if ($("#format_osm").prop("checked")) { + $("#export_osm").show(); + } else { + $("#export_osm").hide(); + } + + if ($("#format_mapnik").prop("checked")) { + $("#mapnik_scale").val(roundScale(map.getScale())); + $("#export_mapnik").show(); + } else { + $("#export_mapnik").hide(); + } + + if ($("#format_html").prop("checked")) { + $("#export_html").show(); + $("#export_commit").hide(); + $("#export_html_text").prop("selected", true); + } else { + $("#export_html").hide(); + + clearMarker(); + } + + validateControls(); + } + + function maxMapnikScale() { + var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); + var epsg4326 = new OpenLayers.Projection("EPSG:4326"); + var epsg900913 = new OpenLayers.Projection("EPSG:900913"); + + bounds.transform(epsg4326, epsg900913); + + return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136)); + } + + function mapnikImageSize(scale) { + var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); + var epsg4326 = new OpenLayers.Projection("EPSG:4326"); + var epsg900913 = new OpenLayers.Projection("EPSG:900913"); + + bounds.transform(epsg4326, epsg900913); + + return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028), + Math.round(bounds.getHeight() / scale / 0.00028)); + } + + function roundScale(scale) { + var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2); + + return precision * Math.ceil(scale / precision); + } + + function mapnikSizeChanged() { + var size = mapnikImageSize($("#mapnik_scale").val()); + + $("#mapnik_image_width").html(size.w); + $("#mapnik_image_height").html(size.h); + + validateControls(); + } }