Norkart#125 add toggle events

Events - `minimized`, `restore` and `toggle for both; add event example; update readme.
rendrom · Apr 26, 2017 · 3526b69 · 3526b69
1 parent 0416f26
commit 3526b69
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 0 deletions.
diff --git a/example/example_events.html b/example/example_events.html
@@ -0,0 +1,46 @@
+<!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>
+
+</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 ? "minimized" : "restore"));
+		});
+		miniMap.on("minimized", function() {
+			console.log("Listen for `minimized` event");
+		});
+		miniMap.on("restore", function() {
+			console.log("Listen for `restore` event");
+		});
+	</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 `minimized`, `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 ? "minimized" : "restore", data);
+			this.fire("toggle", data);
 		}
 	});