From 6a2603d56609e022447bddc16674dc08be856f29 Mon Sep 17 00:00:00 2001
From: Stefan Breunig <stefan@mathphys.fsk.uni-heidelberg.de>
Date: Thu, 28 Feb 2013 23:49:21 +0100
Subject: [PATCH] allow quickly (de)selecting all layers by shift/ctrl/alt/meta
 clicking an entry in the layer chooser (fixes #232)

---
 USERGUIDE.md |  5 ++++-
 code/boot.js | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/USERGUIDE.md b/USERGUIDE.md
index 7810daec..cb5497d1 100644
--- a/USERGUIDE.md
+++ b/USERGUIDE.md
@@ -45,7 +45,10 @@ The chat is split up into several categories. It usually only shows messages for
 Map Display
 -----------
 
-You can customize many aspects of how the map is rendered in the layer chooser. The layer chooser is available from the icon in the top right corner, left of the sidebar.
+You can customize many aspects of how the map is rendered in the layer chooser.
+
+**Layer Chooser:**
+The layer chooser is available from the icon in the top right corner, left of the sidebar. The top entries are background maps and you can only have one of them active at a time. The entries on the bottom can be displayed in any combination you like. *Hint:* Modifier-click an entry to quickly hide all other layers. The modifier may be either of these: shift, ctrl, alt, meta. Modifier-click the entry again to select all layers.
 
 **Background / Street Map / Base Layer:**
 All these refer to the same thing. The base layer is stored across sessions. The default one uses OpenStreetMap data with a style that resembles the default Ingress one. There are other styles available.
diff --git a/code/boot.js b/code/boot.js
index d75d1914..fcb76729 100644
--- a/code/boot.js
+++ b/code/boot.js
@@ -23,6 +23,25 @@ window.setupLargeImagePreview = function() {
   });
 }
 
+// adds listeners to the layer chooser such that a long press hides
+// all custom layers except the long pressed one.
+window.setupLayerChooserSelectOne = function() {
+  $('.leaflet-control-layers-overlays').on('click', 'label', function(e) {
+    if(!e || !(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) return;
+
+    var isChecked = $(this).find('input').is(':checked');
+    var checkSize = $('.leaflet-control-layers-overlays input:checked').length;
+    if((isChecked && checkSize === 1) || checkSize === 0) {
+      // if nothing is selected or the users long-clicks the only
+      // selected element, assume all boxes should be checked again
+      $('.leaflet-control-layers-overlays input:not(:checked)').click();
+    } else {
+      // uncheck all
+      $('.leaflet-control-layers-overlays input:checked').click();
+      $(this).find('input').click();
+    }
+  });
+}
 
 window.setupStyles = function() {
   $('head').append('<style>' +
@@ -264,6 +283,7 @@ function boot() {
   window.setupTooltips();
   window.chat.setup();
   window.setupQRLoadLib();
+  window.setupLayerChooserSelectOne();
   // read here ONCE, so the URL is only evaluated one time after the
   // necessary data has been loaded.
   urlPortal = getURLParam('pguid');