diff --git a/iron-swipeable-container.html b/iron-swipeable-container.html index c21cae4..49e3a93 100644 --- a/iron-swipeable-container.html +++ b/iron-swipeable-container.html @@ -94,6 +94,16 @@ value: false }, + /** + * The threshold ratio (of the width of the element) of initial swipe movement before the actual swipe will start + * Helpful in scenario's where swipeable containers are rendered in a vertically scrollable + * list to prevent the elements from "wiggling" while scrolling. + */ + swipeThresholdRatio: { + type: Number, + value: 0 + }, + /** * The ratio of the width of the element that the translation animation * should happen over. For example, if the `widthRatio` is 3, the @@ -128,7 +138,7 @@ ready: function() { this._transitionProperty = 'opacity, transform'; this._swipeComplete = false; - this._direction = ''; + this._direction = 0; }, attached: function() { @@ -191,17 +201,33 @@ // Save the width of the element, so that we don't trigger a style // recalc every time we need it. this._nodeWidth = target.offsetWidth; + this._swipeThreshold = this._nodeWidth * this.swipeThresholdRatio; + + this._direction = 0; target.style.transition = 'none'; }, _trackMove: function(event, target) { - this._animate(event.dx, target); + var dx = event.dx; + + // Do nothing if threshold has not been met + if (Math.abs(dx) < this._swipeThreshold) { + return; + } + + this._direction = dx > 0 ? -1 : 1; + + dx = dx + this._direction * this._swipeThreshold; + this._animate(dx, target); }, _trackEnd: function(event, target) { + var dx = event.dx; + + dx = dx + this._direction * this._swipeThreshold; + // The element is swiped away if it's moved halfway its total width. - this._swipeComplete = Math.abs(event.dx) > this._nodeWidth / 2; - this._direction = event.dx > 0; + this._swipeComplete = Math.abs(dx) > this._nodeWidth / 2; this._swipeEnd(target); }, @@ -245,7 +271,7 @@ // If the element is ready to be swiped away, then translate it to the full // transparency distance. var totalDistance = this._nodeWidth * this.widthRatio; - this._animate(this._direction ? totalDistance : -totalDistance, target); + this._animate(this._direction * totalDistance, target); } else { this._animate(0, target); } @@ -256,10 +282,10 @@ if (this._swipeComplete && event.propertyName === 'opacity') { Polymer.dom(this).removeChild(target); - this.fire('iron-swipe', - { direction: this._direction > 0 ? 'right' : 'left', - target:target - }); + this.fire('iron-swipe', { + direction: this._direction === 1 ? 'right' : 'left', + target:target + }); } }