Don't let button controls interfer with handlers.

This change involves removal of the map's eventsDiv and introduces an OpenLayers.Events.buttonclick component that adds a buttonclick event which makes sure that only events that are not related to clicking a button propagate. This allows button controls to be on the map's viewPortDiv again.
2012-01-20 03:37:11 +01:00
parent e68acfe91a
commit 05de2b5109
22 changed files with 520 additions and 224 deletions
--- a/lib/OpenLayers/Events/buttonclick.js
+++ b/lib/OpenLayers/Events/buttonclick.js
@@ -0,0 +1,150 @@
+/* Copyright (c) 2006-2012 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/Events.js
+ */
+
+/**
+ * Class: OpenLayers.Events.buttonclick
+ * Extension event type for handling buttons on top of a dom element. This
+ *     event type fires "buttonclick" on its <target> when a button was
+ *     clicked. Buttons are detected by the "olButton" class.
+ *
+ * This event type makes sure that button clicks do not interfer with other
+ *     events that are registered on the same <element>.
+ */
+OpenLayers.Events.buttonclick = OpenLayers.Class({
+    
+    /**
+     * APIProperty: target
+     * {<OpenLayers.Events>} The events instance that the buttonclick event will
+     * be triggered on.
+     */
+    target: null,
+    
+    /**
+     * Property: events
+     * {Array} Events to observe and conditionally stop from propagating when
+     *     an element with the olButton (or its olAlphaImg child) is clicked.
+     */
+    events: [
+        'mousedown', 'mouseup', 'click', 'dblclick',
+        'touchstart', 'touchmove', 'touchend'
+    ],
+    
+    /**
+     * Property: startRegEx
+     * {RegExp} Regular expression to test Event.type for events that start
+     *     a buttonclick sequence.
+     */
+    startRegEx: /^mousedown|touchstart$/,
+
+    /**
+     * Property: cancelRegEx
+     * {RegExp} Regular expression to test Event.type for events that cancel
+     *     a buttonclick sequence.
+     */
+    cancelRegEx: /^touchmove$/,
+
+    /**
+     * Property: completeRegEx
+     * {RegExp} Regular expression to test Event.type for events that complete
+     *     a buttonclick sequence.
+     */
+    completeRegEx: /^mouseup|touchend$/,
+    
+    /**
+     * Constructor: OpenLayers.Events.buttonclick
+     * Construct a buttonclick event type. Applications are not supposed to
+     *     create instances of this class - they are created on demand by
+     *     <OpenLayers.Events> instances.
+     *
+     * Parameters:
+     * options - {<OpenLayers.Events>|Object} Target instance of
+     *     <OpenLayers.Events> or configuration properties for this
+     *     <OpenLayers.Events.buttonclick> instance.
+     *
+     * Required configuration properties:
+     * target - {<OpenLayers.Events>} The events instance that the buttonclick
+     *     event will be triggered on.
+     */
+    initialize: function(options) {
+        if (options instanceof OpenLayers.Events) {
+            options = {target: options};
+        }
+        OpenLayers.Util.extend(this, options);
+        
+        this._buttonClick = OpenLayers.Function.bindAsEventListener(
+            this.buttonClick, this
+        );
+        this.observe();
+    },
+    
+    /**
+     * Method: observe
+     */
+    observe: function() {
+        for (var i=this.events.length-1; i>=0; --i) {
+            OpenLayers.Event.observe(
+                this.target.element, this.events[i], this._buttonClick
+            );            
+        };
+    },
+    
+    /**
+     * Method: stopObserving
+     */
+    stopObserving: function() {
+        for (var i=this.events.length-1; i>=0; --i) {
+            OpenLayers.Event.stopObserving(
+                this.target.element, this.events[i], this._buttonClick
+            );            
+        }
+    },
+
+    /**
+     * Method: destroy
+     */
+    destroy: function() {
+        this.stopObserving()
+    },
+
+    /**
+     * Method: buttonClick
+     * Check if a button was clicked, and fire the buttonclick event
+     *
+     * Parameters:
+     * evt - {Event}
+     */
+    buttonClick: function(evt) {
+        if (OpenLayers.Event.isLeftClick(evt) || !~evt.type.indexOf("mouse")) {
+            var element = OpenLayers.Event.element(evt);
+            if (OpenLayers.Element.hasClass(element, "olAlphaImg")) {
+                element = element.parentNode;
+            }
+            if (OpenLayers.Element.hasClass(element, "olButton")) {
+                if (this._buttonStarted) {
+                    if (this.completeRegEx.test(evt.type)) {
+                        this.target.triggerEvent("buttonclick", {
+                            button: element
+                        });
+                    }
+                    if (this.cancelRegEx.test(evt.type)) {
+                        delete this._buttonStarted;
+                    }
+                    OpenLayers.Event.stop(evt, false, true);
+                }
+                if (this.startRegEx.test(evt.type)) {
+                    this._buttonStarted = true;
+                    OpenLayers.Event.stop(evt, false, true);
+                }
+            } else {
+                delete this._buttonStarted;
+            }
+        }
+    }
+    
+});