From 3526b69cb4de155c72f06a2619dfdc652afc8f00 Mon Sep 17 00:00:00 2001 From: Artemiy Date: Wed, 26 Apr 2017 23:46:15 +0800 Subject: [PATCH] #125 add toggle events Events - `minimized`, `restore` and `toggle for both; add event example; update readme. --- example/example_events.html | 46 +++++++++++++++++++++++++++++++++++++ readme.md | 4 ++++ src/Control.MiniMap.js | 21 +++++++++++++++++ 3 files changed, 71 insertions(+) create mode 100644 example/example_events.html diff --git a/example/example_events.html b/example/example_events.html new file mode 100644 index 0000000..316d665 --- /dev/null +++ b/example/example_events.html @@ -0,0 +1,46 @@ + + + + MiniMap Demo Events + + + + + + + + + + + + + + +
+ + + + diff --git a/readme.md b/readme.md index b70db1f..11e272b 100644 --- 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 index bd59741..0ae70d1 100644 --- 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); } });