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

Side by Side Diff: third_party/polymer/v0_8/components-chromium/iron-collapse/iron-collapse-extracted.js

Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@v1
Patch Set: fix a merge mistake 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 unified diff | Download patch
OLDNEW
(Empty)
1
2
3 Polymer({
4
5 is: 'iron-collapse',
6
7 properties: {
8
9 /**
10 * If true, the orientation is horizontal; otherwise is vertical.
11 *
12 * @attribute horizontal
13 */
14 horizontal: {
15 type: Boolean,
16 value: false,
17 observer: '_horizontalChanged'
18 },
19
20 /**
21 * Set opened to true to show the collapse element and to false to hide it .
22 *
23 * @attribute opened
24 */
25 opened: {
26 type: Boolean,
27 value: false,
28 notify: true,
29 observer: '_openedChanged'
30 }
31
32 },
33
34 hostAttributes: {
35 role: 'group',
36 'aria-expanded': 'false',
37 tabindex: 0
38 },
39
40 listeners: {
41 transitionend: '_transitionEnd'
42 },
43
44 ready: function() {
45 // Avoid transition at the beginning e.g. page loads and enable
46 // transitions only after the element is rendered and ready.
47 this._enableTransition = true;
48 },
49
50 /**
51 * Toggle the opened state.
52 *
53 * @method toggle
54 */
55 toggle: function() {
56 this.opened = !this.opened;
57 },
58
59 show: function() {
60 this.toggleClass('iron-collapse-closed', false);
61 this.updateSize('auto', false);
62 var s = this._calcSize();
63 this.updateSize('0px', false);
64 // force layout to ensure transition will go
65 this.offsetHeight;
66 this.updateSize(s, true);
67 },
68
69 hide: function() {
70 this.toggleClass('iron-collapse-opened', false);
71 this.updateSize(this._calcSize(), false);
72 // force layout to ensure transition will go
73 this.offsetHeight;
74 this.updateSize('0px', true);
75 },
76
77 updateSize: function(size, animated) {
78 this.enableTransition(animated);
79 var s = this.style;
80 var nochange = s[this.dimension] === size;
81 s[this.dimension] = size;
82 if (animated && nochange) {
83 this._transitionEnd();
84 }
85 },
86
87 enableTransition: function(enabled) {
88 this.style.transitionDuration = (enabled && this._enableTransition) ? '' : '0s';
89 },
90
91 _horizontalChanged: function() {
92 this.dimension = this.horizontal ? 'width' : 'height';
93 this.style.transitionProperty = this.dimension;
94 },
95
96 _openedChanged: function() {
97 this[this.opened ? 'show' : 'hide']();
98 this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
99
100 },
101
102 _transitionEnd: function() {
103 if (this.opened) {
104 this.updateSize('auto', false);
105 }
106 this.toggleClass('iron-collapse-closed', !this.opened);
107 this.toggleClass('iron-collapse-opened', this.opened);
108 this.enableTransition(false);
109 },
110
111 _calcSize: function() {
112 return this.getBoundingClientRect()[this.dimension] + 'px';
113 },
114
115
116 });
117
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698