Add/remove active class on map UI buttons

This commit is contained in:
John Firebaugh 2013-07-31 13:56:51 -07:00
parent a125ee829a
commit fa9b4a5f6a
5 changed files with 20 additions and 12 deletions

View file

@ -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) {

View file

@ -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() {

View file

@ -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];

View file

@ -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() {

View file

@ -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;