nakarte

commit 7db0ce8341615911dd195825902ccba8f81fe442
parent 0fff54fb77d5df1e88cc1e775ac051bef5ce3c6a
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Wed, 30 Nov 2016 11:19:59 +0300

[track list] adaptive height, show scrollbar when tracks do not fit on screen

Diffstat:
M
src/App.js
 | 
9
---------
M
src/adaptive.css
 | 
5
-----
M
src/lib/leaflet.control.track-list/track-list.css
 | 
11
+++++++++--
M
src/lib/leaflet.control.track-list/track-list.js
 | 
17
++++++++++++++++-

4 files changed, 25 insertions(+), 17 deletions(-)
diff --git a/src/App.js b/src/App.js
@@ -17,12 +17,6 @@ import 'lib/leaflet.control.track-list/track-list';
 import 'lib/leaflet.control.track-list/track-list.hash-state';
 import enableLayersControlAdaptiveHeight from 'lib/leaflet.control.layers.adaptive-height/adaptive-height';
 
-function autoSizeControl(map, control) {
-    // для контрола Layers есть аналогичная функция при разворачивании из кнопки.
-    // если делать collapsable: true надо сделать патч, отключающий её там
-    const margin = 50;
-    control.getContainer().style.maxHeight = (map.getSize().y - margin) + 'px';
-}
 
 function raiseControlsOnMouse(controls) {
     const selectors = ['.leaflet-top.leaflet-right', '.leaflet-bottom.leaflet-right', '.leaflet-top.leaflet-left',
@@ -81,9 +75,6 @@ function setUp() {
         .addTo(map)
         .enableHashState('nktk');
 
-    map.on('resize', autoSizeControl.bind(null, map, tracksControl));
-    autoSizeControl(map, tracksControl);
-
     raiseControlsOnMouse();
 }
 
diff --git a/src/adaptive.css b/src/adaptive.css
@@ -26,11 +26,6 @@
     }
 }
 
-.leaflet-control-tracklist {
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
 .nakarte-controls-raised {
     z-index: 2000 !important;
 }
diff --git a/src/lib/leaflet.control.track-list/track-list.css b/src/lib/leaflet.control.track-list/track-list.css
@@ -4,7 +4,14 @@
     border-radius: 5px 5px 5px 5px;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
     padding: 8px 8px 8px 8px;
-    width: 290px;
+}
+
+.tracks-rows-wrapper {
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 3px 0 0;
+    box-sizing: content-box;
+    width: 305px;
 }
 
 .leaflet-control-tracklist .hint {
@@ -39,7 +46,7 @@
 
 .leaflet-control-tracklist .input-url {
     display: inline-block;
-    width: 156px;
+    width: 170px;
     height: 26px;
     line-height: 26px;
     padding: 0 3px;
diff --git a/src/lib/leaflet.control.track-list/track-list.js b/src/lib/leaflet.control.track-list/track-list.js
@@ -59,12 +59,13 @@ L.Control.TrackList = L.Control.extend({
             this.readProgressRange = ko.observable(10);
             this.readProgressDone = ko.observable(2);
             this._lastTrackColor = 0;
+            this.trackListHeight = ko.observable(0);
         },
 
         onAdd: function(map) {
             this.map = map;
             this.tracks.removeAll();
-            var container = L.DomUtil.create('div', 'leaflet-control leaflet-control-tracklist');
+            var container = this._container = L.DomUtil.create('div', 'leaflet-control leaflet-control-tracklist');
             L.DomEvent.disableClickPropagation(container);
             if (!L.Browser.touch) {
                 L.DomEvent.disableScrollPropagation(container);
@@ -89,6 +90,7 @@ L.Control.TrackList = L.Control.extend({
                         },
                         visible: readingFiles"></div>
                 </div>
+                <div class="tracks-rows-wrapper" data-bind="style: {maxHeight: trackListHeight}">
                 <table class="tracks-rows" data-bind="foreach: {data: tracks, as: 'track'}">
                     <tr data-bind="event: {contextmenu: $parent.showTrackMenu.bind($parent)}">
                         <td><input type="checkbox" class="visibility-switch" data-bind="checked: track.visible"></td>
@@ -100,6 +102,7 @@ L.Control.TrackList = L.Control.extend({
                         <td><a class="track-text-button" title="Actions" data-bind="click: $parent.showTrackMenu.bind($parent)">&hellip;</a></td>
                     </tr>
                 </table>
+                </div>
             `;
 
             ko.applyBindings(this, container);
@@ -116,9 +119,21 @@ L.Control.TrackList = L.Control.extend({
             );
             this._markerLayer = new Waypoints(null, {print: true, zIndex: 100001}).addTo(map);
             this._markerLayer.on('markerclick markercontextmenu', this.onMarkerClick, this);
+            map.on('resize', this._setAdaptiveHeight, this);
+            setTimeout(() => this._setAdaptiveHeight(), 0);
             return container;
         },
 
+        _setAdaptiveHeight: function() {
+            const mapHeight = this._map.getSize().y;
+            let maxHeight;
+            maxHeight = (mapHeight
+            - this._container.offsetTop // controls above
+            - (this._container.parentNode.offsetHeight - this._container.offsetTop - this._container.offsetHeight) //controls below
+            - 85); // margin
+            this.trackListHeight(maxHeight + 'px');
+        },
+
         onFileDraging: function(e) {
             L.DomEvent.stopPropagation(e);
             L.DomEvent.preventDefault(e);