| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 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 animations unique names. |
| 6 var animationCounter = 0; | 6 var animationCounter = 0; |
| 7 | 7 |
| 8 var animationEventTracker_ = new EventTracker(); | 8 var animationEventTracker_ = new EventTracker(); |
| 9 | 9 |
| 10 function addAnimation(code) { | 10 function addAnimation(code) { |
| 11 var name = 'anim' + animationCounter; | 11 var name = 'anim' + animationCounter; |
| 12 animationCounter++; | 12 animationCounter++; |
| 13 var rules = document.createTextNode( | 13 var rules = document.createTextNode( |
| 14 '@-webkit-keyframes ' + name + ' {' + code + '}'); | 14 '@keyframes ' + name + ' {' + code + '}'); |
| 15 var el = document.createElement('style'); | 15 var el = document.createElement('style'); |
| 16 el.type = 'text/css'; | 16 el.type = 'text/css'; |
| 17 el.appendChild(rules); | 17 el.appendChild(rules); |
| 18 el.setAttribute('id', name); | 18 el.setAttribute('id', name); |
| 19 document.body.appendChild(el); | 19 document.body.appendChild(el); |
| 20 | 20 |
| 21 return name; | 21 return name; |
| 22 } | 22 } |
| 23 | 23 |
| 24 /** | 24 /** |
| (...skipping 23 matching lines...) Expand all Loading... |
| 48 el.setAttribute('aria-hidden', 'false'); | 48 el.setAttribute('aria-hidden', 'false'); |
| 49 el.style.height = 'auto'; | 49 el.style.height = 'auto'; |
| 50 var height = el.offsetHeight; | 50 var height = el.offsetHeight; |
| 51 if (opt_justShow) { | 51 if (opt_justShow) { |
| 52 el.style.height = ''; | 52 el.style.height = ''; |
| 53 el.style.opacity = ''; | 53 el.style.opacity = ''; |
| 54 } else { | 54 } else { |
| 55 el.style.height = height + 'px'; | 55 el.style.height = height + 'px'; |
| 56 var animName = addAnimation(getFadeInAnimationCode(height)); | 56 var animName = addAnimation(getFadeInAnimationCode(height)); |
| 57 animationEventTracker_.add( | 57 animationEventTracker_.add( |
| 58 el, 'webkitAnimationEnd', onFadeInAnimationEnd.bind(el), false); | 58 el, 'animationend', onFadeInAnimationEnd.bind(el), false); |
| 59 el.style.webkitAnimationName = animName; | 59 el.style.animationName = animName; |
| 60 } | 60 } |
| 61 el.classList.add('visible'); | 61 el.classList.add('visible'); |
| 62 } | 62 } |
| 63 | 63 |
| 64 /** | 64 /** |
| 65 * Fades out an element. Used for both printing options and error messages | 65 * Fades out an element. Used for both printing options and error messages |
| 66 * appearing underneath the textfields. | 66 * appearing underneath the textfields. |
| 67 * @param {HTMLElement} el The element to be faded out. | 67 * @param {HTMLElement} el The element to be faded out. |
| 68 */ | 68 */ |
| 69 function fadeOutElement(el) { | 69 function fadeOutElement(el) { |
| 70 if (!el.classList.contains('visible')) | 70 if (!el.classList.contains('visible')) |
| 71 return; | 71 return; |
| 72 fadeInAnimationCleanup(el); | 72 fadeInAnimationCleanup(el); |
| 73 el.style.height = 'auto'; | 73 el.style.height = 'auto'; |
| 74 var height = el.offsetHeight; | 74 var height = el.offsetHeight; |
| 75 el.style.height = height + 'px'; | 75 el.style.height = height + 'px'; |
| 76 el.offsetHeight; // Should force an update of the computed style. | 76 el.offsetHeight; // Should force an update of the computed style. |
| 77 animationEventTracker_.add( | 77 animationEventTracker_.add( |
| 78 el, 'webkitTransitionEnd', onFadeOutTransitionEnd.bind(el), false); | 78 el, 'transitionend', onFadeOutTransitionEnd.bind(el), false); |
| 79 el.classList.add('closing'); | 79 el.classList.add('closing'); |
| 80 el.classList.remove('visible'); | 80 el.classList.remove('visible'); |
| 81 el.setAttribute('aria-hidden', 'true'); | 81 el.setAttribute('aria-hidden', 'true'); |
| 82 } | 82 } |
| 83 | 83 |
| 84 /** | 84 /** |
| 85 * Executes when a fade out animation ends. | 85 * Executes when a fade out animation ends. |
| 86 * @param {WebkitTransitionEvent} event The event that triggered this listener. | 86 * @param {Event} event The event that triggered this listener. |
| 87 * @this {HTMLElement} The element where the transition occurred. | 87 * @this {HTMLElement} The element where the transition occurred. |
| 88 */ | 88 */ |
| 89 function onFadeOutTransitionEnd(event) { | 89 function onFadeOutTransitionEnd(event) { |
| 90 if (event.propertyName != 'height') | 90 if (event.propertyName != 'height') |
| 91 return; | 91 return; |
| 92 animationEventTracker_.remove(this, 'webkitTransitionEnd'); | 92 animationEventTracker_.remove(this, 'transitionend'); |
| 93 this.hidden = true; | 93 this.hidden = true; |
| 94 } | 94 } |
| 95 | 95 |
| 96 /** | 96 /** |
| 97 * Executes when a fade in animation ends. | 97 * Executes when a fade in animation ends. |
| 98 * @param {WebkitAnimationEvent} event The event that triggered this listener. | 98 * @param {Event} event The event that triggered this listener. |
| 99 * @this {HTMLElement} The element where the transition occurred. | 99 * @this {HTMLElement} The element where the transition occurred. |
| 100 */ | 100 */ |
| 101 function onFadeInAnimationEnd(event) { | 101 function onFadeInAnimationEnd(event) { |
| 102 this.style.height = ''; | 102 this.style.height = ''; |
| 103 fadeInAnimationCleanup(this); | 103 fadeInAnimationCleanup(this); |
| 104 } | 104 } |
| 105 | 105 |
| 106 /** | 106 /** |
| 107 * Removes the <style> element corresponding to |animationName| from the DOM. | 107 * Removes the <style> element corresponding to |animationName| from the DOM. |
| 108 * @param {HTMLElement} element The animated element. | 108 * @param {HTMLElement} element The animated element. |
| 109 */ | 109 */ |
| 110 function fadeInAnimationCleanup(element) { | 110 function fadeInAnimationCleanup(element) { |
| 111 if (element.style.webkitAnimationName) { | 111 if (element.style.animationName) { |
| 112 var animEl = document.getElementById(element.style.webkitAnimationName); | 112 var animEl = document.getElementById(element.style.animationName); |
| 113 if (animEl) | 113 if (animEl) |
| 114 animEl.parentNode.removeChild(animEl); | 114 animEl.parentNode.removeChild(animEl); |
| 115 element.style.webkitAnimationName = ''; | 115 element.style.animationName = ''; |
| 116 animationEventTracker_.remove(element, 'webkitAnimationEnd'); | 116 animationEventTracker_.remove(element, 'animationend'); |
| 117 } | 117 } |
| 118 } | 118 } |
| 119 | 119 |
| 120 /** | 120 /** |
| 121 * Fades in a printing option existing under |el|. | 121 * Fades in a printing option existing under |el|. |
| 122 * @param {HTMLElement} el The element to hide. | 122 * @param {HTMLElement} el The element to hide. |
| 123 * @param {boolean=} opt_justShow Whether {@code el} should be hidden with no | 123 * @param {boolean=} opt_justShow Whether {@code el} should be hidden with no |
| 124 * animation. | 124 * animation. |
| 125 */ | 125 */ |
| 126 function fadeInOption(el, opt_justShow) { | 126 function fadeInOption(el, opt_justShow) { |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 182 while (el.childNodes.length > 0) | 182 while (el.childNodes.length > 0) |
| 183 div.appendChild(el.firstChild); | 183 div.appendChild(el.firstChild); |
| 184 el.appendChild(div); | 184 el.appendChild(div); |
| 185 } | 185 } |
| 186 | 186 |
| 187 div.className = ''; | 187 div.className = ''; |
| 188 div.classList.add('collapsible'); | 188 div.classList.add('collapsible'); |
| 189 for (var i = 0; i < classes.length; i++) | 189 for (var i = 0; i < classes.length; i++) |
| 190 div.classList.add(classes[i]); | 190 div.classList.add(classes[i]); |
| 191 } | 191 } |
| OLD | NEW |