X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/800f014486588b01eaaeca69be327b7e2c40ed43..6255c961304aa70edf892005825e7dd9d916e3cc:/app/assets/javascripts/index/browse.js

diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js
index 6bba3edf3..e7788be18 100644
--- a/app/assets/javascripts/index/browse.js
+++ b/app/assets/javascripts/index/browse.js
@@ -3,46 +3,59 @@
 //= 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();
+  var areasHidden = false;
+
+  var dataLayer = new L.OSM.DataLayer(null, {
+    styles: {
+      way: {
+        weight: 3,
+        color: "#000000",
+        opacity: 0.4
+      },
+      area: {
+        weight: 3,
+        color: "#ff0000"
+      },
+      node: {
+        color: "#00ff00"
+      }
+    }
+  });
+
+  dataLayer.isWayArea = function () {
+    return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments);
+  };
+
+  if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
+    map.layersControl.addOverlay(dataLayer, I18n.t("browse.start_rjs.data_layer_name"));
+  }
+
+  map.on('layeradd', function (e) {
+    if (e.layer === dataLayer) {
+      $.ajax({ url: "/browse/start", success: function (sidebarHtml) {
+        startBrowse(sidebarHtml);
+      }});
+    }
+  });
+
+  map.on('layerremove', function (e) {
+    if (e.layer === dataLayer) {
+      closeSidebar();
+    }
   });
 
   function startBrowse(sidebarHtml) {
-    var browseMode = "auto";
     var browseBounds;
     var layersById;
     var selectedLayer;
     var browseObjectList;
-    var areasHidden = false;
-
-    var dataLayer = new L.OSM(null, {
-      styles: {
-        way: {
-          weight: 3,
-          color: "#000000",
-          opacity: 0.4
-        },
-        area: {
-          weight: 3,
-          color: "#ff0000"
-        },
-        node: {
-          color: "#00ff00"
-        }
-      }
-    });
-
-    dataLayer.addTo(map);
 
-    dataLayer.isWayArea = function () {
-      return !areasHidden && L.OSM.prototype.isWayArea.apply(this, arguments);
-    };
+    var locationFilter = new L.LocationFilter({
+      enableButton: false,
+      adjustButton: false
+    }).addTo(map);
 
-    var drawHandler = new L.Rectangle.Draw(map, {title: I18n.t('browse.start_rjs.drag_a_box')});
-    map.on('draw:rectangle-created', endDrag);
+    locationFilter.on("change", getData);
 
     $("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title'));
     $("#sidebar_content").html(sidebarHtml);
@@ -52,15 +65,19 @@ $(document).ready(function () {
     map.on("moveend", updateData);
     updateData();
 
-    $("#browse_select_view").click(useMap);
+    $("#browse_filter_toggle").toggle(enableFilter, disableFilter);
 
     $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
     $("#browse_hide_areas_box").toggle(hideAreas, showAreas);
 
     function updateData() {
-      if (browseMode == "auto") {
+      if (!locationFilter.isEnabled()) {
         if (map.getZoom() >= 15) {
-          useMap();
+          var bounds = map.getBounds();
+          if (!browseBounds || !browseBounds.contains(bounds)) {
+            browseBounds = bounds;
+            getData();
+          }
         } else {
           setStatus(I18n.t('browse.start_rjs.zoom_or_select'));
         }
@@ -69,60 +86,34 @@ $(document).ready(function () {
 
     $("#sidebar").one("closed", function () {
       map.removeLayer(dataLayer);
+      map.removeLayer(locationFilter);
       map.off("moveend", updateData);
-      map.off('draw:rectangle-created', endDrag);
-      drawHandler.disable();
+      locationFilter.off("change", getData);
     });
 
-    $("#browse_select_box").click(function () {
-      $("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box'));
-
-      drawHandler.enable();
-
-      return false;
-    });
-
-    function useMap() {
-      var bounds = map.getBounds();
-
-      if (!browseBounds || !browseBounds.contains(bounds)) {
-        browseBounds = bounds;
-        browseMode = "auto";
-
-        getData();
-
-        $("#browse_select_view").hide();
-      }
+    function enableFilter() {
+      $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.view_data'));
+      locationFilter.setBounds(map.getBounds().pad(-0.2));
+      locationFilter.enable();
+      getData();
+    }
 
-      return false;
+    function disableFilter() {
+      $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.manually_select'));
+      locationFilter.disable();
+      getData();
     }
 
     function hideAreas() {
       $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas'));
-
       areasHidden = true;
-
       getData();
     }
 
     function showAreas() {
       $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
-
       areasHidden = false;
-
-      getData();
-    }
-
-    function endDrag(e) {
-      browseBounds = e.rect.getBounds();
-      browseMode = "manual";
-
       getData();
-
-      $("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select'));
-      $("#browse_select_view").show();
-
-      drawHandler.disable();
     }
 
     function displayFeatureWarning(count, limit, callback) {
@@ -145,7 +136,8 @@ $(document).ready(function () {
     }
 
     function getData() {
-      var size = browseBounds.getSize();
+      var bounds = locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds();
+      var size = bounds.getSize();
 
       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 }));
@@ -154,11 +146,7 @@ $(document).ready(function () {
 
       setStatus(I18n.t('browse.start_rjs.loading'));
 
-      $("#browse_content").empty();
-      dataLayer.clearLayers();
-      selectedLayer = null;
-
-      var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + browseBounds.toBBOX();
+      var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBOX();
 
       /*
        * Modern browsers are quite happy showing far more than 100 features in
@@ -180,28 +168,40 @@ $(document).ready(function () {
         success: function (xml) {
           clearStatus();
 
-          dataLayer.addData(xml);
+          $("#browse_content").empty();
+          dataLayer.clearLayers();
+          selectedLayer = null;
 
-          layersById = {};
-          var features = [];
+          var features = dataLayer.buildFeatures(xml);
 
-          dataLayer.eachLayer(function (layer) {
-            var feature = layer.feature;
-            layersById[feature.id] = layer;
-            features.push({
-              typeName: featureTypeName(feature),
-              url: "/browse/" + feature.type + "/" + feature.id,
-              name: featureName(feature),
-              id: feature.id
+          function addFeatures() {
+            dataLayer.addData(features);
+
+            layersById = {};
+
+            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: url
-          }))[0];
+            browseObjectList = $(JST["templates/browse/feature_list"]({
+              features: features,
+              url: url
+            }))[0];
 
-          loadObjectList();
+            loadObjectList();
+          }
+
+          if (features.length < maxFeatures) {
+            addFeatures();
+          } else {
+            displayFeatureWarning(features.length, maxFeatures, addFeatures);
+          }
         }
       });
     }
@@ -211,7 +211,7 @@ $(document).ready(function () {
 
       onSelect(layer);
 
-      if (browseMode != "auto") {
+      if (locationFilter.isEnabled()) {
         map.panTo(layer.getBounds().getCenter());
       }