Skip to content

Commit dde66bc

Browse files
committed
Add more docs in PRIMER for gestures
Add doc comment for `setScrollDirection`
1 parent e47de5b commit dde66bc

File tree

2 files changed

+62
-2
lines changed

2 files changed

+62
-2
lines changed

PRIMER.md

+44
Original file line numberDiff line numberDiff line change
@@ -755,6 +755,8 @@ Example:
755755

756756
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.
757757

758+
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`.
759+
758760
The following are the gesture event types supported, with a short description and list of detail properties available on `event.detail` for each type:
759761

760762
* **down** - finger/button went down
@@ -821,6 +823,48 @@ Example:
821823
822824
});
823825
826+
</script>
827+
```
828+
Example with `listeners`:
829+
830+
```html
831+
<style>
832+
drag-me {
833+
width: 500px;
834+
height: 500px;
835+
background: gray;
836+
}
837+
</style>
838+
<dom-module id="drag-me">
839+
</dom-module>
840+
841+
<script>
842+
843+
Polymer({
844+
845+
is: 'drag-me',
846+
847+
listeners: {
848+
track: 'handleTrack'
849+
},
850+
851+
handleTrack: function(e) {
852+
switch(e.detail.state) {
853+
case 'start':
854+
this.message = 'Tracking started!';
855+
break;
856+
case 'track':
857+
this.message = 'Tracking in progress... ' +
858+
e.detail.x + ', ' + e.detail.y;
859+
break;
860+
case 'end':
861+
this.message = 'Tracking ended!';
862+
break;
863+
}
864+
}
865+
866+
});
867+
824868
</script>
825869
```
826870

src/standard/gestures.html

+18-2
Original file line numberDiff line numberDiff line change
@@ -426,15 +426,31 @@
426426
};
427427

428428
Polymer.Base._addFeature({
429-
// override _addListener to handle gestures
429+
// override _listen to handle gestures
430430
_listen: function(node, eventName, handler) {
431431
if (Gestures.gestures[eventName]) {
432432
Gestures.add(node, eventName, handler);
433433
} else {
434434
node.addEventListener(eventName, handler);
435435
}
436436
},
437-
setScrollDirection: function(node, direction) {
437+
/**
438+
* Override scrolling behavior to all direction, one direction, or none.
439+
*
440+
* Valid scroll directions:
441+
* - 'all': scroll in any direction
442+
* - 'x': scroll only in the 'x' direction
443+
* - 'y': scroll only in the 'y' direction
444+
* - 'none': disable scrolling for this node
445+
*
446+
* @method setScrollDirection
447+
* @param {String=} direction Direction to allow scrolling
448+
* Defaults to `all`.
449+
* @param {HTMLElement=} node Element to apply scroll direction setting.
450+
* Defaults to `this`.
451+
*/
452+
setScrollDirection: function(direction, node) {
453+
node = node || this;
438454
Gestures.setTouchAction(node, DIRECTION_MAP[direction] || 'auto');
439455
}
440456
});

0 commit comments

Comments
 (0)