add intermediate popup when clicking anywhere

This commit is contained in:
Laura Klünder 2019-12-24 22:48:00 +01:00
parent 542991022b
commit b7dd3a27fc
3 changed files with 64 additions and 34 deletions

View file

@ -726,7 +726,7 @@ main:not([data-view=route-result]) #route-dots {
height: 21px;
}
#popup-buttons, #attributions {
#location-popup-buttons, #anywhere-popup-buttons, #attributions {
display: none;
}
.location-popup .leaflet-popup-content {

View file

@ -778,8 +778,9 @@ c3nav = {
},
_popup_button_click: function (e) {
e.stopPropagation();
var $location = $(this).parent().siblings('.location'),
location = c3nav.locations_by_id[parseInt($location.attr('data-id'))],
var $location = $(this).parent().siblings('.location');
if ($location.length) {
var location = c3nav.locations_by_id[parseInt($location.attr('data-id'))],
$origin = $('#origin-input'),
$destination = $('#destination-input');
if (!location) {
@ -803,6 +804,11 @@ c3nav = {
c3nav.update_state(true);
}
if (c3nav._click_anywhere_popup) c3nav._click_anywhere_popup.remove();
} else {
if ($(this).is('.select-point')) {
c3nav._click_anywhere_load();
}
}
},
// share logic
@ -1252,21 +1258,31 @@ c3nav = {
_click_anywhere_popup: null,
_click_anywhere: function(e) {
if (e.originalEvent.target.id !== 'map') return;
var popup = L.popup().setLatLng(e.latlng).setContent('<div class="loader"></div>'),
var popup = L.popup(c3nav._add_map_padding({className: 'location-popup', maxWidth: 500}, 'autoPanPaddingTopLeft', 'autoPanPaddingBottomRight'));
popup.setLatLng(e.latlng).setContent($('#anywhere-popup-buttons').html());
c3nav._click_anywhere_popup = popup;
popup.on('remove', function() { c3nav._click_anywhere_popup = null }).openOn(c3nav.map);
},
_click_anywhere_load: function() {
if (!c3nav._click_anywhere_popup) return;
var latlng = c3nav._click_anywhere_popup.getLatLng();
console.log(latlng);
c3nav._click_anywhere_popup.remove();
var popup = L.popup().setLatLng(latlng).setContent('<div class="loader"></div>'),
level = c3nav._levelControl.currentLevel,
name = 'c:'+String(c3nav.level_labels_by_id[level])+':'+Math.round(e.latlng.lng*100)/100+':'+Math.round(e.latlng.lat*100)/100;
name = 'c:'+String(c3nav.level_labels_by_id[level])+':'+Math.round(latlng.lng*100)/100+':'+Math.round(latlng.lat*100)/100;
c3nav._click_anywhere_popup = popup;
popup.on('remove', function() { c3nav._click_anywhere_popup = null }).openOn(c3nav.map);
$.getJSON('/api/locations/'+name+'/', function(data) {
if (c3nav._click_anywhere_popup !== popup || !popup.isOpen()) return;
popup.remove();
popup = L.popup(c3nav._add_map_padding({className: 'location-popup', maxWidth: 500}, 'autoPanPaddingTopLeft', 'autoPanPaddingBottomRight'));
var buttons = $('#popup-buttons').clone();
newpopup = L.popup(c3nav._add_map_padding({className: 'location-popup', maxWidth: 500}, 'autoPanPaddingTopLeft', 'autoPanPaddingBottomRight'));
var buttons = $('#location-popup-buttons').clone();
buttons.find('.report-issue').remove();
buttons.find('.report').attr('href', '/report/l/'+String(data.id)+'/');
popup.setLatLng(e.latlng).setContent(c3nav._build_location_html(data)+buttons.html());
c3nav._click_anywhere_popup = popup;
popup.on('remove', function() { c3nav._click_anywhere_popup = null }).openOn(c3nav.map);
newpopup.setLatLng(latlng).setContent(c3nav._build_location_html(data)+buttons.html());
c3nav._click_anywhere_popup = newpopup;
newpopup.on('remove', function() { c3nav._click_anywhere_popup = null }).openOn(c3nav.map);
}).fail(function() {
popup.remove();
});
@ -1387,7 +1403,7 @@ c3nav = {
var point = c3nav._location_point_overrides[location.id] || location.point.slice(1),
latlng = L.GeoJSON.coordsToLatLng(point),
buttons = $('#popup-buttons').clone();
buttons = $('#location-popup-buttons').clone();
if (typeof location.id == 'number') {
buttons.find('.report-missing').remove();
} else {

View file

@ -29,7 +29,21 @@
</section>
{% if not embed %}
<section id="messages">{% include 'site/fragment_messages.html' %}</section>
<section id="popup-buttons">
<section id="anywhere-popup-buttons">
<div class="buttons">
<button class="button-clear select-point">
<i class="material-icons">pin_drop</i>
{% trans 'Select this point' %}
</button>
</div>
<div class="buttons">
<button class="button-clear show-nearby">
<i class="material-icons">search</i>
{% trans 'Show nearby locations' %}
</button>
</div>
</section>
<section id="location-popup-buttons">
<div class="buttons">
<button class="button-clear as-location">
<i class="material-icons">arrow_upward</i>