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

Add sidebar expand button, refresh CodeMirror on expand (scrollbar)

Browse source
This commit is contained in:
Norbert Renner 2018-03-19 19:27:10 +01:00
parent 77cf43c7ef
commit 093db8bfe2
4 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
css/style.css
View file

@ -361,6 +361,9 @@ table.dataTable.display tbody tr.even:hover {
display: none; display: none;
} }
.leaflet-sidebar-expand {
transform: rotate(45deg);
}
/* /*
* CodeMirror * CodeMirror

6
index.html
View file

@ -192,7 +192,7 @@
</div> </div>
<div class="leaflet-sidebar-pane" id="tab_profile"> <div class="leaflet-sidebar-pane" id="tab_profile">
<h1 class="leaflet-sidebar-header">Custom routing profile<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1> <h1 class="leaflet-sidebar-header">Custom routing profile<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span></h1>
<form class="flexcolumn flexgrow"> <form class="flexcolumn flexgrow">
<textarea class="form-control flexgrow" id="profile_upload" spellcheck="false" wrap="off" placeholder="Write your custom profile here."></textarea> <textarea class="form-control flexgrow" id="profile_upload" spellcheck="false" wrap="off" placeholder="Write your custom profile here."></textarea>
<div id="profile_message"></div> <div id="profile_message"></div>
@ -205,12 +205,12 @@
</div> </div>
<div class="leaflet-sidebar-pane" id="tab_data"> <div class="leaflet-sidebar-pane" id="tab_data">
<h1 class="leaflet-sidebar-header">Data<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1> <h1 class="leaflet-sidebar-header">Data<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span></h1>
<table id="datatable" class="mini cell-border hover stripe"></table> <table id="datatable" class="mini cell-border hover stripe"></table>
</div> </div>
<div class="leaflet-sidebar-pane" id="tab_itinerary"> <div class="leaflet-sidebar-pane" id="tab_itinerary">
<h1 class="leaflet-sidebar-header">Itinerary<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1> <h1 class="leaflet-sidebar-header">Itinerary<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span></h1>
<div id="itinerary" class="flexcolumn flexgrow"> <div id="itinerary" class="flexcolumn flexgrow">
</div> </div>
</div> </div>

4
js/control/Profile.js
View file

@ -56,6 +56,10 @@ BR.Profile = L.Evented.extend({
this.editor.refresh(); this.editor.refresh();
}, },
onResize: function() {
this.editor.refresh();
},
_upload: function(evt) { _upload: function(evt) {
var button = evt.target || evt.srcElement, var button = evt.target || evt.srcElement,
profile = this.editor.getValue(); profile = this.editor.getValue();

8
js/plugin/Sidebar.js
View file

@ -24,6 +24,7 @@ BR.Sidebar = L.Control.Sidebar.extend({
this.on('content', this._notifyOnContent, this); this.on('content', this._notifyOnContent, this);
this.on('closing', this._notifyOnClose, this); this.on('closing', this._notifyOnClose, this);
this.on('toggleExpand', this._notifyOnResize, this);
this._rememberTabState(); this._rememberTabState();
@ -83,6 +84,13 @@ BR.Sidebar = L.Control.Sidebar.extend({
this.oldTab = null; this.oldTab = null;
}, },
_notifyOnResize: function (e) {
var tab = this.oldTab;
if (tab && tab.onResize) {
tab.onResize();
}
},
_storeActiveTab: function (e) { _storeActiveTab: function (e) {
localStorage.setItem(this.storageId, e.id || ''); localStorage.setItem(this.storageId, e.id || '');
} }