third_party/polymer/v1_0/components-chromium/iron-collapse/iron-collapse-extracted.js

   1
   2
   3   Polymer({
   4
   5     is: 'iron-collapse',
   6
   7     properties: {
   8
   9       /**
  10        * If true, the orientation is horizontal; otherwise is vertical.
  11        *
  12        * @attribute horizontal
  13        */
  14       horizontal: {
  15         type: Boolean,
  16         value: false,
  17         observer: '_horizontalChanged'
  18       },
  19
  20       /**
  21        * Set opened to true to show the collapse element and to false to hide it.
  22        *
  23        * @attribute opened
  24        */
  25       opened: {
  26         type: Boolean,
  27         value: false,
  28         notify: true,
  29         observer: '_openedChanged'
  30       }
  31
  32     },
  33
  34     hostAttributes: {
  35       role: 'group',
  36       'aria-expanded': 'false'
  37     },
  38
  39     listeners: {
  40       transitionend: '_transitionEnd'
  41     },
  42
  43     ready: function() {
  44       // Avoid transition at the beginning e.g. page loads and enable
  45       // transitions only after the element is rendered and ready.
  46       this._enableTransition = true;
  47     },
  48
  49     /**
  50      * Toggle the opened state.
  51      *
  52      * @method toggle
  53      */
  54     toggle: function() {
  55       this.opened = !this.opened;
  56     },
  57
  58     show: function() {
  59       this.opened = true;
  60     },
  61
  62     hide: function() {
  63       this.opened = false;
  64     },
  65
  66     updateSize: function(size, animated) {
  67       this.enableTransition(animated);
  68       var s = this.style;
  69       var nochange = s[this.dimension] === size;
  70       s[this.dimension] = size;
  71       if (animated && nochange) {
  72         this._transitionEnd();
  73       }
  74     },
  75
  76     enableTransition: function(enabled) {
  77       this.style.transitionDuration = (enabled && this._enableTransition) ? '' : '0s';
  78     },
  79
  80     _horizontalChanged: function() {
  81       this.dimension = this.horizontal ? 'width' : 'height';
  82       this.style.transitionProperty = this.dimension;
  83     },
  84
  85     _openedChanged: function() {
  86       if (this.opened) {
  87         this.toggleClass('iron-collapse-closed', false);
  88         this.updateSize('auto', false);
  89         var s = this._calcSize();
  90         this.updateSize('0px', false);
  91         // force layout to ensure transition will go
  92         /** @suppress {suspiciousCode} */ this.offsetHeight;
  93         this.updateSize(s, true);
  94       }
  95       else {
  96         this.toggleClass('iron-collapse-opened', false);
  97         this.updateSize(this._calcSize(), false);
  98         // force layout to ensure transition will go
  99         /** @suppress {suspiciousCode} */ this.offsetHeight;
 100         this.updateSize('0px', true);
 101       }
 102       this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
 103
 104     },
 105
 106     _transitionEnd: function() {
 107       if (this.opened) {
 108         this.updateSize('auto', false);
 109       }
 110       this.toggleClass('iron-collapse-closed', !this.opened);
 111       this.toggleClass('iron-collapse-opened', this.opened);
 112       this.enableTransition(false);
 113     },
 114
 115     _calcSize: function() {
 116       return this.getBoundingClientRect()[this.dimension] + 'px';
 117     },
 118
 119
 120   });
 121