OLD | NEW |
1 Polymer({ | 1 Polymer({ |
2 is: 'paper-tabs', | 2 is: 'paper-tabs', |
3 | 3 |
4 behaviors: [ | 4 behaviors: [ |
5 Polymer.IronResizableBehavior, | 5 Polymer.IronResizableBehavior, |
6 Polymer.IronMenubarBehavior | 6 Polymer.IronMenubarBehavior |
7 ], | 7 ], |
8 | 8 |
9 properties: { | 9 properties: { |
10 /** | 10 /** |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
59 }, | 59 }, |
60 | 60 |
61 /** | 61 /** |
62 * If true, the tabs are aligned to bottom (the selection bar appears at
the top). | 62 * If true, the tabs are aligned to bottom (the selection bar appears at
the top). |
63 */ | 63 */ |
64 alignBottom: { | 64 alignBottom: { |
65 type: Boolean, | 65 type: Boolean, |
66 value: false | 66 value: false |
67 }, | 67 }, |
68 | 68 |
69 /** | |
70 * Gets or sets the selected element. The default is to use the index of
the item. | |
71 */ | |
72 selected: { | |
73 type: String, | |
74 notify: true | |
75 }, | |
76 | |
77 selectable: { | 69 selectable: { |
78 type: String, | 70 type: String, |
79 value: 'paper-tab' | 71 value: 'paper-tab' |
80 }, | 72 }, |
81 | 73 |
82 _step: { | 74 _step: { |
83 type: Number, | 75 type: Number, |
84 value: 10 | 76 value: 10 |
85 }, | 77 }, |
86 | 78 |
(...skipping 181 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
268 } | 260 } |
269 | 261 |
270 var oldRect = old.getBoundingClientRect(); | 262 var oldRect = old.getBoundingClientRect(); |
271 var oldIndex = this.items.indexOf(old); | 263 var oldIndex = this.items.indexOf(old); |
272 var index = this.items.indexOf(tab); | 264 var index = this.items.indexOf(tab); |
273 var m = 5; | 265 var m = 5; |
274 | 266 |
275 // bar animation: expand | 267 // bar animation: expand |
276 this.$.selectionBar.classList.add('expand'); | 268 this.$.selectionBar.classList.add('expand'); |
277 | 269 |
278 if (oldIndex < index) { | 270 var moveRight = oldIndex < index; |
| 271 var isRTL = this._isRTL; |
| 272 if (isRTL) { |
| 273 moveRight = !moveRight; |
| 274 } |
| 275 |
| 276 if (moveRight) { |
279 this._positionBar(this._calcPercent(tabRect.left + tabRect.width - old
Rect.left, w) - m, | 277 this._positionBar(this._calcPercent(tabRect.left + tabRect.width - old
Rect.left, w) - m, |
280 this._left); | 278 this._left); |
281 } else { | 279 } else { |
282 this._positionBar(this._calcPercent(oldRect.left + oldRect.width - tab
Rect.left, w) - m, | 280 this._positionBar(this._calcPercent(oldRect.left + oldRect.width - tab
Rect.left, w) - m, |
283 this._calcPercent(tabOffsetLeft, w) + m); | 281 this._calcPercent(tabOffsetLeft, w) + m); |
284 } | 282 } |
285 | 283 |
286 if (this.scrollable) { | 284 if (this.scrollable) { |
287 this._scrollToSelectedIfNeeded(tabRect.width, tabOffsetLeft); | 285 this._scrollToSelectedIfNeeded(tabRect.width, tabOffsetLeft); |
288 } | 286 } |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
321 if (cl.contains('expand')) { | 319 if (cl.contains('expand')) { |
322 cl.remove('expand'); | 320 cl.remove('expand'); |
323 cl.add('contract'); | 321 cl.add('contract'); |
324 this._positionBar(this._pos.width, this._pos.left); | 322 this._positionBar(this._pos.width, this._pos.left); |
325 // bar animation done | 323 // bar animation done |
326 } else if (cl.contains('contract')) { | 324 } else if (cl.contains('contract')) { |
327 cl.remove('contract'); | 325 cl.remove('contract'); |
328 } | 326 } |
329 } | 327 } |
330 }); | 328 }); |
OLD | NEW |