Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more docs for Gestures #1495

Merged
merged 1 commit into from
May 6, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions PRIMER.md
Original file line number Diff line number Diff line change
Expand Up @@ -755,6 +755,8 @@ Example:

Polymer will generate and fire a custom "gesture" event for certain user interactions automatically when a declarative listener is added for the event type. These events will fire consistenly on both touch and mouse environments, and so it is advised to listen for these events rather than their mouse- or touch-specific event counterparts for interoperability with both touch and desktop/mouse environments. For example, `tap` should be used instead of `click` for the most reliable cross-platform results.

Certain gestures will be able to control scrolling direction for touch input. For example, nodes with a listener for the `track` event will prevent scrolling by default. Elements can be override scroll direction with `this.setScrollDirection(direction, node)`, where `direction` is one of `'x'`, `'y'`, `'none'`, or `'all'`, and `node` defaults to `this`.

The following are the gesture event types supported, with a short description and list of detail properties available on `event.detail` for each type:

* **down** - finger/button went down
Expand Down Expand Up @@ -821,6 +823,48 @@ Example:

});

</script>
```
Example with `listeners`:

```html
<style>
drag-me {
width: 500px;
height: 500px;
background: gray;
}
</style>
<dom-module id="drag-me">
</dom-module>

<script>

Polymer({

is: 'drag-me',

listeners: {
track: 'handleTrack'
},

handleTrack: function(e) {
switch(e.detail.state) {
case 'start':
this.message = 'Tracking started!';
break;
case 'track':
this.message = 'Tracking in progress... ' +
e.detail.x + ', ' + e.detail.y;
break;
case 'end':
this.message = 'Tracking ended!';
break;
}
}

});

</script>
```

Expand Down
20 changes: 18 additions & 2 deletions src/standard/gestures.html
Original file line number Diff line number Diff line change
Expand Up @@ -426,15 +426,31 @@
};

Polymer.Base._addFeature({
// override _addListener to handle gestures
// override _listen to handle gestures
_listen: function(node, eventName, handler) {
if (Gestures.gestures[eventName]) {
Gestures.add(node, eventName, handler);
} else {
node.addEventListener(eventName, handler);
}
},
setScrollDirection: function(node, direction) {
/**
* Override scrolling behavior to all direction, one direction, or none.
*
* Valid scroll directions:
* - 'all': scroll in any direction
* - 'x': scroll only in the 'x' direction
* - 'y': scroll only in the 'y' direction
* - 'none': disable scrolling for this node
*
* @method setScrollDirection
* @param {String=} direction Direction to allow scrolling
* Defaults to `all`.
* @param {HTMLElement=} node Element to apply scroll direction setting.
* Defaults to `this`.
*/
setScrollDirection: function(direction, node) {
node = node || this;
Gestures.setTouchAction(node, DIRECTION_MAP[direction] || 'auto');
}
});
Expand Down