1
2
3  Polymer('paper-tabs', {
4
5    /**
6     * If true, ink effect is disabled.
7     *
8     * @attribute noink
9     * @type boolean
10     * @default false
11     */
12    noink: false,
13
14    /**
15     * If true, the bottom bar to indicate the selected tab will not be shown.
16     *
17     * @attribute nobar
18     * @type boolean
19     * @default false
20     */
21    nobar: false,
22
23    activateEvent: 'down',
24
25    nostretch: false,
26
27    selectedIndexChanged: function(old) {
28      var s = this.$.selectionBar.style;
29
30      if (!this.selectedItem) {
31        s.width = 0;
32        s.left = 0;
33        return;
34      }
35
36      var w = 100 / this.items.length;
37
38      if (this.nostretch || old === null || old === -1) {
39        s.width = w + '%';
40        s.left = this.selectedIndex * w + '%';
41        return;
42      }
43
44      var m = 5;
45      this.$.selectionBar.classList.add('expand');
46      if (old < this.selectedIndex) {
47        s.width = w + w * (this.selectedIndex - old) - m + '%';
48      } else {
49        s.width = w + w * (old - this.selectedIndex) - m + '%';
50        s.left = this.selectedIndex * w + m + '%';
51      }
52    },
53
54    barTransitionEnd: function() {
55      var cl = this.$.selectionBar.classList;
56      if (cl.contains('expand')) {
57        cl.remove('expand');
58        cl.add('contract');
59        var s = this.$.selectionBar.style;
60        var w = 100 / this.items.length;
61        s.width = w + '%';
62        s.left = this.selectedIndex * w + '%';
63      } else if (cl.contains('contract')) {
64        cl.remove('contract');
65      }
66    }
67
68  });
69
70