Let page.load proceed when zoomed out, disabling submit

Note that addNoteButton.hasClass("active") check in page.load is useless because page.unload removes this class.

diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js
index 6cb8db215efdf8879b93f8a8505731fbd0927131..73d6198ba8f7832dbaf66ef7e7747227d33f008e 100644 (file)
--- a/app/assets/javascripts/index/new_note.js
+++ b/app/assets/javascripts/index/new_note.js
@@ -107,6 +107,14 @@ OSM.NewNote = function (map) {
     newNoteMarker = null;
   }
 
+  function updateControls() {
+    const zoomedOut = addNoteButton.hasClass("disabled");
+    const withoutText = content.find("textarea").val() === "";
+
+    content.find("#new-note-zoom-warning").prop("hidden", !zoomedOut);
+    content.find("input[type=submit]").prop("disabled", zoomedOut || withoutText);
+  }
+
   page.pushstate = page.popstate = function (path) {
     OSM.loadSidebarContent(path, function () {
       page.load(path);
@@ -114,9 +122,6 @@ OSM.NewNote = function (map) {
   };
 
   page.load = function (path) {
-    if (addNoteButton.hasClass("disabled")) return;
-    if (addNoteButton.hasClass("active")) return;
-
     addNoteButton.addClass("active");
 
     map.addLayer(noteLayer);
@@ -137,13 +142,9 @@ OSM.NewNote = function (map) {
     addNewNoteMarker(markerLatlng);
 
     content.find("textarea")
-      .on("input", disableWhenBlank)
+      .on("input", updateControls)
       .focus();
 
-    function disableWhenBlank(e) {
-      $(e.target.form.add).prop("disabled", $(e.target).val() === "");
-    }
-
     content.find("input[type=submit]").on("click", function (e) {
       const location = newNoteMarker.getLatLng().wrap();
       const text = content.find("textarea").val();
@@ -160,10 +161,14 @@ OSM.NewNote = function (map) {
       });
     });
 
+    addNoteButton.on("disabled enabled", updateControls);
+    updateControls();
+
     return map.getState();
   };
 
   page.unload = function () {
+    addNoteButton.off("disabled enabled", updateControls);
     removeNewNoteMarker();
     addNoteButton.removeClass("active");
   };

diff --git a/app/assets/javascripts/leaflet.note.js b/app/assets/javascripts/leaflet.note.js
index 5f801096731793a376ca0c3cdf0f729c2c2312a5..19fc9392c0af65497bf686f8e0c24020cdba3050 100644 (file)
--- a/app/assets/javascripts/leaflet.note.js
+++ b/app/assets/javascripts/leaflet.note.js
@@ -14,12 +14,19 @@ L.OSM.note = function (options) {
     map.on("zoomend", update);
 
     function update() {
-      var disabled = OSM.STATUS === "database_offline" || map.getZoom() < 12;
+      var wasDisabled = link.hasClass("disabled"),
+          isDisabled = OSM.STATUS === "database_offline" || map.getZoom() < 12;
       link
-        .toggleClass("disabled", disabled)
-        .attr("data-bs-original-title", I18n.t(disabled ?
+        .toggleClass("disabled", isDisabled)
+        .attr("data-bs-original-title", I18n.t(isDisabled ?
           "javascripts.site.createnote_disabled_tooltip" :
           "javascripts.site.createnote_tooltip"));
+
+      if (isDisabled && !wasDisabled) {
+        link.trigger("disabled");
+      } else if (wasDisabled && !isDisabled) {
+        link.trigger("enabled");
+      }
     }
 
     update();

diff --git a/app/views/notes/new.html.erb b/app/views/notes/new.html.erb
index c9b1275b9493f43c9bca1525341dd9b6910af7d2..f461f60e2313575c9f138f7ea272a6ac37b4b8f7 100644 (file)
--- a/app/views/notes/new.html.erb
+++ b/app/views/notes/new.html.erb
@@ -9,6 +9,7 @@
                                          :log_in => link_to(t(".anonymous_warning_log_in"), login_path(:referer => new_note_path)),
                                          :sign_up => link_to(t(".anonymous_warning_sign_up"), user_new_path) %></p>
   <% end %>
+  <p class="alert alert-warning" id="new-note-zoom-warning" hidden><%= t "javascripts.site.createnote_disabled_tooltip" %></p>
   <form action="#">
     <input type="hidden" name="lon" autocomplete="off">
     <input type="hidden" name="lat" autocomplete="off">

diff --git a/test/system/create_note_test.rb b/test/system/create_note_test.rb
index 435233cbe1f80ea15b824912f92d8bd00a69ef3b..5688ec37601dc28ad3d6d3913142317ac8291c3c 100644 (file)
--- a/test/system/create_note_test.rb
+++ b/test/system/create_note_test.rb
@@ -15,6 +15,60 @@ class CreateNoteTest < ApplicationSystemTestCase
     end
   end
 
+  test "cannot create new note when zoomed out" do
+    visit new_note_path(:anchor => "map=12/0/0")
+
+    within_sidebar do
+      assert_no_content "Zoom in to add a note"
+      assert_button "Add Note", :disabled => true
+
+      fill_in "text", :with => "Some newly added note description"
+
+      assert_no_content "Zoom in to add a note"
+      assert_button "Add Note", :disabled => false
+    end
+
+    find(".control-button.zoomout").click
+
+    within_sidebar do
+      assert_content "Zoom in to add a note"
+      assert_button "Add Note", :disabled => true
+    end
+
+    find(".control-button.zoomin").click
+
+    within_sidebar do
+      assert_no_content "Zoom in to add a note"
+      assert_button "Add Note", :disabled => false
+
+      click_on "Add Note"
+
+      assert_content "Unresolved note ##{Note.last.id}"
+      assert_content "Some newly added note description"
+    end
+  end
+
+  test "can open new note page when zoomed out" do
+    visit new_note_path(:anchor => "map=11/0/0")
+
+    within_sidebar do
+      assert_content "Zoom in to add a note"
+      assert_button "Add Note", :disabled => true
+
+      fill_in "text", :with => "Some newly added note description"
+
+      assert_content "Zoom in to add a note"
+      assert_button "Add Note", :disabled => true
+    end
+
+    find(".control-button.zoomin").click
+
+    within_sidebar do
+      assert_no_content "Zoom in to add a note"
+      assert_button "Add Note", :disabled => false
+    end
+  end
+
   test "cannot create note when api is readonly" do
     with_settings(:status => "api_readonly") do
       visit new_note_path(:anchor => "map=18/0/0")