| Index: polymer_1.0.4/bower_components/iron-collapse/iron-collapse.html
|
| diff --git a/polymer_1.0.4/bower_components/iron-collapse/iron-collapse.html b/polymer_1.0.4/bower_components/iron-collapse/iron-collapse.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..b8f72fd77b4d42cb6a35d9e3317a59ee4a6aa080
|
| --- /dev/null
|
| +++ b/polymer_1.0.4/bower_components/iron-collapse/iron-collapse.html
|
| @@ -0,0 +1,195 @@
|
| +<!--
|
| +@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.toggleClass('iron-collapse-closed', false);
|
| + this.updateSize('auto', false);
|
| + var s = this._calcSize();
|
| + this.updateSize('0px', false);
|
| + // force layout to ensure transition will go
|
| + this.offsetHeight;
|
| + this.updateSize(s, true);
|
| + },
|
| +
|
| + hide: function() {
|
| + this.toggleClass('iron-collapse-opened', false);
|
| + this.updateSize(this._calcSize(), false);
|
| + // force layout to ensure transition will go
|
| + this.offsetHeight;
|
| + this.updateSize('0px', true);
|
| + },
|
| +
|
| + 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() {
|
| + this[this.opened ? 'show' : 'hide']();
|
| + this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
|
| +
|
| + },
|
| +
|
| + _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>
|
|
|