From c4709e2a05ef97f86006e60539db1e994201a5b3 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 25 Dec 2024 03:17:51 +0300 Subject: [PATCH 01/17] Rename newNote to newNoteMarker --- app/assets/javascripts/index/new_note.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 887ba043b1..e3a6b4c80a 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -5,7 +5,7 @@ OSM.NewNote = function (map) { content = $("#sidebar_content"), page = {}, addNoteButton = $(".control-note .control-button"), - newNote, + newNoteMarker, halo; var noteIcons = { @@ -60,7 +60,7 @@ OSM.NewNote = function (map) { function noteCreated(feature, marker) { content.find("textarea").val(""); updateMarker(feature); - newNote = null; + newNoteMarker = null; noteLayer.removeLayer(marker); addNoteButton.removeClass("active"); OSM.router.route("/note/" + feature.properties.id); @@ -124,20 +124,20 @@ OSM.NewNote = function (map) { padding: [50, 50] }); - newNote = L.marker(markerLatlng, { + newNoteMarker = L.marker(markerLatlng, { icon: noteIcons.new, opacity: 0.9, draggable: true }); - newNote.on("dragstart dragend", function (a) { - newHalo(newNote.getLatLng(), a.type); + newNoteMarker.on("dragstart dragend", function (a) { + newHalo(newNoteMarker.getLatLng(), a.type); }); - newNote.addTo(noteLayer); - newHalo(newNote.getLatLng()); + newNoteMarker.addTo(noteLayer); + newHalo(newNoteMarker.getLatLng()); - newNote.on("remove", function () { + newNoteMarker.on("remove", function () { addNoteButton.removeClass("active"); }).on("dragend", function () { content.find("textarea").focus(); @@ -153,14 +153,14 @@ OSM.NewNote = function (map) { content.find("input[type=submit]").on("click", function (e) { e.preventDefault(); - createNote(newNote, e.target.form, "/api/0.6/notes.json"); + createNote(newNoteMarker, e.target.form, "/api/0.6/notes.json"); }); return map.getState(); }; page.unload = function () { - if (newNote) noteLayer.removeLayer(newNote); + if (newNoteMarker) noteLayer.removeLayer(newNoteMarker); if (halo) map.removeLayer(halo); addNoteButton.removeClass("active"); }; From fa0c12cdcd154a048f96a1934fc593ff9d509fe3 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Tue, 31 Dec 2024 23:02:47 +0300 Subject: [PATCH 02/17] Disable new note submit button in click handler --- app/assets/javascripts/index/new_note.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index e3a6b4c80a..7a82c5bc69 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -41,8 +41,6 @@ OSM.NewNote = function (map) { marker.options.draggable = false; marker.dragging.disable(); - $(form).find("input[type=submit]").prop("disabled", true); - $.ajax({ url: url, type: "POST", @@ -153,6 +151,7 @@ OSM.NewNote = function (map) { content.find("input[type=submit]").on("click", function (e) { e.preventDefault(); + $(this).prop("disabled", true); createNote(newNoteMarker, e.target.form, "/api/0.6/notes.json"); }); From 63a4f12550012991fcc8e26acbd0167f1ca9d48e Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Tue, 31 Dec 2024 23:07:49 +0300 Subject: [PATCH 03/17] Pass text instead of form to createNote() --- app/assets/javascripts/index/new_note.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 7a82c5bc69..e5d3655891 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -35,7 +35,7 @@ OSM.NewNote = function (map) { OSM.router.route("/note/new"); }); - function createNote(marker, form, url) { + function createNote(marker, text, url) { var location = marker.getLatLng().wrap(); marker.options.draggable = false; @@ -48,7 +48,7 @@ OSM.NewNote = function (map) { data: { lat: location.lat, lon: location.lng, - text: $(form.text).val() + text }, success: function (feature) { noteCreated(feature, marker); @@ -150,9 +150,11 @@ OSM.NewNote = function (map) { } content.find("input[type=submit]").on("click", function (e) { + const text = content.find("textarea").val(); + e.preventDefault(); $(this).prop("disabled", true); - createNote(newNoteMarker, e.target.form, "/api/0.6/notes.json"); + createNote(newNoteMarker, text, "/api/0.6/notes.json"); }); return map.getState(); From f169299b53084543698bf143e4d9f77f2322a1b5 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Tue, 31 Dec 2024 23:25:11 +0300 Subject: [PATCH 04/17] Don't pass url to createNote() --- app/assets/javascripts/index/new_note.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index e5d3655891..6504bae9e0 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -35,14 +35,14 @@ OSM.NewNote = function (map) { OSM.router.route("/note/new"); }); - function createNote(marker, text, url) { + function createNote(marker, text) { var location = marker.getLatLng().wrap(); marker.options.draggable = false; marker.dragging.disable(); $.ajax({ - url: url, + url: "/api/0.6/notes.json", type: "POST", oauth: true, data: { @@ -154,7 +154,7 @@ OSM.NewNote = function (map) { e.preventDefault(); $(this).prop("disabled", true); - createNote(newNoteMarker, text, "/api/0.6/notes.json"); + createNote(newNoteMarker, text); }); return map.getState(); From 954eafd424eaae962f09ff687c6abaaf71eb9cc0 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Tue, 31 Dec 2024 23:37:34 +0300 Subject: [PATCH 05/17] Move create note callback to button click handler --- app/assets/javascripts/index/new_note.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 6504bae9e0..f50357158b 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -35,7 +35,7 @@ OSM.NewNote = function (map) { OSM.router.route("/note/new"); }); - function createNote(marker, text) { + function createNote(marker, text, callback) { var location = marker.getLatLng().wrap(); marker.options.draggable = false; @@ -50,19 +50,8 @@ OSM.NewNote = function (map) { lon: location.lng, text }, - success: function (feature) { - noteCreated(feature, marker); - } + success: callback }); - - function noteCreated(feature, marker) { - content.find("textarea").val(""); - updateMarker(feature); - newNoteMarker = null; - noteLayer.removeLayer(marker); - addNoteButton.removeClass("active"); - OSM.router.route("/note/" + feature.properties.id); - } } function updateMarker(feature) { @@ -154,7 +143,14 @@ OSM.NewNote = function (map) { e.preventDefault(); $(this).prop("disabled", true); - createNote(newNoteMarker, text); + createNote(newNoteMarker, text, (feature) => { + content.find("textarea").val(""); + updateMarker(feature); + noteLayer.removeLayer(newNoteMarker); + newNoteMarker = null; + addNoteButton.removeClass("active"); + OSM.router.route("/note/" + feature.properties.id); + }); }); return map.getState(); From 9d8ca8be11b6a529eb352064b1ea9a3975c4e065 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Tue, 31 Dec 2024 23:42:40 +0300 Subject: [PATCH 06/17] Pass location instead of marker to createNote() --- app/assets/javascripts/index/new_note.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index f50357158b..a3b809d0d8 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -35,12 +35,7 @@ OSM.NewNote = function (map) { OSM.router.route("/note/new"); }); - function createNote(marker, text, callback) { - var location = marker.getLatLng().wrap(); - - marker.options.draggable = false; - marker.dragging.disable(); - + function createNote(location, text, callback) { $.ajax({ url: "/api/0.6/notes.json", type: "POST", @@ -139,11 +134,15 @@ OSM.NewNote = function (map) { } content.find("input[type=submit]").on("click", function (e) { + const location = newNoteMarker.getLatLng().wrap(); const text = content.find("textarea").val(); e.preventDefault(); $(this).prop("disabled", true); - createNote(newNoteMarker, text, (feature) => { + newNoteMarker.options.draggable = false; + newNoteMarker.dragging.disable(); + + createNote(location, text, (feature) => { content.find("textarea").val(""); updateMarker(feature); noteLayer.removeLayer(newNoteMarker); From ae5b7812ccfda66c59cb3ff57ce3b2c3e718f14b Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 25 Dec 2024 03:38:30 +0300 Subject: [PATCH 07/17] Rename updateMarker() to addCreatedNoteMarker() This function doesn't update any existing marker. --- app/assets/javascripts/index/new_note.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index a3b809d0d8..bd093e11ad 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -49,7 +49,7 @@ OSM.NewNote = function (map) { }); } - function updateMarker(feature) { + function addCreatedNoteMarker(feature) { var marker = L.marker(feature.geometry.coordinates.reverse(), { icon: noteIcons[feature.properties.status], opacity: 0.9, @@ -144,7 +144,7 @@ OSM.NewNote = function (map) { createNote(location, text, (feature) => { content.find("textarea").val(""); - updateMarker(feature); + addCreatedNoteMarker(feature); noteLayer.removeLayer(newNoteMarker); newNoteMarker = null; addNoteButton.removeClass("active"); From 18f3adbf5d66e09b4a7c8f0951acd6cb65a2a219 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 25 Dec 2024 03:43:54 +0300 Subject: [PATCH 08/17] Remove unused return value of addCreatedNoteMarker() This function adds a marker to notes layer. This controller doesn't need to do anything with markers of existing notes. --- app/assets/javascripts/index/new_note.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index bd093e11ad..7eb1323834 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -57,7 +57,6 @@ OSM.NewNote = function (map) { }); marker.id = feature.properties.id; marker.addTo(noteLayer); - return marker; } page.pushstate = page.popstate = function (path) { From dc59b37fe1449e693fdc5d3a3873f7cad7c36e57 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 25 Dec 2024 04:15:34 +0300 Subject: [PATCH 09/17] Add new note marker to root map layer instead of noteLayer We want the new note marker in the same layer with its halo. Also we don't want to put anything in noteLayer because it clears its contents on certain zoom levels. --- app/assets/javascripts/index/new_note.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 7eb1323834..c1df93517c 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -115,7 +115,7 @@ OSM.NewNote = function (map) { newHalo(newNoteMarker.getLatLng(), a.type); }); - newNoteMarker.addTo(noteLayer); + newNoteMarker.addTo(map); newHalo(newNoteMarker.getLatLng()); newNoteMarker.on("remove", function () { @@ -144,7 +144,7 @@ OSM.NewNote = function (map) { createNote(location, text, (feature) => { content.find("textarea").val(""); addCreatedNoteMarker(feature); - noteLayer.removeLayer(newNoteMarker); + map.removeLayer(newNoteMarker); newNoteMarker = null; addNoteButton.removeClass("active"); OSM.router.route("/note/" + feature.properties.id); @@ -155,7 +155,7 @@ OSM.NewNote = function (map) { }; page.unload = function () { - if (newNoteMarker) noteLayer.removeLayer(newNoteMarker); + if (newNoteMarker) map.removeLayer(newNoteMarker); if (halo) map.removeLayer(halo); addNoteButton.removeClass("active"); }; From f1835c914ccfad59e7f0a38abb9a55bbe008cdeb Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 25 Dec 2024 04:19:19 +0300 Subject: [PATCH 10/17] Move new note page.pushstate/popstate next to page.load --- app/assets/javascripts/index/new_note.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index c1df93517c..0ce77f8ca8 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -59,12 +59,6 @@ OSM.NewNote = function (map) { marker.addTo(noteLayer); } - page.pushstate = page.popstate = function (path) { - OSM.loadSidebarContent(path, function () { - page.load(path); - }); - }; - function newHalo(loc, a) { var hasHalo = halo && map.hasLayer(halo); @@ -84,6 +78,12 @@ OSM.NewNote = function (map) { } } + 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; From 4ea6077ddb297bc56ce75bc62d7f371b80544166 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 25 Dec 2024 04:38:23 +0300 Subject: [PATCH 11/17] Convert newHalo() to addHalo() and removeHalo() newHalo() wasn't always creating new halos. It had an event type argument that was checked against drag event. Depending on this check, newHalo() could remove the halo. --- app/assets/javascripts/index/new_note.js | 36 +++++++++++++----------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 0ce77f8ca8..712d03dc50 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -59,23 +59,22 @@ OSM.NewNote = function (map) { marker.addTo(noteLayer); } - function newHalo(loc, a) { - var hasHalo = halo && map.hasLayer(halo); + function addHalo(latlng) { + if (halo) map.removeLayer(halo); - if (a === "dragstart" && hasHalo) { - map.removeLayer(halo); - } else { - if (hasHalo) map.removeLayer(halo); + halo = L.circleMarker(latlng, { + weight: 2.5, + radius: 20, + fillOpacity: 0.5, + color: "#FF6200" + }); - halo = L.circleMarker(loc, { - weight: 2.5, - radius: 20, - fillOpacity: 0.5, - color: "#FF6200" - }); + map.addLayer(halo); + } - map.addLayer(halo); - } + function removeHalo() { + if (halo) map.removeLayer(halo); + halo = null; } page.pushstate = page.popstate = function (path) { @@ -112,11 +111,14 @@ OSM.NewNote = function (map) { }); newNoteMarker.on("dragstart dragend", function (a) { - newHalo(newNoteMarker.getLatLng(), a.type); + removeHalo(); + if (a.type !== "dragstart") { + addHalo(newNoteMarker.getLatLng()); + } }); newNoteMarker.addTo(map); - newHalo(newNoteMarker.getLatLng()); + addHalo(newNoteMarker.getLatLng()); newNoteMarker.on("remove", function () { addNoteButton.removeClass("active"); @@ -156,7 +158,7 @@ OSM.NewNote = function (map) { page.unload = function () { if (newNoteMarker) map.removeLayer(newNoteMarker); - if (halo) map.removeLayer(halo); + removeHalo(); addNoteButton.removeClass("active"); }; From 6cc31259e4e96784e4937c8c0ae561f8291ecaa2 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 25 Dec 2024 04:56:59 +0300 Subject: [PATCH 12/17] Add addNewNoteMarker() and removeNewNoteMarker() functions This ensures that marker is always added/removed together with its halo. --- app/assets/javascripts/index/new_note.js | 60 ++++++++++++++---------- 1 file changed, 35 insertions(+), 25 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 712d03dc50..4cab9b7975 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -77,6 +77,38 @@ OSM.NewNote = function (map) { halo = null; } + function addNewNoteMarker(latlng) { + if (newNoteMarker) map.removeLayer(newNoteMarker); + + newNoteMarker = L.marker(latlng, { + icon: noteIcons.new, + opacity: 0.9, + draggable: true + }); + + newNoteMarker.on("dragstart dragend", function (a) { + removeHalo(); + if (a.type === "dragend") { + addHalo(newNoteMarker.getLatLng()); + } + }); + + newNoteMarker.addTo(map); + addHalo(newNoteMarker.getLatLng()); + + newNoteMarker.on("remove", function () { + addNoteButton.removeClass("active"); + }).on("dragend", function () { + content.find("textarea").focus(); + }); + } + + function removeNewNoteMarker() { + removeHalo(); + if (newNoteMarker) map.removeLayer(newNoteMarker); + newNoteMarker = null; + } + page.pushstate = page.popstate = function (path) { OSM.loadSidebarContent(path, function () { page.load(path); @@ -104,27 +136,7 @@ OSM.NewNote = function (map) { padding: [50, 50] }); - newNoteMarker = L.marker(markerLatlng, { - icon: noteIcons.new, - opacity: 0.9, - draggable: true - }); - - newNoteMarker.on("dragstart dragend", function (a) { - removeHalo(); - if (a.type !== "dragstart") { - addHalo(newNoteMarker.getLatLng()); - } - }); - - newNoteMarker.addTo(map); - addHalo(newNoteMarker.getLatLng()); - - newNoteMarker.on("remove", function () { - addNoteButton.removeClass("active"); - }).on("dragend", function () { - content.find("textarea").focus(); - }); + addNewNoteMarker(markerLatlng); content.find("textarea") .on("input", disableWhenBlank) @@ -146,8 +158,7 @@ OSM.NewNote = function (map) { createNote(location, text, (feature) => { content.find("textarea").val(""); addCreatedNoteMarker(feature); - map.removeLayer(newNoteMarker); - newNoteMarker = null; + removeNewNoteMarker(); addNoteButton.removeClass("active"); OSM.router.route("/note/" + feature.properties.id); }); @@ -157,8 +168,7 @@ OSM.NewNote = function (map) { }; page.unload = function () { - if (newNoteMarker) map.removeLayer(newNoteMarker); - removeHalo(); + removeNewNoteMarker(); addNoteButton.removeClass("active"); }; From 5542858315f89d73cd13b1292acbbddb7de678cc Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 25 Dec 2024 05:04:43 +0300 Subject: [PATCH 13/17] Call removeNewNoteMarker() only from page.unload() It was also called from noteCreated() but that triggered page.unload() via OSM.router.route(). --- app/assets/javascripts/index/new_note.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 4cab9b7975..eab4b258a3 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -158,7 +158,6 @@ OSM.NewNote = function (map) { createNote(location, text, (feature) => { content.find("textarea").val(""); addCreatedNoteMarker(feature); - removeNewNoteMarker(); addNoteButton.removeClass("active"); OSM.router.route("/note/" + feature.properties.id); }); From 17ab002c04d8e2358bc1c511b0d7dba051885ed1 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 25 Dec 2024 05:08:44 +0300 Subject: [PATCH 14/17] Remove active class from addNoteButton only in page.unload() Same reasons as in the previous commit. --- app/assets/javascripts/index/new_note.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index eab4b258a3..6cb8db215e 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -96,9 +96,7 @@ OSM.NewNote = function (map) { newNoteMarker.addTo(map); addHalo(newNoteMarker.getLatLng()); - newNoteMarker.on("remove", function () { - addNoteButton.removeClass("active"); - }).on("dragend", function () { + newNoteMarker.on("dragend", function () { content.find("textarea").focus(); }); } @@ -158,7 +156,6 @@ OSM.NewNote = function (map) { createNote(location, text, (feature) => { content.find("textarea").val(""); addCreatedNoteMarker(feature); - addNoteButton.removeClass("active"); OSM.router.route("/note/" + feature.properties.id); }); }); From feb7af2020c488cdcb03ec11d88e9a44625c912f Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Thu, 26 Dec 2024 00:43:40 +0300 Subject: [PATCH 15/17] 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. --- app/assets/javascripts/index/new_note.js | 21 +++++---- app/assets/javascripts/leaflet.note.js | 13 ++++-- app/views/notes/new.html.erb | 1 + test/system/create_note_test.rb | 54 ++++++++++++++++++++++++ 4 files changed, 78 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 6cb8db215e..73d6198ba8 100644 --- 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 5f80109673..19fc9392c0 100644 --- 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 c9b1275b94..f461f60e23 100644 --- 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) %>

<% end %> +
diff --git a/test/system/create_note_test.rb b/test/system/create_note_test.rb index 435233cbe1..5688ec3760 100644 --- 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") From 5603309026a8c7f81ea7fd91f164c8810437e9bc Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Thu, 26 Dec 2024 01:11:39 +0300 Subject: [PATCH 16/17] Decrease new note marker opacity when zoomed out --- app/assets/javascripts/index/new_note.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 73d6198ba8..76d134ce6b 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -113,6 +113,7 @@ OSM.NewNote = function (map) { content.find("#new-note-zoom-warning").prop("hidden", !zoomedOut); content.find("input[type=submit]").prop("disabled", zoomedOut || withoutText); + if (newNoteMarker) newNoteMarker.setOpacity(zoomedOut ? 0.5 : 0.9); } page.pushstate = page.popstate = function (path) { From 27aa2ed591212468d118059353866af1fc776631 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Thu, 26 Dec 2024 01:57:27 +0300 Subject: [PATCH 17/17] Move new note marker to click location If not done, it's possible to lose the marker when starting from low zooms. --- app/assets/javascripts/index/new_note.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 76d134ce6b..885d7d2c99 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -107,6 +107,12 @@ OSM.NewNote = function (map) { newNoteMarker = null; } + function moveNewNotMarkerToClick(e) { + if (newNoteMarker) newNoteMarker.setLatLng(e.latlng); + if (halo) halo.setLatLng(e.latlng); + content.find("textarea").focus(); + } + function updateControls() { const zoomedOut = addNoteButton.hasClass("disabled"); const withoutText = content.find("textarea").val() === ""; @@ -162,6 +168,7 @@ OSM.NewNote = function (map) { }); }); + map.on("click", moveNewNotMarkerToClick); addNoteButton.on("disabled enabled", updateControls); updateControls(); @@ -169,6 +176,7 @@ OSM.NewNote = function (map) { }; page.unload = function () { + map.off("click", moveNewNotMarkerToClick); addNoteButton.off("disabled enabled", updateControls); removeNewNoteMarker(); addNoteButton.removeClass("active");