Skip to content
This repository was archived by the owner on Feb 22, 2018. It is now read-only.

Commit 42cdf50

Browse files
committed
Merge pull request #18 from vicb/patch-4
Updated from previous chapter (PR #16 and #17)
2 parents eef956f + b630530 commit 42cdf50

File tree

1 file changed

+25
-35
lines changed

1 file changed

+25
-35
lines changed

Chapter_05/lib/tooltip/tooltip_directive.dart

+25-35
Original file line numberDiff line numberDiff line change
@@ -11,68 +11,59 @@ import 'package:angular/angular.dart';
1111
}
1212
)
1313
class Tooltip {
14-
// not sure which one I will need.
15-
// ng-click uses node.
16-
// ng-show-hide uses element.
1714
dom.Element element;
1815
dom.Node node;
1916
Scope scope;
2017
TooltipModel displayModel;
2118

2219
dom.Element tooltipElem;
2320

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());
3425
}
3526

3627
_createTemplate() {
3728
assert(displayModel != null);
3829

3930
tooltipElem = new dom.DivElement();
4031

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;
4435
tooltipElem.append(imgElem);
4536

4637
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";
5243

5344
tooltipElem.append(textSpan);
5445
}
5546

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";
6153

6254
// find the coordinates of the parent DOM element
6355
Rectangle bounds = element.getBoundingClientRect();
6456
int left = (bounds.left + dom.window.pageXOffset).toInt();
6557
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();
6860

6961
// position the tooltip.
7062
// 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";
7667

7768
// Add the tooltip to the document body. We add it here because
7869
// we need to position it absolutely, without reference to its
@@ -90,6 +81,5 @@ class TooltipModel {
9081
String text;
9182
int imgWidth;
9283

93-
TooltipModel(String this.imgUrl, String this.text,
94-
int this.imgWidth);
84+
TooltipModel(this.imgUrl, this.text, this.imgWidth);
9585
}

0 commit comments

Comments
 (0)