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.
openstreetmap · Dec 31, 2024 · 5424cfe · 5424cfe
1 parent 8fb987d
commit 5424cfe
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js
@@ -107,16 +107,21 @@ 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);
     });
   };
 
   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
@@ -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
@@ -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
@@ -24,4 +24,25 @@ class CreateNoteTest < ApplicationSystemTestCase
       end
     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
 end