OLD | NEW |
| (Empty) |
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 | |
3 // BSD-style license that can be found in the LICENSE file. | |
4 | |
5 /** | |
6 * Common effects related helpers. | |
7 */ | |
8 class FxUtil { | |
9 /** On transition end event. */ | |
10 static final TRANSITION_END_EVENT = 'webkitTransitionEnd'; | |
11 | |
12 /** The translate3d transform function. */ | |
13 static final TRANSLATE_3D = 'translate3d'; | |
14 | |
15 /** The rotate transform function. */ | |
16 static final ROTATE = 'rotate'; | |
17 | |
18 /** The scale transform function. */ | |
19 static final SCALE = 'scale'; | |
20 | |
21 /** Stops and clears the transition on an element. */ | |
22 static void clearWebkitTransition(Element el) { | |
23 el.style.transition = ''; | |
24 } | |
25 | |
26 static void setPosition(Element el, Coordinate point) { | |
27 num x = point.x; | |
28 num y = point.y; | |
29 el.style.transform = '${TRANSLATE_3D}(${x}px,${y}px,0px)'; | |
30 } | |
31 | |
32 /** Apply a transform using translate3d to an HTML element. */ | |
33 static void setTranslate(Element el, num x, num y, num z) { | |
34 el.style.transform = '${TRANSLATE_3D}(${x}px,${y}px,${z}px)'; | |
35 } | |
36 | |
37 /** Apply a -webkit-transform using translate3d to an HTML element. */ | |
38 static void setWebkitTransform( | |
39 Element el, num x, num y, [num z = 0, | |
40 num rotation = null, num scale = null, | |
41 num originX = null, num originY = null]) { | |
42 final style = el.style; | |
43 // TODO(jacobr): create a helper class that simplifies building | |
44 // transformation matricies that will be set as CSS styles. We should | |
45 // consider using CSSMatrix although that may be overkill. | |
46 String transform = '${TRANSLATE_3D}(${x}px,${y}px,${z}px)'; | |
47 if (rotation !== null) { | |
48 transform = transform.concat(' ${ROTATE}(${rotation}deg)'); | |
49 } | |
50 if (scale !== null) { | |
51 transform = transform.concat(' ${SCALE}(${scale})'); | |
52 } | |
53 style.transform = transform; | |
54 if (originX !== null || originY !== null) { | |
55 assert(originX !== null && originY !== null); | |
56 style.transformOrigin = '${originX}px ${originY}px'; | |
57 } | |
58 } | |
59 | |
60 /** | |
61 * Determine the position of an [element] relative to a [target] element. | |
62 * Moving the [element] to be a child of [target] and setting the | |
63 * [element]'s top and left values to the returned coordinate should result | |
64 * in the [element]'s position remaining unchanged while its parent is | |
65 * changed. | |
66 */ | |
67 static Coordinate computeRelativePosition(Element element, Element target) { | |
68 final testPoint = new Point(0, 0); | |
69 final pagePoint = | |
70 window.webkitConvertPointFromNodeToPage(element, testPoint); | |
71 final pointRelativeToTarget = | |
72 window.webkitConvertPointFromPageToNode(target, pagePoint); | |
73 return new Coordinate(pointRelativeToTarget.x, pointRelativeToTarget.y); | |
74 } | |
75 | |
76 /** Clear a -webkit-transform from an element. */ | |
77 static void clearWebkitTransform(Element el) { | |
78 el.style.transform = ''; | |
79 } | |
80 | |
81 /** | |
82 * Checks whether an element has a translate3d webkit transform applied. | |
83 */ | |
84 static bool hasWebkitTransform(Element el) { | |
85 return el.style.transform.indexOf(TRANSLATE_3D, 0) != -1; | |
86 } | |
87 | |
88 /** | |
89 * Translates [el], an HTML element that has a relative CSS | |
90 * position, by setting its left and top CSS styles. | |
91 */ | |
92 static void setLeftAndTop(Element el, num x, num y) { | |
93 final style = el.style; | |
94 style.left = '${x}px'; | |
95 style.top = '${y}px'; | |
96 } | |
97 } | |
98 | |
99 class TransitionTimingFunction { | |
100 static final EASE_IN = 'ease-in'; | |
101 static final EASE_OUT = 'ease-out'; | |
102 static final EASE_IN_OUT = 'ease-in-out'; | |
103 } | |
OLD | NEW |