From b28d7ae2fba201abf3dd0d15001d495870e38338 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 6 Dec 2013 17:30:09 +0100 Subject: [PATCH 1/2] Updated from previous chapter (PR #16 and #17) --- Chapter_05/lib/tooltip/tooltip_directive.dart | 81 +++++++++---------- 1 file changed, 37 insertions(+), 44 deletions(-) diff --git a/Chapter_05/lib/tooltip/tooltip_directive.dart b/Chapter_05/lib/tooltip/tooltip_directive.dart index f091685..6896338 100644 --- a/Chapter_05/lib/tooltip/tooltip_directive.dart +++ b/Chapter_05/lib/tooltip/tooltip_directive.dart @@ -7,13 +7,13 @@ import 'package:angular/angular.dart'; @NgDirective( selector: '[tooltip]', map: const { - 'tooltip': '=>displayModel' + 'tooltip': '=>displayModel' } ) class Tooltip { - // not sure which one I will need. - // ng-click uses node. - // ng-show-hide uses element. +// 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 +21,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,45 +32,45 @@ 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 +// 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(); - - // 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"; - - // Add the tooltip to the document body. We add it here because - // we need to position it absolutely, without reference to its - // parent element. + int width = bounds.width.toInt(); + int height = bounds.height.toInt(); + +// position the tooltip. +// Figure out where the containing element sits in the window. + 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 +// parent element. dom.document.body.append(tooltipElem); } @@ -90,6 +84,5 @@ class TooltipModel { String text; int imgWidth; - TooltipModel(String this.imgUrl, String this.text, - int this.imgWidth); + TooltipModel(this.imgUrl, this.text, this.imgWidth); } From b63053020e70e9a4e1a1bfad19de9468482c8579 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 6 Dec 2013 17:32:12 +0100 Subject: [PATCH 2/2] fix CS --- Chapter_05/lib/tooltip/tooltip_directive.dart | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/Chapter_05/lib/tooltip/tooltip_directive.dart b/Chapter_05/lib/tooltip/tooltip_directive.dart index 6896338..6643e13 100644 --- a/Chapter_05/lib/tooltip/tooltip_directive.dart +++ b/Chapter_05/lib/tooltip/tooltip_directive.dart @@ -7,13 +7,10 @@ import 'package:angular/angular.dart'; @NgDirective( selector: '[tooltip]', map: const { - 'tooltip': '=>displayModel' + 'tooltip': '=>displayModel' } ) 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; @@ -54,23 +51,23 @@ class Tooltip { ..borderRadius = "5px" ..width = "${displayModel.imgWidth.toString()}px"; -// find the coordinates of the parent DOM element + // 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(); -// position the tooltip. -// Figure out where the containing element sits in the window. + // position the tooltip. + // Figure out where the containing element sits in the window. 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 -// parent element. + // Add the tooltip to the document body. We add it here because + // we need to position it absolutely, without reference to its + // parent element. dom.document.body.append(tooltipElem); }