Skip to content
This repository has been archived by the owner on May 15, 2023. It is now read-only.

Commit

Permalink
add contributing.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@notwaldorf
notwaldorf committed Nov 16, 2015
1 parent a974d5c commit cb1ee37
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 72 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
</head>
<body unresolved>
<div class="vertical-section-container centered">
<h4>Curve swipe</h4>
<h4>Horizontal swipe</h4>
<div class="vertical-section">
<iron-swipeable-container>
<div class="item swipe">You can swipe native elements. This is a plain div.</div>
Expand All @@ -73,9 +73,9 @@ <h4>Curve swipe</h4>
</iron-swipeable-container>
</div>

<h4>Horizontal swipe</h4>
<h4>Curve swipe</h4>
<div class="vertical-section">
<iron-swipeable-container swipe-style="horizontal">
<iron-swipeable-container swipe-style="curve">
<div class="item swipe">You can swipe native elements. This is a plain div.</div>

<paper-card class="swipe" heading="Swipe me!">
Expand All @@ -96,7 +96,7 @@ <h4>Horizontal swipe</h4>

<h4>Swipe disabled</h4>
<div class="vertical-section">
<iron-swipeable-container disable-swipe>
<iron-swipeable-container disabled>
<div class="item swipe">You can swipe native elements. This is a plain div.</div>

<paper-card class="swipe" heading="Swipe me!">
Expand Down
69 changes: 31 additions & 38 deletions iron-swipeable-container.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,32 +67,32 @@
/**
* 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
},

/**
* 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: {
Expand All @@ -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() {
Expand All @@ -148,30 +142,29 @@
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) {
if (node.nodeType === Node.TEXT_NODE)
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;
Expand All @@ -192,16 +185,18 @@
// 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) {
this._animate(event.dx, target);
},

_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) {
Expand All @@ -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;

Expand All @@ -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);
}
Expand All @@ -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);
}

});
</script>
56 changes: 27 additions & 29 deletions test/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,18 @@

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>

<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../iron-swipeable-container.html">
<link rel="import" href="test-element.html">

</head>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
}
div {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<body>

Expand All @@ -52,9 +50,9 @@
</test-fixture>


<test-fixture id="no-swipe" disable-swipe>
<test-fixture id="no-swipe">
<template>
<iron-swipeable-container>
<iron-swipeable-container disabled>
<div id="native">Hello</div>
<test-element id="custom"></test-element>
</iron-swipeable-container>
Expand All @@ -70,16 +68,16 @@

Polymer.Base.async(function() {
var swipeEventHandler = sinon.spy();
container.addEventListener('iron-swipe-away', swipeEventHandler);
container.addEventListener('iron-swipe', swipeEventHandler);

expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
MockInteractions.track(element, 10, 0);

setTimeout(function(){
Polymer.Base.async(function(){
expect(swipeEventHandler.callCount).to.be.equal(0);
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
done();
}, 100);
}, 1);
});
});

Expand All @@ -90,7 +88,7 @@
Polymer.Base.async(function() {
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);

container.addEventListener('iron-swipe-away', function(event) {
container.addEventListener('iron-swipe', function(event) {
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(1);
done();
});
Expand All @@ -105,16 +103,16 @@

Polymer.Base.async(function() {
var swipeEventHandler = sinon.spy();
container.addEventListener('iron-swipe-away', swipeEventHandler);
container.addEventListener('iron-swipe', swipeEventHandler);

expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
MockInteractions.track(element, 60, 0); // this amount would normally swipe.

setTimeout(function(){
Polymer.Base.async(function(){
expect(swipeEventHandler.callCount).to.be.equal(0);
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
done();
}, 100);
}, 1);
});
});
});
Expand All @@ -125,17 +123,17 @@
var element = container.querySelector('#custom');

var swipeEventHandler = sinon.spy();
container.addEventListener('iron-swipe-away', swipeEventHandler);
container.addEventListener('iron-swipe', swipeEventHandler);

Polymer.Base.async(function() {
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
MockInteractions.track(element, 10, 0);

setTimeout(function(){
Polymer.Base.async(function(){
expect(swipeEventHandler.callCount).to.be.equal(0);
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
done();
}, 100);
}, 1);
});
});

Expand All @@ -146,7 +144,7 @@
Polymer.Base.async(function() {
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);

container.addEventListener('iron-swipe-away', function(event) {
container.addEventListener('iron-swipe', function(event) {
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(1);
done();
});
Expand All @@ -161,16 +159,16 @@

Polymer.Base.async(function() {
var swipeEventHandler = sinon.spy();
container.addEventListener('iron-swipe-away', swipeEventHandler);
container.addEventListener('iron-swipe', swipeEventHandler);

expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
MockInteractions.track(element, 60, 0); // this amount would normally swipe.

setTimeout(function(){
Polymer.Base.async(function(){
expect(swipeEventHandler.callCount).to.be.equal(0);
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
done();
}, 100);
}, 1);
});
});
});
Expand All @@ -181,17 +179,17 @@
var element = container.querySelector('#native');

var swipeEventHandler = sinon.spy();
container.addEventListener('iron-swipe-away', swipeEventHandler);
container.addEventListener('iron-swipe', swipeEventHandler);

Polymer.Base.async(function() {
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
MockInteractions.track(element, 60, 0);

setTimeout(function(){
Polymer.Base.async(function(){
expect(swipeEventHandler.callCount).to.be.equal(0);
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
done();
}, 100);
}, 1);
});
});

Expand All @@ -200,17 +198,17 @@
var element = container.querySelector('#custom');

var swipeEventHandler = sinon.spy();
container.addEventListener('iron-swipe-away', swipeEventHandler);
container.addEventListener('iron-swipe', swipeEventHandler);

Polymer.Base.async(function() {
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
MockInteractions.track(element, 60, 0);

setTimeout(function(){
Polymer.Base.async(function(){
expect(swipeEventHandler.callCount).to.be.equal(0);
expect(Polymer.dom(container).queryDistributedElements('*').length).to.be.equal(2);
done();
}, 100);
}, 1);
});
});
});
Expand Down

0 comments on commit cb1ee37

Please sign in to comment.