@@ -11,68 +11,59 @@ import 'package:angular/angular.dart';
11
11
}
12
12
)
13
13
class Tooltip {
14
- // not sure which one I will need.
15
- // ng-click uses node.
16
- // ng-show-hide uses element.
17
14
dom.Element element;
18
15
dom.Node node;
19
16
Scope scope;
20
17
TooltipModel displayModel;
21
18
22
19
dom.Element tooltipElem;
23
20
24
- Tooltip (dom.Element this .element, dom.Node this .node,
25
- Scope this .scope) {
26
-
27
- element.onMouseEnter.listen ((event) {
28
- _createTemplate ();
29
- });
30
-
31
- element.onMouseLeave.listen ((event) {
32
- _destroyTemplate ();
33
- });
21
+ Tooltip (this .element, this .node, this .scope) {
22
+ element
23
+ ..onMouseEnter.listen ((_) => _createTemplate ())
24
+ ..onMouseLeave.listen ((_) => _destroyTemplate ());
34
25
}
35
26
36
27
_createTemplate () {
37
28
assert (displayModel != null );
38
29
39
30
tooltipElem = new dom.DivElement ();
40
31
41
- dom.ImageElement imgElem = new dom.ImageElement ();
42
- imgElem. width = displayModel.imgWidth;
43
- imgElem .src = displayModel.imgUrl;
32
+ dom.ImageElement imgElem = new dom.ImageElement ()
33
+ .. width = displayModel.imgWidth
34
+ . .src = displayModel.imgUrl;
44
35
tooltipElem.append (imgElem);
45
36
46
37
if (displayModel.text != null ) {
47
- dom.DivElement textSpan = new dom.DivElement ();
48
- textSpan. appendText (displayModel.text);
49
- textSpan. style.color = "white" ;
50
- textSpan. style.fontSize = "smaller" ;
51
- textSpan .style.paddingBottom = "5px" ;
38
+ dom.DivElement textSpan = new dom.DivElement ()
39
+ .. appendText (displayModel.text)
40
+ .. style.color = "white"
41
+ .. style.fontSize = "smaller"
42
+ . .style.paddingBottom = "5px" ;
52
43
53
44
tooltipElem.append (textSpan);
54
45
}
55
46
56
- tooltipElem.style.padding = "5px" ;
57
- tooltipElem.style.paddingBottom = "0px" ;
58
- tooltipElem.style.backgroundColor = "black" ;
59
- tooltipElem.style.borderRadius = "5px" ;
60
- tooltipElem.style.width = "${displayModel .imgWidth .toString ()}px" ;
47
+ tooltipElem.style
48
+ ..padding = "5px"
49
+ ..paddingBottom = "0px"
50
+ ..backgroundColor = "black"
51
+ ..borderRadius = "5px"
52
+ ..width = "${displayModel .imgWidth .toString ()}px" ;
61
53
62
54
// find the coordinates of the parent DOM element
63
55
Rectangle bounds = element.getBoundingClientRect ();
64
56
int left = (bounds.left + dom.window.pageXOffset).toInt ();
65
57
int top = (bounds.top + dom.window.pageYOffset).toInt ();
66
- int width = ( bounds.width) .toInt ();
67
- int height = ( bounds.height) .toInt ();
58
+ int width = bounds.width.toInt ();
59
+ int height = bounds.height.toInt ();
68
60
69
61
// position the tooltip.
70
62
// Figure out where the containing element sits in the window.
71
- int tooltipLeft = left + width + 10 ;
72
- int tooltipTop = top - height;
73
- tooltipElem.style.position = "absolute" ;
74
- tooltipElem.style.top = "${tooltipTop }px" ;
75
- tooltipElem.style.left = "${tooltipLeft }px" ;
63
+ tooltipElem.style
64
+ ..position = "absolute"
65
+ ..top = "${top - height }px"
66
+ ..left = "${left + width + 10 }px" ;
76
67
77
68
// Add the tooltip to the document body. We add it here because
78
69
// we need to position it absolutely, without reference to its
@@ -90,6 +81,5 @@ class TooltipModel {
90
81
String text;
91
82
int imgWidth;
92
83
93
- TooltipModel (String this .imgUrl, String this .text,
94
- int this .imgWidth);
84
+ TooltipModel (this .imgUrl, this .text, this .imgWidth);
95
85
}
0 commit comments