OLD | NEW |
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 // Counter used to give webkit animations unique names. | 5 // Counter used to give webkit animations unique names. |
6 var animationCounter = 0; | 6 var animationCounter = 0; |
7 | 7 |
8 function addAnimation(code) { | 8 function addAnimation(code) { |
9 var name = 'anim' + animationCounter; | 9 var name = 'anim' + animationCounter; |
10 animationCounter++; | 10 animationCounter++; |
11 var rules = document.createTextNode( | 11 var rules = document.createTextNode( |
12 '@-webkit-keyframes ' + name + ' {' + code + '}'); | 12 '@-webkit-keyframes ' + name + ' {' + code + '}'); |
13 var el = document.createElement('style'); | 13 var el = document.createElement('style'); |
14 el.type = 'text/css'; | 14 el.type = 'text/css'; |
15 el.appendChild(rules); | 15 el.appendChild(rules); |
16 el.setAttribute('id', name); | 16 el.setAttribute('id', name); |
17 document.body.appendChild(el); | 17 document.body.appendChild(el); |
18 | 18 |
19 return name; | 19 return name; |
20 } | 20 } |
21 | 21 |
22 /** | 22 /** |
23 * Generates css code for fading in an element by animating the height. | 23 * Generates css code for fading in an element by animating the height. |
24 * @param {number} targetHeight The desired height in pixels after the animation | 24 * @param {number} targetHeight The desired height in pixels after the animation |
25 * ends. | 25 * ends. |
26 * @return {string} The css code for the fade in animation. | 26 * @return {string} The css code for the fade in animation. |
27 */ | 27 */ |
28 function getFadeInAnimationCode(targetHeight) { | 28 function getFadeInAnimationCode(targetHeight) { |
29 return '0% { opacity: 0; height: 0; } ' + | 29 return '0% { opacity: 0; height: 0; } ' + |
30 '80% { height: ' + (targetHeight + 4) + 'px; }' + | 30 '80% { height: ' + (targetHeight + 4) + 'px; }' + |
31 '100% { opacity: 1; height: ' + targetHeight + 'px; }'; | 31 '100% { opacity: 1; height: ' + targetHeight + 'px; }'; |
32 } | 32 } |
33 | 33 |
34 /** | 34 /** |
35 * Fades in an element. Used for both printing options and error messages | 35 * Fades in an element. Used for both printing options and error messages |
36 * appearing underneath the textfields. | 36 * appearing underneath the textfields. |
37 * @param {HTMLElement} el The element to be faded in. | 37 * @param {HTMLElement} el The element to be faded in. |
38 */ | 38 */ |
39 function fadeInElement(el) { | 39 function fadeInElement(el) { |
(...skipping 21 matching lines...) Expand all Loading... |
61 function fadeOutElement(el) { | 61 function fadeOutElement(el) { |
62 if (!el.classList.contains('visible')) | 62 if (!el.classList.contains('visible')) |
63 return; | 63 return; |
64 el.style.height = 'auto'; | 64 el.style.height = 'auto'; |
65 var height = el.offsetHeight; | 65 var height = el.offsetHeight; |
66 el.style.height = height + 'px'; | 66 el.style.height = height + 'px'; |
67 var animName = addAnimation(''); | 67 var animName = addAnimation(''); |
68 var eventTracker = new EventTracker(); | 68 var eventTracker = new EventTracker(); |
69 eventTracker.add(el, 'webkitTransitionEnd', | 69 eventTracker.add(el, 'webkitTransitionEnd', |
70 onFadeOutTransitionEnd.bind(el, animName, eventTracker), | 70 onFadeOutTransitionEnd.bind(el, animName, eventTracker), |
71 false ); | 71 false); |
72 el.classList.add('closing'); | 72 el.classList.add('closing'); |
73 el.classList.remove('visible'); | 73 el.classList.remove('visible'); |
74 } | 74 } |
75 | 75 |
76 /** | 76 /** |
77 * Executes when a fade out animation ends. | 77 * Executes when a fade out animation ends. |
78 * @param {string} animationName The name of the animation to be removed. | 78 * @param {string} animationName The name of the animation to be removed. |
79 * @param {EventTracker} The |EventTracker| object that was used for adding this | 79 * @param {EventTracker} eventTracker The |EventTracker| object that was used |
80 * listener. | 80 * for adding this listener. |
81 * @param {WebkitTransitionEvent} event The event that triggered this listener. | 81 * @param {WebkitTransitionEvent} event The event that triggered this listener. |
82 */ | 82 */ |
83 function onFadeOutTransitionEnd(animationName, eventTracker, event) { | 83 function onFadeOutTransitionEnd(animationName, eventTracker, event) { |
84 if (event.propertyName != 'height') | 84 if (event.propertyName != 'height') |
85 return; | 85 return; |
86 fadeInOutCleanup(animationName); | 86 fadeInOutCleanup(animationName); |
87 eventTracker.remove(this, 'webkitTransitionEnd'); | 87 eventTracker.remove(this, 'webkitTransitionEnd'); |
88 this.hidden = true; | 88 this.hidden = true; |
89 } | 89 } |
90 | 90 |
91 /** | 91 /** |
92 * Executes when a fade in animation ends. | 92 * Executes when a fade in animation ends. |
93 * @param{EventTracker} The |EventTracker| object that was used for adding this | 93 * @param {EventTracker} eventTracker The |EventTracker| object that was used |
94 * listener. | 94 * for adding this listener. |
95 * @param {WebkitAnimationEvent} event The event that triggered this listener. | 95 * @param {WebkitAnimationEvent} event The event that triggered this listener. |
96 */ | 96 */ |
97 function onFadeInAnimationEnd(eventTracker, event) { | 97 function onFadeInAnimationEnd(eventTracker, event) { |
98 this.style.height = ''; | 98 this.style.height = ''; |
99 this.style.webkitAnimationName = ''; | 99 this.style.webkitAnimationName = ''; |
100 fadeInOutCleanup(event.animationName); | 100 fadeInOutCleanup(event.animationName); |
101 eventTracker.remove(this, 'webkitAnimationEnd'); | 101 eventTracker.remove(this, 'webkitAnimationEnd'); |
102 } | 102 } |
103 | 103 |
104 /** | 104 /** |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
161 while (el.childNodes.length > 0) | 161 while (el.childNodes.length > 0) |
162 div.appendChild(el.firstChild); | 162 div.appendChild(el.firstChild); |
163 el.appendChild(div); | 163 el.appendChild(div); |
164 } | 164 } |
165 | 165 |
166 div.className = ''; | 166 div.className = ''; |
167 div.classList.add('collapsible'); | 167 div.classList.add('collapsible'); |
168 for (var i = 0; i < classes.length; i++) | 168 for (var i = 0; i < classes.length; i++) |
169 div.classList.add(classes[i]); | 169 div.classList.add(classes[i]); |
170 } | 170 } |
OLD | NEW |