summaryrefslogtreecommitdiffstats
path: root/chrome/browser/resources/print_preview/print_preview_animations.js
diff options
context:
space:
mode:
authordpapad@chromium.org <dpapad@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2011-11-17 06:48:33 +0000
committerdpapad@chromium.org <dpapad@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2011-11-17 06:48:33 +0000
commit2e1c3925575cc7690f8a8099fc0897d2dde17abd (patch)
tree4ee8fe677b74b3b0e9b1d3c04f4621daf6991fe5 /chrome/browser/resources/print_preview/print_preview_animations.js
parentba833c2b376383ec224e40e24c5df796b7207057 (diff)
downloadchromium_src-2e1c3925575cc7690f8a8099fc0897d2dde17abd.zip
chromium_src-2e1c3925575cc7690f8a8099fc0897d2dde17abd.tar.gz
chromium_src-2e1c3925575cc7690f8a8099fc0897d2dde17abd.tar.bz2
Print Preview: Fixing tab order of hidden elements.
BUG=103997 TEST=Changing focus using tab should only navigate to visible elements. Review URL: http://codereview.chromium.org/8573016 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@110461 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'chrome/browser/resources/print_preview/print_preview_animations.js')
-rw-r--r--chrome/browser/resources/print_preview/print_preview_animations.js69
1 files changed, 51 insertions, 18 deletions
diff --git a/chrome/browser/resources/print_preview/print_preview_animations.js b/chrome/browser/resources/print_preview/print_preview_animations.js
index b717e24..87752c6 100644
--- a/chrome/browser/resources/print_preview/print_preview_animations.js
+++ b/chrome/browser/resources/print_preview/print_preview_animations.js
@@ -20,6 +20,18 @@ function addAnimation(code) {
}
/**
+ * Generates css code for fading in an element by animating the height.
+ * @param {number} targetHeight The desired height in pixels after the animation
+ * ends.
+ * @return {string} The css code for the fade in animation.
+ */
+function getFadeInAnimationCode(targetHeight) {
+ return '0% { opacity: 0; height: 0; } ' +
+ '80% { height: ' + (targetHeight + 4) + 'px; }' +
+ '100% { opacity: 1; height: ' + targetHeight + 'px; }';
+}
+
+/**
* Fades in an element. Used for both printing options and error messages
* appearing underneath the textfields.
* @param {HTMLElement} el The element to be faded in.
@@ -28,21 +40,17 @@ function fadeInElement(el) {
if (el.classList.contains('visible'))
return;
el.classList.remove('closing');
+ el.hidden = false;
el.style.height = 'auto';
var height = el.offsetHeight;
el.style.height = height + 'px';
- var animName = addAnimation(
- '0% { opacity: 0; height: 0; } ' +
- '80% { height: ' + (height + 4) + 'px; }' +
- '100% { opacity: 1; height: ' + height + 'px; }');
+ var animName = addAnimation(getFadeInAnimationCode(height));
+ var eventTracker = new EventTracker();
+ eventTracker.add(el, 'webkitAnimationEnd',
+ onFadeInAnimationEnd.bind(el, eventTracker),
+ false);
el.style.webkitAnimationName = animName;
el.classList.add('visible');
- el.addEventListener('webkitAnimationEnd', function() {
- el.style.height = '';
- el.style.webkitAnimationName = '';
- fadeInOutCleanup(animName);
- el.removeEventListener('webkitAnimationEnd', arguments.callee, false);
- }, false );
}
/**
@@ -56,16 +64,41 @@ function fadeOutElement(el) {
el.style.height = 'auto';
var height = el.offsetHeight;
el.style.height = height + 'px';
- var animName = addAnimation(
- '0% { opacity: 1; height: ' + height + 'px; }' +
- '100% { opacity: 1; height: 0; }');
- el.style.webkitAnimationName = animName;
+ var animName = addAnimation('');
+ var eventTracker = new EventTracker();
+ eventTracker.add(el, 'webkitTransitionEnd',
+ onFadeOutTransitionEnd.bind(el, animName, eventTracker),
+ false );
el.classList.add('closing');
el.classList.remove('visible');
- el.addEventListener('webkitAnimationEnd', function() {
- fadeInOutCleanup(animName);
- el.removeEventListener('webkitAnimationEnd', arguments.callee, false);
- }, false );
+}
+
+/**
+ * Executes when a fade out animation ends.
+ * @param {string} animationName The name of the animation to be removed.
+ * @param {EventTracker} The |EventTracker| object that was used for adding this
+ * listener.
+ * @param {WebkitTransitionEvent} event The event that triggered this listener.
+ */
+function onFadeOutTransitionEnd(animationName, eventTracker, event) {
+ if (event.propertyName != 'height')
+ return;
+ fadeInOutCleanup(animationName);
+ eventTracker.remove(this, 'webkitTransitionEnd');
+ this.hidden = true;
+}
+
+/**
+ * Executes when a fade in animation ends.
+ * @param{EventTracker} The |EventTracker| object that was used for adding this
+ * listener.
+ * @param {WebkitAnimationEvent} event The event that triggered this listener.
+ */
+function onFadeInAnimationEnd(eventTracker, event) {
+ this.style.height = '';
+ this.style.webkitAnimationName = '';
+ fadeInOutCleanup(event.animationName);
+ eventTracker.remove(this, 'webkitAnimationEnd');
}
/**