-
- Overlay transparency
-
-
+
+
diff --git a/js/control/LayersTab.js b/js/control/LayersTab.js
index e1e78b5..ae94b45 100644
--- a/js/control/LayersTab.js
+++ b/js/control/LayersTab.js
@@ -66,10 +66,10 @@ BR.LayersTab = BR.ControlLayers.extend({
self._layers[i].layer.setOpacity(opacity);
}
}
- }).onAdd(map);
+ });
L.DomUtil.get(
'leaflet-control-layers-overlays-opacity-slider'
- ).appendChild(overlayOpacitySlider);
+ ).appendChild(overlayOpacitySlider.getElement());
},
initButtons: function() {
diff --git a/js/control/OpacitySlider.js b/js/control/OpacitySlider.js
index c2293e2..eaf8820 100644
--- a/js/control/OpacitySlider.js
+++ b/js/control/OpacitySlider.js
@@ -1,19 +1,19 @@
-BR.OpacitySlider = L.Control.extend({
+BR.OpacitySlider = L.Class.extend({
options: {
id: '',
- position: 'topleft',
reversed: true,
orientation: 'vertical',
defaultValue: BR.conf.defaultOpacity,
- title: i18next.t('map.opacity-slider'),
+ title: '',
callback: function(opacity) {}
},
- onAdd: function(map) {
- var container = L.DomUtil.create('div', 'leaflet-bar control-slider'),
- input = $(
+ initialize: function(options) {
+ L.setOptions(this, options);
+
+ var input = (this.input = $(
''
- ),
+ )),
item = BR.Util.localStorageAvailable()
? localStorage['opacitySliderValue' + this.options.id]
: null,
@@ -24,25 +24,6 @@ BR.OpacitySlider = L.Control.extend({
value = minOpacity;
}
- // prevent also dragging map in Chrome
- L.DomEvent.disableClickPropagation(container);
-
- var stopClickAfterSlide = function(evt) {
- L.DomEvent.stop(evt);
- removeStopClickListeners();
- };
- var removeStopClickListeners = function() {
- document.removeEventListener('click', stopClickAfterSlide, true);
- document.removeEventListener(
- 'mousedown',
- removeStopClickListeners,
- true
- );
- };
-
- $(container).html(input);
- $(container).attr('title', this.options.title);
-
input
.slider({
id: this.options.id,
@@ -55,10 +36,6 @@ BR.OpacitySlider = L.Control.extend({
selection: this.options.reversed ? 'before' : 'after', // inverted, serves as track style, see css
tooltip: 'hide'
})
- .on('slideStart', function(evt) {
- // dragging beyond slider control selects zoom control +/- text in Firefox
- L.DomUtil.disableTextSelection();
- })
.on('slide slideStop', { self: this }, function(evt) {
evt.data.self.options.callback(evt.value / 100);
})
@@ -68,24 +45,14 @@ BR.OpacitySlider = L.Control.extend({
'opacitySliderValue' + evt.data.self.options.id
] = evt.value;
}
-
- 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
- );
});
- this.options.callback(value / 100);
+ this.getElement().title = this.options.title;
- return container;
+ this.options.callback(value / 100);
+ },
+
+ getElement: function() {
+ return this.input.slider('getElement');
}
});
diff --git a/js/control/OpacitySliderControl.js b/js/control/OpacitySliderControl.js
new file mode 100644
index 0000000..7fb17ed
--- /dev/null
+++ b/js/control/OpacitySliderControl.js
@@ -0,0 +1,64 @@
+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;
+ }
+});
diff --git a/js/index.js b/js/index.js
index abb19f1..805968d 100644
--- a/js/index.js
+++ b/js/index.js
@@ -282,8 +282,9 @@
}
map.addControl(
- new BR.OpacitySlider({
+ new BR.OpacitySliderControl({
id: 'route',
+ title: i18next.t('map.opacity-slider'),
callback: L.bind(routing.setOpacity, routing)
})
);