diff --git a/index.js b/index.js index 919a859..d92773d 100644 --- a/index.js +++ b/index.js @@ -77,6 +77,7 @@ L.Control.SideBySide = L.Control.extend({ this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container) var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container) + range.addEventListener('click', function (e) { e.stopPropagation() }) range.type = 'range' range.min = 0 range.max = 1 @@ -118,6 +119,13 @@ L.Control.SideBySide = L.Control.extend({ return this }, + _updateLayerClip: function (clip, layer) { + var container = layer.getContainer() + if (container !== null && container !== undefined) { + container.style.clip = clip + } + }, + _updateClip: function () { var map = this._map var nw = map.containerPointToLayerPoint([0, 0]) @@ -129,12 +137,9 @@ L.Control.SideBySide = L.Control.extend({ 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 - } + + this._leftLayers.forEach(this._updateLayerClip.bind(this, clipLeft)) + this._rightLayers.forEach(this._updateLayerClip.bind(this, clipRight)) }, _updateLayers: function () { diff --git a/leaflet-side-by-side.js b/leaflet-side-by-side.js index 2346119..c4c6440 100644 --- a/leaflet-side-by-side.js +++ b/leaflet-side-by-side.js @@ -79,6 +79,7 @@ L.Control.SideBySide = L.Control.extend({ this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container) var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container) + range.addEventListener('click', function (e) { e.stopPropagation() }) range.type = 'range' range.min = 0 range.max = 1 @@ -120,6 +121,13 @@ L.Control.SideBySide = L.Control.extend({ return this }, + _updateLayerClip: function (clip, layer) { + var container = layer.getContainer() + if (container !== null && container !== undefined) { + container.style.clip = clip + } + }, + _updateClip: function () { var map = this._map var nw = map.containerPointToLayerPoint([0, 0]) @@ -131,12 +139,9 @@ L.Control.SideBySide = L.Control.extend({ 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 - } + + this._leftLayers.forEach(this._updateLayerClip.bind(this, clipLeft)) + this._rightLayers.forEach(this._updateLayerClip.bind(this, clipRight)) }, _updateLayers: function () { @@ -202,8 +207,8 @@ module.exports = L.Control.SideBySide }).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, '_x3rtbf'); module.exports = css; },{"./node_modules/cssify":3}],3:[function(require,module,exports){ @@ -263,8 +268,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, '_l4jn3i'); 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..8f516c7 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