third_party/polymer/v1_0/components/iron-collapse/iron-collapse.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12
  13 <!--
  14 `iron-collapse` creates a collapsible block of content.  By default, the content
  15 will be collapsed.  Use `opened` or `toggle()` to show/hide the content.
  16
  17     <button on-click="{{toggle}}">toggle collapse</button>
  18
  19     <iron-collapse id="collapse">
  20       <div>Content goes here...</div>
  21     </iron-collapse>
  22
  23     ...
  24
  25     toggle: function() {
  26       this.$.collapse.toggle();
  27     }
  28
  29 `iron-collapse` adjusts the height/width of the collapsible element to show/hide
  30 the content.  So avoid putting padding/margin/border on the collapsible directly,
  31 and instead put a div inside and style that.
  32
  33     <style>
  34       .collapse-content {
  35         padding: 15px;
  36         border: 1px solid #dedede;
  37       }
  38     </style>
  39
  40     <iron-collapse>
  41       <div class="collapse-content">
  42         <div>Content goes here...</div>
  43       </div>
  44     </iron-collapse>
  45
  46 @group Iron Elements
  47 @hero hero.svg
  48 @demo demo/index.html
  49 @element iron-collapse
  50 -->
  51
  52 <dom-module id="iron-collapse">
  53
  54   <style>
  55
  56     :host {
  57       display: block;
  58       transition-duration: 300ms;
  59     }
  60
  61     :host(.iron-collapse-closed) {
  62       display: none;
  63     }
  64
  65     :host(:not(.iron-collapse-opened)) {
  66       overflow: hidden;
  67     }
  68
  69   </style>
  70
  71   <template>
  72
  73     <content></content>
  74
  75   </template>
  76
  77 </dom-module>
  78
  79 <script>
  80
  81   Polymer({
  82
  83     is: 'iron-collapse',
  84
  85     properties: {
  86
  87       /**
  88        * If true, the orientation is horizontal; otherwise is vertical.
  89        *
  90        * @attribute horizontal
  91        */
  92       horizontal: {
  93         type: Boolean,
  94         value: false,
  95         observer: '_horizontalChanged'
  96       },
  97
  98       /**
  99        * Set opened to true to show the collapse element and to false to hide it.
 100        *
 101        * @attribute opened
 102        */
 103       opened: {
 104         type: Boolean,
 105         value: false,
 106         notify: true,
 107         observer: '_openedChanged'
 108       }
 109
 110     },
 111
 112     hostAttributes: {
 113       role: 'group',
 114       'aria-expanded': 'false'
 115     },
 116
 117     listeners: {
 118       transitionend: '_transitionEnd'
 119     },
 120
 121     ready: function() {
 122       // Avoid transition at the beginning e.g. page loads and enable
 123       // transitions only after the element is rendered and ready.
 124       this._enableTransition = true;
 125     },
 126
 127     /**
 128      * Toggle the opened state.
 129      *
 130      * @method toggle
 131      */
 132     toggle: function() {
 133       this.opened = !this.opened;
 134     },
 135
 136     show: function() {
 137       this.toggleClass('iron-collapse-closed', false);
 138       this.updateSize('auto', false);
 139       var s = this._calcSize();
 140       this.updateSize('0px', false);
 141       // force layout to ensure transition will go
 142       this.offsetHeight;
 143       this.updateSize(s, true);
 144     },
 145
 146     hide: function() {
 147       this.toggleClass('iron-collapse-opened', false);
 148       this.updateSize(this._calcSize(), false);
 149       // force layout to ensure transition will go
 150       this.offsetHeight;
 151       this.updateSize('0px', true);
 152     },
 153
 154     updateSize: function(size, animated) {
 155       this.enableTransition(animated);
 156       var s = this.style;
 157       var nochange = s[this.dimension] === size;
 158       s[this.dimension] = size;
 159       if (animated && nochange) {
 160         this._transitionEnd();
 161       }
 162     },
 163
 164     enableTransition: function(enabled) {
 165       this.style.transitionDuration = (enabled && this._enableTransition) ? '' : '0s';
 166     },
 167
 168     _horizontalChanged: function() {
 169       this.dimension = this.horizontal ? 'width' : 'height';
 170       this.style.transitionProperty = this.dimension;
 171     },
 172
 173     _openedChanged: function() {
 174       this[this.opened ? 'show' : 'hide']();
 175       this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
 176
 177     },
 178
 179     _transitionEnd: function() {
 180       if (this.opened) {
 181         this.updateSize('auto', false);
 182       }
 183       this.toggleClass('iron-collapse-closed', !this.opened);
 184       this.toggleClass('iron-collapse-opened', this.opened);
 185       this.enableTransition(false);
 186     },
 187
 188     _calcSize: function() {
 189       return this.getBoundingClientRect()[this.dimension] + 'px';
 190     },
 191
 192
 193   });
 194
 195 </script>