[OpenLayers-Commits] r12430 - in sandbox/marcjansen/hold: examples lib/OpenLayers/Handler

commits-20090109 at openlayers.org commits-20090109 at openlayers.org
Fri Oct 7 04:55:35 EDT 2011


Author: marcjansen
Date: 2011-10-07 01:55:34 -0700 (Fri, 07 Oct 2011)
New Revision: 12430

Added:
   sandbox/marcjansen/hold/examples/OpenLayers.Control.Clickhold.js
Modified:
   sandbox/marcjansen/hold/examples/mobile.html
   sandbox/marcjansen/hold/examples/mobile.js
   sandbox/marcjansen/hold/lib/OpenLayers/Handler/Click.js
Log:
First version of a click-handler that is able to distinguish between simple clicks and clicks that are "holds". See mobile.html example where a control makes use of this handler. Still a lot of TODOs.

Added: sandbox/marcjansen/hold/examples/OpenLayers.Control.Clickhold.js
===================================================================
--- sandbox/marcjansen/hold/examples/OpenLayers.Control.Clickhold.js	                        (rev 0)
+++ sandbox/marcjansen/hold/examples/OpenLayers.Control.Clickhold.js	2011-10-07 08:55:34 UTC (rev 12430)
@@ -0,0 +1,97 @@
+/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for 
+ * full list of contributors). Published under the Clear BSD license.  
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.Clickhold
+ * A control for mouse clicks that can distinguish between simple clicks and 
+ *     longer clicks (clickhold or taphold). Create a new instance with the 
+ *     <OpenLayers.Control.Clickhold> constructor.
+ * 
+ * Inherits from:
+ *  - <OpenLayers.Control> 
+ */
+OpenLayers.Control.Clickhold = OpenLayers.Class(OpenLayers.Control, {
+    /**
+     * Property: defaultHandlerOptions
+     * 
+     * An object representing defaults that are going to be passed over to this 
+     * controls clickhold-handler. Per default this control will only handle
+     * single clicks with a tolerance of 5px. No events are beeing stopped from
+     * propagation.
+     */
+    defaultHandlerOptions: {
+        hold: true,
+        single: true,
+        'double': false,
+        pixelTolerance: 5,
+        stopSingle: false,
+        stopDouble: false
+    },
+    
+    /**
+     * Constructor: OpenLayers.Control.Clickhold
+     * Create a new clickhold control.
+     * 
+     * Parameters:
+     * options - {Object} Optional object whose properties will be set on the
+     *     handler.
+     */
+    initialize: function(options){
+        var opts = options || {};
+        this.handlerOptions = OpenLayers.Util.applyDefaults(
+            opts.handlerOptions || {}, 
+            this.defaultHandlerOptions
+        );
+        OpenLayers.Control.prototype.initialize.apply(this, arguments);
+        this.handler = new OpenLayers.Handler.Click(this, {
+            'click': this.onSimpleclick,
+            'clickhold': this.onClickhold
+        }, this.handlerOptions);
+    },
+    
+    /**
+     * APIMethod: onSimpleclick
+     * Method to be called when a simple click/tap (not held long enough) 
+     * occurs? The method will be called with two arguments:
+     * 
+     * event - <OpenLayers.Event> The OpenLayers.Event object
+     * ms    - {Number} The number of milliseconds that the click/tap lasted
+     * 
+     * TODO: maybe fire events instead.
+     */
+    onSimpleclick: function(evt, ms){
+        /*
+        evt.ms = ms;
+        this.events.triggerEvent(
+            "click", evt
+        );
+        */
+        var lonlat = this.map.getLonLatFromViewPortPx(evt.xy);
+	    alert('Klick (nach ' + ms + ' MS) auf Koordinate:' + "\n" 
+	        + lonlat.lon.toFixed(1) + ', ' + lonlat.lat.toFixed(1));
+    },
+    
+    /**
+     * APIMethod: onClickhold
+     * Method to be called when a held click/tap occurs? The method will be 
+     * called with two arguments:
+     * 
+     * event - <OpenLayers.Event> The OpenLayers.Event object
+     * ms    - {Number} The number of milliseconds that the click/tap lasted
+     * 
+     * TODO: maybe fire events instead.
+     */
+    onClickhold: function(evt, ms){
+        var lonlat = this.map.getLonLatFromViewPortPx(evt.xy);
+	    alert('Klickhold (nach ' + ms + ' MS) auf Koordinate:' + "\n" 
+	       + lonlat.lon.toFixed(1) + ', ' + lonlat.lat.toFixed(1));
+    },
+    
+    CLASS_NAME: "OpenLayers.Control.Clickhold"
+});
\ No newline at end of file

Modified: sandbox/marcjansen/hold/examples/mobile.html
===================================================================
--- sandbox/marcjansen/hold/examples/mobile.html	2011-10-07 06:33:24 UTC (rev 12429)
+++ sandbox/marcjansen/hold/examples/mobile.html	2011-10-07 08:55:34 UTC (rev 12430)
@@ -7,6 +7,7 @@
         <meta name="apple-mobile-web-app-capable" content="yes">
         <link rel="stylesheet" href="style.mobile.css" type="text/css">
         <script src="../lib/OpenLayers.js?mobile"></script>
+        <script src="./OpenLayers.Control.Clickhold.js"></script>
         <script src="mobile.js"></script>
         <style>
             html, body {

Modified: sandbox/marcjansen/hold/examples/mobile.js
===================================================================
--- sandbox/marcjansen/hold/examples/mobile.js	2011-10-07 06:33:24 UTC (rev 12429)
+++ sandbox/marcjansen/hold/examples/mobile.js	2011-10-07 08:55:34 UTC (rev 12430)
@@ -15,6 +15,10 @@
 setTimeout(fixSize, 1500);
 
 var init = function () {
+    var clickholdCtrl = new OpenLayers.Control.Clickhold({
+    	autoActivate: true
+    });
+    
     // create map
     map = new OpenLayers.Map({
         div: "map",
@@ -26,7 +30,8 @@
                     enableKinetic: true
                 }
             }),
-            new OpenLayers.Control.ZoomPanel()
+            new OpenLayers.Control.ZoomPanel(),
+            clickholdCtrl
         ],
         layers: [
             new OpenLayers.Layer.OSM("OpenStreetMap", null, {

Modified: sandbox/marcjansen/hold/lib/OpenLayers/Handler/Click.js
===================================================================
--- sandbox/marcjansen/hold/lib/OpenLayers/Handler/Click.js	2011-10-07 06:33:24 UTC (rev 12429)
+++ sandbox/marcjansen/hold/lib/OpenLayers/Handler/Click.js	2011-10-07 08:55:34 UTC (rev 12430)
@@ -30,6 +30,29 @@
     delay: 300,
     
     /**
+     * Property: startedAt
+     * 
+     * The timestamp where either the mousedown or the touchstart was captured.
+     * Needed to determine the time that the mouse was held clicked or the time
+     * that the finger kept on tapping. 
+     */
+    startedAt: null,
+    
+    /**
+     * APIProperty: holdThreshold
+     * 
+     * The amount of milliseconds that need to pass for a click/tap to be 
+     * considered a hold. Defaults to 1000 milliseconds. 
+     */
+    holdThreshold: 1000,
+    
+    /**
+     * APIProperty: hold
+     * {Boolean} Handle hold clicks.  Default is false.  If true, TODO
+     */
+    hold: false,
+    
+    /**
      * APIProperty: single
      * {Boolean} Handle single clicks.  Default is true.  If false, clicks
      * will not be reported.  If true, single-clicks will be reported.
@@ -155,6 +178,9 @@
      * {Boolean} Continue propagating this event.
      */
     touchstart: function(evt) {
+        if (this.hold) {
+        	this.startedAt = this.getTimestamp();
+        }
         if (!this.touch) {
             this.unregisterMouseListeners();
             this.touch = true;
@@ -218,6 +244,9 @@
      * {Boolean} Continue propagating this event.
      */
     mousedown: function(evt) {
+    	if (this.hold) {
+        	this.startedAt = this.getTimestamp();
+        }
         this.down = this.getEventInfo(evt);
         this.last = this.getEventInfo(evt);
         return true;
@@ -464,14 +493,37 @@
     /**
      * Method: delayedCall
      * Sets <timerId> to null.  And optionally triggers the click callback if
-     *     evt is set.
+     *     evt is set. TODO
      */
     delayedCall: function(evt) {
         this.timerId = null;
         if (evt) {
-            this.callback("click", [evt]);
+        	if (!this.hold) {
+            	this.callback("click", [evt]);
+        	} else {
+        		var now, elapsedTime;
+        		now = this.getTimestamp();
+            
+	            elapsedTime = now - this.startedAt - this.delay;
+	                
+	            this.startedAt = null;
+	            if (elapsedTime > this.holdThreshold ) {
+	                this.callback("clickhold", [evt, elapsedTime]);
+	            } else {
+	                this.callback("click", [evt, elapsedTime]);
+	            }
+        	}
         }
     },
+    
+    /**
+     * Method: getTimestamp
+     * 
+     * Gets the current timestamp in milliseconds.
+     */
+    getTimestamp: function() {
+        return (new Date().getTime());
+    },
 
     /**
      * Method: getEventInfo



More information about the Commits mailing list