|
65 | 65 | </dom-module> |
66 | 66 |
|
67 | 67 | <script> |
68 | | - |
69 | 68 | Polymer({ |
70 | 69 | is: 'iron-swipeable-container', |
71 | 70 |
|
|
81 | 80 | * options are `curve | horizontal`. If left unspecified, the default |
82 | 81 | * is assumed to be `horizontal`. |
83 | 82 | */ |
84 | | - swipeStyle: { |
85 | | - type: String, |
86 | | - value: 'horizontal' |
87 | | - }, |
| 83 | + swipeStyle: {type: String, value: 'horizontal'}, |
88 | 84 |
|
89 | 85 | /** |
90 | 86 | * If true, then the container will not allow swiping. |
91 | 87 | */ |
92 | | - disabled: { |
93 | | - type: Boolean, |
94 | | - value: false |
95 | | - }, |
| 88 | + disabled: {type: Boolean, value: false}, |
96 | 89 |
|
97 | 90 | /** |
98 | 91 | * The ratio of the width of the element that the translation animation |
99 | 92 | * should happen over. For example, if the `widthRatio` is 3, the |
100 | 93 | * animation will take place on a distance 3 times the width of the |
101 | 94 | * element being swiped. |
102 | 95 | */ |
103 | | - widthRatio: { |
104 | | - type: Number, |
105 | | - value: 3 |
106 | | - }, |
| 96 | + widthRatio: {type: Number, value: 3}, |
107 | 97 |
|
108 | 98 | /** |
109 | 99 | * The ratio of the total animation distance after which the opacity |
110 | 100 | * transformation begins. For example, if the `widthRatio` is 1 and |
111 | 101 | * the `opacityRate` is 0.5, then the element needs to travel half its |
112 | 102 | * width before its opacity starts decreasing. |
113 | 103 | */ |
114 | | - opacityRate: { |
115 | | - type: Number, |
116 | | - value: 0.2 |
117 | | - }, |
| 104 | + opacityRate: {type: Number, value: 0.2}, |
118 | 105 |
|
119 | 106 | /** |
120 | 107 | * The CSS transition applied while swiping. |
121 | 108 | */ |
122 | | - transition: { |
123 | | - type: String, |
124 | | - value: '300ms cubic-bezier(0.4, 0.0, 1, 1)' |
125 | | - } |
| 109 | + transition: {type: String, value: '300ms cubic-bezier(0.4, 0.0, 1, 1)'} |
126 | 110 | }, |
127 | 111 |
|
128 | 112 | ready: function() { |
|
132 | 116 | }, |
133 | 117 |
|
134 | 118 | attached: function() { |
135 | | - this._nodeObserver = Polymer.dom(this.$.content).observeNodes( |
136 | | - function(mutations) { |
| 119 | + this._nodeObserver = |
| 120 | + Polymer.dom(this.$.content).observeNodes(function(mutations) { |
137 | 121 | for (var i = 0; i < mutations.addedNodes.length; i++) { |
138 | 122 | this._addListeners(mutations.addedNodes[i]); |
139 | 123 | } |
|
214 | 198 | // Opacity distance overflow. `this._nodeWidth * this.opacityRate` is the |
215 | 199 | // total distance the element needs to travel to become completely |
216 | 200 | // transparent, and `x` is how much the element has already travelled. |
217 | | - var opaqueDistance = Math.max(0, Math.abs(x) - this._nodeWidth * this.opacityRate); |
| 201 | + var opaqueDistance = |
| 202 | + Math.max(0, Math.abs(x) - this._nodeWidth * this.opacityRate); |
218 | 203 | var opacity = Math.max(0, (totalDistance - opaqueDistance) / totalDistance); |
219 | 204 | target.style.opacity = opacity; |
220 | 205 |
|
|
227 | 212 | // Assume the element will be completely transparent at 90 degrees, so |
228 | 213 | // figure out the rotation and vertical displacement needed to |
229 | 214 | // achieve that. |
230 | | - var y = totalDistance - Math.sqrt(totalDistance * totalDistance - opaqueDistance * opaqueDistance); |
| 215 | + var y = totalDistance - |
| 216 | + Math.sqrt( |
| 217 | + totalDistance * totalDistance - opaqueDistance * opaqueDistance); |
231 | 218 | var deg = (1 - opacity) * direction * 90; |
232 | 219 |
|
233 | 220 | translate = 'translate3d(' + x + 'px,' + y + 'px,0)'; |
|
242 | 229 | target.style.transition = this.transition; |
243 | 230 |
|
244 | 231 | if (this._swipeComplete) { |
245 | | - // If the element is ready to be swiped away, then translate it to the full |
246 | | - // transparency distance. |
| 232 | + // If the element is ready to be swiped away, then translate it to the |
| 233 | + // full transparency distance. |
247 | 234 | var totalDistance = this._nodeWidth * this.widthRatio; |
248 | 235 | this._animate(this._direction ? totalDistance : -totalDistance, target); |
249 | 236 | } else { |
|
256 | 243 |
|
257 | 244 | if (this._swipeComplete && event.propertyName === 'opacity') { |
258 | 245 | Polymer.dom(this).removeChild(target); |
259 | | - this.fire('iron-swipe', |
260 | | - { direction: this._direction > 0 ? 'right' : 'left', |
261 | | - target:target |
262 | | - }); |
| 246 | + this.fire( |
| 247 | + 'iron-swipe', |
| 248 | + {direction: this._direction > 0 ? 'right' : 'left', target: target}); |
263 | 249 | } |
264 | 250 | } |
265 | 251 |
|
|
0 commit comments