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

finish history state logic

Browse source
This commit is contained in:
Laura Klünder 2017-10-31 12:20:33 +01:00
parent 31be55897a
commit bbfa5da2f6
1 changed files with 47 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,7 +27,8 @@ c3nav = {
c3nav.init_map(); c3nav.init_map();
$('.locationinput').data('location', null); $('.locationinput').data('location', null);
c3nav.update_state(false); c3nav.update_state(false, true);
c3nav.update_map_state(true);
c3nav.init_locationinputs(); c3nav.init_locationinputs();
@ -38,9 +39,8 @@ c3nav = {
}, },
state: {}, state: {},
_sidebar_state: true,
_routing: false, _routing: false,
update_state: function(routing) { update_state: function(routing, replace) {
if (typeof routing !== "boolean") routing = c3nav._routing; if (typeof routing !== "boolean") routing = c3nav._routing;
c3nav._routing = routing; c3nav._routing = routing;
@ -49,23 +49,23 @@ c3nav = {
new_state = { new_state = {
routing: routing, routing: routing,
origin: origin, origin: origin,
destination: destination destination: destination,
sidebar: true
}; };
c3nav._push_state(new_state, true); c3nav._push_state(new_state, replace);
c3nav._sidebar_state_updated(new_state); c3nav._sidebar_state_updated(new_state);
}, },
update_map_state: function () { update_map_state: function (replace, level, center, zoom) {
var center = c3nav.map.getCenter(),
newCenter = c3nav.map._limitCenter(center, c3nav.map.getZoom(), c3nav.map.options.maxBounds);
if (!center.equals(newCenter)) return;
var new_state = { var new_state = {
level: c3nav._levelControl.currentLevel, level: center ? level : c3nav._levelControl.currentLevel,
center: L.GeoJSON.latLngToCoords(c3nav.map.getCenter(), 2), center: L.GeoJSON.latLngToCoords(center ? center : c3nav.map.getCenter(), 2),
zoom: Math.round(c3nav.map.getZoom() * 100) / 100 zoom: Math.round((center ? zoom : c3nav.map.getZoom()) * 100) / 100
}; };
c3nav._push_state(new_state, false); if (!replace) new_state.sidebar = false;
c3nav._push_state(new_state, replace);
}, },
_sidebar_state_updated: function (state) { _sidebar_state_updated: function (state) {
var view; var view;
@ -85,15 +85,19 @@ c3nav = {
c3nav.update_map_locations(); c3nav.update_map_locations();
}, },
_push_state: function (state, sidebar_state) { _equal_states: function (a, b) {
if (a.routing !== b.routing) return false;
if ((a.origin && a.origin.id) !== (b.origin && b.origin.id)) return false;
if ((a.destination && a.destination.id) !== (b.destination && b.destination.id)) return false;
if (a.level !== b.level || a.zoom !== b.zoom) return false;
if (a.center[0] !== b.center[0] || a.center[1] !== b.center[1]) return false;
return true;
},
_push_state: function (state, replace) {
state = $.extend({}, c3nav.state, state); state = $.extend({}, c3nav.state, state);
var old_state = c3nav.state; var old_state = c3nav.state;
if (!sidebar_state && old_state.level === state.level && old_state.zoom === state.zoom) { if (c3nav._equal_states(old_state, state)) return;
if (old_state.center[0] === state.center[0] && old_state.center[1] === state.center[1]) return;
}
console.log(sidebar_state ? 'new sidebar state' : 'new map state');
var url; var url;
if (state.routing) { if (state.routing) {
@ -106,13 +110,12 @@ c3nav = {
} }
c3nav.state = state; c3nav.state = state;
if (sidebar_state || (c3nav._sidebar_state && old_state.center)) { if (replace || (!state.sidebar && !old_state.sidebar)) {
console.log('pushed'); console.log('state replaced');
history.pushState(state, '', url);
c3nav._sidebar_state = sidebar_state;
} else {
console.log('replaced');
history.replaceState(state, '', url); history.replaceState(state, '', url);
} else {
console.log('state pushed');
history.pushState(state, '', url);
} }
}, },
@ -281,7 +284,7 @@ c3nav = {
if (!$focused.length) return; if (!$focused.length) return;
c3nav._locationinput_set($(this).parent(), c3nav.locations_by_id[$focused.attr('data-id')]); c3nav._locationinput_set($(this).parent(), c3nav.locations_by_id[$focused.attr('data-id')]);
c3nav.update_state(); c3nav.update_state();
c3nav.fly_to_bounds(); c3nav.fly_to_bounds(true);
} }
}, },
_locationinput_hover_suggestion: function () { _locationinput_hover_suggestion: function () {
@ -291,7 +294,7 @@ c3nav = {
var $locationinput = $('#' + c3nav.current_locationinput); var $locationinput = $('#' + c3nav.current_locationinput);
c3nav._locationinput_set($locationinput, c3nav.locations_by_id[$(this).attr('data-id')]); c3nav._locationinput_set($locationinput, c3nav.locations_by_id[$(this).attr('data-id')]);
c3nav.update_state(); c3nav.update_state();
c3nav.fly_to_bounds(); c3nav.fly_to_bounds(true);
}, },
_locationinput_matches_compare: function (a, b) { _locationinput_matches_compare: function (a, b) {
if (a[1] !== b[1]) return b[1] - a[1]; if (a[1] !== b[1]) return b[1] - a[1];
@ -390,8 +393,8 @@ c3nav = {
}); });
c3nav.map.fitBounds(L.GeoJSON.coordsToLatLngs(c3nav.bounds), c3nav._add_map_padding({})); c3nav.map.fitBounds(L.GeoJSON.coordsToLatLngs(c3nav.bounds), c3nav._add_map_padding({}));
c3nav.map.on('zoomend', c3nav.update_map_state); c3nav.map.on('moveend', c3nav._map_moved);
c3nav.map.on('moveend', c3nav.update_map_state); c3nav.map.on('zoomend', c3nav._map_zoomed);
// set up icons // set up icons
L.Icon.Default.imagePath = '/static/leaflet/images/'; L.Icon.Default.imagePath = '/static/leaflet/images/';
@ -418,6 +421,12 @@ c3nav = {
c3nav.schedule_refresh_tile_access(); c3nav.schedule_refresh_tile_access();
}, },
_map_moved: function () {
c3nav.update_map_state();
},
_map_zoomed: function () {
c3nav.update_map_state();
},
_add_icon: function (name) { _add_icon: function (name) {
c3nav[name+'Icon'] = new L.Icon({ c3nav[name+'Icon'] = new L.Icon({
iconUrl: '/static/img/marker-icon-'+name+'.png', iconUrl: '/static/img/marker-icon-'+name+'.png',
@ -443,7 +452,7 @@ c3nav = {
if (destination) c3nav._merge_bounds(bounds, c3nav._add_location_to_map(destination, single ? new L.Icon.Default() : c3nav.destinationIcon)); if (destination) c3nav._merge_bounds(bounds, c3nav._add_location_to_map(destination, single ? new L.Icon.Default() : c3nav.destinationIcon));
c3nav._locationLayerBounds = bounds; c3nav._locationLayerBounds = bounds;
}, },
fly_to_bounds: function() { fly_to_bounds: function(replace_state) {
// fly to the bounds of the current overlays // fly to the bounds of the current overlays
var level = c3nav._levelControl.currentLevel, var level = c3nav._levelControl.currentLevel,
bounds = null; bounds = null;
@ -461,10 +470,15 @@ c3nav = {
c3nav._levelControl.setLevel(level); c3nav._levelControl.setLevel(level);
if (bounds) { if (bounds) {
var left = 0, var left = 0,
top = (left === 0) ? $('#search').height()+10 : 10; top = (left === 0) ? $('#search').height()+10 : 10,
c3nav.map.flyToBounds(bounds, c3nav._add_map_padding({ target = c3nav.map._getBoundsCenterZoom(bounds, c3nav._add_map_padding({})),
center = c3nav.map._limitCenter(target.center, target.zoom, c3nav.map.options.maxBounds);
c3nav.map.flyTo(center, target.zoom, {
duration: 1 duration: 1
})); });
if (replace_state) {
c3nav.update_map_state(true, level, center, target.zoom);
}
} }
}, },
_add_map_padding: function(options, topleft, bottomright) { _add_map_padding: function(options, topleft, bottomright) {