Quellcode durchsuchen

Add Events

gh-pages
Gregor MacLennan vor 9 Jahren
Ursprung
Commit
96af659c8d
2 geänderte Dateien mit 36 neuen und 5 gelöschten Zeilen
  1. 14
    2
      README.md
  2. 22
    3
      index.js

+ 14
- 2
README.md Datei anzeigen

@@ -10,11 +10,23 @@ Creates a new Leaflet Control for comparing two layers or collections of layers.
10 10
 
11 11
 ### Parameters
12 12
 
13
-| parameter                     | type           | description                                                                                           |
14
-| ----------------------------- | -------------- | ----------------------------------------------------------------------------------------------------- |
13
+| parameter     | type           | description   |
14
+| ----------    | -------------- | ------------- |
15 15
 | `leftLayers`  | L.Layer\|array | A Leaflet Layer or array of layers to show on the left side of the map. Any layers in this array that are added to the map will be shown on the left |
16 16
 | `rightLayers` | L.Layer\|array | A Leaflet Layer or array of layers to show on the right side of the map. Any layers in this array that are added to the map will be shown on the right. These *should not be the same as any layers in `leftLayers`* |
17 17
 
18
+### Events
19
+
20
+Subscribe to events using [these methods](http://leafletjs.com/reference.html#events)
21
+
22
+| Event         | Data           | Description   |
23
+| ----------    | -------------- | ------------- |
24
+| `leftlayeradd`  | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the left-hand-side pane |
25
+| `leftlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is removed from the left-hand-side pane |
26
+| `rightlayeradd` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the right-hand-side pane |
27
+| `rightlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | You guessed it... fired when a layer is removed from the right-hand-side pane |
28
+| `dividermove` | {x: Number} | Fired when the divider is moved. Returns an event object with the property `x` = the pixels of the divider from the left side of the map container. |
29
+
18 30
 ### Usage
19 31
 
20 32
 Add the script to the top of your page (css is included in the javascript):

+ 22
- 3
index.js Datei anzeigen

@@ -11,6 +11,7 @@ function on (el, types, fn, context) {
11 11
   })
12 12
 }
13 13
 
14
+// Leaflet v0.7 backwards compatibility
14 15
 function off (el, types, fn, context) {
15 16
   types.split(' ').forEach(function (type) {
16 17
     L.DomEvent.off(el, type, fn, context)
@@ -46,6 +47,8 @@ L.Control.SideBySide = L.Control.extend({
46 47
 
47 48
   setPosition: noop,
48 49
 
50
+  includes: L.Mixin.Events,
51
+
49 52
   addTo: function (map) {
50 53
     this.remove()
51 54
     this._map = map
@@ -84,8 +87,10 @@ L.Control.SideBySide = L.Control.extend({
84 87
     var se = map.containerPointToLayerPoint(map.getSize())
85 88
     var offset = (0.5 - rangeValue) * 44
86 89
     var clipX = nw.x + (se.x - nw.x) * rangeValue + offset
90
+    var dividerX = map.getSize().x * rangeValue + offset
87 91
 
88
-    this._divider.style.left = map.getSize().x * rangeValue + offset + 'px'
92
+    this._divider.style.left = dividerX + 'px'
93
+    this.fire('dividermove', {x: dividerX})
89 94
     var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
90 95
     var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
91 96
     if (this._leftLayer) {
@@ -97,13 +102,27 @@ L.Control.SideBySide = L.Control.extend({
97 102
   },
98 103
 
99 104
   _updateLayers: function () {
105
+    var prevLeft = this._leftLayer
106
+    var prevRight = this._rightLayer
100 107
     this._leftLayer = this._rightLayer = null
101 108
     this._leftLayers.forEach(function (layer) {
102
-      if (this._map.hasLayer(layer)) this._leftLayer = layer
109
+      if (this._map.hasLayer(layer)) {
110
+        this._leftLayer = layer
111
+      }
103 112
     }, this)
104 113
     this._rightLayers.forEach(function (layer) {
105
-      if (this._map.hasLayer(layer)) this._rightLayer = layer
114
+      if (this._map.hasLayer(layer)) {
115
+        this._rightLayer = layer
116
+      }
106 117
     }, this)
118
+    if (prevLeft !== this._leftLayer) {
119
+      prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
120
+      this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
121
+    }
122
+    if (prevRight !== this._rightLayer) {
123
+      prevRight && this.fire('rightlayerremove', {layer: prevRight})
124
+      this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
125
+    }
107 126
     this._updateClip()
108 127
   },
109 128
 

Laden…
Abbrechen
Speichern