handle touch events with IOS

[astrid_emde]

handle events

• tap to zoom
• pinch to zoom (test with unfixed viewport width)
• pan

[schaef]

Eventhandling allgemein

• OpenLayers macht keinen Unterschied ob es sich um eine Karte handelt, die sich über das gesamte Browserfenster erstreckt oder ob es eine kleinere Karte in einer Webseite handelt.
• Es wird festgestellt, in welchem Element das Event stattfindet und um was für ein Event es sich handelt (Code aus Event.js):

79	    /**
80	     * Method: element
81	     * Cross browser event element detection.
82	     *
83	     * Parameters:
84	     * event - {Event}
85	     *
86	     * Returns:
87	     * {DOMElement} The element that caused the event
88	     */
89	    element: function(event) {
90	        return event.target || event.srcElement;
91	    },
92	
93	    /**
94	     * Method: isSingleTouch
95	     * Determine whether event was caused by a single touch
96	     *
97	     * Parameters:
98	     * event - {Event}
99	     *
100	     * Returns:
101	     * {Boolean}
102	     */
103	    isSingleTouch: function(event) {
104	        return event.touches && event.touches.length == 1;
105	    },
106	
107	    /**
108	     * Method: isMultiTouch
109	     * Determine whether event was caused by a multi touch
110	     *
111	     * Parameters:
112	     * event - {Event}
113	     *
114	     * Returns:
115	     * {Boolean}
116	     */
117	    isMultiTouch: function(event) {
118	        return event.touches && event.touches.length > 1;
119	    },
...

• Vom Elemtent des Events aus wird soweit im DOM aufwärts gegangen bis das Element kommt, der die Klasse erhält, die für das Eventhandling verantwortlich ist.

 /**
181	     * Method: findElement
182	     *
183	     * Parameters:
184	     * event - {Event}
185	     * tagName - {String}
186	     *
187	     * Returns:
188	     * {DOMElement} The first node with the given tagName, starting from the
189	     * node the event was triggered on and traversing the DOM upwards
190	     */
191	    findElement: function(event, tagName) {
192	        var element = OpenLayers.Event.element(event);
193	        while (element.parentNode && (!element.tagName ||
194	              (element.tagName.toUpperCase() != tagName.toUpperCase()))){
195	            element = element.parentNode;
196	        }
197	        return element;
198	    },

• Die Browserevents werden daher nicht unterdrückt nicht gesondert unterdrückt. Fällt bei displayfüllenden Karten nicht auf, macht aber Sinn, da ja auch bei großen Karten die Karte verschoben wird und nicht die Inhalte im Browserfenster.
• Die Browserevents werden an einer Stelle definiert (event.js):

**
388	 * Class: OpenLayers.Events
389	 */
390	OpenLayers.Events = OpenLayers.Class({
391	
392	    /**
393	     * Constant: BROWSER_EVENTS
394	     * {Array(String)} supported events
395	     */
396	    BROWSER_EVENTS: [
397	        "mouseover", "mouseout",
398	        "mousedown", "mouseup", "mousemove",
399	        "click", "dblclick", "rightclick", "dblrightclick",
400	        "resize", "focus", "blur",
401	        "touchstart", "touchmove", "touchend"
402	    ],

Handling Click & Touch

• Click und Touch werden in einer Datei verwaltet (click.js)
• Wenn ein Touchevent startet werden die Mouse-relevanten Listener deaktiviert

	OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
25	    /**
26	     * APIProperty: delay
27	     * {Number} Number of milliseconds between clicks before the event is
28	     *     considered a double-click.
29	     */
30	    delay: 300,
31	   
32	    /**
33	     * APIProperty: single
34	     * {Boolean} Handle single clicks.  Default is true.  If false, clicks
35	     * will not be reported.  If true, single-clicks will be reported.
36	     */
37	    single: true,
	  
43	    'double': false,
	  
53	    pixelTolerance: 0,
	       	    
62	    dblclickTolerance: 13,
	       	   
70	    stopSingle: false,
	    
86	    stopDouble: false,

92	    timerId: null,
93	
94	    /**
95	     * Property: touch
96	     * {Boolean} When a touchstart event is fired, touch will be true and all
97	     *     mouse related listeners will do nothing.
98	     */
99	    touch: false,

• Es werden touchstart, touchmove und touchend definiert

153	    /**
154	     * Method: touchstart
155	     * Handle touchstart.
156	     *
157	     * Returns:
158	     * {Boolean} Continue propagating this event.
159	     */
160	    touchstart: function(evt) {
161	        if (!this.touch) {
162	            this.unregisterMouseListeners();
163	            this.touch = true;
164	        }
165	        this.down = this.getEventInfo(evt);
166	        this.last = this.getEventInfo(evt);
167	        return true;
168	    },
169	   
170	    /**
171	     * Method: touchmove
172	     *    Store position of last move, because touchend event can have
173	     *    an empty "touches" property.
174	     *
175	     * Returns:
176	     * {Boolean} Continue propagating this event.
177	     */
178	    touchmove: function(evt) {
179	        this.last = this.getEventInfo(evt);
180	        return true;
181	    },
182	
183	    /**
184	     * Method: touchend
185	     *   Correctly set event xy property, and add lastTouches to have
186	     *   touches property from last touchstart or touchmove
187	     */
188	    touchend: function(evt) {
189	        // touchstart may not have been allowed to propagate
190	        if (this.down) {
191	            evt.xy = this.last.xy;
192	            evt.lastTouches = this.last.touches;
193	            this.handleSingle(evt);
194	            this.down = null;
195	        }
196	        return true;
197	    },
198	   

Weitere Infos

• Die Controls für die Touch events werden in der touchnavigaton.js definiert
• Für Pinchzoom => pinchzoom.js und pinch.js
• Quellen
  • ​http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Events.js
  • ​http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Control/PinchZoom.js
  • ​http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Handler/Pinch.js
  • ​http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Control/TouchNavigation.js

[astrid_emde]

Documentation in Mapbender Wiki: http://www.mapbender.org/Mobile

[pschmidt]

TODO: the scrolling at popup windows is not supported.