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'; |
- }, |
- |
+ } |
}); |