X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/e316f0e425cc934295c8e64cdcf03f00899f287c..db675e706ad711014995e18d159c6deb0cc7fb44:/app/assets/javascripts/index/browse.js diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js index e75ae9dd2..f00d3999f 100644 --- a/app/assets/javascripts/index/browse.js +++ b/app/assets/javascripts/index/browse.js @@ -2,461 +2,332 @@ //= require templates/browse/feature_list //= require templates/browse/feature_history -$(document).ready(function () { - $("#show_data").click(function (e) { - $.ajax({ url: $(this).attr('href'), success: function (sidebarHtml) { - startBrowse(sidebarHtml); - }}); - e.preventDefault(); +function initializeBrowse(map) { + var browseBounds; + var layersById; + var selectedLayer; + var browseObjectList; + var areasHidden = false; + var locationFilter; + + var dataLayer = map.dataLayer; + + dataLayer.setStyle({ + way: { + weight: 3, + color: "#000000", + opacity: 0.4 + }, + area: { + weight: 3, + color: "#ff0000" + }, + node: { + color: "#00ff00" + } }); - 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')); - $("#sidebar_content").html(sidebarHtml); - - openSidebar(); + dataLayer.isWayArea = function () { + return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments); + }; - var vectors = new OpenLayers.Layer.Vector(); + dataLayer.on("click", function (e) { + onSelect(e.layer); + }); - browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { - handlerOptions: { - sides: 4, - snapAngle: 90, - irregular: true, - persist: true - } - }); - browseBoxControl.handler.callbacks.done = endDrag; - map.addControl(browseBoxControl); + map.on('layeradd', function (e) { + if (e.layer === dataLayer) { + $.ajax({ url: "/browse/start", success: function (sidebarHtml) { + startBrowse(sidebarHtml); + }}); + } + }); - map.events.register("moveend", map, updateData); - map.events.triggerEvent("moveend"); + map.on('layerremove', function (e) { + if (e.layer === dataLayer) { + closeSidebar(); + } + }); - $("#browse_select_view").click(useMap); + function startBrowse(sidebarHtml) { + locationFilter = new L.LocationFilter({ + enableButton: false, + adjustButton: false + }).addTo(map); - $("#browse_select_box").click(startDrag); + locationFilter.on("change", getData); - $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); - $("#browse_hide_areas_box").toggle(hideAreas, showAreas); + $("#sidebar_content").html(sidebarHtml); - function updateData() { - if (browseMode == "auto") { - if (map.getZoom() >= 15) { - useMap(false); - } else { - setStatus(I18n.t('browse.start_rjs.zoom_or_select')); - } - } - } + if (browseObjectList) loadObjectList(); - $("#sidebar").one("closed", function () { - if (map.dataLayer.active) { - map.dataLayer.active = false; + map.on("moveend", updateData); + updateData(); - if (browseSelectControl) { - browseSelectControl.destroy(); - browseSelectControl = null; - } + $("#browse_filter_toggle").click(toggleFilter); - if (browseBoxControl) { - browseBoxControl.destroy(); - browseBoxControl = null; - } + $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); + $("#browse_hide_areas_box").click(toggleAreas); - if (browseActiveFeature) { - browseActiveFeature.destroy(); - browseActiveFeature = null; - } + $("#sidebar").one("closed", function () { + map.removeLayer(dataLayer); + map.removeLayer(locationFilter); + map.off("moveend", updateData); + locationFilter.off("change", getData); + }); + } - if (browseDataLayer) { - browseDataLayer.destroy(); - browseDataLayer = null; + function updateData() { + if (!locationFilter.isEnabled()) { + if (map.getZoom() >= 15) { + var bounds = map.getBounds(); + if (!browseBounds || !browseBounds.contains(bounds)) { + browseBounds = bounds; + getData(); } - - map.dataLayer.setVisibility(false); - map.events.unregister("moveend", map, updateData); + } else { + setStatus(I18n.t('browse.start_rjs.zoom_or_select')); } - }); - - 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 = unproj(bounds); - - 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 toggleFilter() { + if (locationFilter.isEnabled()) { + $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.manually_select')); + locationFilter.disable(); + } else { + $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.view_data')); + locationFilter.setBounds(map.getBounds().pad(-0.2)); + locationFilter.enable(); } - function hideAreas() { - $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas')); - - areasHidden = true; + getData(); + } - useMap(true); - } + function toggleAreas(e) { + e.preventDefault(); - function showAreas() { + if (areasHidden) { $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); - areasHidden = false; - - useMap(true); + } else { + $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas')); + areasHidden = true; } - function endDrag(bbox) { - var bounds = bbox.getBounds(); - var projected = unproj(bounds); + getData(); + } - browseBoxControl.deactivate(); - browseBounds = projected; - getData(bounds); + function displayFeatureWarning(count, limit, callback) { + clearStatus(); - browseMode = "manual"; + var div = document.createElement("div"); - $("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select')); - $("#browse_select_view").show(); - } + 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); - function displayFeatureWarning(count, limit, callback) { - clearStatus(); + var input = document.createElement("input"); + input.type = "submit"; + input.value = I18n.t('browse.start_rjs.load_data'); + input.onclick = callback; + div.appendChild(input); - var div = document.createElement("div"); + $("#browse_content").html(""); + $("#browse_content").append(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 dataLoader; - var input = document.createElement("input"); - input.type = "submit"; - input.value = I18n.t('browse.start_rjs.load_data'); - input.onclick = callback; - div.appendChild(input); + function getData() { + var bounds = locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds(); + var size = bounds.getSize(); - $("#browse_content").html(""); - $("#browse_content").append(div); + 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 })); + return; } - function customDataLoader(resp, options) { - if (map.dataLayer.active) { - var request = resp.priv; - var doc = request.responseXML; + setStatus(I18n.t('browse.start_rjs.loading')); - if (!doc || !doc.documentElement) { - doc = request.responseText; - } + var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString(); - resp.features = this.format.read(doc); + /* + * 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; - 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); - }); - } + /*@cc_on + if (navigator.appVersion < 8) { + maxFeatures = 100; + } else if (navigator.appVersion < 9) { + maxFeatures = 500; } - } - - function getData(bounds, reload) { - var projected = unproj(bounds); - 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); - } - } + if (dataLoader) dataLoader.abort(); - function loadData(url, reload) { - setStatus(I18n.t('browse.start_rjs.loading')); + dataLoader = $.ajax({ + url: url, + success: function (xml) { + clearStatus(); - $("#browse_content").empty(); + $("#browse_content").empty(); + dataLayer.clearLayers(); + selectedLayer = null; - 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 }); - } + var features = dataLayer.buildFeatures(xml); - browseActiveFeature = null; - } + function addFeatures() { + dataLayer.addData(features); - function dataLoaded() { - if (this.map.dataLayer.active) { - clearStatus(); + layersById = {}; - var features = []; - for (var i = 0; i < this.features.length; i++) { - var feature = this.features[i]; - features.push({ - typeName: featureTypeName(feature), - url: "/browse/" + featureType(feature) + "/" + feature.osm_id, - name: featureName(feature), - id: feature.id + dataLayer.eachLayer(function (layer) { + var feature = layer.feature; + layersById[feature.id] = layer; + $.extend(feature, { + typeName: featureTypeName(feature), + url: "/browse/" + feature.type + "/" + feature.id, + name: featureName(feature) + }); }); - } - browseObjectList = $(JST["templates/browse/feature_list"]({ - features: features, - url: this.protocol.url - }))[0]; + browseObjectList = $(JST["templates/browse/feature_list"]({ + features: features, + url: url + }))[0]; - loadObjectList(); - } - } + loadObjectList(); + } - function viewFeatureLink() { - var feature = browseDataLayer.getFeatureById($(this).data("feature-id")); - var layer = feature.layer; + if (features.length < maxFeatures) { + addFeatures(); + } else { + displayFeatureWarning(features.length, maxFeatures, addFeatures); + } - for (var i = 0; i < layer.selectedFeatures.length; i++) { - var f = layer.selectedFeatures[i]; - layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default")); + dataLoader = null; } + }); + } - onFeatureSelect(feature); + function viewFeatureLink() { + var layer = layersById[$(this).data("feature-id")]; - if (browseMode != "auto") { - map.setCenter(feature.geometry.getBounds().getCenterLonLat()); - } + onSelect(layer); - return false; + if (locationFilter.isEnabled()) { + map.panTo(layer.getBounds().getCenter()); } - function loadObjectList() { - $("#browse_content").html(browseObjectList); - $("#browse_content").find("a[data-feature-id]").click(viewFeatureLink); + return false; + } - return false; - } + function loadObjectList() { + $("#browse_content").html(browseObjectList); + $("#browse_content").find("a[data-feature-id]").click(viewFeatureLink); - function onFeatureSelect(feature) { - // Unselect previously selected feature - if (browseActiveFeature) { - browseActiveFeature.layer.drawFeature( - browseActiveFeature, - browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default") - ); - } + return false; + } - // Redraw in selected style - feature.layer.drawFeature( - feature, feature.layer.styleMap.createSymbolizer(feature, "select") - ); + function onSelect(layer) { + // Unselect previously selected feature + if (selectedLayer) { + selectedLayer.setStyle(selectedLayer.originalStyle); + } - // 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(); - } + // Redraw in selected style + layer.originalStyle = layer.options; + layer.setStyle({color: '#0000ff', weight: 8}); - $("#browse_content").html(JST["templates/browse/feature"]({ - name: featureNameSelect(feature), - url: "/browse/" + featureType(feature) + "/" + feature.osm_id, - attributes: feature.attributes - })); + // 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(); + } - $("#browse_content").find("a.browse_show_list").click(loadObjectList); - $("#browse_content").find("a.browse_show_history").click(loadHistory); + var feature = layer.feature; - // Stash the currently drawn feature - browseActiveFeature = feature; - } + $("#browse_content").html(JST["templates/browse/feature"]({ + name: featureNameSelect(feature), + url: "/browse/" + feature.type + "/" + feature.id, + attributes: feature.tags + })); - function loadHistory() { - $(this).attr("href", "").text(I18n.t('browse.start_rjs.wait')); + $("#browse_content").find("a.browse_show_list").click(loadObjectList); + $("#browse_content").find("a.browse_show_history").click(loadHistory); - var feature = browseActiveFeature; + // Stash the currently drawn feature + selectedLayer = layer; + } - $.ajax({ - url: "/api/" + OSM.API_VERSION + "/" + featureType(feature) + "/" + feature.osm_id + "/history", - success: function (xml) { - if (browseActiveFeature != feature || $("#browse_content").firstChild == browseObjectList) { - return; - } + function loadHistory() { + $(this).attr("href", "").text(I18n.t('browse.start_rjs.wait')); - $(this).remove(); + var feature = selectedLayer.feature; - var history = []; - var nodes = xml.getElementsByTagName(featureType(feature)); - for (var i = nodes.length - 1; i >= 0; i--) { - history.push({ - user: nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'), - timestamp: nodes[i].getAttribute("timestamp") - }); - } + $.ajax({ + url: "/api/" + OSM.API_VERSION + "/" + feature.type + "/" + feature.id + "/history", + success: function (xml) { + if (selectedLayer.feature != feature || $("#browse_content").firstChild == browseObjectList) { + return; + } - $("#browse_content").append(JST["templates/browse/feature_history"]({ - name: featureNameHistory(feature), - url: "/browse/" + featureType(feature) + "/" + feature.osm_id, - history: history - })); - }.bind(this) - }); + $(this).remove(); - return false; - } + var history = []; + var nodes = xml.getElementsByTagName(feature.type); + for (var i = nodes.length - 1; i >= 0; i--) { + history.push({ + user: nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'), + timestamp: nodes[i].getAttribute("timestamp") + }); + } - function featureType(feature) { - if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") { - return "node"; - } else { - return "way"; - } - } + $("#browse_content").append(JST["templates/browse/feature_history"]({ + name: featureNameHistory(feature), + url: "/browse/" + feature.type + "/" + feature.id, + history: history + })); + }.bind(this) + }); - 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'); - } - } + return false; + } - 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 featureTypeName(feature) { + return I18n.t('browse.start_rjs.object_list.type.' + feature.type); + } - 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 featureName(feature) { + return feature.tags['name:' + $('html').attr('lang')] || + feature.tags.name || + feature.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 featureNameSelect(feature) { + return feature.tags['name:' + $('html').attr('lang')] || + feature.tags.name || + I18n.t("browse.start_rjs.object_list.selected.type." + feature.type, { id: feature.id }); + } - function setStatus(status) { - $("#browse_status").html(status); - $("#browse_status").show(); - } + function featureNameHistory(feature) { + return feature.tags['name:' + $('html').attr('lang')] || + feature.tags.name || + I18n.t("browse.start_rjs.object_list.history.type." + feature.type, { id: feature.id }); + } - function clearStatus() { - $("#browse_status").html(""); - $("#browse_status").hide(); - } + function setStatus(status) { + $("#browse_status").html(status); + $("#browse_status").show(); + } + + function clearStatus() { + $("#browse_status").html(""); + $("#browse_status").hide(); } -}); \ No newline at end of file +}