Index: third_party/polymer/v1_0/components/iron-collapse/iron-collapse.html |
diff --git a/third_party/polymer/v1_0/components/iron-collapse/iron-collapse.html b/third_party/polymer/v1_0/components/iron-collapse/iron-collapse.html |
deleted file mode 100644 |
index b8f72fd77b4d42cb6a35d9e3317a59ee4a6aa080..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/v1_0/components/iron-collapse/iron-collapse.html |
+++ /dev/null |
@@ -1,195 +0,0 @@ |
-<!-- |
-@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> |