From a974d5c4a536e986914493675aae59ea22af6b31 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Tue, 10 Nov 2015 11:12:01 -0800 Subject: [PATCH 1/2] swipe ALL the things! --- .gitignore | 1 + README.md | 2 - bower.json | 37 +++++ demo/index.html | 119 +++++++++++++++ index.html | 28 ++++ iron-swipeable-container.html | 268 ++++++++++++++++++++++++++++++++++ test/basic.html | 219 +++++++++++++++++++++++++++ test/index.html | 25 ++++ test/test-element.html | 35 +++++ 9 files changed, 732 insertions(+), 2 deletions(-) create mode 100644 .gitignore create mode 100644 bower.json create mode 100644 demo/index.html create mode 100644 index.html create mode 100644 iron-swipeable-container.html create mode 100644 test/basic.html create mode 100644 test/index.html create mode 100644 test/test-element.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fbe05fc --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +bower_components/ diff --git a/README.md b/README.md index 492fc76..bdca6f4 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ - + + + iron-swipeable-container demo + + + + + + + + + + + + + + + +
+

Curve swipe

+
+ +
You can swipe native elements. This is a plain div.
+ + +
+ You can automatically swipe custom elements, too. This is a paper-card. +
+ + + +
+ This is another paper-card. Hello! +
+ + +
This is another div but it can't be swiped.
+ +
+ +

Horizontal swipe

+
+ +
You can swipe native elements. This is a plain div.
+ + +
+ You can automatically swipe custom elements, too. This is a paper-card. +
+ + + +
+ This is another paper-card. Hello! +
+ + +
This is another div but it can't be swiped.
+ +
+ +

Swipe disabled

+
+ +
You can swipe native elements. This is a plain div.
+ + +
+ You can automatically swipe custom elements, too. This is a paper-card. +
+ + + +
+ This is another paper-card. Hello! +
+ + +
This is another div.
+ +
+
+ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..2e3d36d --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + + + + iron-swipeable-container + + + + + + + + + + + diff --git a/iron-swipeable-container.html b/iron-swipeable-container.html new file mode 100644 index 0000000..8348dc9 --- /dev/null +++ b/iron-swipeable-container.html @@ -0,0 +1,268 @@ + + + + + + + + + + + diff --git a/test/basic.html b/test/basic.html new file mode 100644 index 0000000..c71e32b --- /dev/null +++ b/test/basic.html @@ -0,0 +1,219 @@ + + + + + + iron-swipeable-container tests + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..16d0d2c --- /dev/null +++ b/test/index.html @@ -0,0 +1,25 @@ + + + + + + + iron-swipeable-container tests + + + + + + diff --git a/test/test-element.html b/test/test-element.html new file mode 100644 index 0000000..c1c037f --- /dev/null +++ b/test/test-element.html @@ -0,0 +1,35 @@ + + + + + + + + + + From cb1ee37c0e6a08ca79298c2db59a6cf83cc36f24 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Tue, 10 Nov 2015 13:48:39 -0800 Subject: [PATCH 2/2] add contributing.md --- bower.json | 2 +- demo/index.html | 8 ++-- iron-swipeable-container.html | 69 ++++++++++++++++------------------- test/basic.html | 56 ++++++++++++++-------------- 4 files changed, 63 insertions(+), 72 deletions(-) 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 @@ - +