260 lines
11 KiB
JavaScript
260 lines
11 KiB
JavaScript
|
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||
|
|
(function (global){
|
||
|
|
var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null)
|
||
|
|
require('./layout.css')
|
||
|
|
require('./range.css')
|
||
|
|
|
||
|
|
var mapWasDragEnabled
|
||
|
|
var mapWasTapEnabled
|
||
|
|
|
||
|
|
// Leaflet v0.7 backwards compatibility
|
||
|
|
function on (el, types, fn, context) {
|
||
|
|
types.split(' ').forEach(function (type) {
|
||
|
|
L.DomEvent.on(el, type, fn, context)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// Leaflet v0.7 backwards compatibility
|
||
|
|
function off (el, types, fn, context) {
|
||
|
|
types.split(' ').forEach(function (type) {
|
||
|
|
L.DomEvent.off(el, type, fn, context)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function getRangeEvent (rangeInput) {
|
||
|
|
return 'oninput' in rangeInput ? 'input' : 'change'
|
||
|
|
}
|
||
|
|
|
||
|
|
function cancelMapDrag () {
|
||
|
|
mapWasDragEnabled = this._map.dragging.enabled()
|
||
|
|
mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
|
||
|
|
this._map.dragging.disable()
|
||
|
|
this._map.tap && this._map.tap.disable()
|
||
|
|
}
|
||
|
|
|
||
|
|
function uncancelMapDrag (e) {
|
||
|
|
this._refocusOnMap(e)
|
||
|
|
if (mapWasDragEnabled) {
|
||
|
|
this._map.dragging.enable()
|
||
|
|
}
|
||
|
|
if (mapWasTapEnabled) {
|
||
|
|
this._map.tap.enable()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// convert arg to an array - returns empty array if arg is undefined
|
||
|
|
function asArray (arg) {
|
||
|
|
return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
|
||
|
|
}
|
||
|
|
|
||
|
|
function noop () {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
L.Control.SideBySide = L.Control.extend({
|
||
|
|
options: {
|
||
|
|
thumbSize: 42,
|
||
|
|
padding: 0
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (leftLayers, rightLayers, options) {
|
||
|
|
this.setLeftLayers(leftLayers)
|
||
|
|
this.setRightLayers(rightLayers)
|
||
|
|
L.setOptions(this, options)
|
||
|
|
},
|
||
|
|
|
||
|
|
getPosition: function () {
|
||
|
|
var rangeValue = this._range.value
|
||
|
|
var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
|
||
|
|
return this._map.getSize().x * rangeValue + offset
|
||
|
|
},
|
||
|
|
|
||
|
|
setPosition: noop,
|
||
|
|
|
||
|
|
includes: L.Mixin.Events,
|
||
|
|
|
||
|
|
addTo: function (map) {
|
||
|
|
this.remove()
|
||
|
|
this._map = map
|
||
|
|
|
||
|
|
var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)
|
||
|
|
|
||
|
|
this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)
|
||
|
|
var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)
|
||
|
|
range.type = 'range'
|
||
|
|
range.min = 0
|
||
|
|
range.max = 1
|
||
|
|
range.step = 'any'
|
||
|
|
range.value = 0.5
|
||
|
|
range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
|
||
|
|
this._addEvents()
|
||
|
|
this._updateLayers()
|
||
|
|
return this
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: function () {
|
||
|
|
if (!this._map) {
|
||
|
|
return this
|
||
|
|
}
|
||
|
|
if (this._leftLayer) {
|
||
|
|
this._leftLayer.getContainer().style.clip = ""
|
||
|
|
}
|
||
|
|
if (this._rightLayer) {
|
||
|
|
this._rightLayer.getContainer().style.clip = ""
|
||
|
|
}
|
||
|
|
this._removeEvents()
|
||
|
|
L.DomUtil.remove(this._container)
|
||
|
|
|
||
|
|
this._map = null
|
||
|
|
|
||
|
|
return this
|
||
|
|
},
|
||
|
|
|
||
|
|
setLeftLayers: function (leftLayers) {
|
||
|
|
this._leftLayers = asArray(leftLayers)
|
||
|
|
this._updateLayers()
|
||
|
|
return this
|
||
|
|
},
|
||
|
|
|
||
|
|
setRightLayers: function (rightLayers) {
|
||
|
|
this._rightLayers = asArray(rightLayers)
|
||
|
|
this._updateLayers()
|
||
|
|
return this
|
||
|
|
},
|
||
|
|
|
||
|
|
_updateClip: function () {
|
||
|
|
var map = this._map
|
||
|
|
var nw = map.containerPointToLayerPoint([0, 0])
|
||
|
|
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
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_updateLayers: function () {
|
||
|
|
if (!this._map) {
|
||
|
|
return this
|
||
|
|
}
|
||
|
|
var prevLeft = this._leftLayer
|
||
|
|
var prevRight = this._rightLayer
|
||
|
|
this._leftLayer = this._rightLayer = null
|
||
|
|
this._leftLayers.forEach(function (layer) {
|
||
|
|
if (this._map.hasLayer(layer)) {
|
||
|
|
this._leftLayer = layer
|
||
|
|
}
|
||
|
|
}, this)
|
||
|
|
this._rightLayers.forEach(function (layer) {
|
||
|
|
if (this._map.hasLayer(layer)) {
|
||
|
|
this._rightLayer = layer
|
||
|
|
}
|
||
|
|
}, this)
|
||
|
|
if (prevLeft !== 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})
|
||
|
|
}
|
||
|
|
this._updateClip()
|
||
|
|
},
|
||
|
|
|
||
|
|
_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)
|
||
|
|
},
|
||
|
|
|
||
|
|
_removeEvents: function () {
|
||
|
|
var range = this._range
|
||
|
|
var map = this._map
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
L.control.sideBySide = function (leftLayers, rightLayers, options) {
|
||
|
|
return new L.Control.SideBySide(leftLayers, rightLayers, options)
|
||
|
|
}
|
||
|
|
|
||
|
|
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 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"; (require("./node_modules/cssify"))(css, undefined, '/data/github/leaflet-side-by-side/layout.css'); module.exports = css;
|
||
|
|
},{"./node_modules/cssify":3}],3:[function(require,module,exports){
|
||
|
|
function injectStyleTag(document, fileName, cb) {
|
||
|
|
var style = document.getElementById(fileName);
|
||
|
|
|
||
|
|
if (style) {
|
||
|
|
cb(style);
|
||
|
|
} else {
|
||
|
|
var head = document.getElementsByTagName('head')[0];
|
||
|
|
|
||
|
|
style = document.createElement('style');
|
||
|
|
style.id = fileName;
|
||
|
|
cb(style);
|
||
|
|
head.appendChild(style);
|
||
|
|
}
|
||
|
|
|
||
|
|
return style;
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = function (css, customDocument, fileName) {
|
||
|
|
var doc = customDocument || document;
|
||
|
|
if (doc.createStyleSheet) {
|
||
|
|
var sheet = doc.createStyleSheet()
|
||
|
|
sheet.cssText = css;
|
||
|
|
return sheet.ownerNode;
|
||
|
|
} else {
|
||
|
|
return injectStyleTag(doc, fileName, function(style) {
|
||
|
|
if (style.styleSheet) {
|
||
|
|
style.styleSheet.cssText = css;
|
||
|
|
} else {
|
||
|
|
style.innerHTML = css;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
module.exports.byUrl = function(url) {
|
||
|
|
if (document.createStyleSheet) {
|
||
|
|
return document.createStyleSheet(url).ownerNode;
|
||
|
|
} else {
|
||
|
|
var head = document.getElementsByTagName('head')[0],
|
||
|
|
link = document.createElement('link');
|
||
|
|
|
||
|
|
link.rel = 'stylesheet';
|
||
|
|
link.href = url;
|
||
|
|
|
||
|
|
head.appendChild(link);
|
||
|
|
return link;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
},{}],4:[function(require,module,exports){
|
||
|
|
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"; (require("./node_modules/cssify"))(css, undefined, '/data/github/leaflet-side-by-side/range.css'); module.exports = css;
|
||
|
|
},{"./node_modules/cssify":3}]},{},[1]);
|