node-red-contrib-jwht-map/worldmap/leaflet/leaflet-side-by-side.js

220 lines
10 KiB
JavaScript
Raw Normal View History

2018-10-16 06:20:38 +08:00
(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
// 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()
this._map.dragging.disable()
}
function uncancelMapDrag (e) {
if (!mapWasDragEnabled) return
this._refocusOnMap(e)
this._map.dragging.enable()
}
function noop () {
return
}
L.Control.SideBySide = L.Control.extend({
initialize: function (leftLayers, rightLayers) {
this._leftLayers = Array.isArray(leftLayers) ? leftLayers : [leftLayers]
this._rightLayers = Array.isArray(rightLayers) ? rightLayers : [rightLayers]
},
getPosition: noop,
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
this._addEvents()
this._updateLayers()
this._updateClip()
return this
},
remove: function () {
if (!this._map) { return this; }
this._removeEvents()
this._container.parentNode.removeChild(this._container)
this._map = null
return this
},
2018-10-23 04:01:24 +08:00
setSplit: function(s) {
this._range.value = s/100;
this._updateClip();
},
2018-10-16 06:20:38 +08:00
_updateClip: function () {
var map = this._map
var rangeValue = this._range.value
var nw = map.containerPointToLayerPoint([0, 0])
var se = map.containerPointToLayerPoint(map.getSize())
var offset = (0.5 - rangeValue) * 44
var clipX = nw.x + (se.x - nw.x) * rangeValue + offset
var dividerX = map.getSize().x * rangeValue + offset
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 () {
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, 'mousedown touchstart', cancelMapDrag, this)
on(range, 'mouseup touchend', uncancelMapDrag, this)
},
_removeEvents: function () {
var range = this._range
var map = this._map
if (range) {
off(range, getRangeEvent(range), this._updateClip, this)
off(range, 'mousedown touchstart', cancelMapDrag, this)
off(range, 'mouseup touchend', 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.export = 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, '/Users/gregor/Dev/DdDev/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, '/Users/gregor/Dev/DdDev/leaflet-side-by-side/range.css'); module.exports = css;
},{"./node_modules/cssify":3}]},{},[1]);