[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