Browse Source

Add padding option

gh-pages
Gregor MacLennan 9 years ago
parent
commit
cf35a6616a
3 changed files with 12 additions and 2 deletions
  1. 1
    0
      CHANGELOG.md
  2. 2
    0
      README.md
  3. 9
    2
      index.js

+ 1
- 0
CHANGELOG.md View File

6
 ## Unreleased
6
 ## Unreleased
7
 
7
 
8
 - ADDED: Add `setLeftLayers()` and `setRightLayers()` methods
8
 - ADDED: Add `setLeftLayers()` and `setRightLayers()` methods
9
+- ADDED: `options.padding`
9
 - FIXED: **[BREAKING]** Export factory function on `L.control` not `L.Control`
10
 - FIXED: **[BREAKING]** Export factory function on `L.control` not `L.Control`
10
 
11
 
11
 ## [v1.1.1] - 2015-12-03
12
 ## [v1.1.1] - 2015-12-03

+ 2
- 0
README.md View File

14
 | ----------    | -------------- | ------------- |
14
 | ----------    | -------------- | ------------- |
15
 | `leftLayers`  | L.Layer\|array | A Leaflet Layer or array of layers to show on the left side of the map. Any layer added to the map that is in this array will be shown on the left |
15
 | `leftLayers`  | L.Layer\|array | A Leaflet Layer or array of layers to show on the left side of the map. Any layer added to the map that is in this array will be shown on the left |
16
 | `rightLayers` | L.Layer\|array | A Leaflet Layer or array of layers to show on the right side of the map. Any layer added to the map that is in this array will be shown on the right. These *should not be* the same as any layers in `leftLayers` |
16
 | `rightLayers` | L.Layer\|array | A Leaflet Layer or array of layers to show on the right side of the map. Any layer added to the map that is in this array will be shown on the right. These *should not be* the same as any layers in `leftLayers` |
17
+| `options`     | Object         | Options |
18
+| `options.padding` | Number     | Padding between slider min/max and the edge of the screen in pixels. Defaults to `44` - the width of the slider thumb |
17
 
19
 
18
 ### Events
20
 ### Events
19
 
21
 

+ 9
- 2
index.js View File

43
 }
43
 }
44
 
44
 
45
 L.Control.SideBySide = L.Control.extend({
45
 L.Control.SideBySide = L.Control.extend({
46
-  initialize: function (leftLayers, rightLayers) {
46
+  options: {
47
+    thumbSize: 42,
48
+    padding: 0
49
+  },
50
+
51
+  initialize: function (leftLayers, rightLayers, options) {
47
     this.setLeftLayers(leftLayers)
52
     this.setLeftLayers(leftLayers)
48
     this.setRightLayers(rightLayers)
53
     this.setRightLayers(rightLayers)
54
+    L.setOptions(this, options)
49
   },
55
   },
50
 
56
 
51
   getPosition: noop,
57
   getPosition: noop,
67
     range.max = 1
73
     range.max = 1
68
     range.step = 'any'
74
     range.step = 'any'
69
     range.value = 0.5
75
     range.value = 0.5
76
+    range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
70
     this._addEvents()
77
     this._addEvents()
71
     this._updateLayers()
78
     this._updateLayers()
72
     return this
79
     return this
101
     var rangeValue = this._range.value
108
     var rangeValue = this._range.value
102
     var nw = map.containerPointToLayerPoint([0, 0])
109
     var nw = map.containerPointToLayerPoint([0, 0])
103
     var se = map.containerPointToLayerPoint(map.getSize())
110
     var se = map.containerPointToLayerPoint(map.getSize())
104
-    var offset = (0.5 - rangeValue) * 44
111
+    var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
105
     var clipX = nw.x + (se.x - nw.x) * rangeValue + offset
112
     var clipX = nw.x + (se.x - nw.x) * rangeValue + offset
106
     var dividerX = map.getSize().x * rangeValue + offset
113
     var dividerX = map.getSize().x * rangeValue + offset
107
 
114
 

Loading…
Cancel
Save