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

Side by Side Diff: chrome/browser/resources/print_preview/print_preview_animations.js

Issue 8605001: Print Preview: Fixing code style issues reported by gsjlint. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Rebasing Created 9 years, 1 month 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 | Annotate | Revision Log
OLDNEW
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
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
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 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/print_preview/print_preview.js ('k') | chrome/browser/resources/print_preview/print_preview_cloud.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698