nakarte

commit 456db3ab932622496d4ead219e3cd26cc621cb90
parent 3a3811b20c6218aa2b348bb32fee31b09dfd04a9
Author: Sergey Orlov <wladimirych@gmail.com>
Date:   Tue,  5 May 2020 21:44:11 +0200

panoramas: resize panorama viewer proportionally when window resizes

also do not change orientation when clicking on splitter bar

Related to #16

Diffstat:
M
src/lib/leaflet.control.panoramas/index.js
 | 
24
++++++++++++++++++++++--

1 file changed, 22 insertions(+), 2 deletions(-)
diff --git a/src/lib/leaflet.control.panoramas/index.js b/src/lib/leaflet.control.panoramas/index.js
@@ -122,15 +122,21 @@ L.Control.Panoramas = L.Control.extend({
         onAdd: function(map) {
             this._map = map;
 
+            this._splitterDragging = false;
             const splitter = L.DomUtil.create('div', 'panorama-splitter', this._panoramasContainer);
-            L.DomUtil.create('div', 'button', splitter);
+            const splitterButton = L.DomUtil.create('div', 'button', splitter);
             new DragEvents(splitter, null, {trackOutsideElement: true}).on({
+                dragstart: this.onSplitterDragStart,
+                dragend: this.onSplitterDragEnd,
                 drag: this.onSplitterDrag,
+            }, this);
+            new DragEvents(splitterButton, null, {trackOutsideElement: true}).on({
                 click: this.onSplitterClick
             }, this);
             this.setupViewerLayout();
             const {container, link, barContainer} = makeButtonWithBar(
                 'leaflet-contol-panoramas', 'Show panoramas (Alt-P)', 'icon-panoramas');
+            map.on('resize', this.onMapResize, this);
             this._container = container;
             L.DomEvent.on(link, 'click', this.onButtonClick, this);
             L.DomEvent.on(document, 'keyup', this.onKeyUp, this);
@@ -406,7 +412,21 @@ L.Control.Panoramas = L.Control.extend({
             if (provider && provider.viewer) {
                 provider.viewer.invalidateSize();
             }
-        }
+        },
+
+        onMapResize: function() {
+            if (!this._splitterDragging) {
+                this.updateContainerSize();
+            }
+        },
+
+        onSplitterDragStart: function() {
+            this._splitterDragging = true;
+        },
+
+        onSplitterDragEnd: function() {
+            this._splitterDragging = false;
+        },
     },
 );