Browse Source

Merge branch 'feature/collection-improvements' into develop

* feature/collection-improvements:
  Highlight the item in the sidebar when its icon on the map is clicked
tags/0.3.6^2
Bèr Kessels 1 month ago
parent
commit
532d555751

+ 17
- 0
app/assets/javascripts/application.js View File

@@ -25,3 +25,20 @@ var sourceEntry = function(feature) {
label: attrs.label
};
};

var highlightAsidePlace = function(id) {
var id = 'place-' + id;
return function(e) {
var activePlaceElements = document.querySelectorAll('#map-listing .active');

var clickedPlaceElem = document.getElementById(id);
clickedPlaceElem.classList.add('active');
clickedPlaceElem.scrollIntoView(false);

activePlaceElements.forEach(function(activePlaceElement) {
activePlaceElement.classList.remove('active');
});

history.pushState({place: id}, null, '#' + id);
};
};

+ 4
- 0
app/assets/stylesheets/application.scss View File

@@ -10,6 +10,10 @@
#map.full {
height: 800px;
}
#map-listing {
height: 800px;
overflow: auto;
}

.inline-icon {
height: 1em;

+ 5
- 3
app/views/region.erb View File

@@ -55,7 +55,7 @@
end
popup_content = "<strong>#{Rack::Utils.escape_html(place.name)}</strong>"
popup_content += erb(:status_badge_partial, locals: { status: place.status }).delete("\n")
js += "markers.push(L.marker([#{place.geometry.y}, #{place.geometry.x}], {icon: #{icon}}).addTo(map).bindPopup('#{popup_content}'));"
js += "markers.push(L.marker([#{place.geometry.y}, #{place.geometry.x}], {icon: #{icon}}).on('click', highlightAsidePlace('#{place.id}')).addTo(map).bindPopup('#{popup_content}'))\n;"
end

js += "var group = L.featureGroup(markers);"
@@ -69,9 +69,11 @@
<h2>Openingstijden in <%= @region.name %></h2>

<section class="row">
<div class="col-3 list-group">
<div class="col-3 list-group pl-3" id="map-listing">
<%- @region.collection.each do |place| %>
<a href="/places/<%= place.id %>" class="list-group-item list-group-item-action">
<a href="/places/<%= place.id %>"
class="list-group-item list-group-item-action"
id="place-<%= place.id %>">
<div class="d-flex w-100 justify-content-between">
<h3 class="mb-1 small"><%= place.name %></h3>
</div>

Loading…
Cancel
Save