Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(143)

Unified Diff: polymer_1.0.4/bower_components/iron-collapse/iron-collapse.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>
« no previous file with comments | « polymer_1.0.4/bower_components/iron-collapse/index.html ('k') | polymer_1.0.4/bower_components/iron-collapse/test/basic.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698