Skip to content

[fix] Layers not clipped on change from control layer + iOS buggy interactions #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ahmed-machine wants to merge 4 commits into
base: gh-pages
Choose a base branch
from
Open

[fix] Layers not clipped on change from control layer + iOS buggy interactions #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e0ad0c0
[maintenance] Resolve issue of layers not clipping when changing via …
ahmed-machine Jan 12, 2021
7d8754d
Cleanup
ahmed-machine Jan 12, 2021
7d3bfea
Resolve issue with occasional null layer
ahmed-machine Jan 12, 2021
25f374d
Run build on index.js
ahmed-machine Jan 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 62 additions & 10 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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()
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
sel.style.display=''

}
if (this._rightLayer){
sel = this._rightLayer.getContainer()
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
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) {
Expand All @@ -157,12 +199,15 @@ L.Control.SideBySide = L.Control.extend({
if (prevLeft !== this._leftLayer) {
prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
this._leftLayer && this._leftLayer.setZIndex(2)
}
if (prevRight !== this._rightLayer) {
prevRight && this.fire('rightlayerremove', {layer: prevRight})
this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
this._rightLayer && this._rightLayer.setZIndex(2)
}
this._updateClip()

},

_addEvents: function () {
Expand All @@ -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 () {
Expand All @@ -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)
}
}
Expand Down
84 changes: 68 additions & 16 deletions leaflet-side-by-side.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
(function (global){
(function (global){(function (){
var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null)
require('./layout.css')
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) {
Expand Down Expand Up @@ -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()
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
sel.style.display=''

}
if (this._rightLayer){
sel = this._rightLayer.getContainer()
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
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) {
Expand All @@ -159,12 +201,15 @@ L.Control.SideBySide = L.Control.extend({
if (prevLeft !== this._leftLayer) {
prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
this._leftLayer && this._leftLayer.setZIndex(2)
}
if (prevRight !== this._rightLayer) {
prevRight && this.fire('rightlayerremove', {layer: prevRight})
this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
this._rightLayer && this._rightLayer.setZIndex(2)
}
this._updateClip()

},

_addEvents: function () {
Expand All @@ -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 () {
Expand All @@ -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)
}
}
Expand All @@ -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){
Expand Down Expand Up @@ -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]);
Loading