bower_components/iron-collapse/iron-collapse.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<!--
`iron-collapse` creates a collapsible block of content.  By default, the content
will be collapsed.  Use `opened` or `toggle()` to show/hide the content.
    <button on-click="toggle">toggle collapse</button>
    <iron-collapse id="collapse">
      <div>Content goes here...</div>
    </iron-collapse>
    ...
    toggle: function() {
      this.$.collapse.toggle();
    }
`iron-collapse` adjusts the height/width of the collapsible element to show/hide
the content.  So avoid putting padding/margin/border on the collapsible directly,
and instead put a div inside and style that.
    <style>
      .collapse-content {
        padding: 15px;
        border: 1px solid #dedede;
      }
    </style>
    <iron-collapse>
      <div class="collapse-content">
        <div>Content goes here...</div>
      </div>
    </iron-collapse>
@group Iron Elements
@hero hero.svg
@demo demo/index.html
@element iron-collapse
-->
<dom-module id="iron-collapse">
  <style>
    :host {
      display: block;
      transition-duration: 300ms;
    }
    :host(.iron-collapse-closed) {
      display: none;
    }
    :host(:not(.iron-collapse-opened)) {
      overflow: hidden;
    }
  </style>
  <template>
    <content></content>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'iron-collapse',
    properties: {
      /**
       * If true, the orientation is horizontal; otherwise is vertical.
       *
       * @attribute horizontal
       */
      horizontal: {
        type: Boolean,
        value: false,
        observer: '_horizontalChanged'
      },
      /**
       * Set opened to true to show the collapse element and to false to hide it.
       *
       * @attribute opened
       */
      opened: {
        type: Boolean,
        value: false,
        notify: true,
        observer: '_openedChanged'
      }
    },
    hostAttributes: {
      role: 'group',
      'aria-expanded': 'false'
    },
    listeners: {
      transitionend: '_transitionEnd'
    },
    ready: function() {
      // Avoid transition at the beginning e.g. page loads and enable
      // transitions only after the element is rendered and ready.
      this._enableTransition = true;
    },
    /**
     * Toggle the opened state.
     *
     * @method toggle
     */
    toggle: function() {
      this.opened = !this.opened;
    },
    show: function() {
      this.opened = true;    
    },
    hide: function() {
      this.opened = false;    
    },
    updateSize: function(size, animated) {
      this.enableTransition(animated);
      var s = this.style;
      var nochange = s[this.dimension] === size;
      s[this.dimension] = size;
      if (animated && nochange) {
        this._transitionEnd();
      }
    },
    enableTransition: function(enabled) {
      this.style.transitionDuration = (enabled && this._enableTransition) ? '' : '0s';
    },
    _horizontalChanged: function() {
      this.dimension = this.horizontal ? 'width' : 'height';
      this.style.transitionProperty = this.dimension;
    },
    _openedChanged: function() {
      if (this.opened) {
        this.setAttribute('aria-expanded', 'true');
        this.setAttribute('aria-hidden', 'false');
        this.toggleClass('iron-collapse-closed', false);
        this.updateSize('auto', false);
        var s = this._calcSize();
        this.updateSize('0px', false);
        // force layout to ensure transition will go
        /** @suppress {suspiciousCode} */ this.offsetHeight;
        this.updateSize(s, true);
        // focus the current collapse
        this.focus();
      } else {
        this.setAttribute('aria-expanded', 'false');
        this.setAttribute('aria-hidden', 'true');
        this.toggleClass('iron-collapse-opened', false);
        this.updateSize(this._calcSize(), false);
        // force layout to ensure transition will go
        /** @suppress {suspiciousCode} */ this.offsetHeight;
        this.updateSize('0px', true);
      }
    },
    _transitionEnd: function() {
      if (this.opened) {
        this.updateSize('auto', false);
      }
      this.toggleClass('iron-collapse-closed', !this.opened);
      this.toggleClass('iron-collapse-opened', this.opened);
      this.enableTransition(false);
    },
    _calcSize: function() {
      return this.getBoundingClientRect()[this.dimension] + 'px';
    },
  });
</script>