| 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 webkit 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) { |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 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 /** @suppress {suspiciousCode} */ |
| 76 el.offsetHeight; // Should force an update of the computed style. | 77 el.offsetHeight; // Should force an update of the computed style. |
| 77 animationEventTracker_.add( | 78 animationEventTracker_.add( |
| 78 el, 'webkitTransitionEnd', onFadeOutTransitionEnd.bind(el), false); | 79 el, 'webkitTransitionEnd', onFadeOutTransitionEnd.bind(el), false); |
| 79 el.classList.add('closing'); | 80 el.classList.add('closing'); |
| 80 el.classList.remove('visible'); | 81 el.classList.remove('visible'); |
| 81 el.setAttribute('aria-hidden', 'true'); | 82 el.setAttribute('aria-hidden', 'true'); |
| 82 } | 83 } |
| 83 | 84 |
| 84 /** | 85 /** |
| 85 * Executes when a fade out animation ends. | 86 * Executes when a fade out animation ends. |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 122 * @param {HTMLElement} el The element to hide. | 123 * @param {HTMLElement} el The element to hide. |
| 123 * @param {boolean=} opt_justShow Whether {@code el} should be hidden with no | 124 * @param {boolean=} opt_justShow Whether {@code el} should be hidden with no |
| 124 * animation. | 125 * animation. |
| 125 */ | 126 */ |
| 126 function fadeInOption(el, opt_justShow) { | 127 function fadeInOption(el, opt_justShow) { |
| 127 if (el.classList.contains('visible')) | 128 if (el.classList.contains('visible')) |
| 128 return; | 129 return; |
| 129 // To make the option visible during the first fade in. | 130 // To make the option visible during the first fade in. |
| 130 el.hidden = false; | 131 el.hidden = false; |
| 131 | 132 |
| 132 var leftColumn = el.querySelector('.left-column'); | 133 var leftColumn = assertInstanceof(el.querySelector('.left-column'), |
| 134 HTMLElement); |
| 133 wrapContentsInDiv(leftColumn, ['invisible']); | 135 wrapContentsInDiv(leftColumn, ['invisible']); |
| 134 var rightColumn = el.querySelector('.right-column'); | 136 var rightColumn = assertInstanceof(el.querySelector('.right-column'), |
| 137 HTMLElement); |
| 135 wrapContentsInDiv(rightColumn, ['invisible']); | 138 wrapContentsInDiv(rightColumn, ['invisible']); |
| 136 | 139 |
| 137 var toAnimate = el.querySelectorAll('.collapsible'); | 140 var toAnimate = el.querySelectorAll('.collapsible'); |
| 138 for (var i = 0; i < toAnimate.length; i++) | 141 for (var i = 0; i < toAnimate.length; i++) |
| 139 fadeInElement(toAnimate[i], opt_justShow); | 142 fadeInElement(toAnimate[i], opt_justShow); |
| 140 el.classList.add('visible'); | 143 el.classList.add('visible'); |
| 141 } | 144 } |
| 142 | 145 |
| 143 /** | 146 /** |
| 144 * Fades out a printing option existing under |el|. | 147 * Fades out a printing option existing under |el|. |
| 145 * @param {HTMLElement} el The element to hide. | 148 * @param {HTMLElement} el The element to hide. |
| 146 * @param {boolean=} opt_justHide Whether {@code el} should be hidden with no | 149 * @param {boolean=} opt_justHide Whether {@code el} should be hidden with no |
| 147 * animation. | 150 * animation. |
| 148 */ | 151 */ |
| 149 function fadeOutOption(el, opt_justHide) { | 152 function fadeOutOption(el, opt_justHide) { |
| 150 if (!el.classList.contains('visible')) | 153 if (!el.classList.contains('visible')) |
| 151 return; | 154 return; |
| 152 | 155 |
| 153 var leftColumn = el.querySelector('.left-column'); | 156 var leftColumn = assertInstanceof(el.querySelector('.left-column'), |
| 157 HTMLElement); |
| 154 wrapContentsInDiv(leftColumn, ['visible']); | 158 wrapContentsInDiv(leftColumn, ['visible']); |
| 155 var rightColumn = el.querySelector('.right-column'); | 159 var rightColumn = assertInstanceof(el.querySelector('.right-column'), |
| 160 HTMLElement); |
| 156 wrapContentsInDiv(rightColumn, ['visible']); | 161 wrapContentsInDiv(rightColumn, ['visible']); |
| 157 | 162 |
| 158 var toAnimate = el.querySelectorAll('.collapsible'); | 163 var toAnimate = el.querySelectorAll('.collapsible'); |
| 159 for (var i = 0; i < toAnimate.length; i++) { | 164 for (var i = 0; i < toAnimate.length; i++) { |
| 160 if (opt_justHide) { | 165 if (opt_justHide) { |
| 161 toAnimate[i].hidden = true; | 166 toAnimate[i].hidden = true; |
| 162 toAnimate[i].classList.add('closing'); | 167 toAnimate[i].classList.add('closing'); |
| 163 toAnimate[i].classList.remove('visible'); | 168 toAnimate[i].classList.remove('visible'); |
| 164 } else { | 169 } else { |
| 165 fadeOutElement(toAnimate[i]); | 170 fadeOutElement(toAnimate[i]); |
| 166 } | 171 } |
| 167 } | 172 } |
| 168 el.classList.remove('visible'); | 173 el.classList.remove('visible'); |
| 169 } | 174 } |
| 170 | 175 |
| 171 /** | 176 /** |
| 172 * Wraps the contents of |el| in a div element and attaches css classes | 177 * Wraps the contents of |el| in a div element and attaches css classes |
| 173 * |classes| in the new div, only if has not been already done. It is necessary | 178 * |classes| in the new div, only if has not been already done. It is necessary |
| 174 * for animating the height of table cells. | 179 * for animating the height of table cells. |
| 175 * @param {HTMLElement} el The element to be processed. | 180 * @param {HTMLElement} el The element to be processed. |
| 176 * @param {array} classes The css classes to add. | 181 * @param {Array} classes The css classes to add. |
| 177 */ | 182 */ |
| 178 function wrapContentsInDiv(el, classes) { | 183 function wrapContentsInDiv(el, classes) { |
| 179 var div = el.querySelector('div'); | 184 var div = el.querySelector('div'); |
| 180 if (!div || !div.classList.contains('collapsible')) { | 185 if (!div || !div.classList.contains('collapsible')) { |
| 181 div = document.createElement('div'); | 186 div = document.createElement('div'); |
| 182 while (el.childNodes.length > 0) | 187 while (el.childNodes.length > 0) |
| 183 div.appendChild(el.firstChild); | 188 div.appendChild(el.firstChild); |
| 184 el.appendChild(div); | 189 el.appendChild(div); |
| 185 } | 190 } |
| 186 | 191 |
| 187 div.className = ''; | 192 div.className = ''; |
| 188 div.classList.add('collapsible'); | 193 div.classList.add('collapsible'); |
| 189 for (var i = 0; i < classes.length; i++) | 194 for (var i = 0; i < classes.length; i++) |
| 190 div.classList.add(classes[i]); | 195 div.classList.add(classes[i]); |
| 191 } | 196 } |
| OLD | NEW |