2025-summer/team-3
12
Fork 0
Code Issues Pull requests Projects Releases Activity

add intermediate popup when clicking anywhere

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
src/c3nav/site/static/site/css/c3nav.scss
View file

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

80
src/c3nav/site/static/site/js/c3nav.js
View file

@ -763,7 +763,7 @@ c3nav = {
tmp = $origin.data('location'); tmp = $origin.data('location');
c3nav._locationinput_set($origin, $destination.data('location')); c3nav._locationinput_set($origin, $destination.data('location'));
c3nav._locationinput_set($destination, tmp); c3nav._locationinput_set($destination, tmp);
var offset = $destination.position().top-$origin.position().top; var offset = $destination.position().top - $origin.position().top;
$origin.stop().css('top', offset).animate({top: 0}, 150); $origin.stop().css('top', offset).animate({top: 0}, 150);
$destination.stop().css('top', -offset).animate({top: 0}, 150); $destination.stop().css('top', -offset).animate({top: 0}, 150);
c3nav.update_state(); c3nav.update_state();
@ -778,31 +778,37 @@ c3nav = {
}, },
_popup_button_click: function (e) { _popup_button_click: function (e) {
e.stopPropagation(); e.stopPropagation();
var $location = $(this).parent().siblings('.location'), var $location = $(this).parent().siblings('.location');
location = c3nav.locations_by_id[parseInt($location.attr('data-id'))], if ($location.length) {
$origin = $('#origin-input'), var location = c3nav.locations_by_id[parseInt($location.attr('data-id'))],
$destination = $('#destination-input'); $origin = $('#origin-input'),
if (!location) { $destination = $('#destination-input');
location = JSON.parse($location.attr('data-location')); if (!location) {
} location = JSON.parse($location.attr('data-location'));
if ($(this).is('.as-location')) { }
c3nav._locationinput_set($destination, location); if ($(this).is('.as-location')) {
c3nav.update_state(false); c3nav._locationinput_set($destination, location);
} else if ($(this).is('.share')) { c3nav.update_state(false);
c3nav._buttons_share_click(location); } else if ($(this).is('.share')) {
} else if ($(this).is('a')) { c3nav._buttons_share_click(location);
c3nav._modal_link_click.call(this, e); } else if ($(this).is('a')) {
} else { c3nav._modal_link_click.call(this, e);
var $locationinput = $(this).is('.as-origin') ? $origin : $destination, } else {
$other_locationinput = $(this).is('.as-origin') ? $destination : $origin, var $locationinput = $(this).is('.as-origin') ? $origin : $destination,
other_location = $other_locationinput.data('location'); $other_locationinput = $(this).is('.as-origin') ? $destination : $origin,
c3nav._locationinput_set($locationinput, location); other_location = $other_locationinput.data('location');
if (other_location && (other_location.id === location.id || (other_location.locations && other_location.locations.includes(location.id)))) { c3nav._locationinput_set($locationinput, location);
c3nav._locationinput_set($other_locationinput, null); if (other_location && (other_location.id === location.id || (other_location.locations && other_location.locations.includes(location.id)))) {
c3nav._locationinput_set($other_locationinput, null);
}
c3nav.update_state(true);
}
if (c3nav._click_anywhere_popup) c3nav._click_anywhere_popup.remove();
} else {
if ($(this).is('.select-point')) {
c3nav._click_anywhere_load();
} }
c3nav.update_state(true);
} }
if (c3nav._click_anywhere_popup) c3nav._click_anywhere_popup.remove();
}, },
// share logic // share logic
@ -1252,21 +1258,31 @@ c3nav = {
_click_anywhere_popup: null, _click_anywhere_popup: null,
_click_anywhere: function(e) { _click_anywhere: function(e) {
if (e.originalEvent.target.id !== 'map') return; 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, 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; c3nav._click_anywhere_popup = popup;
popup.on('remove', function() { c3nav._click_anywhere_popup = null }).openOn(c3nav.map); popup.on('remove', function() { c3nav._click_anywhere_popup = null }).openOn(c3nav.map);
$.getJSON('/api/locations/'+name+'/', function(data) { $.getJSON('/api/locations/'+name+'/', function(data) {
if (c3nav._click_anywhere_popup !== popup || !popup.isOpen()) return; if (c3nav._click_anywhere_popup !== popup || !popup.isOpen()) return;
popup.remove(); popup.remove();
popup = L.popup(c3nav._add_map_padding({className: 'location-popup', maxWidth: 500}, 'autoPanPaddingTopLeft', 'autoPanPaddingBottomRight')); newpopup = L.popup(c3nav._add_map_padding({className: 'location-popup', maxWidth: 500}, 'autoPanPaddingTopLeft', 'autoPanPaddingBottomRight'));
var buttons = $('#popup-buttons').clone(); var buttons = $('#location-popup-buttons').clone();
buttons.find('.report-issue').remove(); buttons.find('.report-issue').remove();
buttons.find('.report').attr('href', '/report/l/'+String(data.id)+'/'); buttons.find('.report').attr('href', '/report/l/'+String(data.id)+'/');
popup.setLatLng(e.latlng).setContent(c3nav._build_location_html(data)+buttons.html()); newpopup.setLatLng(latlng).setContent(c3nav._build_location_html(data)+buttons.html());
c3nav._click_anywhere_popup = popup; c3nav._click_anywhere_popup = newpopup;
popup.on('remove', function() { c3nav._click_anywhere_popup = null }).openOn(c3nav.map); newpopup.on('remove', function() { c3nav._click_anywhere_popup = null }).openOn(c3nav.map);
}).fail(function() { }).fail(function() {
popup.remove(); popup.remove();
}); });
@ -1387,7 +1403,7 @@ c3nav = {
var point = c3nav._location_point_overrides[location.id] || location.point.slice(1), var point = c3nav._location_point_overrides[location.id] || location.point.slice(1),
latlng = L.GeoJSON.coordsToLatLng(point), latlng = L.GeoJSON.coordsToLatLng(point),
buttons = $('#popup-buttons').clone(); buttons = $('#location-popup-buttons').clone();
if (typeof location.id == 'number') { if (typeof location.id == 'number') {
buttons.find('.report-missing').remove(); buttons.find('.report-missing').remove();
} else { } else {

16
src/c3nav/site/templates/site/map.html
View file

@ -29,7 +29,21 @@
</section> </section>
{% if not embed %} {% if not embed %}
<section id="messages">{% include 'site/fragment_messages.html' %}</section> <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"> <div class="buttons">
<button class="button-clear as-location"> <button class="button-clear as-location">
<i class="material-icons">arrow_upward</i> <i class="material-icons">arrow_upward</i>