From 79a34acdf11fd87da3e37c9542d70e30420c49c2 Mon Sep 17 00:00:00 2001 From: Tilo Mitra Date: Fri, 12 Oct 2012 16:29:43 -0700 Subject: [PATCH 1/3] update event-gestures HISTORY.md to reflect 3.7.3 changes --- src/event-gestures/HISTORY.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/event-gestures/HISTORY.md b/src/event-gestures/HISTORY.md index 61303670a2b..5d8d1b34e11 100644 --- a/src/event-gestures/HISTORY.md +++ b/src/event-gestures/HISTORY.md @@ -1,5 +1,13 @@ Gestures Change History ======================= +3.7.3 +----- + * `event-move` supports the -ms-touch-action property in IE10. + Nodes subscribing to events defined in event-move will have their + styles updated to `-ms-touch-action:none`. It will be reset when + listeners are detached. + + http://msdn.microsoft.com/en-us/library/windows/apps/hh767313.aspx 3.7.0 ----- From 228fa406d9853c408421fc9c6b033c2990a432ec Mon Sep 17 00:00:00 2001 From: Tilo Mitra Date: Fri, 12 Oct 2012 17:46:39 -0700 Subject: [PATCH 2/3] add event-gestures docs --- src/event/docs/gestures.mustache | 104 +++++++++++++++++++++++++++++++ src/event/docs/index.mustache | 4 +- 2 files changed, 106 insertions(+), 2 deletions(-) create mode 100644 src/event/docs/gestures.mustache diff --git a/src/event/docs/gestures.mustache b/src/event/docs/gestures.mustache new file mode 100644 index 00000000000..75034f5630e --- /dev/null +++ b/src/event/docs/gestures.mustache @@ -0,0 +1,104 @@ +
+

The `event-gestures` rollup module provides gesture events such as "flick" and "gesturemove", which normalize user interactions across touch and mouse or pointer based input devices. `event-gestures` is comprised of two modules - `event-flick` and `event-move`.

+
+ +

Using `event-flick`

+ +

The `event-flick` module provides a "flick" event which notifies users interested in a "flick" gesture, providing distance, time and velocity information. Listening to a "flick" event is easy:

+ +``` +node.on("flick", function (event) { + Y.log("I was flicked!"); +}); +``` + +

Configuring the Flick Event

+ +

To configure the firing of the "flick" event, you can pass in an optional configuration object. Check the API Docs for a full list of keys that can be supplied into the config object.

+ +

Using `event-move`

+ +

The `event-move` module provides "gesturemovestart", "gesturemove" and "gesturemoveend" events, which can be used to normalize drag type interactions across touch and mouse devices. These are very easy to use, but can be quite powerful.

+ +``` +node.on("gesturemovestart", function (event) { + Y.log("gesturemovestart was called"); +}); + +node.on("gesturemove", function (event) { + Y.log("gesturemove was called"); +}); + +node.on("gesturemoveend", function (event) { + Y.log("gesturemoveend was called"); +}); +``` + +

Gesture events in different environments

+ +

The `event-move` module normalizes gestures across mouse and touch environments.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Environment`gesturemovestart``gesturemove``gesturemoveend`
Mouse`mousedown``mousemove``mouseup`
Touch`touchstart``touchmove``touchend`
MSPointer`MSPointerDown``MSPointerMove``MSPointerUp`
+ +

Configuring gesture events

+ +

By default, the "gesturemove" and "gesturemoveend" events only fire when the same node has subscribed to the "gesturemovestart" event as well. This can be over-ridden by setting `{standAlone: true}` in the configuration properties when subscribing to these events.

+ +

Generally, a "gesturemovestart" and "gesturemoveend" event fires once, while the "gesturemove" event fires repeatedly as the mouse/finger moves across the screen. Each of these events also accept a config object to control their firing. Refer to the API Docs for more information.

+ +

Gesture events in IE10

+ +

IE10 introduces the MSPointer events, which normalize mouse/touch/pen inputs in IE10. `event-move` takes advantage of these new events, and automatically use them on supported environments.

+ +

Another new aspect of IE10 is the `ms-touch-action` CSS property. This CSS property tells IE10 whether to permit default touch behavior or not. Examples of default touch behavior include panning the page, pinching, and double-tapping to zoom. By default, these behaviors will always occur when interacting with elements. However, if you are subscribing to gesture events on an element, you may not want this to be the case. For example, if you are interacting with a Scrollview, you may want to swipe across the scrollview, instead of swiping across the entire page, as per the default behavior.

+ +

To account for this, Microsoft suggests setting `-ms-touch-action: none` for elements on which you do not want the default touch behavior to occur. As of YUI3.7.3, elements that subscribe to "gesture" events automatically have their `-ms-touch-action` property set to `none`. The value of the property is reverted back to the initial value when the event is detached.

+ +

If you want an element to have an `-ms-touch-action` value other than `none`, you can set that via JavaScript inside the "gesturemovestart" event:

+ +``` +//On IE10, attaching gesturemovestart will set horizontalScrollingNode's msTouchAction property to none. +horizontalScrollingNode.on("gesturemovestart", function (e) { + + /* + * If we want to be able to swipe horizontally through the element, + * but still scroll the page when we swipe horizontally or pinch-zoom, + * we can set that via JavaScript in the styles property + */ + horizontalScrollingNode.getDOMNode().style.msTouchAction = 'pan-y | pinch-zoom'; +}); +``` + +

If you wish to change the default `-ms-touch-action` value to be something other than `none`, you can change the default by modifying the `Y.Event._DEFAULT_TOUCH_ACTION`. Please note that this is not a public variable, and is subject to change if Microsoft's ms-touch-action implementation changes.

+ + + diff --git a/src/event/docs/index.mustache b/src/event/docs/index.mustache index f511e0e7127..85aceec11b9 100644 --- a/src/event/docs/index.mustache +++ b/src/event/docs/index.mustache @@ -237,9 +237,9 @@ There's a lot more you can do, though, so read on!

(for delegation). - `event-gestures` + `event-gestures` -

A rollup of the following modules:

+

The gestures rollup provides gesture events such as "flick" and "gesturemove", which normalize user interactions across touch and mouse or pointer based input devices. It contains the following modules: