Mergin most resent work on project

.circleci/config.yml

@@ -0,0 +1,54 @@
+version: 2
+_defaults: &defaults
+  working_directory: ~/repo
+  docker:
+    - image: circleci/node:12
+
+_restore_cache: &restore_cache
+  keys:
+    - v3-dependencies-{{ checksum "package.json" }}
+    - v3-dependencies-
+
+_save_cache: &save_cache
+  paths:
+    - node_modules
+    - .build_cache/terser
+  key: v3-dependencies-{{ checksum "package.json" }}
+
+jobs:
+  build_and_test:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          <<: *restore_cache
+
+      - run: cat /dev/null | npm install
+
+      - save_cache:
+          <<: *save_cache
+
+#      - run:
+#          shell: /bin/bash
+#          command: |
+#            set -e
+#            audit=$(cat /dev/null | npm audit --json | jq '.actions[].resolves[] | select(.id==0 | not)')
+#            if [[ -n ${audit} ]]
+#            then
+#              echo "results are non-empty: ${audit}"
+#              exit 1
+#            else
+#              exit 0
+#            fi
+
+      - run: cat /dev/null | npm run test
+      - run: cat /dev/null | npm run build
+
+      - save_cache:
+          <<: *save_cache
+
+workflows:
+  version: 2
+  all:
+    jobs:
+      - build_and_test

CHANGELOG.md

@@ -7,6 +7,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 - ADDED: Allows Leaflet version 0.7.7 through 1.x
 
+## [v2.1.0] - 2020-10-01
+
+- ADDED: `options.swap`
+- ADDED: `swapped` event
+
 ## [v2.0.0] - 2015-12-08
 
 - ADDED: Add `setLeftLayers()` and `setRightLayers()` methods

README.md

@@ -15,7 +15,8 @@ Creates a new Leaflet Control for comparing two layers or collections of layers.
 | `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 |
 | `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` |
 | `options`     | Object         | Options |
-| `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 |
+| `options.padding` | Number     | Padding between slider min/max and the edge of the screen in pixels. Defaults to `30` - the width of the slider thumb |
+| `options.swap` | Boolean     | Should display swap button, when both layers available
 
 ### Events
 
@@ -27,7 +28,8 @@ Subscribe to events using [these methods](http://leafletjs.com/reference.html#ev
 | `leftlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is removed from the left-hand-side pane |
 | `rightlayeradd` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the right-hand-side pane |
 | `rightlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | You guessed it... fired when a layer is removed from the right-hand-side pane |
-| `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. |
+| `dividermove` | { x: number } | Fired when the divider is moved. Argument is an event object with the property `x` = the pixels of the divider from the left side of the map container. |
+| `swapped` | { swapped: boolean} | Fired when ths swap button clicked. Argument is an event object with the property `swapped` = the current status of swapping.
 
 ### Methods
 
@@ -50,7 +52,7 @@ Or if you are using browserify:
 var sideBySide = require('leaflet-side-by-side')
 ```
 
-Then create a map, add two layers to it, and create the SideBySide control and add it to the map:
+For tile layers create a map, add two layers to it, and create the SideBySide control and add it to the map:
 
 ```js
 var map = L.map('map').setView([51.505, -0.09], 13);
@@ -62,9 +64,29 @@ var myLayer2 = L.tileLayer(...).addTo(map)
 L.control.sideBySide(myLayer1, myLayer2).addTo(map);
 ```
 
-### Example
+For image overlays create a map pane for each layer, create a SideBySide control and add it to the map:
 
-[Live Example](http://lab.digital-democracy.org/leaflet-side-by-side/) see [source](index.html)
+```js
+var map = L.map('map').setView([23.140, -101.887], 5);
+
+map.createPane('left');
+map.createPane('right');
+
+var imgUrl1 = '...',
+imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
+var leftLayer = L.imageOverlay(imgUrl1, imageBounds, {pane: 'left'}).addTo(map);
+
+var imgUrl2 = '...',
+imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
+var imgUrl2 = L.imageOverlay(imgUrl2, imageBounds, {pane: 'right'}).addTo(map);
+
+L.control.sideBySide(leftLayer, rightLayer).addTo(map);
+```
+
+### Examples
+
+- [Live TileLayer Example](http://lab.digital-democracy.org/leaflet-side-by-side/) see [source](index.html)
+- [Live ImageOverlay Example](http://lab.digital-democracy.org/leaflet-side-by-side/) see [source](image-overlay-example.html)
 
 ### Limitations
 

image-overlay-example.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset=utf-8 />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
+    <title>Leaflet Side-by-side</title>
+    <script src='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.js'></script>
+    <script src="leaflet-side-by-side.js"></script>
+    <link href='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.css' rel='stylesheet' />
+    <style>
+    body {
+        margin: 0;
+        padding: 0;
+    }
+    #map {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+    }
+    </style>
+</head>
+
+<body>
+    <div id='map'></div>
+
+    <script>
+      var map = L.map('map').setView([23.140, -101.887], 5);
+
+      map.createPane('left');
+      map.createPane('right');
+
+      var newark = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
+      imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
+      var leftLayer = L.imageOverlay(newark, imageBounds, {pane: 'left'}).addTo(map);
+
+      var atlantis = 'https://img.vixdata.io/pd/jpg-large/es/sites/default/files/a/atlantis-ciudad-perdida.jpg',
+      imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
+      var rightLayer = L.imageOverlay(atlantis, imageBounds, {pane: 'right'}).addTo(map);
+
+      L.control.sideBySide(leftLayer, rightLayer).addTo(map);
+    </script>
+</body>
+</html>

index.js

@@ -1,6 +1,7 @@
 var L = require('leaflet')
 require('./layout.css')
 require('./range.css')
+require('./swap.css')
 
 var mapWasDragEnabled
 var mapWasTapEnabled
@@ -42,17 +43,20 @@ function uncancelMapDrag (e) {
 
 // convert arg to an array - returns empty array if arg is undefined
 function asArray (arg) {
-  return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
+  return !arg ? [] : Array.isArray(arg) ? arg : [arg]
 }
 
 function noop () {}
 
 L.Control.SideBySide = L.Control.extend({
   options: {
-    thumbSize: 42,
-    padding: 0
+    thumbSize: 30,
+    padding: 0,
+    swap: false
   },
 
+  swapped: false,
+
   initialize: function (leftLayers, rightLayers, options) {
     this.setLeftLayers(leftLayers)
     this.setRightLayers(rightLayers)
@@ -83,20 +87,36 @@ L.Control.SideBySide = L.Control.extend({
     range.step = 'any'
     range.value = 0.5
     range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
+
+    if (this.options.swap) {
+      var swap = (this._swap = L.DomUtil.create('button', 'leaflet-sbs-swap', container))
+      swap.type = 'button'
+      swap.setAttribute('aria-label', 'Swap images')
+      swap.setAttribute('data-left', this.swapped ? 'B' : 'A')
+      swap.setAttribute('data-right', this.swapped ? 'A' : 'B')
+      swap.style.display = 'none'
+      swap.style.paddingLeft = swap.style.paddingRight = this.options.padding + 'px'
+      swap.style.top = 'calc(50% + ' + this.options.thumbSize + 'px)'
+    }
+
     this._addEvents()
     this._updateLayers()
     return this
   },
 
+  getWrapper: function (layer) {
+    return layer.getContainer ? layer.getContainer() : layer.getPane()
+  },
+
   remove: function () {
     if (!this._map) {
       return this
     }
     if (this._leftLayer) {
-      this._leftLayer.getContainer().style.clip = ''
+      this.getWrapper(this._leftLayer).style.clip = ''
     }
     if (this._rightLayer) {
-      this._rightLayer.getContainer().style.clip = ''
+      this.getWrapper(this._rightLayer).style.clip = ''
     }
     this._removeEvents()
     L.DomUtil.remove(this._container)
@@ -124,16 +144,23 @@ L.Control.SideBySide = L.Control.extend({
     var se = map.containerPointToLayerPoint(map.getSize())
     var clipX = nw.x + this.getPosition()
     var dividerX = this.getPosition()
-
     this._divider.style.left = dividerX + 'px'
-    this.fire('dividermove', {x: dividerX})
+    this.fire('dividermove', { x: dividerX })
+
+    if (this._swap) {
+      this._swap.style.display = this._leftLayer && this._rightLayer ? 'block' : 'none'
+      this._swap.style.left = dividerX - this.options.thumbSize / 2 + 'px'
+      this._swap.setAttribute('data-left', this.swapped ? 'B' : 'A')
+      this._swap.setAttribute('data-right', this.swapped ? 'A' : 'B')
+    }
+
     var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
     var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
     if (this._leftLayer) {
-      this._leftLayer.getContainer().style.clip = clipLeft
+      this.getWrapper(this._leftLayer).style.clip = clipLeft
     }
     if (this._rightLayer) {
-      this._rightLayer.getContainer().style.clip = clipRight
+      this.getWrapper(this._rightLayer).style.clip = clipRight
     }
   },
 
@@ -155,38 +182,75 @@ L.Control.SideBySide = L.Control.extend({
       }
     }, this)
     if (prevLeft !== this._leftLayer) {
-      prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
-      this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
+      prevLeft && this.fire('leftlayerremove', { layer: prevLeft })
+      this._leftLayer && this.fire('leftlayeradd', { layer: this._leftLayer })
     }
     if (prevRight !== this._rightLayer) {
-      prevRight && this.fire('rightlayerremove', {layer: prevRight})
-      this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
+      prevRight && this.fire('rightlayerremove', { layer: prevRight })
+      this._rightLayer && this.fire('rightlayeradd', { layer: this._rightLayer })
     }
     this._updateClip()
   },
 
+  _swapLayers: function () {
+    var prevLefts = this._leftLayers
+    var prevRights = this._rightLayers
+    this._leftLayers = prevRights
+    this._rightLayers = prevLefts
+
+    var prevLeft = this._leftLayer
+    var prevRight = this._rightLayer
+    this._leftLayer = prevRight
+    this._rightLayer = prevLeft
+
+    this.swapped = !this.swapped
+    this._updateLayers()
+    this.fire('swapped', { swapped: this.swapped })
+  },
+
   _addEvents: function () {
     var range = this._range
     var map = this._map
-    if (!map || !range) return
-    map.on('move', this._updateClip, this)
-    map.on('layeradd layerremove', this._updateLayers, this)
-    on(range, getRangeEvent(range), this._updateClip, this)
-    on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
-    on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
+    var swap = this._swap
+    if (map) {
+      map.on('move', this._updateClip, this)
+    }
+    if (range) {
+      on(range, getRangeEvent(range), this._updateClip, this)
+      on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
+      on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
+    }
+    if (this._leftLayer) {
+      this._leftLayer.on('layeradd layerremove', this._updateLayers, this)
+    }
+    if (this._rightLayer) {
+      this._rightLayer.on('layeradd layerremove', this._updateLayers, this)
+    }
+    if (swap) {
+      on(swap, 'click', this._swapLayers, this)
+    }
   },
 
   _removeEvents: function () {
     var range = this._range
     var map = this._map
+    var swap = this._swap
+    if (map) {
+      map.off('move', this._updateClip, this)
+    }
     if (range) {
       off(range, getRangeEvent(range), this._updateClip, this)
       off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
       off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
     }
-    if (map) {
-      map.off('layeradd layerremove', this._updateLayers, this)
-      map.off('move', this._updateClip, this)
+    if (this._leftLayer) {
+      this._leftLayer.off('layeradd layerremove', this._updateLayers, this)
+    }
+    if (this._rightLayer) {
+      this._rightLayer.off('layeradd layerremove', this._updateLayers, this)
+    }
+    if (swap) {
+      off(swap, 'click', this._swapLayers, this)
     }
   }
 })

layout.css

@@ -9,9 +9,9 @@
     top: 0;
     bottom: 0;
     left: 50%;
-    margin-left: -2px;
-    width: 4px;
-    background-color: #fff;
+    margin-left: -1px;
+    width: 2px;
+    background-color: #2C405A;
     pointer-events: none;
     z-index: 999;
 }