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

add update_state()

Browse source
This commit is contained in:
Laura Klünder 2017-10-30 17:00:08 +01:00
parent 730cb1072a
commit cdd26d0992
1 changed files with 60 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,8 @@ c3nav = {
init: function () { init: function () {
c3nav.init_map(); c3nav.init_map();
c3nav._set_view('search'); $('.locationinput').data('location', null);
c3nav.update_state('search');
c3nav.init_locationinputs(); c3nav.init_locationinputs();
@ -19,66 +20,66 @@ c3nav = {
$('#map').on('click', '.location-popup .button-clear', c3nav._popup_button_click); $('#map').on('click', '.location-popup .button-clear', c3nav._popup_button_click);
}, },
_set_view: function(view) { update_state: function(new_view) {
c3nav._view = view; if (new_view) {
$('main').attr('data-view', view); c3nav._view = new_view;
$('main').attr('data-view', new_view);
}
c3nav.update_map_locations();
}, },
// button handlers // button handlers
_location_buttons_route_click: function () { _location_buttons_route_click: function () {
c3nav._set_view('route-search'); c3nav.update_state('route-search');
c3nav.update_map_locations();
c3nav._locationinput_focus_next(); c3nav._locationinput_focus_next();
}, },
_route_buttons_swap_click: function () { _route_buttons_swap_click: function () {
var $origin = $('#origin-input'), var $origin = $('#origin-input'),
$destination = $('#destination-input'), $destination = $('#destination-input'),
tmp = $origin.data('location'); tmp = $origin.data('location');
c3nav._locationinput_set($origin, $destination.data('location'), false); c3nav._locationinput_set_raw($origin, $destination.data('location'));
c3nav._locationinput_set($destination, tmp, false); c3nav._locationinput_set_raw($destination, tmp);
$origin.stop().css('top', '55px').animate({top: 0}, 150); $origin.stop().css('top', '55px').animate({top: 0}, 150);
$destination.stop().css('top', '-55px').animate({top: 0}, 150); $destination.stop().css('top', '-55px').animate({top: 0}, 150);
c3nav._locationinput_focus_next(); c3nav._locationinput_focus_next();
c3nav.update_map_locations(); c3nav.update_state();
}, },
_route_buttons_close_click: function () { _route_buttons_close_click: function () {
var $origin = $('#origin-input'), var $origin = $('#origin-input'),
$destination = $('#destination-input'); $destination = $('#destination-input');
if ($origin.is('.selected') && !$destination.is('.selected')) { if ($origin.is('.selected') && !$destination.is('.selected')) {
c3nav._locationinput_set($destination, $origin.data('location'), false); c3nav._locationinput_set_raw($destination, $origin.data('location'));
} }
c3nav._locationinput_set($origin, null, false); c3nav._locationinput_set_raw($origin, null);
if ($destination.is('.selected')) { if ($destination.is('.selected')) {
c3nav._set_view('location'); c3nav.update_state('location');
} else { } else {
c3nav._set_view('search'); c3nav.update_state('search');
$destination.find('input').focus(); $destination.find('input').focus();
} }
c3nav.update_map_locations();
}, },
_popup_button_click: function () { _popup_button_click: function () {
var location = c3nav.locations_by_id[parseInt($(this).siblings('.location').attr('data-id'))], var location = c3nav.locations_by_id[parseInt($(this).siblings('.location').attr('data-id'))],
$origin = $('#origin-input'), $origin = $('#origin-input'),
$destination = $('#destination-input'); $destination = $('#destination-input');
if ($(this).is('.as-location')) { if ($(this).is('.as-location')) {
c3nav._locationinput_set($destination, location, false); c3nav._locationinput_set_raw($destination, location);
c3nav._locationinput_set($origin, null, false); c3nav._locationinput_set_raw($origin, null);
c3nav._set_view('location'); c3nav.update_state('location');
} else { } else {
var $locationinput = $(this).is('.as-origin') ? $origin : $destination, var $locationinput = $(this).is('.as-origin') ? $origin : $destination,
$other_locationinput = $(this).is('.as-origin') ? $destination : $origin, $other_locationinput = $(this).is('.as-origin') ? $destination : $origin,
other_location = $other_locationinput.data('location'); other_location = $other_locationinput.data('location');
c3nav._locationinput_set($locationinput, location, false); c3nav._locationinput_set_raw($locationinput, location);
if (other_location === null || other_location === undefined) { if (other_location === null) {
c3nav._set_view('route-search'); c3nav.update_state('route-search');
} else if (other_location.id !== location.id && (other_location.locations === undefined || other_location.locations.indexOf(location.id) === -1)) { } else if (other_location.id !== location.id && (other_location.locations === undefined || other_location.locations.indexOf(location.id) === -1)) {
c3nav._set_view('route-result'); c3nav.update_state('route-result');
} else { } else {
c3nav._locationinput_set($other_locationinput, null, false); c3nav._locationinput_set_raw($other_locationinput, null);
c3nav._set_view('route-search'); c3nav.update_state('route-search');
} }
} }
c3nav.update_map_locations();
}, },
// location inputs // location inputs
@ -107,45 +108,35 @@ c3nav = {
.on('click', '.location', c3nav._locationinput_click_suggestion); .on('click', '.location', c3nav._locationinput_click_suggestion);
$('html').on('focus', '*', c3nav._locationinput_global_focuschange); $('html').on('focus', '*', c3nav._locationinput_global_focuschange);
}, },
_locationinput_set: function (elem, location, update_map) { _locationinput_set: function (elem, location) {
// set a location input and update state accordingly
c3nav._locationinput_set_raw(elem, location);
var new_view = null;
if (c3nav._view.startsWith('route-')) {
if (location === null) {
new_view = 'route-search';
} else if ($('#origin-input').is('.selected') && $('#destination-input').is('.selected')) {
new_view = 'route-search';
}
} else if (elem.attr('id') === 'destination-input') {
new_view = (location === null) ? 'search' : 'location';
}
c3nav.update_state(new_view);
if (location !== null) {
c3nav.fly_to_bounds();
}
},
_locationinput_set_raw: function (elem, location) {
// set a location input // set a location input
c3nav._locationinput_reset_autocomplete(); c3nav._locationinput_reset_autocomplete();
var location = (location === undefined) ? null : location, var title = (location === null) ? '' : location.title,
title = (location === null) ? '' : location.title,
subtitle = (location === null) ? '' : location.subtitle; subtitle = (location === null) ? '' : location.subtitle;
elem.toggleClass('selected', location !== null).toggleClass('empty', location === null) elem.toggleClass('selected', location !== null).toggleClass('empty', location === null)
.data('location', location).data('lastlocation', location); .data('location', location).data('lastlocation', location);
elem.find('input').val(title).data('origval', null); elem.find('input').val(title).data('origval', null);
elem.find('small').text(subtitle); elem.find('small').text(subtitle);
switch(c3nav._view) {
case 'search':
if (elem.attr('id') === 'destination-input' && location !== null) {
c3nav._set_view('location');
}
break;
case 'location':
if (elem.attr('id') === 'destination-input' && location === null) {
c3nav._set_view('search');
}
break;
case 'route-search':
if (location !== null && $('#origin-input').is('.selected') && $('#destination-input').is('.selected')) {
c3nav._set_view('route-result');
}
break;
case 'route-result':
if (location === null) {
c3nav._set_view('route-search');
}
break;
}
if (update_map === undefined || update_map) {
c3nav.update_map_locations();
if (location !== null) {
c3nav.fly_to_bounds();
}
}
}, },
_locationinput_reset: function (elem) { _locationinput_reset: function (elem) {
// reset this locationinput to its last location // reset this locationinput to its last location
@ -167,7 +158,7 @@ c3nav = {
_locationinput_blur: function () { _locationinput_blur: function () {
// when a locationinput is blurred… // when a locationinput is blurred…
var location = $(this).parent().data('location'); var location = $(this).parent().data('location');
if (location !== null && location !== undefined) { if (location !== null) {
// if the current content is a location name, set it // if the current content is a location name, set it
c3nav._locationinput_set($(this).parent(), location); c3nav._locationinput_set($(this).parent(), location);
} else { } else {
@ -271,17 +262,13 @@ c3nav = {
$parent.toggleClass('empty', val === ''); $parent.toggleClass('empty', val === '');
if ($parent.is('.selected')) { if ($parent.is('.selected')) {
$parent.removeClass('selected').data('location', null); $parent.removeClass('selected').data('location', null);
switch(c3nav._view) { if (c3nav._view === 'location' && $parent.attr('id') === 'destination-input') {
case 'location': c3nav.update_state('search');
if ($parent.attr('id') === 'destination-input') { } else if (c3nav._view === 'state') {
c3nav._set_view('search'); c3nav.update_state('route-search');
} } else {
break; c3nav.update_state();
case 'route-result':
c3nav._set_view('route-search');
break;
} }
c3nav.update_map_locations();
} }
$autocomplete.find('.focus').removeClass('focus'); $autocomplete.find('.focus').removeClass('focus');
@ -399,18 +386,18 @@ c3nav = {
}, },
update_map_locations: function () { update_map_locations: function () {
// update locations markers on the map // update locations markers on the map
var $origin = $('#origin-input'), var origin = $('#origin-input').data('location'),
$destination = $('#destination-input'), destination = $('#destination-input').data('location'),
single = !$('main').is('[data-view^=route]'), single = !$('main').is('[data-view^=route]'),
bounds = {}; bounds = {};
for (var level_id in c3nav._locationLayers) { for (var level_id in c3nav._locationLayers) {
c3nav._locationLayers[level_id].clearLayers() c3nav._locationLayers[level_id].clearLayers()
} }
if ($origin.is('.selected')) { if (origin !== null) {
c3nav._merge_bounds(bounds, c3nav._add_location_to_map($origin.data('location'), single ? new L.Icon.Default() : c3nav.originIcon)) c3nav._merge_bounds(bounds, c3nav._add_location_to_map(origin, single ? new L.Icon.Default() : c3nav.originIcon))
} }
if ($destination.is('.selected')) { if (destination !== null) {
c3nav._merge_bounds(bounds, c3nav._add_location_to_map($destination.data('location'), single ? new L.Icon.Default() : c3nav.destinationIcon)); c3nav._merge_bounds(bounds, c3nav._add_location_to_map(destination, single ? new L.Icon.Default() : c3nav.destinationIcon));
} }
c3nav._locationLayerBounds = bounds; c3nav._locationLayerBounds = bounds;
}, },