nakarte

commit b1215b24c32c1a659e23386ed8c14851e5db5e3e
parent ec831c2737e4b4347f19c457162402a8f095b5af
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Sat, 19 Nov 2016 13:09:39 +0300

add scrollbar in layers control when needed; if controls overlap, raise on mouseenter

Diffstat:
M
src/App.js
 | 
34
++++++++++++++++++++++++++++++++--
A
src/adaptive.css
 | 
37
+++++++++++++++++++++++++++++++++++++

2 files changed, 69 insertions(+), 2 deletions(-)
diff --git a/src/App.js b/src/App.js
@@ -11,16 +11,41 @@ import 'lib/leaflet.control.layers.hotkeys/control.Layers-hotkeys';
 import 'lib/leaflet.hashState/Leaflet.Map';
 import 'lib/leaflet.hashState/Leaflet.Control.Layers';
 import fixAnimationBug from 'lib/leaflet.fixAnimationBug/leaflet.fixAnimationBug'
+import './adaptive.css';
 
 
+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',
+        '.leaflet-bottom.leaflet-left'];
+    let elements = selectors.map(document.querySelector.bind(document));
+
+    function raise(target) {
+        for (let cornerDiv of elements) {
+            if (cornerDiv === target) {
+                L.DomUtil.addClass(cornerDiv, 'nakarte-controls-raised');
+            } else {
+                L.DomUtil.removeClass(cornerDiv, 'nakarte-controls-raised');
+            }
+        }
+    }
+
+    elements.forEach((el) => L.DomEvent.on(el, 'mouseenter', raise.bind(null, el)));
+}
 
 function setUp() {
     fixAnimationBug();
+
     const map = L.map('map', {
             zoomControl: false,
             fadeAnimation: false,
             attributionControl: false,
-            inertiaMaxSpeed: 1500,
             easeLinearity: 0.2,
             inertiaMaxSpeed: 1500
         }
@@ -41,8 +66,13 @@ function setUp() {
     layersControl.enableHashState('l');
 
 
-    new L.Control.PrintPages().addTo(map);
+    new L.Control.PrintPages({position: 'bottomleft'}).addTo(map);
     new L.Control.Coordinates().addTo(map);
+
+    map.on('resize', autoSizeControl.bind(null, map, layersControl));
+    autoSizeControl(map, layersControl);
+
+    raiseControlsOnMouse();
 }
 
 export default {setUp};
diff --git a/src/adaptive.css b/src/adaptive.css
@@ -0,0 +1,36 @@
+@media (max-width: 200mm) {
+    .leaflet-right .leaflet-control {
+        margin-right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .leaflet-left .leaflet-control {
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+@media (max-height: 150mm) {
+    .leaflet-bottom .leaflet-control:last-child {
+        margin-bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .leaflet-top .leaflet-control:first-child {
+        margin-top: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+}
+
+.leaflet-control-layers-expanded {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.nakarte-controls-raised {
+    z-index: 2000 !important;
+}
+\ No newline at end of file