diff --git a/bower.json b/bower.json index 2dd3e7c..cd2aa10 100644 --- a/bower.json +++ b/bower.json @@ -27,7 +27,7 @@ }, "devDependencies": { "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", - "web-component-tester": "*", + "web-component-tester": "polymer/web-component-tester#^3.4.0", "test-fixture": "PolymerElements/test-fixture#^1.0.0", "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", diff --git a/demo/index.html b/demo/index.html index 6eefed7..bcc2b51 100644 --- a/demo/index.html +++ b/demo/index.html @@ -52,7 +52,7 @@
-

Curve swipe

+

Horizontal swipe

You can swipe native elements. This is a plain div.
@@ -73,9 +73,9 @@

Curve swipe
-

Horizontal swipe

+

Curve swipe

- +
You can swipe native elements. This is a plain div.
@@ -96,7 +96,7 @@

Horizontal swipe

Swipe disabled

- +
You can swipe native elements. This is a plain div.
diff --git a/iron-swipeable-container.html b/iron-swipeable-container.html index 8348dc9..e39f0b6 100644 --- a/iron-swipeable-container.html +++ b/iron-swipeable-container.html @@ -67,24 +67,24 @@ /** * Fired when a child element is swiped away. * - * @event iron-swipe-away + * @event iron-swipe */ properties: { /** * The style in which to swipe the card. Currently supported * options are `curve | horizontal`. If left unspecified, the default - * is assumed to be `curve`. + * is assumed to be `horizontal`. */ swipeStyle: { type: String, - value: 'curve' + value: 'horizontal' }, /** * If true, then the container will not allow swiping. */ - disableSwipe: { + disabled: { type: Boolean, value: false }, @@ -92,7 +92,7 @@ /** * The ratio of the width of the element that the translation animation * should happen over. For example, if the `widthRatio` is 3, the - * animation will take place on a distance 3 times the width of then + * animation will take place on a distance 3 times the width of the * element being swiped. */ widthRatio: { @@ -117,19 +117,13 @@ transition: { type: String, value: '300ms cubic-bezier(0.4, 0.0, 0.2, 1)' - }, - - /** - * The CSS transition property applied while swiping. - */ - transitionProperty: { - type: String, - value: 'opacity, transform' } }, - listeners: { - 'iron-swipe-away': '_swipeAway' + ready: function() { + this._transitionProperty = 'opacity, transform'; + this._swipeComplete = false; + this._direction = ''; }, attached: function() { @@ -148,12 +142,11 @@ if (node.nodeType === Node.TEXT_NODE) return; // Set up the animation. - node.style.transitionProperty = this.transitionProperty; - node.style.transition = node.style.webkitTransition = this.transition; + node.style.transitionProperty = this._transitionProperty; + node.style.transition = this.transition; this.listen(node, 'track', '_onTrack'); this.listen(node, 'transitionend', '_onTransitionEnd'); - this.listen(node, 'webkitTransitionEnd', '_onTransitionEnd'); }, _removeListeners: function(node) { @@ -161,17 +154,17 @@ return; this.unlisten(node, 'track', '_onTrack'); this.unlisten(node, 'transitionend', '_onTransitionEnd'); - this.unlisten(node, 'webkitTransitionEnd', '_onTransitionEnd'); }, detached: function() { if (this._nodeObserver) { Polymer.dom(this.$.content).unobserveNodes(this._nodeObserver); + this._nodeObserver = null; } }, _onTrack: function(event) { - if (this.disableSwipe) + if (this.disabled) return; var target = event.currentTarget; @@ -192,7 +185,7 @@ // Save the width of the element, so that we don't trigger a style // recalc every time we need it. this._nodeWidth = target.offsetWidth; - target.style.transition = target.style.webkitTransition = 'none'; + target.style.transition = 'none'; }, _trackMove: function(event, target) { @@ -200,8 +193,10 @@ }, _trackEnd: function(event, target) { - // The element is swiped away if it's moved halfway its total width - this._swipeEnd(Math.abs(event.dx) > this._nodeWidth / 2, event.dx > 0, target); + // 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._swipeEnd(target); }, _animate: function(x, target) { @@ -215,7 +210,7 @@ // transparent, and `x` is how much the element has already travelled. var opaqueDistance = Math.max(0, Math.abs(x) - this._nodeWidth * this.opacityRate); var opacity = Math.max(0, (totalDistance - opaqueDistance) / totalDistance); - target.style.opacity = opacity + target.style.opacity = opacity; var translate, rotate; @@ -233,20 +228,18 @@ rotate = ' rotate(' + deg + 'deg)'; } - target.style.transform = target.style.webkitTransform = translate + rotate; + this.transform(translate + rotate, target); }, - _swipeEnd: function(away, dir, target) { + _swipeEnd: function(target) { // Restore the original transition; - target.style.transition = target.style.webkitTransition = this.transition; - this.away = away; - this.direction = dir ? 'right' : 'left'; + target.style.transition = this.transition; - if (away) { + if (this._swipeComplete) { // 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(dir ? totalDistance : -totalDistance, target); + this._animate(this._direction ? totalDistance : -totalDistance, target); } else { this._animate(0, target); } @@ -255,14 +248,14 @@ _onTransitionEnd: function(event) { var target = event.currentTarget; - if (this.away && event.propertyName === 'opacity') { - this.fire('iron-swipe-away', {direction: this.direction, target:target}); + if (this._swipeComplete && event.propertyName === 'opacity') { + Polymer.dom(this).removeChild(target); + this.fire('iron-swipe', + { direction: this._direction > 0 ? 'right' : 'left', + target:target + }); } - event.stopPropagation(); - }, - - _swipeAway: function(event) { - Polymer.dom(this).removeChild(event.detail.target); } + }); diff --git a/test/basic.html b/test/basic.html index c71e32b..84b8c0d 100644 --- a/test/basic.html +++ b/test/basic.html @@ -16,20 +16,18 @@ - - @@ -52,9 +50,9 @@ - +