Disable query feature tool below z14

diff --git a/app/assets/javascripts/index/query.js b/app/assets/javascripts/index/query.js
index 096f7cca67358ff9e390a15ccd38ae2e145db26e..325d1d7f1f80dc1d4eaad0b02cc9f0cfbe8b3448 100644 (file)
--- a/app/assets/javascripts/index/query.js
+++ b/app/assets/javascripts/index/query.js
@@ -9,6 +9,8 @@ OSM.Query = function(map) {
     e.preventDefault();
     e.stopPropagation();
 
+    if (queryButton.hasClass("disabled")) return;
+
     if (queryButton.hasClass("active")) {
       disableQueryMode();
 
@@ -16,6 +18,18 @@ OSM.Query = function(map) {
     } else {
       enableQueryMode();
     }
+  }).on("disabled", function (e) {
+    if (queryButton.hasClass("active")) {
+      map.off("click", clickHandler);
+      $(map.getContainer()).removeClass("query-active").addClass("query-disabled");
+      $(this).tooltip("show");
+    }
+  }).on("enabled", function (e) {
+    if (queryButton.hasClass("active")) {
+      map.on("click", clickHandler);
+      $(map.getContainer()).removeClass("query-disabled").addClass("query-active");
+      $(this).tooltip("hide");
+    }
   });
 
   $("#sidebar_content")
@@ -230,7 +244,7 @@ OSM.Query = function(map) {
 
   function disableQueryMode() {
     if (marker) map.removeLayer(marker);
-    $(map.getContainer()).removeClass("query-active");
+    $(map.getContainer()).removeClass("query-active").removeClass("query-disabled");
     map.off("click", clickHandler);
     queryButton.removeClass("active");
   }

diff --git a/app/assets/javascripts/leaflet.query.js b/app/assets/javascripts/leaflet.query.js
index 3eab9054d409f8721c45d63a77f52f8fe44d59c6..9064872740b797888c90fc4520d8dca00321d97f 100644 (file)
--- a/app/assets/javascripts/leaflet.query.js
+++ b/app/assets/javascripts/leaflet.query.js
@@ -8,10 +8,29 @@ L.OSM.query = function (options) {
     var link = $('<a>')
       .attr('class', 'control-button')
       .attr('href', '#')
-      .attr('data-original-title', I18n.t('javascripts.site.queryfeature_tooltip'))
       .html('<span class="icon query"></span>')
       .appendTo($container);
 
+    map.on('zoomend', update);
+
+    update();
+
+    function update() {
+      var wasDisabled = link.hasClass('disabled'),
+        isDisabled = map.getZoom() < 14;
+      link
+        .toggleClass('disabled', isDisabled)
+        .attr('data-original-title', I18n.t(isDisabled ?
+          'javascripts.site.queryfeature_disabled_tooltip' :
+          'javascripts.site.queryfeature_tooltip'));
+
+      if (isDisabled && !wasDisabled) {
+        link.trigger('disabled');
+      } else if (wasDisabled && !isDisabled) {
+        link.trigger('enabled');
+      }
+    }
+
     return $container[0];
   };
 

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 628096b9f58a8c9e26d68aeb3eba3cd73cdded4b..9e614f906022a2518e20724319ca7e42244e6c97 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -687,6 +687,10 @@ nav.secondary {
     &.query-active {
       cursor: help;
     }
+
+    &.query-disabled {
+      cursor: not-allowed;
+    }
   }
 
   #map-ui {

diff --git a/config/locales/en.yml b/config/locales/en.yml
index a4049f9e0824ff458dd0064d827d82a267e3eb0d..c4f757b76180f3ed1b811e8413fe94bb041b167c 100644 (file)
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2109,6 +2109,7 @@ en:
       map_notes_zoom_in_tooltip: Zoom in to see map notes
       map_data_zoom_in_tooltip: Zoom in to see map data
       queryfeature_tooltip: Query features
+      queryfeature_disabled_tooltip: Zoom in to query features
     notes:
       new:
         intro: "Spotted a mistake or something missing? Let other mappers know so we can fix it. Move the marker to the correct position and type a note to explain the problem. (Please don't enter personal information here.)"