can long-click (“tap and hold”) optional layers in layer chooser for select-only-this-layer

code/boot.js

@@ -55,8 +55,9 @@ 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;
+  $('.leaflet-control-layers-overlays').on('click taphold', 'label', function(e) {
+    if(!e) return;
+    if(!(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.type === 'taphold')) return;
 
     var isChecked = $(this).find('input').is(':checked');
     var checkSize = $('.leaflet-control-layers-overlays input:checked').length;
@@ -289,6 +290,10 @@ window.setupDialogs = function() {
   }
 }
 
+window.setupTaphold = function() {
+  @@INCLUDERAW:external/taphold.js@@
+}
+
 
 window.setupQRLoadLib = function() {
   @@INCLUDERAW:external/jquery.qrcode.min.js@@
@@ -311,6 +316,7 @@ function boot() {
   window.iconEnl = L.Icon.Default.extend({options: { iconUrl: base + '/marker-green.png' } });
   window.iconRes = L.Icon.Default.extend({options: { iconUrl: base + '/marker-blue.png' } });
 
+  window.setupTaphold();
   window.setupStyles();
   window.setupDialogs();
   window.setupMap();

external/taphold.js

@@ -0,0 +1,106 @@
+// @author Rich Adams <rich@richadams.me>
+
+// Implements a tap and hold functionality. If you click/tap and release, it will trigger a normal
+// click event. But if you click/tap and hold for 1s, it will trigger a taphold event instead.
+
+;(function($)
+{
+    // When start of a taphold event is triggered.
+    function startHandler(event)
+    {
+        var $elem = jQuery(this);
+
+        // If object also has click handler, store it and unbind. Taphold will trigger the
+        // click itself, rather than normal propagation.
+        if (typeof $elem.data("events") != "undefined"
+            && typeof $elem.data("events").click != "undefined")
+        {
+            // Find the one without a namespace defined.
+            for (var c in $elem.data("events").click)
+            {
+                if ($elem.data("events").click[c].namespace == "")
+                {
+                    var handler = $elem.data("events").click[c].handler
+                    $elem.data("taphold_click_handler", handler);
+                    $elem.unbind("click", handler);
+                    break;
+                }
+            }
+        }
+        // Otherwise, if a custom click handler was explicitly defined, then store it instead.
+        else if (typeof event.data != "undefined"
+                 && event.data != null
+                 && typeof event.data.clickHandler == "function")
+        {
+            $elem.data("taphold_click_handler", event.data.clickHandler);
+        }
+
+        // Reset the flags
+        $elem.data("taphold_triggered", false); // If a hold was triggered
+        $elem.data("taphold_clicked",   false); // If a click was triggered
+        $elem.data("taphold_cancelled", false); // If event has been cancelled.
+
+        // Set the timer for the hold event.
+        $elem.data("taphold_timer",
+            setTimeout(function()
+            {
+                // If event hasn't been cancelled/clicked already, then go ahead and trigger the hold.
+                if (!$elem.data("taphold_cancelled")
+                    && !$elem.data("taphold_clicked"))
+                {
+                    // Trigger the hold event, and set the flag to say it's been triggered.
+                    $elem.trigger(jQuery.extend(event, jQuery.Event("taphold")));
+                    $elem.data("taphold_triggered", true);
+                }
+            }, 1000));
+    }
+
+    // When user ends a tap or click, decide what we should do.
+    function stopHandler(event)
+    {
+        var $elem = jQuery(this);
+
+        // If taphold has been cancelled, then we're done.
+        if ($elem.data("taphold_cancelled")) { return; }
+
+        // Clear the hold timer. If it hasn't already triggered, then it's too late anyway.
+        clearTimeout($elem.data("taphold_timer"));
+
+        // If hold wasn't triggered and not already clicked, then was a click event.
+        if (!$elem.data("taphold_triggered")
+            && !$elem.data("taphold_clicked"))
+        {
+            // If click handler, trigger it.
+            if (typeof $elem.data("taphold_click_handler") == "function")
+            {
+                $elem.data("taphold_click_handler")(jQuery.extend(event, jQuery.Event("click")));
+            }
+
+            // Set flag to say we've triggered the click event.
+            $elem.data("taphold_clicked", true);
+        }
+    }
+
+    // If a user prematurely leaves the boundary of the object we're working on.
+    function leaveHandler(event)
+    {
+        // Cancel the event.
+        $(this).data("taphold_cancelled", true);
+    }
+
+    var taphold = $.event.special.taphold =
+    {
+        setup: function(data)
+        {
+            $(this).bind("touchstart mousedown",  data, startHandler)
+                   .bind("touchend mouseup",    stopHandler)
+                   .bind("touchmove mouseleave", leaveHandler);
+        },
+        teardown: function(namespaces)
+        {
+            $(this).unbind("touchstart mousedown",  startHandler)
+                   .unbind("touchend mouseup",    stopHandler)
+                   .unbind("touchmove mouseleave", leaveHandler);
+        }
+    };
+})(jQuery);