Extract component to render a map
This way it'll be easier to refactor it.
This commit is contained in:
@@ -34,6 +34,7 @@
|
|||||||
@import "legislation";
|
@import "legislation";
|
||||||
@import "legislation_process";
|
@import "legislation_process";
|
||||||
@import "legislation_process_form";
|
@import "legislation_process_form";
|
||||||
|
@import "map_location";
|
||||||
@import "moderation_actions";
|
@import "moderation_actions";
|
||||||
@import "notification_item";
|
@import "notification_item";
|
||||||
@import "community";
|
@import "community";
|
||||||
|
|||||||
@@ -19,7 +19,6 @@
|
|||||||
// 20. Documents
|
// 20. Documents
|
||||||
// 21. Related content
|
// 21. Related content
|
||||||
// 22. Images
|
// 22. Images
|
||||||
// 23. Maps
|
|
||||||
// 24. Homepage
|
// 24. Homepage
|
||||||
// 25. LocalCensusRecords
|
// 25. LocalCensusRecords
|
||||||
//
|
//
|
||||||
@@ -2152,48 +2151,6 @@ table {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 23. Maps
|
|
||||||
// -----------------
|
|
||||||
|
|
||||||
.location-map-remove-marker {
|
|
||||||
border-bottom: 1px dotted #cf2a0e;
|
|
||||||
color: $delete;
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: $line-height / 2;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
border-bottom-style: solid;
|
|
||||||
color: #cf2a0e;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-bar a {
|
|
||||||
|
|
||||||
&.leaflet-disabled {
|
|
||||||
color: #525252;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-container {
|
|
||||||
|
|
||||||
.leaflet-control-attribution {
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
@include link;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-bottom,
|
|
||||||
.leaflet-pane,
|
|
||||||
.leaflet-top {
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 24. Homepage
|
// 24. Homepage
|
||||||
// ------------
|
// ------------
|
||||||
|
|
||||||
|
|||||||
38
app/assets/stylesheets/map_location.scss
Normal file
38
app/assets/stylesheets/map_location.scss
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
.location-map-remove-marker {
|
||||||
|
border-bottom: 1px dotted #cf2a0e;
|
||||||
|
color: $delete;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: $line-height / 2;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
border-bottom-style: solid;
|
||||||
|
color: #cf2a0e;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-bar a {
|
||||||
|
|
||||||
|
&.leaflet-disabled {
|
||||||
|
color: #525252;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-container {
|
||||||
|
|
||||||
|
.leaflet-control-attribution {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
@include link;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-bottom,
|
||||||
|
.leaflet-pane,
|
||||||
|
.leaflet-top {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
5
app/components/shared/map_location_component.html.erb
Normal file
5
app/components/shared/map_location_component.html.erb
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<%= tag.div(id: dom_id(map_location), class: "map_location map", data: prepare_map_settings) %>
|
||||||
|
|
||||||
|
<% if editable %>
|
||||||
|
<%= map_location_remove_marker %>
|
||||||
|
<% end %>
|
||||||
62
app/components/shared/map_location_component.rb
Normal file
62
app/components/shared/map_location_component.rb
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
class Shared::MapLocationComponent < ApplicationComponent
|
||||||
|
attr_reader :parent_class, :editable, :remove_marker_label, :investments_coordinates
|
||||||
|
delegate :map_location_input_id, to: :helpers
|
||||||
|
|
||||||
|
def initialize(map_location, parent_class, editable, remove_marker_label, investments_coordinates = nil)
|
||||||
|
@map_location = map_location
|
||||||
|
@parent_class = parent_class
|
||||||
|
@editable = editable
|
||||||
|
@remove_marker_label = remove_marker_label
|
||||||
|
@investments_coordinates = investments_coordinates
|
||||||
|
end
|
||||||
|
|
||||||
|
def map_location
|
||||||
|
@map_location ||= MapLocation.new
|
||||||
|
end
|
||||||
|
|
||||||
|
private
|
||||||
|
|
||||||
|
def map_location_latitude
|
||||||
|
map_location.latitude.presence || Setting["map.latitude"]
|
||||||
|
end
|
||||||
|
|
||||||
|
def map_location_longitude
|
||||||
|
map_location.longitude.presence || Setting["map.longitude"]
|
||||||
|
end
|
||||||
|
|
||||||
|
def map_location_zoom
|
||||||
|
map_location.zoom.presence || Setting["map.zoom"]
|
||||||
|
end
|
||||||
|
|
||||||
|
def map_location_remove_marker_link_id
|
||||||
|
"remove-marker-link-#{dom_id(map_location)}"
|
||||||
|
end
|
||||||
|
|
||||||
|
def map_location_remove_marker
|
||||||
|
tag.div class: "margin-bottom" do
|
||||||
|
link_to remove_marker_label, "#",
|
||||||
|
id: map_location_remove_marker_link_id,
|
||||||
|
class: "js-location-map-remove-marker location-map-remove-marker"
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
def prepare_map_settings
|
||||||
|
options = {
|
||||||
|
map: "",
|
||||||
|
map_center_latitude: map_location_latitude,
|
||||||
|
map_center_longitude: map_location_longitude,
|
||||||
|
map_zoom: map_location_zoom,
|
||||||
|
map_tiles_provider: Rails.application.secrets.map_tiles_provider,
|
||||||
|
map_tiles_provider_attribution: Rails.application.secrets.map_tiles_provider_attribution,
|
||||||
|
marker_editable: editable,
|
||||||
|
marker_remove_selector: "##{map_location_remove_marker_link_id}",
|
||||||
|
latitude_input_selector: "##{map_location_input_id(parent_class, "latitude")}",
|
||||||
|
longitude_input_selector: "##{map_location_input_id(parent_class, "longitude")}",
|
||||||
|
zoom_input_selector: "##{map_location_input_id(parent_class, "zoom")}",
|
||||||
|
marker_investments_coordinates: investments_coordinates
|
||||||
|
}
|
||||||
|
options[:marker_latitude] = map_location.latitude if map_location.latitude.present?
|
||||||
|
options[:marker_longitude] = map_location.longitude if map_location.longitude.present?
|
||||||
|
options
|
||||||
|
end
|
||||||
|
end
|
||||||
@@ -3,62 +3,11 @@ module MapLocationsHelper
|
|||||||
map_location.present? && map_location.available?
|
map_location.present? && map_location.available?
|
||||||
end
|
end
|
||||||
|
|
||||||
def map_location_latitude(map_location)
|
|
||||||
map_location.latitude.presence || Setting["map.latitude"]
|
|
||||||
end
|
|
||||||
|
|
||||||
def map_location_longitude(map_location)
|
|
||||||
map_location.longitude.presence || Setting["map.longitude"]
|
|
||||||
end
|
|
||||||
|
|
||||||
def map_location_zoom(map_location)
|
|
||||||
map_location.zoom.presence || Setting["map.zoom"]
|
|
||||||
end
|
|
||||||
|
|
||||||
def map_location_input_id(prefix, attribute)
|
def map_location_input_id(prefix, attribute)
|
||||||
"#{prefix}_map_location_attributes_#{attribute}"
|
"#{prefix}_map_location_attributes_#{attribute}"
|
||||||
end
|
end
|
||||||
|
|
||||||
def map_location_remove_marker_link_id(map_location)
|
def render_map(...)
|
||||||
"remove-marker-link-#{dom_id(map_location)}"
|
render Shared::MapLocationComponent.new(...)
|
||||||
end
|
end
|
||||||
|
|
||||||
def render_map(map_location, parent_class, editable, remove_marker_label, investments_coordinates = nil)
|
|
||||||
map_location = MapLocation.new if map_location.nil?
|
|
||||||
map = tag.div id: dom_id(map_location),
|
|
||||||
class: "map_location map",
|
|
||||||
data: prepare_map_settings(map_location, editable, parent_class, investments_coordinates)
|
|
||||||
map += map_location_remove_marker(map_location, remove_marker_label) if editable
|
|
||||||
map
|
|
||||||
end
|
|
||||||
|
|
||||||
def map_location_remove_marker(map_location, text)
|
|
||||||
tag.div class: "margin-bottom" do
|
|
||||||
link_to text, "#",
|
|
||||||
id: map_location_remove_marker_link_id(map_location),
|
|
||||||
class: "js-location-map-remove-marker location-map-remove-marker"
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
private
|
|
||||||
|
|
||||||
def prepare_map_settings(map_location, editable, parent_class, investments_coordinates = nil)
|
|
||||||
options = {
|
|
||||||
map: "",
|
|
||||||
map_center_latitude: map_location_latitude(map_location),
|
|
||||||
map_center_longitude: map_location_longitude(map_location),
|
|
||||||
map_zoom: map_location_zoom(map_location),
|
|
||||||
map_tiles_provider: Rails.application.secrets.map_tiles_provider,
|
|
||||||
map_tiles_provider_attribution: Rails.application.secrets.map_tiles_provider_attribution,
|
|
||||||
marker_editable: editable,
|
|
||||||
marker_remove_selector: "##{map_location_remove_marker_link_id(map_location)}",
|
|
||||||
latitude_input_selector: "##{map_location_input_id(parent_class, "latitude")}",
|
|
||||||
longitude_input_selector: "##{map_location_input_id(parent_class, "longitude")}",
|
|
||||||
zoom_input_selector: "##{map_location_input_id(parent_class, "zoom")}",
|
|
||||||
marker_investments_coordinates: investments_coordinates
|
|
||||||
}
|
|
||||||
options[:marker_latitude] = map_location.latitude if map_location.latitude.present?
|
|
||||||
options[:marker_longitude] = map_location.longitude if map_location.longitude.present?
|
|
||||||
options
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|||||||
Reference in New Issue
Block a user