Use a button instead of a link to remove a marker

Using a button for interactive elements is better, as explained in
commit 5311daadf.

Since buttons with "type=button" do nothing by default, we no longer
need to call `preventDefault()` when clicking it.
This commit is contained in:
Javi Martín
2023-05-02 16:02:27 +02:00
parent 59ed975f81
commit 8b14522bf5
4 changed files with 12 additions and 12 deletions

View File

@@ -43,8 +43,7 @@
newMarker.addTo(map); newMarker.addTo(map);
return newMarker; return newMarker;
}; };
removeMarker = function(e) { removeMarker = function() {
e.preventDefault();
if (marker) { if (marker) {
map.removeLayer(marker); map.removeLayer(marker);
marker = null; marker = null;

View File

@@ -1,7 +1,8 @@
.map-location-remove-marker { .map-location-remove-marker {
border-bottom: 1px dotted #cf2a0e; border-bottom: 1px dotted #cf2a0e;
border-radius: 0;
color: $delete; color: $delete;
display: inline-block; cursor: pointer;
margin-bottom: $line-height; margin-bottom: $line-height;
margin-top: $line-height / 2; margin-top: $line-height / 2;
@@ -10,7 +11,6 @@
&:focus { &:focus {
border-bottom-style: solid; border-bottom-style: solid;
color: #cf2a0e; color: #cf2a0e;
text-decoration: none;
} }
} }

View File

@@ -33,14 +33,15 @@ class Shared::MapLocationComponent < ApplicationComponent
t("proposals.form.map_remove_marker") t("proposals.form.map_remove_marker")
end end
def remove_marker_link_id def remove_marker_id
"remove-marker-link-#{dom_id(map_location)}" "remove-marker-#{dom_id(map_location)}"
end end
def remove_marker def remove_marker
link_to remove_marker_label, "#", button_tag remove_marker_label,
id: remove_marker_link_id, id: remove_marker_id,
class: "map-location-remove-marker" class: "map-location-remove-marker",
type: "button"
end end
def data def data
@@ -52,7 +53,7 @@ class Shared::MapLocationComponent < ApplicationComponent
map_tiles_provider: Rails.application.secrets.map_tiles_provider, map_tiles_provider: Rails.application.secrets.map_tiles_provider,
map_tiles_provider_attribution: Rails.application.secrets.map_tiles_provider_attribution, map_tiles_provider_attribution: Rails.application.secrets.map_tiles_provider_attribution,
marker_editable: editable?, marker_editable: editable?,
marker_remove_selector: "##{remove_marker_link_id}", marker_remove_selector: "##{remove_marker_id}",
marker_investments_coordinates: investments_coordinates, marker_investments_coordinates: investments_coordinates,
marker_latitude: map_location.latitude.presence, marker_latitude: map_location.latitude.presence,
marker_longitude: map_location.longitude.presence marker_longitude: map_location.longitude.presence

View File

@@ -215,7 +215,7 @@ shared_examples "mappable" do |mappable_factory_name, mappable_association_name,
do_login_for mappable.author, management: management do_login_for mappable.author, management: management
visit send(mappable_edit_path, id: mappable.id) visit send(mappable_edit_path, id: mappable.id)
click_link "Remove map marker" click_button "Remove map marker"
click_on "Save changes" click_on "Save changes"
expect(page).not_to have_css(".map-location") expect(page).not_to have_css(".map-location")
@@ -236,7 +236,7 @@ shared_examples "mappable" do |mappable_factory_name, mappable_association_name,
do_login_for mappable.author, management: management do_login_for mappable.author, management: management
visit send(mappable_edit_path, id: mappable.id) visit send(mappable_edit_path, id: mappable.id)
click_link "Remove map marker" click_button "Remove map marker"
click_on "Save changes" click_on "Save changes"
expect(page).not_to have_content "Map location can't be blank" expect(page).not_to have_content "Map location can't be blank"