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

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