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

nrenner · Feb 8, 2018 · 6f671c0 · 6f671c0
1 parent d51232e
commit 6f671c0
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 111 deletions.
diff --git a/bower.json b/bower.json
@@ -16,7 +16,7 @@
     "async": "~0.9.2",
     "d3": "~3.5.5",
     "bootstrap": "4.0.0-alpha.5",
-    "DataTables": "~1.10.13",
+    "DataTables": "~1.10.16",
     "leaflet.elevation": "MrMufflon/Leaflet.Elevation#master",
     "leaflet-control-geocoder": "~1.5.8",
     "Leaflet.EasyButton": "*",
@@ -27,8 +27,7 @@
     "leaflet.locatecontrol": "^0.60.0",
     "font-awesome": "^4.7.0",
     "bootstrap-select": "hugdx/bootstrap-select#patch-1",
-    "leaflet-sidebar": "Turbo87/leaflet-sidebar#master",
-    "autosize": "^3.0.20",
+    "sidebar-v2": "~0.4.0",
     "leaflet.editable": "^1.1.0"
   },
   "overrides": {
@@ -100,10 +99,15 @@
         "jquery": "*",
         "bootstrap": "*"
       }
+    },
+    "sidebar-v2": {
+      "main": [
+        "css/leaflet-sidebar.css",
+        "js/leaflet-sidebar.js"
+      ]
     }
   },
   "resolutions": {
-    "leaflet": "^1.3.1",
-    "leaflet-sidebar": "master"
+    "leaflet": "^1.3.1"
   }
 }
diff --git a/css/style.css b/css/style.css
@@ -10,13 +10,17 @@ body, #content {
     z-index: 1;
 }
 
-.flexcolumn {
+.flexcolumn,
+.sidebar-pane.active,
+#datatable_wrapper,
+.dataTables_scroll,
+.dataTables_scrollBody {
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
-
+    
     flex-flow: column;
 }
 
@@ -30,14 +34,26 @@ body, #content {
     flex-direction: row;
 }
 
-#content {
+.flexgrow {
     -webkit-box-flex: 1;
     -moz-box-flex: 1;
     -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1;
 }
 
+/* 'auto' (1 1 auto) instead of '1' (1 1 0) needed for DataTables tab in Firefox */
+#datatable_wrapper,
+.dataTables_scroll,
+.dataTables_scrollBody,
+#datatable {
+    -webkit-box-flex: auto;
+    -moz-box-flex: auto;
+    -webkit-flex: auto;
+    -ms-flex: auto;
+    flex: auto;
+}
+
 footer {
     -webkit-box-flex: none;
     -moz-box-flex: none;
@@ -270,3 +286,11 @@ table.dataTable.display tbody tr.even:hover {
 .leaflet-tooltip-right:before {
     border-right-color: inherit;
 }
+
+/*
+ * sidebar-v2 
+ */
+
+.sidebar-pane {
+    height: 100%;
+}
diff --git a/index.html b/index.html
@@ -164,36 +164,47 @@ <h4 class="modal-title">About</h4>
         </div>
     </div>
 
-    <div id="content" class="flexcolumn">
-        <div id="map"></div>
-
-        <div id="message"></div>
-    </div>
+    <div id="content" class="flexcolumn flexgrow">
+        <div id="sidebar" class="sidebar collapsed">
+            <div class="sidebar-tabs">
+                <ul role="tablist">
+                    <li hidden><a href="#tab_itinerary" role="tab"><i class="fa fa-map-signs"></i></a></li>
+                    <li><a href="#tab_profile" role="tab"><i class="fa fa-wrench"></i></a></li>
+                    <li><a href="#tab_data" role="tab"><i class="fa fa-table"></i></a></li> 
+                </ul>
+            </div>
+            <div class="sidebar-content">
 
+                <div class="sidebar-pane" id="tab_profile">
+                    <h1 class="sidebar-header">Custom routing profile<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
+                    <form class="flexcolumn flexgrow">
+                        <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 class="form-group" id="profile_buttons">
+                             <button id="clear" type="button" class="btn btn-sm"><span class="fa fa-eraser"></span> Clear</button>
+                             <button id="upload" type="button" class="btn btn-sm" data-uploading-text="Uploading…"><span class="fa fa-cloud-upload"></span> Upload</button>
+                             <a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn btn-sm btn-info pull-right"><span class="fa fa-question"></span> Help</a>
+                        </div>
+                    </form>
+                </div>
 
-    <div id="sidebar">
-            <form>
-                <label for="profile_upload">Custom routing profile</label>
-                <textarea class="form-control" type="text" id="profile_upload" spellcheck="false" wrap="off" placeholder="Write your custom profile here."></textarea>
-                <div id="profile_message"></div>
-                <div class="form-group" id="profile_buttons">
-                     <button id="clear" type="button" class="btn btn-sm"><span class="fa fa-eraser"></span> Clear</button>
-                     <button id="upload" type="button" class="btn btn-sm" data-uploading-text="Uploading…"><span class="fa fa-cloud-upload"></span> Upload</button>
-                     <a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn btn-sm btn-info pull-right"><span class="fa fa-question"></span> Help</a>
+                <div class="sidebar-pane" id="tab_data">
+                    <h1 class="sidebar-header">Data<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
+                    <table id="datatable" class="table mini cell-border hover stripe"></table>
                 </div>
-            </form>
 
-            <ul id="tab" class="nav nav-tabs" role="tablist">
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane hidden" id="tab_itinerary">
+                <div class="sidebar-pane" id="tab_itinerary">
+                    <h1 class="sidebar-header">Itinerary<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
                     <div id="itinerary">
                     </div>
                 </div>
-                <div class="tab-pane" id="tab_data">
-                    <table id="datatable" class="table mini cell-border hover stripe"></table>
-                </div>
+
             </div>
+        </div>
+
+        <div id="map" class="sidebar-map"></div>
+
+        <div id="message"></div>
     </div>
 
     <div class="collapse" id="elevation-chart"></div>
@@ -222,9 +233,6 @@ <h4 class="modal-title">About</h4>
                     <p class="stats-label"><span id="cost">- (-)</span></p>
                 </li>
             </ul>
-            <button id="sidebar-btn" class="btn btn-secondary btn-sm" type="button" aria-label="Toggle sidebar">
-                <span class="fa fa-compress"></span>
-            </button>
 
             <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#elevation-chart" aria-controls="elevation-chart" id="elevation-btn" aria-expanded="false" aria-label="Toggle elevation chart">
                 <span class="fa fa-area-chart"></span>

diff --git a/js/control/Itinerary.js b/js/control/Itinerary.js
@@ -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();
     },
 

diff --git a/js/control/Profile.js b/js/control/Profile.js
@@ -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);
             }
         }
     },

diff --git a/js/control/Tabs.js b/js/control/Tabs.js
diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js
@@ -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: []
         });

diff --git a/js/index.js b/js/index.js
@@ -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();