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