diff --git a/code/boot.js b/code/boot.js index 59e3a55a..bdee9068 100644 --- a/code/boot.js +++ b/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(); diff --git a/external/taphold.js b/external/taphold.js new file mode 100644 index 00000000..966d00c0 --- /dev/null +++ b/external/taphold.js @@ -0,0 +1,106 @@ +// @author Rich Adams + +// 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);