Merge pull request #224 from jorix/3402-touch_logic_to_superclass

Move some touch logic to the `handler` base class

lib/OpenLayers/Handler.js

@@ -85,6 +85,14 @@ OpenLayers.Handler = OpenLayers.Class({
      *     the OpenLayers code.
      */
     evt: null,
+    
+    /**
+     * Property: touch
+     * {Boolean} Indicates the support of touch events. When touch events are 
+     *     started touch will be true and all mouse related listeners will do 
+     *     nothing.
+     */
+    touch: false,
 
     /**
      * Constructor: OpenLayers.Handler
@@ -187,10 +195,32 @@ OpenLayers.Handler = OpenLayers.Class({
                 this.unregister(events[i], this[events[i]]); 
             }
         } 
+        this.touch = false;
         this.active = false;
         return true;
     },
 
+    /**
+     * Method: startTouch
+     * Start touch events, this method must be called by subclasses in 
+     *     "touchstart" method. When touch events are started <touch> will be
+     *     true and all mouse related listeners will do nothing.
+     */
+    startTouch: function() {
+        if (!this.touch) {
+            this.touch = true;
+            var events = [
+                "mousedown", "mouseup", "mousemove", "click", "dblclick",
+                "mouseout"
+            ];
+            for (var i=0, len=events.length; i<len; i++) {
+                if (this[events[i]]) {
+                    this.unregister(events[i], this[events[i]]); 
+                }
+            } 
+        }
+    },
+
     /**
     * Method: callback
     * Trigger the control's named callback with the given arguments

lib/OpenLayers/Handler/Click.js

@@ -90,13 +90,6 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
      * {Number} The id of the timeout waiting to clear the <delayedCall>.
      */
     timerId: null,
-
-    /**
-     * Property: touch
-     * {Boolean} When a touchstart event is fired, touch will be true and all
-     *     mouse related listeners will do nothing.
-     */
-    touch: false,
     
     /**
      * Property: down
@@ -155,10 +148,7 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
      * {Boolean} Continue propagating this event.
      */
     touchstart: function(evt) {
-        if (!this.touch) {
+        this.startTouch();
-            this.unregisterMouseListeners();
-            this.touch = true;
-        }
         this.down = this.getEventInfo(evt);
         this.last = this.getEventInfo(evt);
         return true;
@@ -195,20 +185,6 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
         }
         return true;
     },
-    
-    /**
-     * Method: unregisterMouseListeners
-     * In a touch environment, we don't want to handle mouse events.
-     */
-    unregisterMouseListeners: function() {
-        this.map.events.un({
-            mousedown: this.mousedown,
-            mouseup: this.mouseup,
-            click: this.click,
-            dblclick: this.dblclick,
-            scope: this
-        });
-    },
 
     /**
      * Method: mousedown
@@ -520,7 +496,6 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
             this.down = null;
             this.first = null;
             this.last = null;
-            this.touch = false;
             deactivated = true;
         }
         return deactivated;

lib/OpenLayers/Handler/Drag.js

@@ -50,13 +50,6 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
      */
     dragging: false,
 
-    /**
-     * Property: touch
-     * {Boolean} When a touchstart event is fired, touch will be true and all
-     *     mouse related listeners will do nothing.
-     */
-    touch: false,
-
     /** 
      * Property: last
      * {<OpenLayers.Pixel>} The last pixel location of the drag.
@@ -345,17 +338,7 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
      * {Boolean} Let the event propagate.
      */
     touchstart: function(evt) {
-        if (!this.touch) {
+        this.startTouch();
-            this.touch = true;
-            // unregister mouse listeners
-            this.map.events.un({
-                mousedown: this.mousedown,
-                mouseup: this.mouseup,
-                mousemove: this.mousemove,
-                click: this.click,
-                scope: this
-            });
-        }
         return this.dragstart(evt);
     },
 
@@ -509,7 +492,6 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
     deactivate: function() {
         var deactivated = false;
         if(OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
-            this.touch = false;
             this.started = false;
             this.dragging = false;
             this.start = null;

lib/OpenLayers/Handler/Feature.js

@@ -59,13 +59,6 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
      * {<OpenLayers.Pixel>} The location of the last mouseup.
      */
     up: null,
-
-    /**
-     * Property: touch
-     * {Boolean} When a touchstart event is fired, touch will be true and all
-     *     mouse related listeners will do nothing.
-     */
-    touch: false,
     
     /**
      * Property: clickTolerance
@@ -139,17 +132,7 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
      * {Boolean} Let the event propagate.
      */
     touchstart: function(evt) {
-        if(!this.touch) {
+        this.startTouch(); 
-            this.touch =  true;
-            this.map.events.un({
-                mousedown: this.mousedown,
-                mouseup: this.mouseup,
-                mousemove: this.mousemove,
-                click: this.click,
-                dblclick: this.dblclick,
-                scope: this
-            });
-        }
         return OpenLayers.Event.isMultiTouch(evt) ?
                 true : this.mousedown(evt);
     },
@@ -398,7 +381,6 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
             this.lastFeature = null;
             this.down = null;
             this.up = null;
-            this.touch = false;
             this.map.events.un({
                 "removelayer": this.handleMapEvents,
                 "changelayer": this.handleMapEvents,

lib/OpenLayers/Handler/Point.js

@@ -113,12 +113,6 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
      */
     pixelTolerance: 5,
 
-    /**
-     * Property: touch
-     * {Boolean} Indcates the support of touch events.
-     */
-    touch: false,
-
     /**
      * Property: lastTouchPx
      * {<OpenLayers.Pixel>} The last pixel used to know the distance between
@@ -216,7 +210,6 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
             this.layer.destroy(false);
         }
         this.layer = null;
-        this.touch = false;
         return true;
     },
     
@@ -383,18 +376,7 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
      * {Boolean} Allow event propagation
      */
     touchstart: function(evt) {
-        if (!this.touch) {
+        this.startTouch();
-            this.touch = true;
-            // unregister mouse listeners
-            this.map.events.un({
-                mousedown: this.mousedown,
-                mouseup: this.mouseup,
-                mousemove: this.mousemove,
-                click: this.click,
-                dblclick: this.dblclick,
-                scope: this
-            });
-        }
         this.lastTouchPx = evt.xy;
         return this.down(evt);
     },

tests/Handler/Click.html

@@ -669,6 +669,64 @@
         map.destroy();
     }
 
+    function test_touchstart(t) {
+        // a test to verify that the touchstart function does
+        // unregister the mouse listeners when it's called the
+        // first time
+
+        t.plan(7);
+
+        // set up
+
+        var map = new OpenLayers.Map("map", {
+            controls: []
+        });
+        var control = new OpenLayers.Control({});
+        var handler = new OpenLayers.Handler.Click(control, {});
+        control.handler = handler;
+        map.addControl(control);
+        handler.activate();
+
+        function allRegistered() {
+            var eventTypes = ['mousedown', 'mouseup', 'click', 'dblclick'],
+                eventType,
+                listeners,
+                listener,
+                flag;
+            for(var i=0, ilen=eventTypes.length; i<ilen; i++) {
+                flag =  false;
+                eventType = eventTypes[i];
+                listeners = map.events.listeners[eventType];
+                for(var j=0, jlen=listeners.length; j<jlen; j++) {
+                    listener = listeners[j];
+                    if(listener.func === handler[eventType] && listener.obj === handler) {
+                        flag = true;
+                        break;
+                    }
+                }
+                if(!flag) {
+                    return false;
+                }
+            }
+            return true;
+        }
+
+        // test
+
+        t.ok(allRegistered(), 'mouse listeners are registered');
+        handler.touchstart({xy: new OpenLayers.Pixel(0, 0)});
+        t.eq(map.events.listeners.mousedown.length, 0,"mousedown is not registered");
+        t.eq(map.events.listeners.mouseup.length, 0,"mouseup is not registered");
+        t.eq(map.events.listeners.click.length, 0,"click is not registered");
+        t.eq(map.events.listeners.dblclick.length, 0,"dblclick is not registered");
+
+        t.ok(handler.touch, 'handler.touch is set');
+
+        handler.deactivate();
+        t.ok(!handler.touch, 'handler.touch is not set');
+
+        map.destroy();
+    }
   </script>
 </head>
 <body>

tests/Handler/Drag.html

@@ -288,7 +288,7 @@
         // "touchend" events set expected states in the drag handler.
         // We also verify that we prevent the default as appropriate.
 
-        t.plan(14);
+        t.plan(19);
 
         // set up
 
@@ -318,6 +318,11 @@
         t.eq(h.start.y, 0, '[touchstart] start.y is correct');
         t.eq(log.length, 1, '[touchstart] one item in log');
         t.ok(log[0] === e, "touchstart", '[touchstart] event is stopped');
+        t.eq(m.events.listeners.mousedown.length, 0,"mousedown is not registered");
+        t.eq(m.events.listeners.mouseup.length, 0,"mouseup is not registered");
+        t.eq(m.events.listeners.mousemove.length, 0,"mousemove is not registered");
+        t.eq(m.events.listeners.click.length, 0,"click is not registered");
+        t.eq(m.events.listeners.mouseout.length, 0,"mouseout is not registered");
 
         e = {xy: new Px(1, 1)};
         m.events.triggerEvent('touchmove', e);

tests/Handler/Feature.html

@@ -280,9 +280,10 @@
         handler.mousedown = function() {}; // mock mousedown
         handler.activate();
 
+        var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick'];
+
         function allRegistered() {
-            var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick'],
+            var eventType,
-                eventType,
                 listeners,
                 listener,
                 flag;
@@ -305,21 +306,18 @@
         }
 
         function noneRegistered() {
-            var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick'],
+            var eventType,
-                eventType,
+                times,
-                listeners,
+                flag = false;
-                listener;
             for(var i=0, ilen=eventTypes.length; i<ilen; i++) {
                 eventType = eventTypes[i];
-                listeners = map.events.listeners[eventType];
+                times = map.events.listeners[eventType].length;
-                for(var j=0, jlen=listeners.length; j<jlen; j++) {
+                if (times != 0) {
-                    listener = listeners[j];
+                    t.fail(eventType + " is registered " + times + " times");
-                    if(listener.func === handler[eventType] && listener.obj === handler) {
+                    flag = true;
-                        return false;
-                    }
                 }
             }
-            return true;
+            return !flag;
         }
 
         // test

tests/Handler/Point.html

@@ -407,7 +407,8 @@
         // set up
 
         var map = new OpenLayers.Map("map", {
-            resolutions: [1]
+            resolutions: [1],
+            controls: []
         });
         var layer = new OpenLayers.Layer.Vector("foo", {
             maxExtent: new OpenLayers.Bounds(-10, -10, 10, 10),
@@ -421,9 +422,11 @@
         map.setCenter(new OpenLayers.LonLat(0, 0), 0);
         handler.activate();
 
+        var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick',
+                'mouseout'];
+
         function allRegistered() {
-            var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick'],
+            var eventType,
-                eventType,
                 listeners,
                 listener,
                 flag;
@@ -446,23 +449,21 @@
         }
 
         function noneRegistered() {
-            var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick'],
+            var eventType,
-                eventType,
+                times,
-                listeners,
+                flag = false;
-                listener;
             for(var i=0, ilen=eventTypes.length; i<ilen; i++) {
                 eventType = eventTypes[i];
-                listeners = map.events.listeners[eventType];
+                times = map.events.listeners[eventType].length;
-                for(var j=0, jlen=listeners.length; j<jlen; j++) {
+                if (times != 0) {
-                    listener = listeners[j];
+                    t.fail(eventType + " is registered " + times + " times");
-                    if(listener.func === handler[eventType] && listener.obj === handler) {
+                    flag = true;
-                        return false;
-                    }
                 }
             }
-            return true;
+            return !flag;
         }
 
+
         // test
 
         t.ok(allRegistered(), 'mouse listeners are registered');