Updating UI to also fit on mobile devices. Fix #34
This commit is contained in:
Gautier Pelloux-Prayer
parent
1e26cb1027
commit
d7e476db82
44 changed files with 555 additions and 1305 deletions
|
|
@ -1,6 +1,6 @@
|
|||
BR.Control = L.Control.extend({
|
||||
options: {
|
||||
position: 'leftpane'
|
||||
position: 'bottomleft'
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,16 @@
|
|||
BR.Download = BR.Control.extend({
|
||||
options: {
|
||||
heading: 'Download'
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
var container = BR.Control.prototype.onAdd.call(this, map);
|
||||
return container;
|
||||
},
|
||||
|
||||
BR.Download = L.Class.extend({
|
||||
update: function (urls) {
|
||||
var html = '<div class="value">';
|
||||
if (urls.gpx) {
|
||||
html += '<a href="' + urls.gpx + '" download="brouter.gpx">GPX</a> · ';
|
||||
html += '<a href="' + urls.kml + '" download="brouter.kml">KML</a> · ';
|
||||
html += '<a href="' + urls.geojson + '" download="brouter.geojson">GeoJSON</a> · ';
|
||||
html += '<a href="' + urls.csv + '" download="brouter.tsv">data CSV</a>';
|
||||
if (urls) {
|
||||
['gpx', 'kml', 'geojson', 'csv'].forEach(function(e, i, a) {
|
||||
var a = L.DomUtil.get('dl-'+e);
|
||||
a.setAttribute('href', urls[e]);
|
||||
a.setAttribute('download', 'brouter.'+e);
|
||||
a.removeAttribute('disabled');
|
||||
})
|
||||
}
|
||||
html += '</div>';
|
||||
this._content.innerHTML = html;
|
||||
}
|
||||
});
|
||||
|
||||
BR.download = function() {
|
||||
return new BR.Download();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
BR.Profile = L.Class.extend({
|
||||
options: {
|
||||
heading: 'Profile'
|
||||
},
|
||||
|
||||
cache: {},
|
||||
|
||||
initialize: function () {
|
||||
L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
|
||||
L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
|
||||
|
||||
this.ele = document.profile_upload.profile;
|
||||
this.ele = L.DomUtil.get('profile_upload');
|
||||
this.message = new BR.Message('profile_message', {
|
||||
alert: true
|
||||
});
|
||||
|
|
@ -65,8 +60,8 @@ BR.Profile = L.Class.extend({
|
|||
$(button).button('uploading');
|
||||
evt.preventDefault();
|
||||
|
||||
this.fire('update', {
|
||||
profileText: profile,
|
||||
this.fire('update', {
|
||||
profileText: profile,
|
||||
callback: function () {
|
||||
$(button).button('reset');
|
||||
$(button).blur();
|
||||
|
|
|
|||
|
|
@ -1,51 +1,62 @@
|
|||
BR.RoutingOptions = BR.Control.extend({
|
||||
options: {
|
||||
heading: 'Options',
|
||||
divId: 'route_options'
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
var select = L.DomUtil.get('profile'),
|
||||
i,
|
||||
option;
|
||||
|
||||
select.onchange = this._getChangeHandler();
|
||||
L.DomUtil.get('alternative').onchange = this._getChangeHandler();
|
||||
$('#profile-alternative').on('changed.bs.select', this._getChangeHandler());
|
||||
|
||||
// build option list from config
|
||||
var profiles = BR.conf.profiles;
|
||||
for (i = 0; i < profiles.length; i++) {
|
||||
option = document.createElement("option");
|
||||
var profiles_list = L.DomUtil.get('profile');
|
||||
for (var i = 0; i < profiles.length; i++) {
|
||||
var option = document.createElement("option");
|
||||
option.value = profiles[i];
|
||||
option.text = profiles[i];
|
||||
select.add(option, null);
|
||||
profiles_list.appendChild(option);
|
||||
}
|
||||
// <custom> option disabled, select next
|
||||
select.options[1].selected = true;
|
||||
|
||||
// <custom> profile is empty at start, select next one
|
||||
profiles_list.children[1].selected = true;
|
||||
return BR.Control.prototype.onAdd.call(this, map);
|
||||
},
|
||||
|
||||
getOptions: function() {
|
||||
var profile = $('#profile option:selected'),
|
||||
alternative = $('#alternative option:selected');
|
||||
$('#stat-profile').html(profile.text() + ' (' + alternative.text() +')');
|
||||
|
||||
// we do not allow to select more than one profile and/or alternative at a time
|
||||
// so we disable the current selected items
|
||||
$('#profile-alternative').find('option:disabled').each(function(index) {
|
||||
$(this).prop('disabled', false);
|
||||
});
|
||||
$('#profile-alternative').find('option:selected').each(function(index) {
|
||||
$(this).prop('disabled', true);
|
||||
});
|
||||
|
||||
// disable custom option if it has no value yet (default value is "Custom")
|
||||
var custom = L.DomUtil.get('profile').children[0];
|
||||
if (custom.value === "Custom") {
|
||||
custom.disabled = true;
|
||||
}
|
||||
|
||||
$('.selectpicker').selectpicker('refresh')
|
||||
|
||||
return {
|
||||
profile: L.DomUtil.get('profile').value,
|
||||
alternative: L.DomUtil.get('alternative').value
|
||||
profile: profile.val(),
|
||||
alternative: alternative.val()
|
||||
};
|
||||
},
|
||||
|
||||
setOptions: function(options) {
|
||||
var select,
|
||||
var profiles_grp,
|
||||
profile = options.profile;
|
||||
|
||||
if (profile) {
|
||||
select = L.DomUtil.get('profile');
|
||||
select.value = profile;
|
||||
profiles_grp = L.DomUtil.get('profile');
|
||||
profiles_grp.value = profile;
|
||||
|
||||
// profile got not selected = not in option values -> custom profile passed with permalink
|
||||
if (select.value != profile) {
|
||||
if (profiles_grp.value != profile) {
|
||||
this.setCustomProfile(profile, true);
|
||||
}
|
||||
|
||||
}
|
||||
if (options.alternative) {
|
||||
L.DomUtil.get('alternative').value = options.alternative;
|
||||
|
|
@ -53,13 +64,18 @@ BR.RoutingOptions = BR.Control.extend({
|
|||
},
|
||||
|
||||
setCustomProfile: function(profile, noUpdate) {
|
||||
var select,
|
||||
var profiles_grp,
|
||||
option;
|
||||
|
||||
select = L.DomUtil.get('profile');
|
||||
option = select.options[0]
|
||||
profiles_grp = L.DomUtil.get('profile');
|
||||
option = profiles_grp.children[0]
|
||||
option.value = profile;
|
||||
option.disabled = !profile;
|
||||
|
||||
$('#profile').find('option:selected').each(function(index) {
|
||||
$(this).prop('selected', false);
|
||||
});
|
||||
|
||||
option.selected = !!profile;
|
||||
|
||||
if (!noUpdate) {
|
||||
|
|
@ -68,8 +84,8 @@ BR.RoutingOptions = BR.Control.extend({
|
|||
},
|
||||
|
||||
getCustomProfile: function() {
|
||||
var select = L.DomUtil.get('profile'),
|
||||
option = select.options[0],
|
||||
var profiles_grp = L.DomUtil.get('profile'),
|
||||
option = profiles_grp.children[0],
|
||||
profile = null;
|
||||
|
||||
if (!option.disabled) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
BR.Tabs = BR.Control.extend({
|
||||
options: {
|
||||
divId: 'tabs_div',
|
||||
divId: 'sidebar',
|
||||
// tab a.hash > instance
|
||||
tabs: {}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
BR.TrackMessages = L.Class.extend({
|
||||
|
||||
options: {
|
||||
heading: 'Data',
|
||||
heading: 'Segment data',
|
||||
edgeStyle: {
|
||||
color: 'yellow',
|
||||
opacity: 0.8,
|
||||
|
|
@ -60,7 +60,6 @@ BR.TrackMessages = L.Class.extend({
|
|||
headings = messages[0];
|
||||
columns = this._getColumns(headings, data);
|
||||
|
||||
console.time('datatable');
|
||||
this._table = $('#datatable').DataTable({
|
||||
destroy: true,
|
||||
data: data,
|
||||
|
|
@ -68,9 +67,6 @@ BR.TrackMessages = L.Class.extend({
|
|||
paging: false,
|
||||
searching: false,
|
||||
info: false,
|
||||
// flexbox workaround: without scrollY height Firefox extends to content height
|
||||
// (^= minimum height with flexbox?)
|
||||
scrollY: 50,
|
||||
scrollX: true,
|
||||
scrollCollapse: true,
|
||||
order: []
|
||||
|
|
@ -79,8 +75,6 @@ BR.TrackMessages = L.Class.extend({
|
|||
// highlight track segment (graph edge) on row hover
|
||||
this._setEdges(polyline, segments);
|
||||
$('#datatable tbody tr').hover(L.bind(this._handleHover, this), L.bind(this._handleHoverOut, this));
|
||||
|
||||
console.timeEnd('datatable');
|
||||
},
|
||||
|
||||
show: function() {
|
||||
|
|
@ -129,7 +123,7 @@ BR.TrackMessages = L.Class.extend({
|
|||
_getEmptyColumns: function(data) {
|
||||
var empty = new Array(data[0].length),
|
||||
i;
|
||||
|
||||
|
||||
for (i = 0; i < empty.length; i++) {
|
||||
empty[i] = true;
|
||||
}
|
||||
|
|
@ -146,7 +140,7 @@ BR.TrackMessages = L.Class.extend({
|
|||
_getMessageLatLng: function(message) {
|
||||
var lon = message[0] / 1000000,
|
||||
lat = message[1] / 1000000;
|
||||
|
||||
|
||||
return L.latLng(lat, lon);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,13 @@
|
|||
BR.TrackStats = BR.Control.extend({
|
||||
options: {
|
||||
heading: 'Route'
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
var container = BR.Control.prototype.onAdd.call(this, map);
|
||||
this.update();
|
||||
return container;
|
||||
},
|
||||
|
||||
BR.TrackStats = L.Class.extend({
|
||||
update: function (polyline, segments) {
|
||||
var stats = this.calcStats(polyline, segments),
|
||||
length1 = L.Util.formatNum(stats.trackLength/1000,1),
|
||||
length3 = L.Util.formatNum(stats.trackLength/1000,3),
|
||||
meanCostFactor = stats.trackLength ? L.Util.formatNum(stats.cost / stats.trackLength, 2) : '',
|
||||
html = '';
|
||||
meanCostFactor = stats.trackLength ? L.Util.formatNum(stats.cost / stats.trackLength, 2) : ''
|
||||
|
||||
html += '<table id="stats">';
|
||||
html += '<tr><td>Length: </td><td title="' + length3 + ' km">' + length1 + '</td><td>km</td></tr>';
|
||||
html += '<tr><td>Ascent filtered:</td><td>' + stats.filteredAscend + '</td><td>m</td></tr>';
|
||||
html += '<tr><td>Ascent plain:</td><td>' + stats.plainAscend + '</td><td>m</td></tr>';
|
||||
html += '<tr><td>Cost: </td><td>' + stats.cost + '</td><td></td></tr>';
|
||||
html += '<tr><td>Mean cost:</td><td>' + meanCostFactor + '</td><td></td></tr>';
|
||||
html += '</table>';
|
||||
|
||||
this._content.innerHTML = html;
|
||||
$('#distance').html(length1 + ' <abbr title="kilometer">km</abbr>');
|
||||
$('#ascend').html(stats.filteredAscend + ' (' + stats.plainAscend +')' + ' <abbr title="meter">m</abbr>');
|
||||
$('#cost').html(stats.cost + ' (' + meanCostFactor + ')');
|
||||
},
|
||||
|
||||
calcStats: function(polyline, segments) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue