From e0ad0c014fbf72acf385edcbad3c7e419d5c046d Mon Sep 17 00:00:00 2001 From: ahmed Date: Tue, 12 Jan 2021 16:34:48 +0300 Subject: [PATCH 1/4] [maintenance] Resolve issue of layers not clipping when changing via control layer. Resolve iOS safari not redrawing on drag/move by forcing it to redraw with the updated style changes Cleanup --- index.js | 72 ++++++++++++++++++++++++++----- leaflet-side-by-side.js | 84 ++++++++++++++++++++++++++++++------- leaflet-side-by-side.min.js | 2 +- package.json | 2 +- 4 files changed, 132 insertions(+), 28 deletions(-) diff --git a/index.js b/index.js index 919a859..575c23a 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,19 @@ require('./range.css') var mapWasDragEnabled var mapWasTapEnabled - +// Detects iOS +function iOS() { + return [ + 'iPad Simulator', + 'iPhone Simulator', + 'iPod Simulator', + 'iPad', + 'iPhone', + 'iPod' + ].includes(navigator.platform) + // iPad on iOS 13 detection + || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) +} // Leaflet v0.7 backwards compatibility function on (el, types, fn, context) { types.split(' ').forEach(function (type) { @@ -124,18 +136,48 @@ 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}) 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 - } - if (this._rightLayer) { - this._rightLayer.getContainer().style.clip = clipRight + if (iOS()){ + if (this._leftLayer){ + sel = this._leftLayer.getContainer() + this._leftLayer.getContainer().style.clip = 'unset' + this._leftLayer.getContainer().style.clip = clipLeft + // Forces redraw on Safari iOS + sel.style.display='none'; + sel.offsetHeight; // no need to store this anywhere, the reference is enough + sel.style.display='' + + } + if (this._rightLayer){ + sel = this._rightLayer.getContainer() + this._rightLayer.getContainer().style.clip = 'unset' + this._rightLayer.getContainer().style.clip = clipRight + // Forces redraw on Safari iOS + sel.style.display='none'; + sel.offsetHeight; // no need to store this anywhere, the reference is enough + sel.style.display='' + } } - }, + else { + if (this._leftLayer){ + this._leftLayer.getContainer().style.clip = '' + this._leftLayer.getContainer().style.clip = clipLeft + } + if (this._rightLayer){ + this._rightLayer.getContainer().style.clip = '' + this._rightLayer.getContainer().style.clip = clipRight + } + }}, + // Handle changes via control layer + _updateOverlay: function (layer){ + this._rightLayer = layer.layer + this._rightLayers.push(layer.layer)}, + _updateBaseLayer: function (layer){ + this._leftLayer = layer.layer + this._leftLayers.push(layer.layer)}, _updateLayers: function () { if (!this._map) { @@ -155,14 +197,17 @@ L.Control.SideBySide = L.Control.extend({ } }, this) if (prevLeft !== this._leftLayer) { + this._leftLayer.setZIndex(2) prevLeft && this.fire('leftlayerremove', {layer: prevLeft}) this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer}) } if (prevRight !== this._rightLayer) { + this._rightLayer.setZIndex(2) prevRight && this.fire('rightlayerremove', {layer: prevRight}) this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer}) } this._updateClip() + }, _addEvents: function () { @@ -171,9 +216,13 @@ L.Control.SideBySide = L.Control.extend({ if (!map || !range) return map.on('move', this._updateClip, this) map.on('layeradd layerremove', this._updateLayers, this) + // Handle changes via control layer + map.on('overlayadd', this._updateOverlay, this) + map.on('baselayerchange', this._updateBaseLayer, 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) + if (iOS()) {on(range, L.Browser.touch ? 'touchmove' : 'mouseup', uncancelMapDrag, this)} + else {on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)} }, _removeEvents: function () { @@ -182,10 +231,13 @@ L.Control.SideBySide = L.Control.extend({ 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 (iOS()) {off(range, L.Browser.touch ? 'touchmove' : 'mouseup', uncancelMapDrag, this)} + else {off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)} } if (map) { map.off('layeradd layerremove', this._updateLayers, this) + map.off('overlayadd', this._updateOverlay, this) + map.off('baselayerchange', this._updateBaseLayer, this) map.off('move', this._updateClip, this) } } diff --git a/leaflet-side-by-side.js b/leaflet-side-by-side.js index 2346119..099fe6e 100644 --- a/leaflet-side-by-side.js +++ b/leaflet-side-by-side.js @@ -1,12 +1,24 @@ (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i 1) +} // Leaflet v0.7 backwards compatibility function on (el, types, fn, context) { types.split(' ').forEach(function (type) { @@ -126,18 +138,48 @@ 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}) 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 - } - if (this._rightLayer) { - this._rightLayer.getContainer().style.clip = clipRight + if (iOS()){ + if (this._leftLayer){ + sel = this._leftLayer.getContainer() + this._leftLayer.getContainer().style.clip = 'unset' + this._leftLayer.getContainer().style.clip = clipLeft + // Forces redraw on Safari iOS + sel.style.display='none'; + sel.offsetHeight; // no need to store this anywhere, the reference is enough + sel.style.display='' + + } + if (this._rightLayer){ + sel = this._rightLayer.getContainer() + this._rightLayer.getContainer().style.clip = 'unset' + this._rightLayer.getContainer().style.clip = clipRight + // Forces redraw on Safari iOS + sel.style.display='none'; + sel.offsetHeight; // no need to store this anywhere, the reference is enough + sel.style.display='' + } } - }, + else { + if (this._leftLayer){ + this._leftLayer.getContainer().style.clip = '' + this._leftLayer.getContainer().style.clip = clipLeft + } + if (this._rightLayer){ + this._rightLayer.getContainer().style.clip = '' + this._rightLayer.getContainer().style.clip = clipRight + } + }}, + // Handle changes via control layer + _updateOverlay: function (layer){ + this._rightLayer = layer.layer + this._rightLayers.push(layer.layer)}, + _updateBaseLayer: function (layer){ + this._leftLayer = layer.layer + this._leftLayers.push(layer.layer)}, _updateLayers: function () { if (!this._map) { @@ -157,14 +199,17 @@ L.Control.SideBySide = L.Control.extend({ } }, this) if (prevLeft !== this._leftLayer) { + this._leftLayer.setZIndex(2) prevLeft && this.fire('leftlayerremove', {layer: prevLeft}) this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer}) } if (prevRight !== this._rightLayer) { + this._rightLayer.setZIndex(2) prevRight && this.fire('rightlayerremove', {layer: prevRight}) this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer}) } this._updateClip() + }, _addEvents: function () { @@ -173,9 +218,13 @@ L.Control.SideBySide = L.Control.extend({ if (!map || !range) return map.on('move', this._updateClip, this) map.on('layeradd layerremove', this._updateLayers, this) + // Handle changes via control layer + map.on('overlayadd', this._updateOverlay, this) + map.on('baselayerchange', this._updateBaseLayer, 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) + if (iOS()) {on(range, L.Browser.touch ? 'touchmove' : 'mouseup', uncancelMapDrag, this)} + else {on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)} }, _removeEvents: function () { @@ -184,10 +233,13 @@ L.Control.SideBySide = L.Control.extend({ 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 (iOS()) {off(range, L.Browser.touch ? 'touchmove' : 'mouseup', uncancelMapDrag, this)} + else {off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)} } if (map) { map.off('layeradd layerremove', this._updateLayers, this) + map.off('overlayadd', this._updateOverlay, this) + map.off('baselayerchange', this._updateBaseLayer, this) map.off('move', this._updateClip, this) } } @@ -199,11 +251,11 @@ L.control.sideBySide = function (leftLayers, rightLayers, options) { module.exports = L.Control.SideBySide -}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) +}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) },{"./layout.css":2,"./range.css":4}],2:[function(require,module,exports){ var inject = require('./node_modules/cssify'); -var css = ".leaflet-sbs-range {\r\n position: absolute;\r\n top: 50%;\r\n width: 100%;\r\n z-index: 999;\r\n}\r\n.leaflet-sbs-divider {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n left: 50%;\r\n margin-left: -2px;\r\n width: 4px;\r\n background-color: #fff;\r\n pointer-events: none;\r\n z-index: 999;\r\n}\r\n"; -inject(css, undefined, '_i6aomd'); +var css = ".leaflet-sbs-range {\n position: absolute;\n top: 50%;\n width: 100%;\n z-index: 999;\n}\n.leaflet-sbs-divider {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n margin-left: -2px;\n width: 4px;\n background-color: #fff;\n pointer-events: none;\n z-index: 999;\n}\n"; +inject(css, undefined, '_ohyyyx'); module.exports = css; },{"./node_modules/cssify":3}],3:[function(require,module,exports){ @@ -263,8 +315,8 @@ module.exports.byUrl = function (url) { },{}],4:[function(require,module,exports){ var inject = require('./node_modules/cssify'); -var css = ".leaflet-sbs-range {\r\n -webkit-appearance: none;\r\n display: inline-block!important;\r\n vertical-align: middle;\r\n height: 0;\r\n padding: 0;\r\n margin: 0;\r\n border: 0;\r\n background: rgba(0, 0, 0, 0.25);\r\n min-width: 100px;\r\n cursor: pointer;\r\n pointer-events: none;\r\n z-index: 999;\r\n}\r\n.leaflet-sbs-range::-ms-fill-upper {\r\n background: transparent;\r\n}\r\n.leaflet-sbs-range::-ms-fill-lower {\r\n background: rgba(255, 255, 255, 0.25);\r\n}\r\n/* Browser thingies */\r\n\r\n.leaflet-sbs-range::-moz-range-track {\r\n opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-track {\r\n opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-tooltip {\r\n display: none;\r\n}\r\n/* For whatever reason, these need to be defined\r\n * on their own so dont group them */\r\n\r\n.leaflet-sbs-range::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n padding: 0;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-ms-thumb {\r\n margin: 0;\r\n padding: 0;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-moz-range-thumb {\r\n padding: 0;\r\n right: 0 ;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range:disabled::-moz-range-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-ms-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:focus {\r\n outline: none!important;\r\n}\r\n.leaflet-sbs-range::-moz-focus-outer {\r\n border: 0;\r\n}\r\n\r\n"; -inject(css, undefined, '_1tlt668'); +var css = ".leaflet-sbs-range {\n -webkit-appearance: none;\n display: inline-block!important;\n vertical-align: middle;\n height: 0;\n padding: 0;\n margin: 0;\n border: 0;\n background: rgba(0, 0, 0, 0.25);\n min-width: 100px;\n cursor: pointer;\n pointer-events: none;\n z-index: 999;\n}\n.leaflet-sbs-range::-ms-fill-upper {\n background: transparent;\n}\n.leaflet-sbs-range::-ms-fill-lower {\n background: rgba(255, 255, 255, 0.25);\n}\n/* Browser thingies */\n\n.leaflet-sbs-range::-moz-range-track {\n opacity: 0;\n}\n.leaflet-sbs-range::-ms-track {\n opacity: 0;\n}\n.leaflet-sbs-range::-ms-tooltip {\n display: none;\n}\n/* For whatever reason, these need to be defined\n * on their own so dont group them */\n\n.leaflet-sbs-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n margin: 0;\n padding: 0;\n background: #fff;\n height: 40px;\n width: 40px;\n border-radius: 20px;\n cursor: ew-resize;\n pointer-events: auto;\n border: 1px solid #ddd;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: 40px 40px;\n}\n.leaflet-sbs-range::-ms-thumb {\n margin: 0;\n padding: 0;\n background: #fff;\n height: 40px;\n width: 40px;\n border-radius: 20px;\n cursor: ew-resize;\n pointer-events: auto;\n border: 1px solid #ddd;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: 40px 40px;\n}\n.leaflet-sbs-range::-moz-range-thumb {\n padding: 0;\n right: 0 ;\n background: #fff;\n height: 40px;\n width: 40px;\n border-radius: 20px;\n cursor: ew-resize;\n pointer-events: auto;\n border: 1px solid #ddd;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: 40px 40px;\n}\n.leaflet-sbs-range:disabled::-moz-range-thumb {\n cursor: default;\n}\n.leaflet-sbs-range:disabled::-ms-thumb {\n cursor: default;\n}\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\n cursor: default;\n}\n.leaflet-sbs-range:disabled {\n cursor: default;\n}\n.leaflet-sbs-range:focus {\n outline: none!important;\n}\n.leaflet-sbs-range::-moz-focus-outer {\n border: 0;\n}\n\n"; +inject(css, undefined, '_m3h1qk'); module.exports = css; },{"./node_modules/cssify":3}]},{},[1]); diff --git a/leaflet-side-by-side.min.js b/leaflet-side-by-side.min.js index bdc2de3..73dface 100644 --- a/leaflet-side-by-side.min.js +++ b/leaflet-side-by-side.min.js @@ -1 +1 @@ -!function a(s,o,d){function l(r,e){if(!o[r]){if(!s[r]){var t="function"==typeof require&&require;if(!e&&t)return t(r,!0);if(h)return h(r,!0);var n=new Error("Cannot find module '"+r+"'");throw n.code="MODULE_NOT_FOUND",n}var i=o[r]={exports:{}};s[r][0].call(i.exports,function(e){return l(s[r][1][e]||e)},i,i.exports,a,s,o,d)}return o[r].exports}for(var h="function"==typeof require&&require,e=0;e Date: Tue, 12 Jan 2021 17:15:00 +0300 Subject: [PATCH 2/4] Cleanup --- index.js | 8 ++++---- leaflet-side-by-side.js | 8 ++++---- leaflet-side-by-side.min.js | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/index.js b/index.js index 575c23a..6149cf0 100644 --- a/index.js +++ b/index.js @@ -143,8 +143,8 @@ L.Control.SideBySide = L.Control.extend({ if (iOS()){ if (this._leftLayer){ sel = this._leftLayer.getContainer() - this._leftLayer.getContainer().style.clip = 'unset' - this._leftLayer.getContainer().style.clip = clipLeft + sel.style.clip = 'unset' + sel.style.clip = clipLeft // Forces redraw on Safari iOS sel.style.display='none'; sel.offsetHeight; // no need to store this anywhere, the reference is enough @@ -153,8 +153,8 @@ L.Control.SideBySide = L.Control.extend({ } if (this._rightLayer){ sel = this._rightLayer.getContainer() - this._rightLayer.getContainer().style.clip = 'unset' - this._rightLayer.getContainer().style.clip = clipRight + sel.style.clip = 'unset' + sel.style.clip = clipRight // Forces redraw on Safari iOS sel.style.display='none'; sel.offsetHeight; // no need to store this anywhere, the reference is enough diff --git a/leaflet-side-by-side.js b/leaflet-side-by-side.js index 099fe6e..f90cd5c 100644 --- a/leaflet-side-by-side.js +++ b/leaflet-side-by-side.js @@ -145,8 +145,8 @@ L.Control.SideBySide = L.Control.extend({ if (iOS()){ if (this._leftLayer){ sel = this._leftLayer.getContainer() - this._leftLayer.getContainer().style.clip = 'unset' - this._leftLayer.getContainer().style.clip = clipLeft + sel.style.clip = 'unset' + sel.style.clip = clipLeft // Forces redraw on Safari iOS sel.style.display='none'; sel.offsetHeight; // no need to store this anywhere, the reference is enough @@ -155,8 +155,8 @@ L.Control.SideBySide = L.Control.extend({ } if (this._rightLayer){ sel = this._rightLayer.getContainer() - this._rightLayer.getContainer().style.clip = 'unset' - this._rightLayer.getContainer().style.clip = clipRight + sel.style.clip = 'unset' + sel.style.clip = clipRight // Forces redraw on Safari iOS sel.style.display='none'; sel.offsetHeight; // no need to store this anywhere, the reference is enough diff --git a/leaflet-side-by-side.min.js b/leaflet-side-by-side.min.js index 73dface..0837308 100644 --- a/leaflet-side-by-side.min.js +++ b/leaflet-side-by-side.min.js @@ -1 +1 @@ -!function i(r,a,s){function o(t,e){if(!a[t]){if(!r[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(l)return l(t,!0);throw(n=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",n}n=a[t]={exports:{}},r[t][0].call(n.exports,function(e){return o(r[t][1][e]||e)},n,n.exports,i,r,a,s)}return a[t].exports}for(var l="function"==typeof require&&require,e=0;e Date: Tue, 12 Jan 2021 20:42:40 +0300 Subject: [PATCH 3/4] Resolve issue with occasional null layer --- index.js | 4 ++-- leaflet-side-by-side.js | 4 ++-- leaflet-side-by-side.min.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 6149cf0..628de56 100644 --- a/index.js +++ b/index.js @@ -197,14 +197,14 @@ L.Control.SideBySide = L.Control.extend({ } }, this) if (prevLeft !== this._leftLayer) { - this._leftLayer.setZIndex(2) prevLeft && this.fire('leftlayerremove', {layer: prevLeft}) this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer}) + this._leftLayer && this._leftLayer.setZIndex(2) } if (prevRight !== this._rightLayer) { - this._rightLayer.setZIndex(2) prevRight && this.fire('rightlayerremove', {layer: prevRight}) this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer}) + this._rightLayer && this._rightLayer.setZIndex(2) } this._updateClip() diff --git a/leaflet-side-by-side.js b/leaflet-side-by-side.js index f90cd5c..a04eb9c 100644 --- a/leaflet-side-by-side.js +++ b/leaflet-side-by-side.js @@ -199,14 +199,14 @@ L.Control.SideBySide = L.Control.extend({ } }, this) if (prevLeft !== this._leftLayer) { - this._leftLayer.setZIndex(2) prevLeft && this.fire('leftlayerremove', {layer: prevLeft}) this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer}) + this._leftLayer && this._leftLayer.setZIndex(2) } if (prevRight !== this._rightLayer) { this._rightLayer.setZIndex(2) prevRight && this.fire('rightlayerremove', {layer: prevRight}) - this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer}) + this._rightLayer && this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer}) } this._updateClip() diff --git a/leaflet-side-by-side.min.js b/leaflet-side-by-side.min.js index 0837308..0f3ae92 100644 --- a/leaflet-side-by-side.min.js +++ b/leaflet-side-by-side.min.js @@ -1 +1 @@ -!function i(r,a,s){function o(t,e){if(!a[t]){if(!r[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(l)return l(t,!0);throw(n=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",n}n=a[t]={exports:{}},r[t][0].call(n.exports,function(e){return o(r[t][1][e]||e)},n,n.exports,i,r,a,s)}return a[t].exports}for(var l="function"==typeof require&&require,e=0;e Date: Tue, 12 Jan 2021 20:43:27 +0300 Subject: [PATCH 4/4] Run build on index.js --- leaflet-side-by-side.js | 4 ++-- leaflet-side-by-side.min.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/leaflet-side-by-side.js b/leaflet-side-by-side.js index a04eb9c..5a926c2 100644 --- a/leaflet-side-by-side.js +++ b/leaflet-side-by-side.js @@ -204,9 +204,9 @@ L.Control.SideBySide = L.Control.extend({ this._leftLayer && this._leftLayer.setZIndex(2) } if (prevRight !== this._rightLayer) { - this._rightLayer.setZIndex(2) prevRight && this.fire('rightlayerremove', {layer: prevRight}) - this._rightLayer && this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer}) + this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer}) + this._rightLayer && this._rightLayer.setZIndex(2) } this._updateClip() diff --git a/leaflet-side-by-side.min.js b/leaflet-side-by-side.min.js index 0f3ae92..08c8819 100644 --- a/leaflet-side-by-side.min.js +++ b/leaflet-side-by-side.min.js @@ -1 +1 @@ -!function i(r,a,s){function o(t,e){if(!a[t]){if(!r[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(l)return l(t,!0);throw(n=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",n}n=a[t]={exports:{}},r[t][0].call(n.exports,function(e){return o(r[t][1][e]||e)},n,n.exports,i,r,a,s)}return a[t].exports}for(var l="function"==typeof require&&require,e=0;e