Disable map interactions when collapsed. Closes #21

Author: sylvainjule

index.css

@@ -1,9 +1,9 @@
-@import 
+@import
     'abstracts/_variables.scss',
     'abstracts/_mixins.scss';
-@import 
+@import
     'vendors/_leaflet.scss';
-@import 
+@import
     'components/_map.scss';
 
 
@@ -102,7 +102,7 @@
 				width: 50%;
 				padding: 0.75rem 0;
 				border-bottom: 1px solid lighten($color-border-light, 2%);
-				
+
 				// no border on the nth-last(2) only if it's an odd number,
 				// in case there's only one block in the last row
 				&:nth-last-child(2):nth-child(odd),
@@ -210,10 +210,14 @@
 			width: 200px;
 			padding-top: 0;
 			margin-top: 0;
+            pointer-events: none;
 			.leaflet-bottom.leaflet-right,
 			.leaflet-top.leaflet-left {
 				display: none;
 			}
+            .leaflet-marker-icon {
+                cursor: default;
+            }
 		}
 	}
 }
@@ -270,7 +274,7 @@
 			}
 		}
 	}
-	.leaflet-control-zoom-in, .leaflet-control-zoom-out { 
+	.leaflet-control-zoom-in, .leaflet-control-zoom-out {
 		@include small-controls;
 	}
-}
+}

index.js

@@ -220,6 +220,8 @@ export default {
             this.$nextTick(() => {
                 this.map.invalidateSize()
                 this.map.setView(this.coords, this.defaultZoom)
+                if(arg == 'closed' && this.marker) this.disableMapEvents()
+                else if(arg == 'open' && this.marker) this.enableMapEvents()
             })
         },
         initMap() {
@@ -289,6 +291,7 @@ export default {
                 autoPan: this.draggable,
             })
             this.map.addLayer(this.marker)
+            if(this.filledStatus == 'closed') this.disableMapEvents()
 
             this.marker.on('dragend', e => {
                 let position = this.marker.getLatLng()
@@ -392,6 +395,30 @@ export default {
         },
         capitalize(str) {
             return str.charAt(0).toUpperCase() + str.slice(1);
+        },
+        disableMapEvents() {
+            if(this.map) {
+                this.map.scrollWheelZoom.disable()
+                this.map.dragging.disable()
+                this.map.touchZoom.disable()
+                this.map.doubleClickZoom.disable()
+                this.map.boxZoom.disable()
+                this.map.keyboard.disable()
+                if (this.map.tap) this.map.tap.disable()
+            }
+            if(this.marker) this.marker.dragging.disable()
+        },
+        enableMapEvents() {
+            if(this.map) {
+                this.map.scrollWheelZoom.enable()
+                this.map.dragging.enable()
+                this.map.touchZoom.enable()
+                this.map.doubleClickZoom.enable()
+                this.map.boxZoom.enable()
+                this.map.keyboard.enable()
+                if (this.map.tap) this.map.tap.enable()
+            }
+            if(this.marker) this.marker.dragging.enable()
         }
     },
 };