Fix map markers navigation for keyboard users

By using the bindPopup function instead of the click event
popups work when using the keyboard.

Note that now we are loading all the map markers in the first
request in a single query to the database (needed when there
is a lot or markers to show). Because of that we removed the
AJAX endpoint.
This commit is contained in:
Senén Rodero Rodríguez
2023-06-16 15:48:57 +02:00
parent 2b0a812543
commit 3fa3c90db6
7 changed files with 28 additions and 39 deletions

View File

@@ -172,7 +172,7 @@
if (App.Map.validCoordinates(coordinates)) { if (App.Map.validCoordinates(coordinates)) {
marker = createMarker(coordinates.lat, coordinates.long); marker = createMarker(coordinates.lat, coordinates.long);
marker.options.id = coordinates.investment_id; marker.options.id = coordinates.investment_id;
marker.on("click", App.Map.openMarkerPopup); marker.bindPopup(App.Map.getPopupContent(coordinates));
} }
}); });
} }
@@ -217,19 +217,8 @@
polygon.addTo(map); polygon.addTo(map);
}, },
openMarkerPopup: function(e) {
var marker = e.target;
$.ajax("/investments/" + marker.options.id + "/json_data", {
type: "GET",
dataType: "json",
success: function(data) {
e.target.bindPopup(App.Map.getPopupContent(data)).openPopup();
}
});
},
getPopupContent: function(data) { getPopupContent: function(data) {
return "<a href='/budgets/" + data.budget_id + "/investments/" + data.investment_id + "'>" + return "<a href='" + data.link + "'>" + data.title + "</a>";
data.investment_title + "</a>";
}, },
validZoom: function(zoom) { validZoom: function(zoom) {
return App.Map.isNumeric(zoom); return App.Map.isNumeric(zoom);

View File

@@ -18,7 +18,7 @@ class Budgets::Investments::MapComponent < ApplicationComponent
end end
def coordinates def coordinates
MapLocation.where(investment: investments).map(&:json_data) MapLocation.investments_json_data(investments.unscope(:order))
end end
def geozones_data def geozones_data

View File

@@ -19,7 +19,7 @@ class Budgets::MapComponent < ApplicationComponent
investments = budget.investments investments = budget.investments
end end
MapLocation.where(investment_id: investments).map(&:json_data) MapLocation.investments_json_data(investments)
end end
def geozones_data def geozones_data

View File

@@ -11,12 +11,11 @@ module Budgets
PER_PAGE = 10 PER_PAGE = 10
before_action :authenticate_user!, except: [:index, :show, :json_data] before_action :authenticate_user!, except: [:index, :show]
before_action :load_budget, except: :json_data before_action :load_budget
authorize_resource :budget, except: :json_data authorize_resource :budget
load_and_authorize_resource :investment, through: :budget, class: "Budget::Investment", load_and_authorize_resource :investment, through: :budget, class: "Budget::Investment"
except: :json_data
before_action :load_ballot, only: [:index, :show] before_action :load_ballot, only: [:index, :show]
before_action :load_heading, only: [:index, :show] before_action :load_heading, only: [:index, :show]
@@ -25,8 +24,6 @@ module Budgets
before_action :set_default_investment_filter, only: :index before_action :set_default_investment_filter, only: :index
before_action :set_view, only: :index before_action :set_view, only: :index
skip_authorization_check only: :json_data
feature_flag :budgets feature_flag :budgets
has_orders %w[most_voted newest oldest], only: :show has_orders %w[most_voted newest oldest], only: :show
@@ -91,19 +88,6 @@ module Budgets
super super
end end
def json_data
investment = Budget::Investment.find(params[:id])
data = {
investment_id: investment.id,
investment_title: investment.title,
budget_id: investment.budget.id
}.to_json
respond_to do |format|
format.json { render json: data }
end
end
private private
def resource_model def resource_model

View File

@@ -14,7 +14,7 @@ module Abilities
can [:read, :welcome], Budget can [:read, :welcome], Budget
can [:read], Budget can [:read], Budget
can [:read], Budget::Group can [:read], Budget::Group
can [:read, :print, :json_data], Budget::Investment can [:read, :print], Budget::Investment
can :read_results, Budget, id: Budget.finished.results_enabled.ids can :read_results, Budget, id: Budget.finished.results_enabled.ids
can :read_stats, Budget, id: Budget.valuating_or_later.stats_enabled.ids can :read_stats, Budget, id: Budget.valuating_or_later.stats_enabled.ids
can :read_executions, Budget, phase: "finished" can :read_executions, Budget, phase: "finished"

View File

@@ -24,4 +24,23 @@ class MapLocation < ApplicationRecord
longitude: (heading.longitude.to_f if heading.longitude.present?) longitude: (heading.longitude.to_f if heading.longitude.present?)
) )
end end
def self.investments_json_data(investments)
return [] unless investments.any?
budget_id = investments.first.budget_id
data = investments.joins(:map_location)
.with_fallback_translation
.pluck(:id, :title, :latitude, :longitude)
data.map do |values|
{
title: values[1],
link: "/budgets/#{budget_id}/investments/#{values[0]}",
lat: values[2],
long: values[3]
}
end
end
end end

View File

@@ -23,6 +23,3 @@ end
resolve "Budget::Investment" do |investment, options| resolve "Budget::Investment" do |investment, options|
[investment.budget, :investment, options.merge(id: investment)] [investment.budget, :investment, options.merge(id: investment)]
end end
get "investments/:id/json_data", action: :json_data, controller: "budgets/investments"
get "/budgets/:budget_id/investments/:id/json_data", action: :json_data, controller: "budgets/investments"