From: John Firebaugh Date: Sun, 26 Aug 2012 23:36:05 +0000 (-0700) Subject: Avoid polluting the global scope X-Git-Tag: live~6018 X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/07c997d1d296fb7e3d74ddcc618fc7bd093c7725 Avoid polluting the global scope Only startBrowse and startExport need to be exposed; everything else can be scoped inside those functions. --- 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 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; + function stopBrowse() { + if (map.dataLayer.active) { + map.dataLayer.active = false; - if (browseSelectControl) { - browseSelectControl.destroy(); - browseSelectControl = null; - } + if (browseSelectControl) { + browseSelectControl.destroy(); + browseSelectControl = null; + } - if (browseBoxControl) { - browseBoxControl.destroy(); - browseBoxControl = null; - } + if (browseBoxControl) { + browseBoxControl.destroy(); + browseBoxControl = null; + } - if (browseActiveFeature) { - browseActiveFeature.destroy(); - browseActiveFeature = null; - } + if (browseActiveFeature) { + browseActiveFeature.destroy(); + browseActiveFeature = null; + } - if (browseDataLayer) { - browseDataLayer.destroy(); - browseDataLayer = null; - } + if (browseDataLayer) { + browseDataLayer.destroy(); + browseDataLayer = null; + } - map.dataLayer.setVisibility(false); - map.events.unregister("moveend", map, updateData); - } -} + map.dataLayer.setVisibility(false); + map.events.unregister("moveend", map, updateData); + } + } -function startDrag() { - $("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box')); + function startDrag() { + $("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box')); - browseBoxControl.activate(); + browseBoxControl.activate(); - return false; -} + return false; + } + + function useMap(reload) { + var bounds = map.getExtent(); + var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); -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)); - 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); - browseBounds = tileBounds; - getData(tileBounds, reload); + browseMode = "auto"; - browseMode = "auto"; + $("#browse_select_view").hide(); + } - $("#browse_select_view").hide(); + return false; } - 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); -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; - areasHidden = true; + useMap(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); -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; - areasHidden = false; + useMap(true); + } - useMap(true); -} + function endDrag(bbox) { + var bounds = bbox.getBounds(); + var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); + + browseBoxControl.deactivate(); + browseBounds = projected; + getData(bounds); -function endDrag(bbox) { - var bounds = bbox.getBounds(); - var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); + browseMode = "manual"; - browseBoxControl.deactivate(); - browseBounds = projected; - getData(bounds); + $("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select')); + $("#browse_select_view").show(); + } - browseMode = "manual"; + function displayFeatureWarning(count, limit, callback) { + clearStatus(); - $("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select')); - $("#browse_select_view").show(); -} + var div = document.createElement("div"); -function displayFeatureWarning(count, limit, callback) { - clearStatus(); + 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 div = document.createElement("div"); + var input = document.createElement("input"); + input.type = "submit"; + input.value = I18n.t('browse.start_rjs.load_data'); + input.onclick = callback; + div.appendChild(input); - 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); + $("#browse_content").html(""); + $("#browse_content").append(div); + } - var input = document.createElement("input"); - input.type = "submit"; - input.value = I18n.t('browse.start_rjs.load_data'); - input.onclick = callback; - div.appendChild(input); + function customDataLoader(resp, options) { + if (map.dataLayer.active) { + var request = resp.priv; + var doc = request.responseXML; - $("#browse_content").html(""); - $("#browse_content").append(div); -} + if (!doc || !doc.documentElement) { + doc = request.responseText; + } -function customDataLoader(resp, options) { - if (map.dataLayer.active) { - var request = resp.priv; - var doc = request.responseXML; + resp.features = this.format.read(doc); - if (!doc || !doc.documentElement) { - doc = request.responseText; + 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); + }); + } } + } - resp.features = this.format.read(doc); + 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 (!this.maxFeatures || resp.features.length <= this.maxFeatures) { - options.callback.call(options.scope, resp); + 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 { - displayFeatureWarning(resp.features.length, this.maxFeatures, function () { - options.callback.call(options.scope, resp); - }); + loadData("/api/" + OSM.API_VERSION + "/map?bbox=" + projected.toBBOX(), reload); } } -} -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(); + function loadData(url, reload) { + setStatus(I18n.t('browse.start_rjs.loading')); - 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); - } -} + $("#browse_content").empty(); -function loadData(url, reload) { - setStatus(I18n.t('browse.start_rjs.loading')); + 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 }); + } - $("#browse_content").empty(); + browseActiveFeature = null; + } - var formatOptions = { - checkTags: true, - interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid'] - }; + function dataLoaded() { + if (this.map.dataLayer.active) { + clearStatus(); - if (areasHidden) formatOptions.areaTags = []; + browseObjectList = document.createElement("div"); - if (!browseDataLayer || reload) { - var style = new OpenLayers.Style(); + var heading = document.createElement("p"); + heading.className = "browse_heading"; + heading.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.heading'))); + browseObjectList.appendChild(heading); - 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 }); - } + var list = document.createElement("ul"); - browseActiveFeature = null; -} + for (var i = 0; i < this.features.length; i++) { + var feature = this.features[i]; -function dataLoaded() { - if (this.map.dataLayer.active) { - clearStatus(); + // Type, for linking + var type = featureType(feature); + var typeName = featureTypeName(feature); + var li = document.createElement("li"); + li.appendChild(document.createTextNode(typeName + " ")); - browseObjectList = document.createElement("div"); + // 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); - var heading = document.createElement("p"); - heading.className = "browse_heading"; - heading.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.heading'))); - browseObjectList.appendChild(heading); + list.appendChild(li); + } - var list = document.createElement("ul"); + browseObjectList.appendChild(list); - 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); + link.href = this.protocol.url; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.api'))); + browseObjectList.appendChild(link); + + $("#browse_content").html(browseObjectList); } + } - browseObjectList.appendChild(list); + function viewFeatureLink() { + var layer = this.feature.layer; - 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); + for (var i = 0; i < layer.selectedFeatures.length; i++) { + var f = layer.selectedFeatures[i]; + layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default")); + } - $("#browse_content").html(browseObjectList); - } -} - -function viewFeatureLink() { - var layer = this.feature.layer; + onFeatureSelect(this.feature); + + if (browseMode != "auto") { + map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); + } - for (var i = 0; i < layer.selectedFeatures.length; i++) { - var f = layer.selectedFeatures[i]; - layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default")); + return false; } - onFeatureSelect(this.feature); + function loadObjectList() { + $("#browse_content").empty(); + $("#browse_content").append(browseObjectList); - if (browseMode != "auto") { - map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); + return false; } - return false; -} - -function loadObjectList() { - $("#browse_content").empty(); - $("#browse_content").append(browseObjectList); + function onFeatureSelect(feature) { + // Unselect previously selected feature + if (browseActiveFeature) { + browseActiveFeature.layer.drawFeature( + browseActiveFeature, + browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default") + ); + } - 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") ); - } - // 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); - // 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 = "/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); + var table = document.createElement("table"); + table.width = "100%"; + table.className = "browse_heading"; + $("#browse_content").append(table); - // Stash the currently drawn feature - browseActiveFeature = feature; -} + var tr = document.createElement("tr"); + table.appendChild(tr); -function loadHistory() { - this.link.href = ""; - this.link.innerHTML = I18n.t('browse.start_rjs.wait'); + var heading = document.createElement("td"); + heading.appendChild(document.createTextNode(featureNameSelect(feature))); + tr.appendChild(heading); - $.ajax("/api/" + OSM.API_VERSION + "/" + this.type + "/" + this.feature.osm_id + "/history", { - complete: OpenLayers.Function.bind(displayHistory, this) - }); + var td = document.createElement("td"); + td.align = "right"; + tr.appendChild(td); - return false; -} + 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); -function displayHistory(request) { - if (browseActiveFeature.osm_id != this.feature.osm_id || $("#browse_content").firstChild == browseObjectList) { - return false; - } + 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 + }); - this.link.parentNode.removeChild(this.link); + div.appendChild(link); + + // Stash the currently drawn feature + browseActiveFeature = feature; + } - var doc = request.responseXML; + function loadHistory() { + this.link.href = ""; + this.link.innerHTML = I18n.t('browse.start_rjs.wait'); - var table = document.createElement("table"); - table.width = "100%"; - table.className = "browse_heading"; - $("#browse_content").append(table); + $.ajax("/api/" + OSM.API_VERSION + "/" + this.type + "/" + this.feature.osm_id + "/history", { + complete: OpenLayers.Function.bind(displayHistory, this) + }); - var tr = document.createElement("tr"); - table.appendChild(tr); + return false; + } - var heading = document.createElement("td"); - heading.appendChild(document.createTextNode(I18n.t("browse.start_rjs.history_for_feature", { feature: featureNameHistory(this.feature) }))); - tr.appendChild(heading); + function displayHistory(request) { + if (browseActiveFeature.osm_id != this.feature.osm_id || $("#browse_content").firstChild == browseObjectList) { + return false; + } - var td = document.createElement("td"); - td.align = "right"; - tr.appendChild(td); + this.link.parentNode.removeChild(this.link); - 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 doc = request.responseXML; - var div = document.createElement("div"); - div.className = "browse_details"; + var table = document.createElement("table"); + table.width = "100%"; + table.className = "browse_heading"; + $("#browse_content").append(table); - 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); + 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); } - div.appendChild(history); - $("#browse_content").append(div); -} + function featureType(feature) { + if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") { + return "node"; + } else { + return "way"; + } + } -function featureType(feature) { - if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") { - return "node"; - } else { - return "way"; + 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 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 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 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 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 setStatus(status) { - $("#browse_status").html(status); - $("#browse_status").show(); -} - -function clearStatus() { - $("#browse_status").html(""); - $("#browse_status").hide(); + 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"); + 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()); + clearBox(); + clearMarker(); + map.events.unregister("moveend", map, mapMoved); + map.events.unregister("changebaselayer", map, htmlUrlChanged); + map.removeLayer(vectors); + } - bounds.transform(epsg4326, map.getProjectionObject()); + function boundsChanged() { + var epsg4326 = new OpenLayers.Projection("EPSG:4326"); + var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), + $("#maxlon").val(), $("#maxlat").val()); - map.events.unregister("moveend", map, mapMoved); - map.zoomToExtent(bounds); + bounds.transform(epsg4326, map.getProjectionObject()); - clearBox(); - drawBox(bounds); + map.events.unregister("moveend", map, mapMoved); + map.zoomToExtent(bounds); - validateControls(); - mapnikSizeChanged(); -} + clearBox(); + drawBox(bounds); -function startDrag() { - $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box')); + validateControls(); + mapnikSizeChanged(); + } - clearBox(); - box.activate(); -}; + function startDrag() { + $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box')); -function endDrag(bbox) { - var bounds = bbox.getBounds(); + clearBox(); + box.activate(); + }; - map.events.unregister("moveend", map, mapMoved); - setBounds(bounds); - drawBox(bounds); - box.deactivate(); - validateControls(); + function endDrag(bbox) { + var bounds = bbox.getBounds(); - $("#drag_box").html(I18n.t('export.start_rjs.manually_select')); -} + map.events.unregister("moveend", map, mapMoved); + setBounds(bounds); + drawBox(bounds); + box.deactivate(); + validateControls(); -function transformComplete(event) { - setBounds(event.feature.geometry.bounds); - validateControls(); -} + $("#drag_box").html(I18n.t('export.start_rjs.manually_select')); + } -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 }); + function transformComplete(event) { + setBounds(event.feature.geometry.bounds); + validateControls(); } - markerLayer.destroyFeatures(); - markerControl.activate(); + 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 }); + } - return false; -} + markerLayer.destroyFeatures(); + markerControl.activate(); -function endMarker(event) { - markerControl.deactivate(); + return false; + } - $("#add_marker").html(I18n.t('export.start_rjs.change_marker')); - $("#marker_inputs").show(); + function endMarker(event) { + markerControl.deactivate(); - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var epsg900913 = new OpenLayers.Projection("EPSG:900913"); - var geom = event.feature.geometry.clone().transform(epsg900913, epsg4326); + $("#add_marker").html(I18n.t('export.start_rjs.change_marker')); + $("#marker_inputs").show(); - $("#marker_lon").val(geom.x.toFixed(5)); - $("#marker_lat").val(geom.y.toFixed(5)); + var epsg4326 = new OpenLayers.Projection("EPSG:4326"); + var epsg900913 = new OpenLayers.Projection("EPSG:900913"); + var geom = event.feature.geometry.clone().transform(epsg900913, epsg4326); - htmlUrlChanged(); -} + $("#marker_lon").val(geom.x.toFixed(5)); + $("#marker_lat").val(geom.y.toFixed(5)); -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; + htmlUrlChanged(); } -} -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)); + 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; + } + } - bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326); + function mapMoved() { + setBounds(map.getExtent()); + validateControls(); + } - $("#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); + function setBounds(bounds) { + var epsg4326 = new OpenLayers.Projection("EPSG:4326"); + var decimals = Math.pow(10, Math.floor(map.getZoom() / 3)); - mapnikSizeChanged(); - htmlUrlChanged(); -} + bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326); -function clearBox() { - transform.deactivate(); - vectors.destroyFeatures(); -} + $("#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); -function drawBox(bounds) { - var feature = new OpenLayers.Feature.Vector(bounds.toGeometry()); + mapnikSizeChanged(); + htmlUrlChanged(); + } - vectors.addFeatures(feature); - transform.setFeature(feature); -} + function clearBox() { + transform.deactivate(); + vectors.destroyFeatures(); + } -function validateControls() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); + function drawBox(bounds) { + var feature = new OpenLayers.Feature.Vector(bounds.toGeometry()); - if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) { - $("#export_osm_too_large").show(); - } else { - $("#export_osm_too_large").hide(); + vectors.addFeatures(feature); + transform.setFeature(feature); } - var max_scale = maxMapnikScale(); - var disabled = true; + function validateControls() { + var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); - 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; - } + if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) { + $("#export_osm_too_large").show(); + } else { + $("#export_osm_too_large").hide(); + } - $("#export_commit").prop("disabled", disabled); - $("#mapnik_max_scale").html(roundScale(max_scale)); -} + var max_scale = maxMapnikScale(); + var disabled = true; -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 ($("#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; + } - if ($("#marker_lat").val() && $("#marker_lon").val()) { - markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val(); - url += "&marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val(); + $("#export_commit").prop("disabled", disabled); + $("#mapnik_max_scale").html(roundScale(max_scale)); } - var html = ''; + 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 = ""; - // Create "larger map" link - var center = bounds.getCenterLonLat(); - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var epsg900913 = new OpenLayers.Projection("EPSG:900913"); + if ($("#marker_lat").val() && $("#marker_lon").val()) { + markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val(); + url += "&marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val(); + } - bounds.transform(epsg4326, epsg900913); - var zoom = map.getZoomForExtent(bounds); + var html = ''; - var layers = getMapLayers(); + // Create "larger map" link + var center = bounds.getCenterLonLat(); + var epsg4326 = new OpenLayers.Projection("EPSG:4326"); + var epsg900913 = new OpenLayers.Projection("EPSG:900913"); - var text = I18n.t('export.start_rjs.view_larger_map'); - var escaped = []; + bounds.transform(epsg4326, epsg900913); + var zoom = map.getZoomForExtent(bounds); - for (var i = 0; i < text.length; ++i) { - var c = text.charCodeAt(i); - escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";"); - } + var layers = getMapLayers(); - html += '
'+escaped.join("")+''; + var text = I18n.t('export.start_rjs.view_larger_map'); + var escaped = []; - $("#export_html_text").val(html); + for (var i = 0; i < text.length; ++i) { + var c = text.charCodeAt(i); + escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";"); + } - if ($("#format_html").prop("checked")) { - $("#export_html_text").prop("selected", true); - } -} + html += '
'+escaped.join("")+''; -function formatChanged() { - $("#export_commit").show(); + $("#export_html_text").val(html); - if ($("#format_osm").prop("checked")) { - $("#export_osm").show(); - } else { - $("#export_osm").hide(); + if ($("#format_html").prop("checked")) { + $("#export_html_text").prop("selected", true); + } } - if ($("#format_mapnik").prop("checked")) { - $("#mapnik_scale").val(roundScale(map.getScale())); - $("#export_mapnik").show(); - } else { - $("#export_mapnik").hide(); - } + function formatChanged() { + $("#export_commit").show(); - if ($("#format_html").prop("checked")) { - $("#export_html").show(); - $("#export_commit").hide(); - $("#export_html_text").prop("selected", true); - } else { - $("#export_html").hide(); + if ($("#format_osm").prop("checked")) { + $("#export_osm").show(); + } else { + $("#export_osm").hide(); + } - clearMarker(); - } + if ($("#format_mapnik").prop("checked")) { + $("#mapnik_scale").val(roundScale(map.getScale())); + $("#export_mapnik").show(); + } else { + $("#export_mapnik").hide(); + } - validateControls(); -} + if ($("#format_html").prop("checked")) { + $("#export_html").show(); + $("#export_commit").hide(); + $("#export_html_text").prop("selected", true); + } else { + $("#export_html").hide(); -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"); + clearMarker(); + } - bounds.transform(epsg4326, epsg900913); + validateControls(); + } - return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136)); -} + 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"); -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); - bounds.transform(epsg4326, epsg900913); + return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136)); + } - return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028), - Math.round(bounds.getHeight() / scale / 0.00028)); -} + 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"); -function roundScale(scale) { - var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2); + bounds.transform(epsg4326, epsg900913); - return precision * Math.ceil(scale / precision); -} + 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); -function mapnikSizeChanged() { - var size = mapnikImageSize($("#mapnik_scale").val()); + 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); + $("#mapnik_image_width").html(size.w); + $("#mapnik_image_height").html(size.h); - validateControls(); + validateControls(); + } }