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

diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js
index 6bba3edf3..6371f559b 100644
--- a/app/assets/javascripts/index/browse.js
+++ b/app/assets/javascripts/index/browse.js
@@ -11,14 +11,13 @@ $(document).ready(function () {
   });
 
   function startBrowse(sidebarHtml) {
-    var browseMode = "auto";
     var browseBounds;
     var layersById;
     var selectedLayer;
     var browseObjectList;
     var areasHidden = false;
 
-    var dataLayer = new L.OSM(null, {
+    var dataLayer = new L.OSM.DataLayer(null, {
       styles: {
         way: {
           weight: 3,
@@ -38,11 +37,15 @@ $(document).ready(function () {
     dataLayer.addTo(map);
 
     dataLayer.isWayArea = function () {
-      return !areasHidden && L.OSM.prototype.isWayArea.apply(this, arguments);
+      return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments);
     };
 
-    var drawHandler = new L.Rectangle.Draw(map, {title: I18n.t('browse.start_rjs.drag_a_box')});
-    map.on('draw:rectangle-created', endDrag);
+    var locationFilter = new L.LocationFilter({
+      enableButton: false,
+      adjustButton: false
+    }).addTo(map);
+
+    locationFilter.on("change", getData);
 
     $("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title'));
     $("#sidebar_content").html(sidebarHtml);
@@ -52,15 +55,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,62 +76,36 @@ $(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();
-    });
-
-    $("#browse_select_box").click(function () {
-      $("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box'));
-
-      drawHandler.enable();
-
-      return false;
+      locationFilter.off("change", getData);
     });
 
-    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) {
       clearStatus();
 
@@ -145,7 +126,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 +136,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 +158,40 @@ $(document).ready(function () {
         success: function (xml) {
           clearStatus();
 
-          dataLayer.addData(xml);
+          $("#browse_content").empty();
+          dataLayer.clearLayers();
+          selectedLayer = null;
+
+          var features = dataLayer.buildFeatures(xml);
+
+          function addFeatures() {
+            dataLayer.addData(features);
 
-          layersById = {};
-          var features = [];
+            layersById = {};
 
-          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
+            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 +201,7 @@ $(document).ready(function () {
 
       onSelect(layer);
 
-      if (browseMode != "auto") {
+      if (locationFilter.isEnabled()) {
         map.panTo(layer.getBounds().getCenter());
       }