diff --git a/src/c3nav/site/static/site/css/c3nav.css b/src/c3nav/site/static/site/css/c3nav.css index 808da461..79122da8 100644 --- a/src/c3nav/site/static/site/css/c3nav.css +++ b/src/c3nav/site/static/site/css/c3nav.css @@ -102,6 +102,13 @@ main.map { width: 5%; } +.loader { + width: 48px; + height: 48px; + /*noinspection CssUnknownTarget*/ + background: url('../../img/loader.gif'); +} + main:not([data-view^=route]) #origin-input, #search.loading #destination-input { margin-bottom: -55px; diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js index e715f69d..10d7e556 100644 --- a/src/c3nav/site/static/site/js/c3nav.js +++ b/src/c3nav/site/static/site/js/c3nav.js @@ -411,7 +411,8 @@ c3nav = { c3nav.update_state(false); }, _popup_button_click: function () { - var location = c3nav.locations_by_id[parseInt($(this).siblings('.location').attr('data-id'))], + var $location = $(this).siblings('.location'), + location = $location.is('[data-location]') ? JSON.parse($location.attr('data-location')) : c3nav.locations_by_id[parseInt($location.attr('data-id'))], $origin = $('#origin-input'), $destination = $('#destination-input'); if ($(this).is('.as-location')) { @@ -442,13 +443,16 @@ c3nav = { $('.locationinput .clear').on('click', c3nav._locationinput_clear); $('#autocomplete').on('mouseover', '.location', c3nav._locationinput_hover_suggestion) .on('click', '.location', c3nav._locationinput_click_suggestion); - $('html').on('focus', '*', c3nav._locationinput_global_focuschange); + $('html').on('focus', '*', c3nav._locationinput_global_focuschange) + .on('mousedown', '*', c3nav._locationinput_global_focuschange); }, - _build_location_html: function(location) { - return $('
') + _build_location_html: function(location, add_data) { + html = $('
') .append($('').text('place')) .append($('').text(location.title)) - .append($('').text(location.subtitle)).attr('data-id', location.id)[0].outerHTML + .append($('').text(location.subtitle)).attr('data-id', location.id); + if (add_data) html.attr('data-location', JSON.stringify(location)); + return html[0].outerHTML; }, _locationinput_set: function (elem, location) { // set a location input @@ -495,6 +499,9 @@ c3nav = { if (c3nav.current_locationinput && !$(e.target).is('#autocomplete *, #' + c3nav.current_locationinput + ' *')) { c3nav._locationinput_reset_autocomplete(); } + if (c3nav._click_anywhere_popup && !$(e.target).is('.leaflet-popup > *')) { + c3nav._click_anywhere_popup.remove(); + } if (!$(e.target).is('#search *')) { $('#search').removeClass('focused'); } else if ($(e.target).is('.locationinput input')) { @@ -704,9 +711,27 @@ c3nav = { c3nav._levelControl.finalize(); c3nav._levelControl.setLevel(c3nav.levels[0][0]); + c3nav.map.on('click', c3nav._click_anywhere); + c3nav.schedule_refresh_tile_access(); }, + _click_anywhere_popup: null, + _click_anywhere: function(e) { + var popup = L.popup().setLatLng(e.latlng).setContent('
'), + 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; + 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'}, 'autoPanPaddingTopLeft', 'autoPanPaddingBottomRight')); + popup.setLatLng(e.latlng).setContent(c3nav._build_location_html(data, true)+$('#popup-buttons').html()); + c3nav._click_anywhere_popup = popup; + popup.on('remove', function() { c3nav._click_anywhere_popup = null }).openOn(c3nav.map); + }); + }, _map_moved: function () { c3nav.update_map_state(); },