ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace sidebar with sidebar-v2, restore old flexbox tabs (#90) (WIP)

Browse source
This commit is contained in:
Norbert Renner 2018-02-08 21:27:24 +01:00
parent 1393860148
commit 443ca9c03e
9 changed files with 160 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

2
js/control/Itinerary.js
View file

@ -5,7 +5,7 @@ BR.Itinerary = L.Class.extend({
onAdd: function (map) {
this._content = document.getElementById('itinerary');
L.DomUtil.removeClass(this._content.parentElement, 'hidden');
document.getElementById('tab_itinerary').hidden = false;
this.update();
},

4
js/control/Profile.js
View file

@ -5,7 +5,6 @@ BR.Profile = L.Evented.extend({
L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
this.ele = L.DomUtil.get('profile_upload');
autosize(this.ele);
this.message = new BR.Message('profile_message', {
alert: true
});
@ -17,7 +16,6 @@ BR.Profile = L.Evented.extend({
evt.preventDefault();
this.ele.value = null;
this.ele.defaultValue = null;
autosize.update(this.ele);
this.fire('clear');
button.blur();
@ -45,13 +43,11 @@ BR.Profile = L.Evented.extend({
if (!this.profileName || this.profileName === profileName) {
ele.value = profileText;
ele.defaultValue = ele.value;
autosize.update(this.ele);
}
}, this));
} else {
ele.value = this.cache[profileName];
ele.defaultValue = ele.value;
autosize.update(this.ele);
}
}
},

47
js/control/Tabs.js
View file

@ -1,47 +0,0 @@
BR.Tabs = BR.Control.extend({
options: {
divId: 'sidebar',
// tab a.hash > instance
tabs: {}
},
initialize: function (options) {
L.setOptions(this, options);
},
onAdd: function (map) {
var tabs = this.options.tabs;
for (var key in tabs) {
$('<li><a href="' + key + '" role="tab">' + tabs[key].options.heading + '</a></li>').appendTo('#tab');
if (tabs[key].onAdd) {
tabs[key].onAdd(map);
}
}
$('#tab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
// e.target = activated tab
// e.relatedTarget = previous tab
$('#tab a').on('shown.bs.tab', L.bind(function (e) {
var tab = this.options.tabs[e.target.hash],
prevTab = e.relatedTarget ? this.options.tabs[e.relatedTarget.hash] : null;
if (tab && tab.show) {
tab.show();
}
if (prevTab && prevTab.hide) {
prevTab.hide();
}
}, this));
// activate first tab (instead of setting 'active' class in html)
$('#tab li:not(.hidden) a:first').tab('show');
return BR.Control.prototype.onAdd.call(this, map);
}
});

3
js/control/TrackMessages.js
View file

@ -67,6 +67,9 @@ BR.TrackMessages = L.Evented.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,
order: []
});

35
js/index.js
View file

@ -29,9 +29,9 @@
itinerary,
elevation,
download,
tabs,
profile,
trackMessages,
sidebar,
drawButton,
deleteButton,
drawToolbar,
@ -217,22 +217,13 @@
routing.addTo(map);
elevation.addBelow(map);
tabs = new BR.Tabs({
tabs: {
'#tab_itinerary': itinerary,
'#tab_data': trackMessages
}
});
if (!BR.conf.transit) {
delete tabs.options.tabs['#tab_itinerary'];
}
map.addControl(tabs);
trackMessages.onAdd(map);
var sidebar = L.control.sidebar('sidebar', {
position: 'left'
});
sidebar.id = 'sidebar-control'; //required for persistence in local storage
map.addControl(sidebar);
sidebar = BR.sidebar('sidebar', {
listeningTabs: {
'tab_data': trackMessages
}
}).addTo(map);
nogos.addTo(map);
nogos.preventRoutePointOnCreate(routing);
@ -319,6 +310,7 @@
map._onResize();
});
var onHide = function() {
if (this.id && BR.Util.localStorageAvailable()) {
localStorage[this.id] = 'true';
@ -329,13 +321,6 @@
localStorage.removeItem(this.id);
}
};
var toggleSidebar = function (event) {
sidebar.toggle();
$('#sidebar-btn').toggleClass('active');
};
$('#sidebar-btn').on('click', toggleSidebar);
sidebar.on('shown', onShow);
sidebar.on('hidden', onHide);
// on page load, we want to restore collapsible elements from previous usage
$('.collapse').on('hidden.bs.collapse', onHide)
.on('shown.bs.collapse', onShow)
@ -344,9 +329,7 @@
$(this).collapse('hide');
}
});
if (BR.Util.localStorageAvailable() && localStorage[sidebar.id] !== 'true') {
toggleSidebar();
}
}
mapContext = BR.Map.initMap();

77
js/plugin/Sidebar.js Normal file
View file

@ -0,0 +1,77 @@
BR.Sidebar = L.Control.Sidebar.extend({
storageId: 'sidebar-control',
options: {
position: 'right',
// Tabs to be notified when shown or hidden
// (tab div id -> object implementing show/hide methods)
listeningTabs: {}
},
initialize: function (id, options) {
L.Control.Sidebar.prototype.initialize.call(this, id, options);
this.oldTab = null;
},
addTo: function (map) {
L.Control.Sidebar.prototype.addTo.call(this, map);
this.on('content', this._notifyOnContent, this);
this.on('closing', this._notifyOnClose, this);
this._rememberTabState();
return this;
},
_rememberTabState: function () {
if (BR.Util.localStorageAvailable()) {
this.on('content closing', this._storeActiveTab, this);
var tabId = localStorage.getItem(this.storageId);
// not set: open sidebar by default for new users
// 'true': legacy value for toggling old sidebar
if (tabId === null || tabId === 'true') {
tabId = 'tab_profile';
}
if (tabId !== '') {
this.open(tabId);
}
}
},
_notifyShow: function (tab) {
if (tab && tab.show) {
tab.show();
}
},
_notifyHide: function (tab) {
if (tab && tab.hide) {
tab.hide();
}
},
_notifyOnContent: function (e) {
var tab = this.options.listeningTabs[e.id];
this._notifyHide(this.oldTab);
this._notifyShow(tab);
this.oldTab = tab;
},
_notifyOnClose: function (e) {
this._notifyHide(this.oldTab);
this.oldTab = null;
},
_storeActiveTab: function (e) {
localStorage.setItem(this.storageId, e.id || '');
}
});
BR.sidebar = function (divId, options) {
return new BR.Sidebar(divId, options);
};