84 lines
1.9 KiB
HTML
84 lines
1.9 KiB
HTML
<link rel="import" href="/components/polymer/polymer.html">
|
|
|
|
|
|
<polymer-element name="swipe-detect" attributes="threshold">
|
|
|
|
<template>
|
|
|
|
<div id="swipeDetector" class="swipeDetector" touch-action="pan-y">
|
|
<content></content>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
(function(){
|
|
'use strict';
|
|
|
|
var isWebkit = document.body.style.webkitTransform !== undefined;
|
|
|
|
Polymer({
|
|
|
|
setupEventHandlers : function(){
|
|
this.setupTrackStartEventHandler();
|
|
this.setupTrackEventHandler();
|
|
this.setupTrackEndEventHandler();
|
|
},
|
|
|
|
setupTrackStartEventHandler : function(){
|
|
PolymerGestures.addEventListener(this, "trackstart", function(event){
|
|
//tracking started
|
|
});
|
|
},
|
|
|
|
setupTrackEventHandler : function(){
|
|
PolymerGestures.addEventListener(this, "track", function(event){
|
|
var userIsSwipingLeftwards = (event.dx < 0);
|
|
var userIsSwipingRightwards = (event.dx > 0);
|
|
//tracking events fired
|
|
});
|
|
},
|
|
|
|
setupTrackEndEventHandler : function(){
|
|
PolymerGestures.addEventListener(this, "trackend", function(event){
|
|
var userIsSwipingLeftwards = (event.dx < 0);
|
|
var userIsSwipingRightwards = (event.dx > 0);
|
|
|
|
var thresholdWasCrossed = (Math.abs(event.dx) / this.getBoundingClientRect().width) > this.threshold;
|
|
|
|
if (thresholdWasCrossed){
|
|
if (userIsSwipingRightwards){
|
|
$(this).trigger("swiperight")
|
|
}
|
|
if (userIsSwipingLeftwards){
|
|
$(this).trigger("swipeleft")
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
publish: {
|
|
/**
|
|
* Specifies the threshold the user must swipe in order to
|
|
* cause a page transition.
|
|
* Only accepts values between 0 and 1.
|
|
* @attribute threshold
|
|
* @default 0.3
|
|
* @type Number
|
|
*/
|
|
threshold: 0.3,
|
|
},
|
|
|
|
ready: function(){
|
|
this.setupEventHandlers();
|
|
}
|
|
|
|
});
|
|
|
|
})();
|
|
|
|
|
|
</script>
|
|
|
|
</polymer-element>
|