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.toggleClass('iron-collapse-closed', false);
  60       this.updateSize('auto', false);
  61       var s = this._calcSize();
  62       this.updateSize('0px', false);
  63       // force layout to ensure transition will go
  64       this.offsetHeight;
  65       this.updateSize(s, true);
  66     },
  67
  68     hide: function() {
  69       this.toggleClass('iron-collapse-opened', false);
  70       this.updateSize(this._calcSize(), false);
  71       // force layout to ensure transition will go
  72       this.offsetHeight;
  73       this.updateSize('0px', true);
  74     },
  75
  76     updateSize: function(size, animated) {
  77       this.enableTransition(animated);
  78       var s = this.style;
  79       var nochange = s[this.dimension] === size;
  80       s[this.dimension] = size;
  81       if (animated && nochange) {
  82         this._transitionEnd();
  83       }
  84     },
  85
  86     enableTransition: function(enabled) {
  87       this.style.transitionDuration = (enabled && this._enableTransition) ? '' : '0s';
  88     },
  89
  90     _horizontalChanged: function() {
  91       this.dimension = this.horizontal ? 'width' : 'height';
  92       this.style.transitionProperty = this.dimension;
  93     },
  94
  95     _openedChanged: function() {
  96       this[this.opened ? 'show' : 'hide']();
  97       this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
  98
  99     },
 100
 101     _transitionEnd: function() {
 102       if (this.opened) {
 103         this.updateSize('auto', false);
 104       }
 105       this.toggleClass('iron-collapse-closed', !this.opened);
 106       this.toggleClass('iron-collapse-opened', this.opened);
 107       this.enableTransition(false);
 108     },
 109
 110     _calcSize: function() {
 111       return this.getBoundingClientRect()[this.dimension] + 'px';
 112     },
 113
 114
 115   });
 116