| Index: polymer_1.2.3/bower_components/iron-collapse/iron-collapse.html
|
| diff --git a/polymer_1.0.4/bower_components/iron-collapse/iron-collapse.html b/polymer_1.2.3/bower_components/iron-collapse/iron-collapse.html
|
| similarity index 59%
|
| copy from polymer_1.0.4/bower_components/iron-collapse/iron-collapse.html
|
| copy to polymer_1.2.3/bower_components/iron-collapse/iron-collapse.html
|
| index b8f72fd77b4d42cb6a35d9e3317a59ee4a6aa080..34637184381abf761868147facb6e45136f59658 100644
|
| --- a/polymer_1.0.4/bower_components/iron-collapse/iron-collapse.html
|
| +++ b/polymer_1.2.3/bower_components/iron-collapse/iron-collapse.html
|
| @@ -14,7 +14,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| `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>
|
| + <button on-click="toggle">toggle collapse</button>
|
|
|
| <iron-collapse id="collapse">
|
| <div>Content goes here...</div>
|
| @@ -56,16 +56,13 @@ and instead put a div inside and style that.
|
| :host {
|
| display: block;
|
| transition-duration: 300ms;
|
| + overflow: auto;
|
| }
|
|
|
| :host(.iron-collapse-closed) {
|
| display: none;
|
| }
|
|
|
| - :host(:not(.iron-collapse-opened)) {
|
| - overflow: hidden;
|
| - }
|
| -
|
| </style>
|
|
|
| <template>
|
| @@ -105,12 +102,22 @@ and instead put a div inside and style that.
|
| value: false,
|
| notify: true,
|
| observer: '_openedChanged'
|
| - }
|
| + },
|
| +
|
| + /**
|
| + * Set noAnimation to true to disable animations
|
| + *
|
| + * @attribute noAnimation
|
| + */
|
| + noAnimation: {
|
| + type: Boolean
|
| + },
|
|
|
| },
|
|
|
| hostAttributes: {
|
| role: 'group',
|
| + 'aria-hidden': 'true',
|
| 'aria-expanded': 'false'
|
| },
|
|
|
| @@ -118,10 +125,9 @@ and instead put a div inside and style that.
|
| 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;
|
| + attached: function() {
|
| + // It will take care of setting correct classes and styles.
|
| + this._transitionEnd();
|
| },
|
|
|
| /**
|
| @@ -134,35 +140,56 @@ and instead put a div inside and style that.
|
| },
|
|
|
| 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);
|
| + this.opened = 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);
|
| + 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();
|
| + // No change!
|
| + if (this.style[this.dimension] === size) {
|
| + return;
|
| }
|
| +
|
| + this._updateTransition(false);
|
| + // If we can animate, must do some prep work.
|
| + if (animated && !this.noAnimation) {
|
| + // Animation will start at the current size.
|
| + var startSize = this._calcSize();
|
| + // For `auto` we must calculate what is the final size for the animation.
|
| + // After the transition is done, _transitionEnd will set the size back to `auto`.
|
| + if (size === 'auto') {
|
| + this.style[this.dimension] = size;
|
| + size = this._calcSize();
|
| + }
|
| + // Go to startSize without animation.
|
| + this.style[this.dimension] = startSize;
|
| + // Force layout to ensure transition will go. Set offsetHeight to itself
|
| + // so that compilers won't remove it.
|
| + this.offsetHeight = this.offsetHeight;
|
| + // Enable animation.
|
| + this._updateTransition(true);
|
| + }
|
| + // Set the final size.
|
| + this.style[this.dimension] = size;
|
| },
|
|
|
| + /**
|
| + * enableTransition() is deprecated, but left over so it doesn't break existing code.
|
| + * Please use `noAnimation` property instead.
|
| + *
|
| + * @method enableTransition
|
| + * @deprecated since version 1.0.4
|
| + */
|
| enableTransition: function(enabled) {
|
| - this.style.transitionDuration = (enabled && this._enableTransition) ? '' : '0s';
|
| + console.warn('`enableTransition()` is deprecated, use `noAnimation` instead.');
|
| + this.noAnimation = !enabled;
|
| + },
|
| +
|
| + _updateTransition: function(enabled) {
|
| + this.style.transitionDuration = (enabled && !this.noAnimation) ? '' : '0s';
|
| },
|
|
|
| _horizontalChanged: function() {
|
| @@ -171,24 +198,34 @@ and instead put a div inside and style that.
|
| },
|
|
|
| _openedChanged: function() {
|
| - this[this.opened ? 'show' : 'hide']();
|
| - this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
|
| + this.setAttribute('aria-expanded', this.opened);
|
| + this.setAttribute('aria-hidden', !this.opened);
|
| +
|
| + this.toggleClass('iron-collapse-closed', false);
|
| + this.toggleClass('iron-collapse-opened', false);
|
| + this.updateSize(this.opened ? 'auto' : '0px', true);
|
|
|
| + // Focus the current collapse.
|
| + if (this.opened) {
|
| + this.focus();
|
| + }
|
| + if (this.noAnimation) {
|
| + this._transitionEnd();
|
| + }
|
| },
|
|
|
| _transitionEnd: function() {
|
| if (this.opened) {
|
| - this.updateSize('auto', false);
|
| + this.style[this.dimension] = 'auto';
|
| }
|
| this.toggleClass('iron-collapse-closed', !this.opened);
|
| this.toggleClass('iron-collapse-opened', this.opened);
|
| - this.enableTransition(false);
|
| + this._updateTransition(false);
|
| },
|
|
|
| _calcSize: function() {
|
| return this.getBoundingClientRect()[this.dimension] + 'px';
|
| - },
|
| -
|
| + }
|
|
|
| });
|
|
|
|
|