third_party/polymer/components/core-collapse/core-collapse.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11 `core-collapse` creates a collapsible block of content.  By default, the content
  12 will be collapsed.  Use `opened` or `toggle()` to show/hide the content.
  13
  14     <button on-click="{{toggle}}">toggle collapse</button>
  15
  16     <core-collapse id="collapse">
  17       Content goes here...
  18     </core-collapse>
  19
  20     ...
  21
  22     toggle: function() {
  23       this.$.collapse.toggle();
  24     }
  25
  26 `core-collapse` adjusts the height/width of the collapsible element to show/hide
  27 the content.  So avoid putting padding/margin/border on the collapsible directly,
  28 and instead put a div inside and style that.
  29
  30     <style>
  31       .collapse-content {
  32         padding: 15px;
  33         border: 1px solid #dedede;
  34       }
  35     </style>
  36
  37     <core-collapse>
  38       <div class="collapse-content">
  39         Content goes here...
  40       </div>
  41     </core-collapse>
  42
  43 @group Polymer Core Elements
  44 @element core-collapse
  45 -->
  46
  47 <link rel="import" href="../polymer/polymer.html">
  48
  49 <link rel="stylesheet" href="core-collapse.css" shim-shadowdom>
  50
  51 <polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize allowOverflow">
  52 <template>
  53
  54   <content></content>
  55
  56 </template>
  57 <script>
  58
  59   Polymer('core-collapse', {
  60
  61     /**
  62      * Fired when the `core-collapse`'s `opened` property changes.
  63      *
  64      * @event core-collapse-open
  65      */
  66
  67     /**
  68      * Fired when the target element has been resized as a result of the opened
  69      * state changing.
  70      *
  71      * @event core-resize
  72      */
  73
  74     /**
  75      * The target element that will be opened when the `core-collapse` is
  76      * opened. If unspecified, the `core-collapse` itself is the target.
  77      *
  78      * @attribute target
  79      * @type object
  80      * @default null
  81      */
  82     target: null,
  83
  84     /**
  85      * If true, the orientation is horizontal; otherwise is vertical.
  86      *
  87      * @attribute horizontal
  88      * @type boolean
  89      * @default false
  90      */
  91     horizontal: false,
  92
  93     /**
  94      * Set opened to true to show the collapse element and to false to hide it.
  95      *
  96      * @attribute opened
  97      * @type boolean
  98      * @default false
  99      */
 100     opened: false,
 101
 102     /**
 103      * Collapsing/expanding animation duration in second.
 104      *
 105      * @attribute duration
 106      * @type number
 107      * @default 0.33
 108      */
 109     duration: 0.33,
 110
 111     /**
 112      * If true, the size of the target element is fixed and is set
 113      * on the element.  Otherwise it will try to
 114      * use auto to determine the natural size to use
 115      * for collapsing/expanding.
 116      *
 117      * @attribute fixedSize
 118      * @type boolean
 119      * @default false
 120      */
 121     fixedSize: false,
 122
 123     /**
 124      * By default the collapsible element is set to overflow hidden. This helps
 125      * avoid element bleeding outside the region and provides consistent overflow
 126      * style across opened and closed states. Set this property to true to allow
 127      * the collapsible element to overflow when it's opened.
 128      *
 129      * @attribute allowOverflow
 130      * @type boolean
 131      * @default false
 132      */
 133     allowOverflow: false,
 134
 135     created: function() {
 136       this.transitionEndListener = this.transitionEnd.bind(this);
 137     },
 138
 139     ready: function() {
 140       this.target = this.target || this;
 141     },
 142
 143     domReady: function() {
 144       this.async(function() {
 145         this.afterInitialUpdate = true;
 146       });
 147     },
 148
 149     detached: function() {
 150       if (this.target) {
 151         this.removeListeners(this.target);
 152       }
 153     },
 154
 155     targetChanged: function(old) {
 156       if (old) {
 157         this.removeListeners(old);
 158       }
 159       if (!this.target) {
 160         return;
 161       }
 162       this.isTargetReady = !!this.target;
 163       this.classList.toggle('core-collapse-closed', this.target !== this);
 164       this.toggleOpenedStyle(false);
 165       this.horizontalChanged();
 166       this.addListeners(this.target);
 167       // set core-collapse-closed class initially to hide the target
 168       this.toggleClosedClass(true);
 169       this.update();
 170     },
 171
 172     addListeners: function(node) {
 173       node.addEventListener('transitionend', this.transitionEndListener);
 174     },
 175
 176     removeListeners: function(node) {
 177       node.removeEventListener('transitionend', this.transitionEndListener);
 178     },
 179
 180     horizontalChanged: function() {
 181       this.dimension = this.horizontal ? 'width' : 'height';
 182     },
 183
 184     openedChanged: function() {
 185       this.update();
 186       this.fire('core-collapse-open', this.opened);
 187     },
 188
 189     /**
 190      * Toggle the opened state.
 191      *
 192      * @method toggle
 193      */
 194     toggle: function() {
 195       this.opened = !this.opened;
 196     },
 197
 198     setTransitionDuration: function(duration) {
 199       var s = this.target.style;
 200       s.transition = duration ? (this.dimension + ' ' + duration + 's') : null;
 201       if (duration === 0) {
 202         this.async('transitionEnd');
 203       }
 204     },
 205
 206     transitionEnd: function() {
 207       if (this.opened && !this.fixedSize) {
 208         this.updateSize('auto', null);
 209       }
 210       this.setTransitionDuration(null);
 211       this.toggleOpenedStyle(this.opened);
 212       this.toggleClosedClass(!this.opened);
 213       this.asyncFire('core-resize', null, this.target);
 214     },
 215
 216     toggleClosedClass: function(closed) {
 217       this.hasClosedClass = closed;
 218       this.target.classList.toggle('core-collapse-closed', closed);
 219     },
 220
 221     toggleOpenedStyle: function(opened) {
 222       this.target.style.overflow = this.allowOverflow && opened ? '' : 'hidden';
 223     },
 224
 225     updateSize: function(size, duration, forceEnd) {
 226       this.setTransitionDuration(duration);
 227       this.calcSize();
 228       var s = this.target.style;
 229       var nochange = s[this.dimension] === size;
 230       s[this.dimension] = size;
 231       // transitonEnd will not be called if the size has not changed
 232       if (forceEnd && nochange) {
 233         this.transitionEnd();
 234       }
 235     },
 236
 237     update: function() {
 238       if (!this.target) {
 239         return;
 240       }
 241       if (!this.isTargetReady) {
 242         this.targetChanged();
 243       }
 244       this.horizontalChanged();
 245       this[this.opened ? 'show' : 'hide']();
 246     },
 247
 248     calcSize: function() {
 249       return this.target.getBoundingClientRect()[this.dimension] + 'px';
 250     },
 251
 252     getComputedSize: function() {
 253       return getComputedStyle(this.target)[this.dimension];
 254     },
 255
 256     show: function() {
 257       this.toggleClosedClass(false);
 258       // for initial update, skip the expanding animation to optimize
 259       // performance e.g. skip calcSize
 260       if (!this.afterInitialUpdate) {
 261         this.transitionEnd();
 262         return;
 263       }
 264       if (!this.fixedSize) {
 265         this.updateSize('auto', null);
 266         var s = this.calcSize();
 267         if (s == '0px') {
 268           this.transitionEnd();
 269           return;
 270         }
 271         this.updateSize(0, null);
 272       }
 273       this.async(function() {
 274         this.updateSize(this.size || s, this.duration, true);
 275       });
 276     },
 277
 278     hide: function() {
 279       this.toggleOpenedStyle(false);
 280       // don't need to do anything if it's already hidden
 281       if (this.hasClosedClass && !this.fixedSize) {
 282         return;
 283       }
 284       if (this.fixedSize) {
 285         // save the size before hiding it
 286         this.size = this.getComputedSize();
 287       } else {
 288         this.updateSize(this.calcSize(), null);
 289       }
 290       this.async(function() {
 291         this.updateSize(0, this.duration);
 292       });
 293     }
 294
 295   });
 296
 297 </script>
 298 </polymer-element>