diff --git a/Chapter_05/lib/tooltip/tooltip_directive.dart b/Chapter_05/lib/tooltip/tooltip_directive.dart index f091685..6643e13 100644 --- a/Chapter_05/lib/tooltip/tooltip_directive.dart +++ b/Chapter_05/lib/tooltip/tooltip_directive.dart @@ -11,9 +11,6 @@ import 'package:angular/angular.dart'; } ) class Tooltip { - // not sure which one I will need. - // ng-click uses node. - // ng-show-hide uses element. dom.Element element; dom.Node node; Scope scope; @@ -21,16 +18,10 @@ class Tooltip { dom.Element tooltipElem; - Tooltip(dom.Element this.element, dom.Node this.node, - Scope this.scope) { - - element.onMouseEnter.listen((event) { - _createTemplate(); - }); - - element.onMouseLeave.listen((event) { - _destroyTemplate(); - }); + Tooltip(this.element, this.node, this.scope) { + element + ..onMouseEnter.listen((_) => _createTemplate()) + ..onMouseLeave.listen((_) => _destroyTemplate()); } _createTemplate() { @@ -38,41 +29,41 @@ class Tooltip { tooltipElem = new dom.DivElement(); - dom.ImageElement imgElem = new dom.ImageElement(); - imgElem.width = displayModel.imgWidth; - imgElem.src = displayModel.imgUrl; + dom.ImageElement imgElem = new dom.ImageElement() + ..width = displayModel.imgWidth + ..src = displayModel.imgUrl; tooltipElem.append(imgElem); if (displayModel.text != null) { - dom.DivElement textSpan = new dom.DivElement(); - textSpan.appendText(displayModel.text); - textSpan.style.color = "white"; - textSpan.style.fontSize = "smaller"; - textSpan.style.paddingBottom = "5px"; + dom.DivElement textSpan = new dom.DivElement() + ..appendText(displayModel.text) + ..style.color = "white" + ..style.fontSize = "smaller" + ..style.paddingBottom = "5px"; tooltipElem.append(textSpan); } - tooltipElem.style.padding = "5px"; - tooltipElem.style.paddingBottom = "0px"; - tooltipElem.style.backgroundColor = "black"; - tooltipElem.style.borderRadius = "5px"; - tooltipElem.style.width = "${displayModel.imgWidth.toString()}px"; + tooltipElem.style + ..padding = "5px" + ..paddingBottom = "0px" + ..backgroundColor = "black" + ..borderRadius = "5px" + ..width = "${displayModel.imgWidth.toString()}px"; // find the coordinates of the parent DOM element Rectangle bounds = element.getBoundingClientRect(); int left = (bounds.left + dom.window.pageXOffset).toInt(); int top = (bounds.top + dom.window.pageYOffset).toInt(); - int width = (bounds.width).toInt(); - int height = (bounds.height).toInt(); + int width = bounds.width.toInt(); + int height = bounds.height.toInt(); // position the tooltip. // Figure out where the containing element sits in the window. - int tooltipLeft = left + width + 10; - int tooltipTop = top - height; - tooltipElem.style.position = "absolute"; - tooltipElem.style.top = "${tooltipTop}px"; - tooltipElem.style.left = "${tooltipLeft}px"; + tooltipElem.style + ..position = "absolute" + ..top = "${top - height}px" + ..left = "${left + width + 10}px"; // Add the tooltip to the document body. We add it here because // we need to position it absolutely, without reference to its @@ -90,6 +81,5 @@ class TooltipModel { String text; int imgWidth; - TooltipModel(String this.imgUrl, String this.text, - int this.imgWidth); + TooltipModel(this.imgUrl, this.text, this.imgWidth); }