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:
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