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> |