Add/remove active class on map UI buttons
This commit is contained in:
parent
a125ee829a
commit
fa9b4a5f6a
5 changed files with 20 additions and 12 deletions
|
@ -190,7 +190,7 @@ function initializeNotes(map, params) {
|
||||||
notes[feature.properties.id] = updateMarker(marker, feature);
|
notes[feature.properties.id] = updateMarker(marker, feature);
|
||||||
newNote = null;
|
newNote = null;
|
||||||
|
|
||||||
addNoteButton.removeClass("disabled").addClass("geolink");
|
addNoteButton.removeClass("active").addClass("geolink");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -223,9 +223,9 @@ function initializeNotes(map, params) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
if (addNoteButton.hasClass("disabled")) return;
|
if (addNoteButton.hasClass("active")) return;
|
||||||
|
|
||||||
addNoteButton.removeClass("geolink").addClass("disabled");
|
addNoteButton.removeClass("geolink").addClass("active");
|
||||||
|
|
||||||
map.addLayer(noteLayer);
|
map.addLayer(noteLayer);
|
||||||
|
|
||||||
|
@ -262,7 +262,7 @@ function initializeNotes(map, params) {
|
||||||
newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
|
newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
|
||||||
|
|
||||||
newNote.on("remove", function (e) {
|
newNote.on("remove", function (e) {
|
||||||
addNoteButton.removeClass("disabled").addClass("geolink");
|
addNoteButton.removeClass("active").addClass("geolink");
|
||||||
}).on("dragstart", function (e) {
|
}).on("dragstart", function (e) {
|
||||||
$(newNote).stopTime("removenote");
|
$(newNote).stopTime("removenote");
|
||||||
}).on("dragend", function (e) {
|
}).on("dragend", function (e) {
|
||||||
|
|
|
@ -5,7 +5,7 @@ L.OSM.key = function (options) {
|
||||||
var $container = $('<div>')
|
var $container = $('<div>')
|
||||||
.attr('class', 'control-key');
|
.attr('class', 'control-key');
|
||||||
|
|
||||||
$('<a>')
|
var button = $('<a>')
|
||||||
.attr('class', 'control-button')
|
.attr('class', 'control-button')
|
||||||
.attr('href', '#')
|
.attr('href', '#')
|
||||||
.attr('title', I18n.t('javascripts.key.tooltip'))
|
.attr('title', I18n.t('javascripts.key.tooltip'))
|
||||||
|
@ -51,7 +51,7 @@ L.OSM.key = function (options) {
|
||||||
function toggle(e) {
|
function toggle(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
options.sidebar.togglePane($ui);
|
options.sidebar.togglePane($ui, button);
|
||||||
}
|
}
|
||||||
|
|
||||||
function update() {
|
function update() {
|
||||||
|
|
|
@ -7,7 +7,7 @@ L.OSM.layers = function(options) {
|
||||||
var $container = $('<div>')
|
var $container = $('<div>')
|
||||||
.attr('class', 'control-layers');
|
.attr('class', 'control-layers');
|
||||||
|
|
||||||
var link = $('<a>')
|
var button = $('<a>')
|
||||||
.attr('class', 'control-button')
|
.attr('class', 'control-button')
|
||||||
.attr('href', '#')
|
.attr('href', '#')
|
||||||
.attr('title', 'Layers')
|
.attr('title', 'Layers')
|
||||||
|
@ -156,7 +156,7 @@ L.OSM.layers = function(options) {
|
||||||
function toggle(e) {
|
function toggle(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
options.sidebar.togglePane($ui);
|
options.sidebar.togglePane($ui, button);
|
||||||
}
|
}
|
||||||
|
|
||||||
return $container[0];
|
return $container[0];
|
||||||
|
|
|
@ -10,7 +10,7 @@ L.OSM.share = function (options) {
|
||||||
var $container = $('<div>')
|
var $container = $('<div>')
|
||||||
.attr('class', 'control-share');
|
.attr('class', 'control-share');
|
||||||
|
|
||||||
$('<a>')
|
var button = $('<a>')
|
||||||
.attr('class', 'control-button')
|
.attr('class', 'control-button')
|
||||||
.attr('href', '#')
|
.attr('href', '#')
|
||||||
.attr('title', 'Share')
|
.attr('title', 'Share')
|
||||||
|
@ -230,7 +230,7 @@ L.OSM.share = function (options) {
|
||||||
marker.setLatLng(map.getCenter());
|
marker.setLatLng(map.getCenter());
|
||||||
|
|
||||||
update();
|
update();
|
||||||
options.sidebar.togglePane($ui);
|
options.sidebar.togglePane($ui, button);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleMarker() {
|
function toggleMarker() {
|
||||||
|
|
|
@ -2,6 +2,7 @@ L.OSM.sidebar = function(selector) {
|
||||||
var control = {},
|
var control = {},
|
||||||
sidebar = $(selector),
|
sidebar = $(selector),
|
||||||
current = $(),
|
current = $(),
|
||||||
|
currentButton = $(),
|
||||||
map;
|
map;
|
||||||
|
|
||||||
control.addTo = function (_) {
|
control.addTo = function (_) {
|
||||||
|
@ -15,17 +16,21 @@ L.OSM.sidebar = function(selector) {
|
||||||
.appendTo(sidebar);
|
.appendTo(sidebar);
|
||||||
};
|
};
|
||||||
|
|
||||||
control.togglePane = function(pane) {
|
control.togglePane = function(pane, button) {
|
||||||
current
|
current
|
||||||
.hide()
|
.hide()
|
||||||
.trigger('hide');
|
.trigger('hide');
|
||||||
|
|
||||||
|
currentButton
|
||||||
|
.removeClass('active');
|
||||||
|
|
||||||
if (current === pane) {
|
if (current === pane) {
|
||||||
$(sidebar).hide();
|
$(sidebar).hide();
|
||||||
current = $();
|
current = currentButton = $();
|
||||||
} else {
|
} else {
|
||||||
$(sidebar).show();
|
$(sidebar).show();
|
||||||
current = pane;
|
current = pane;
|
||||||
|
currentButton = button || $();
|
||||||
}
|
}
|
||||||
|
|
||||||
map.invalidateSize({pan: false, animate: false});
|
map.invalidateSize({pan: false, animate: false});
|
||||||
|
@ -33,6 +38,9 @@ L.OSM.sidebar = function(selector) {
|
||||||
current
|
current
|
||||||
.show()
|
.show()
|
||||||
.trigger('show');
|
.trigger('show');
|
||||||
|
|
||||||
|
currentButton
|
||||||
|
.addClass('active');
|
||||||
};
|
};
|
||||||
|
|
||||||
return control;
|
return control;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue