Popups can now be cloused on touch devices. p=jorix (closes #3403)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@12183 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Popup.js

@@ -888,6 +888,8 @@ OpenLayers.Popup = OpenLayers.Class({
             this.hide();
             OpenLayers.Event.stop(e);
         };
+        OpenLayers.Event.observe(this.closeDiv, "touchend", 
+                OpenLayers.Function.bindAsEventListener(closePopup, this));
         OpenLayers.Event.observe(this.closeDiv, "click", 
                 OpenLayers.Function.bindAsEventListener(closePopup, this));
     },
@@ -944,7 +946,8 @@ OpenLayers.Popup = OpenLayers.Class({
      *   Because the user might select the zoom-rectangle option and
      *    then drag it over a popup, we need a safe way to allow the
      *    mousemove and mouseup events to pass through the popup when
-     *    they are initiated from outside.
+     *    they are initiated from outside. The same procedure is needed for
+     *    touchmove and touchend events.
      * 
      *   Otherwise, we want to essentially kill the event propagation
      *    for all other events, though we have to do so carefully, 
@@ -954,6 +957,22 @@ OpenLayers.Popup = OpenLayers.Class({
      registerEvents:function() {
         this.events = new OpenLayers.Events(this, this.div, null, true);
 
+        var touchStarted = false;
+        function onTouchstart(evt) {
+            touchStarted = true;
+            OpenLayers.Event.stop(evt, true);
+        }
+        function onTouchmove(evt) {
+            if (touchStarted === true) {
+                OpenLayers.Event.stop(evt, true);
+            }
+        }
+        function onTouchend(evt) {
+            if (touchStarted === true) {
+                touchStarted = false;
+                OpenLayers.Event.stop(evt, true);
+            }
+        }
         this.events.on({
             "mousedown": this.onmousedown,
             "mousemove": this.onmousemove,
@@ -961,6 +980,9 @@ OpenLayers.Popup = OpenLayers.Class({
             "click": this.onclick,
             "mouseout": this.onmouseout,
             "dblclick": this.ondblclick,
+            "touchstart": onTouchstart,
+            "touchmove": onTouchmove,
+            "touchsend": onTouchend,
             scope: this
         });
         

tests/Popup.html

@@ -29,7 +29,7 @@
     }
     
     function test_Popup_constructor (t) {
-        t.plan( 8 );
+        t.plan(9);
 
         var id = "chicken";
         var w = 500;
@@ -63,11 +63,17 @@
         for (var i = 0; i < OpenLayers.Event.observers[cacheID].length; i++) {
             var observer = OpenLayers.Event.observers[cacheID][i];
             if (observer.element == closeImgDiv) {
-                t.ok(true, "An event was registered for the close box element");
+                if (observer.name == "click") {
-                t.eq(observer.name, "click", "A click event was registered for the close box element");
+                    t.ok(true, "A click event was registered for the close box element");
-                //call the registered observer to make sure it's the right one
+                    //call the registered observer to make sure it's the right one
-                observer.observer();
+                    observer.observer();
-                break;
+                } else if (observer.name == "touchend") {
+                    t.ok(true, "A touchend event was registered for the close box element");
+                    //call the registered observer to make sure it's the right one
+                    observer.observer();
+                } else {
+                    t.fail("A " + observer.name + " event was registered for the close box element");
+                }
             }
         }
     }