| OLD | NEW |
| 1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file |
| 2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
| 3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * Common effects related helpers. | 6 * Common effects related helpers. |
| 7 */ | 7 */ |
| 8 class FxUtil { | 8 class FxUtil { |
| 9 /** On transition end event. */ | 9 /** On transition end event. */ |
| 10 static final TRANSITION_END_EVENT = 'webkitTransitionEnd'; | 10 static final TRANSITION_END_EVENT = 'webkitTransitionEnd'; |
| 11 | 11 |
| 12 /** The translate3d transform function. */ | 12 /** The translate3d transform function. */ |
| 13 static final TRANSLATE_3D = 'translate3d'; | 13 static final TRANSLATE_3D = 'translate3d'; |
| 14 | 14 |
| 15 /** The rotate transform function. */ | 15 /** The rotate transform function. */ |
| 16 static final ROTATE = 'rotate'; | 16 static final ROTATE = 'rotate'; |
| 17 | 17 |
| 18 /** The scale transform function. */ | 18 /** The scale transform function. */ |
| 19 static final SCALE = 'scale'; | 19 static final SCALE = 'scale'; |
| 20 | 20 |
| 21 /** | |
| 22 * Apply a -webkit-transition on an element using the [duration] of this | |
| 23 * animation in ms. | |
| 24 */ | |
| 25 static void setWebkitTransition( | |
| 26 Element el, num duration, | |
| 27 [String property = StyleUtil.TRANSFORM_STYLE, | |
| 28 String timingFunction = TransitionTimingFunction.EASE_IN_OUT]) { | |
| 29 el.style.transition = '${property} ${duration}ms ${timingFunction}'; | |
| 30 } | |
| 31 | |
| 32 /** Stops and clears the transition on an element. */ | 21 /** Stops and clears the transition on an element. */ |
| 33 static void clearWebkitTransition(Element el) { | 22 static void clearWebkitTransition(Element el) { |
| 34 el.style.transition = ''; | 23 el.style.transition = ''; |
| 35 } | 24 } |
| 36 | 25 |
| 37 static void setPosition(Element el, Coordinate point) { | 26 static void setPosition(Element el, Coordinate point) { |
| 38 num x = point.x; | 27 num x = point.x; |
| 39 num y = point.y; | 28 num y = point.y; |
| 40 el.style.transform = '${TRANSLATE_3D}(${x}px,${y}px,0px)'; | 29 el.style.transform = '${TRANSLATE_3D}(${x}px,${y}px,0px)'; |
| 41 } | 30 } |
| (...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 100 * Translates [el], an HTML element that has a relative CSS | 89 * Translates [el], an HTML element that has a relative CSS |
| 101 * position, by setting its left and top CSS styles. | 90 * position, by setting its left and top CSS styles. |
| 102 */ | 91 */ |
| 103 static void setLeftAndTop(Element el, num x, num y) { | 92 static void setLeftAndTop(Element el, num x, num y) { |
| 104 final style = el.style; | 93 final style = el.style; |
| 105 style.left = '${x}px'; | 94 style.left = '${x}px'; |
| 106 style.top = '${y}px'; | 95 style.top = '${y}px'; |
| 107 } | 96 } |
| 108 } | 97 } |
| 109 | 98 |
| 110 | |
| 111 /** | |
| 112 * Utilities for element styles. | |
| 113 */ | |
| 114 class StyleUtil { | |
| 115 // TODO(jacobr): Need a good way to set this to -moz, or -o names. | |
| 116 /** Style name for transform. */ | |
| 117 static final TRANSFORM_STYLE = '-webkit-transform'; | |
| 118 | |
| 119 /** | |
| 120 * Retrieves a computed style value of a node. | |
| 121 * | |
| 122 * Limitations: | |
| 123 * - Does not report border styles correctly in Webkit. | |
| 124 */ | |
| 125 static CSSStyleDeclaration getComputedStyle(Element element) { | |
| 126 // TODO(jmesserly): last param should be null, see b/5045788 | |
| 127 return window.getComputedStyle(element, ''); | |
| 128 } | |
| 129 | |
| 130 /** Retrieves the current transform of an element. */ | |
| 131 static CSSMatrix getCurrentTransformMatrix(Element element) { | |
| 132 // TODO(jacobr): when poossible switch back to | |
| 133 // return new CSSMatrix(transform); | |
| 134 return new CSSMatrix( | |
| 135 getComputedStyle(element).transform); | |
| 136 } | |
| 137 } | |
| 138 | |
| 139 class TransitionTimingFunction { | 99 class TransitionTimingFunction { |
| 140 static final EASE_IN = 'ease-in'; | 100 static final EASE_IN = 'ease-in'; |
| 141 static final EASE_OUT = 'ease-out'; | 101 static final EASE_OUT = 'ease-out'; |
| 142 static final EASE_IN_OUT = 'ease-in-out'; | 102 static final EASE_IN_OUT = 'ease-in-out'; |
| 143 } | 103 } |
| OLD | NEW |