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

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",
+    "sidebar-v2": "~0.4.0",
-    "autosize": "^3.0.20",
     "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": "^1.3.1"
-    "leaflet-sidebar": "master"
   }
 }

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,7 +34,7 @@ body, #content {
     flex-direction: row;
 }
 
-#content {
+.flexgrow {
     -webkit-box-flex: 1;
     -moz-box-flex: 1;
     -webkit-flex: 1;
@@ -38,6 +42,18 @@ body, #content {
     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%;
+}

index.html

@@ -164,36 +164,47 @@
         </div>
     </div>
 
-    <div id="content" class="flexcolumn">
+    <div id="content" class="flexcolumn flexgrow">
-        <div id="map"></div>
+        <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 id="message"></div>
+                <div class="sidebar-pane" id="tab_profile">
-    </div>
+                    <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="sidebar">
+                        <div id="profile_message"></div>
-            <form>
+                        <div class="form-group" id="profile_buttons">
-                <label for="profile_upload">Custom routing profile</label>
+                             <button id="clear" type="button" class="btn btn-sm"><span class="fa fa-eraser"></span> Clear</button>
-                <textarea class="form-control" type="text" id="profile_upload" spellcheck="false" wrap="off" placeholder="Write your custom profile here."></textarea>
+                             <button id="upload" type="button" class="btn btn-sm" data-uploading-text="Uploading…"><span class="fa fa-cloud-upload"></span> Upload</button>
-                <div id="profile_message"></div>
+                             <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="form-group" id="profile_buttons">
+                        </div>
-                     <button id="clear" type="button" class="btn btn-sm"><span class="fa fa-eraser"></span> Clear</button>
+                    </form>
-                     <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>
 
-            <ul id="tab" class="nav nav-tabs" role="tablist">
+                <div class="sidebar-pane" id="tab_data">
-            </ul>
+                    <h1 class="sidebar-header">Data<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
-            <div class="tab-content">
+                    <table id="datatable" class="table mini cell-border hover stripe"></table>
-                <div class="tab-pane hidden" id="tab_itinerary">
+                </div>
+
+                <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 @@
                     <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>

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();
     },
 

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);
             }
         }
     },

js/control/Tabs.js

@@ -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);
-    }
-});

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: []
         });

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({
+        trackMessages.onAdd(map);
-            tabs: {
-                '#tab_itinerary': itinerary,
-                '#tab_data': trackMessages
-            }
-        });
-        if (!BR.conf.transit) {
-            delete tabs.options.tabs['#tab_itinerary'];
-        }
-        map.addControl(tabs);
 
-        var sidebar = L.control.sidebar('sidebar', {
+        sidebar = BR.sidebar('sidebar', {
-            position: 'left'
+            listeningTabs: {
-        });
+                'tab_data': trackMessages
-        sidebar.id = 'sidebar-control'; //required for persistence in local storage
+            }
-        map.addControl(sidebar);
+        }).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();

js/plugin/Sidebar.js

@@ -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);
+};