brouter-web/js/control/OpacitySliderControl.js
Norbert Renner ab467a94ab Improve opacity slider (#215)
- adopt horizontal styles
- common font size for layers tab
- adopt to layer switcher layout with slider as child of label element
- separate slider wrapper from control, as overlay slider is none
- migrate localStorage legacy key
2019-08-02 19:39:47 +02:00

64 lines
2.2 KiB
JavaScript

BR.OpacitySliderControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function(map) {
var container = L.DomUtil.create('div', 'leaflet-bar control-slider');
// prevent also dragging map in Chrome
L.DomEvent.disableClickPropagation(container);
// migrate legacy value
if (BR.Util.localStorageAvailable()) {
var value = localStorage.getItem('opacitySliderValue');
if (value !== null) {
localStorage.setItem(
'opacitySliderValue' + this.options.id,
value
);
localStorage.removeItem('opacitySliderValue');
}
}
var slider = new BR.OpacitySlider(this.options);
container.appendChild(slider.getElement());
var stopClickAfterSlide = function(evt) {
L.DomEvent.stop(evt);
removeStopClickListeners();
};
var removeStopClickListeners = function() {
document.removeEventListener('click', stopClickAfterSlide, true);
document.removeEventListener(
'mousedown',
removeStopClickListeners,
true
);
};
slider.input
.on('slideStart', function(evt) {
// dragging beyond slider control selects zoom control +/- text in Firefox
L.DomUtil.disableTextSelection();
})
.on('slideStop', { self: this }, function(evt) {
L.DomUtil.enableTextSelection();
// When dragging outside slider and over map, click event after mouseup
// adds marker when active on Chromium. So disable click (not needed)
// once after sliding.
document.addEventListener('click', stopClickAfterSlide, true);
// Firefox does not fire click event in this case, so make sure stop listener
// is always removed on next mousedown.
document.addEventListener(
'mousedown',
removeStopClickListeners,
true
);
});
return container;
}
});