src/third_party/polymer/components-chromium/paper-tabs/paper-tabs-extracted.js

   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