Merge pull request #126 from rendrom/master

#125 add toggle events
Norkart · Apr 28, 2017 · 4a94f26 · 4a94f26
2 parents 0416f26 + 20faaea
commit 4a94f26
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 0 deletions.
diff --git a/example/example_events.html b/example/example_events.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>MiniMap Demo Events</title>
+	<meta charset="utf-8" />
+
+	<link rel="stylesheet" href="./fullscreen.css" />
+
+	<!-- Leaflet -->
+	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+	<script src="https://unpkg.com/[email protected]/dist/leaflet.js" type="text/javascript"></script>
+
+	<!-- Leaflet Plugins -->
+	<link rel="stylesheet" href="../src/Control.MiniMap.css" />
+	<script src="../src/Control.MiniMap.js" type="text/javascript"></script>
+
+	<style>
+		.toggle {
+			background: orange !important;
+		}
+		.toggle:hover{
+			background: darkorange !important;
+		}
+	</style>
+
+</head>
+<body>
+<div id="map" ></div>
+
+<script type="text/javascript">
+
+    var map = new L.Map('map');
+    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+    var osmAttrib='Map data &copy; OpenStreetMap contributors';
+    var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 18, attribution: osmAttrib});
+
+    map.addLayer(osm);
+    map.setView(new L.LatLng(59.92448055859924, 10.758276373601069),10);
+
+    //Plugin magic goes here! Note that you cannot use the same layer object again, as that will confuse the two map controls
+    var osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
+    var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);
+
+    miniMap.on("toggle", function(data) {
+        console.log("Listen for `toggle` event: miniMap is " + (data.minimized ? "minimize" : "restore"));
+    });
+    miniMap.on("minimize", function() {
+        console.log("Listen for `minimize` event");
+    });
+    miniMap.on("restore", function() {
+        console.log("Listen for `restore` event");
+    });
+
+    var actionButton = new (L.Control.extend({
+        options: {
+            position: 'topleft',
+            html: "#",
+			toggleClass: "toggle",
+			status: false,
+			listeners: []
+        },
+        initialize: function (options) {
+            L.setOptions(this, options);
+            this._status = this.options.status;
+        },
+
+        onAdd: function () {
+            var container = L.DomUtil.create('div', 'leaflet-control-actionbtn leaflet-bar leaflet-control');
+            var link = this._link = L.DomUtil.create('a', '', container);
+            link.href = '#';
+            link.innerHTML = this.options.html;
+            link.title = this.options.title || this.options.html;
+            L.DomEvent.on(link, 'click', this._onBtnClick, this);
+            if (this.options.status) {
+                this._toggle();
+			}
+			this._addListeners();
+            return container;
+        },
+
+        toggle: function () {
+			this._toggle();
+			if (this.options.action) {
+			    this._removeListeners();
+                this._forListeners(null, function (listener) {
+                    listener[0].once(listener[1], this._addListeners, this);
+                });
+                this.options.action.call(this, this._status);
+            }
+		},
+
+		_toggle: function () {
+            this._status = !this._status;
+            if (!this._status) {
+                L.DomUtil.addClass(this._link, this.options.toggleClass);
+            } else {
+                L.DomUtil.removeClass(this._link, this.options.toggleClass);
+            }
+		},
+
+		_addListeners: function () {
+            this._forListeners();
+		},
+
+        _removeListeners: function () {
+            this._forListeners(true);
+        },
+
+		_forListeners: function (off, func) {
+            if (this.options.listeners.length) {
+                for (var fry = 0; fry < this.options.listeners.length; fry++) {
+                    var listener = this.options.listeners[fry];
+                    var action = listener[0] && listener[0][off ? "off" : "on"];
+                    if (action && typeof listener[1] === 'string') {
+                        if (func) {
+                            func.call(this, listener);
+                        } else {
+                            action.call(listener[0], listener[1], this._toggle, this);
+						}
+                    }
+                }
+            }
+		},
+
+        _onBtnClick: function (e) {
+            L.DomEvent.stop(e);
+            this.toggle();
+        }
+    }))({
+        action: function() { miniMap._toggleDisplayButtonClicked(); },
+        status: !miniMap._minimized,
+		html: "MM",
+		listeners: [[miniMap, "toggle"]]
+    });
+    actionButton.addTo(map);
+
+
+</script>
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -89,6 +89,10 @@ require(['leaflet-minimap'], function(MiniMap) {
 
 `showText`: The text to be displayed as Tooltip when hovering over the toggle button on the MiniMap and it is hidden. Defaults to 'Show MiniMap'
 
+### Available Events
+
+The MiniMap fires `minimize`, `restore`  events and `toggle` for both.
+
 ## Building minified versions
 First, install node.js on your system. Then run `npm install` to get the dependencies, and `npm build` to build
 the minified js and css. Use `npm test` to lint the code so you can check that it follows our

diff --git a/src/Control.MiniMap.js b/src/Control.MiniMap.js
@@ -20,6 +20,9 @@
 }(function (L) {
 
 	var MiniMap = L.Control.extend({
+
+		includes: L.Mixin.Events,
+
 		options: {
 			position: 'bottomright',
 			toggleDisplay: false,
@@ -190,6 +193,7 @@
 				this._container.style.display = 'none';
 			}
 			this._minimized = true;
+			this._onToggle();
 		},
 
 		_restore: function () {
@@ -203,6 +207,7 @@
 				this._container.style.display = 'block';
 			}
 			this._minimized = false;
+			this._onToggle();
 		},
 
 		_onMainMapMoved: function (e) {
@@ -313,6 +318,22 @@
 
 		_isDefined: function (value) {
 			return typeof value !== 'undefined';
+		},
+
+		_onToggle: function () {
+			L.Util.requestAnimFrame(function () {
+				L.DomEvent.on(this._container, 'transitionend', this._fireToggleEvents, this);
+				if (!L.Browser.any3d) {
+					L.Util.requestAnimFrame(this._fireToggleEvents, this);
+				}
+			}, this);
+		},
+
+		_fireToggleEvents: function () {
+			L.DomEvent.off(this._container, 'transitionend', this._fireToggleEvents, this);
+			var data = { minimized: this._minimized };
+			this.fire(this._minimized ? 'minimize' : 'restore', data);
+			this.fire('toggle', data);
 		}
 	});