Merge pull request #102 from vicb/import

[WIP] Upgrade to Angular 0.9.10 & misc changes

Author: kwalrath

Chapter_01/pubspec.lock

@@ -84,7 +84,7 @@ packages:
   unittest:
     description: unittest
     source: hosted
-    version: "0.10.1"
+    version: "0.10.1+1"
   utf:
     description: utf
     source: hosted

Chapter_02/pubspec.lock

@@ -88,7 +88,7 @@ packages:
   unittest:
     description: unittest
     source: hosted
-    version: "0.10.1"
+    version: "0.10.1+2"
   utf:
     description: utf
     source: hosted

Chapter_03/lib/rating/rating_component.dart

@@ -53,9 +53,8 @@ class RatingComponent {
     stars = new List.generate(count, (i) => i + 1);
   }
 
-  String starClass(int star) {
-    return star > rating ? _STAR_OFF_CLASS : _STAR_ON_CLASS;
-  }
+  String starClass(int star) =>
+      star > rating ? _STAR_OFF_CLASS : _STAR_ON_CLASS;
 
   String starChar(int star) => star > rating ? _STAR_OFF_CHAR : _STAR_ON_CHAR;
 

Chapter_03/lib/rating/rating_component.html

@@ -1,5 +1,4 @@
 <span class="stars"
-      ng-if="cmp.rating != null"
       ng-repeat="star in cmp.stars"
       ng-click="cmp.handleClick(star)"
       ng-class="cmp.starClass(star)">

Chapter_03/pubspec.lock

@@ -88,7 +88,7 @@ packages:
   unittest:
     description: unittest
     source: hosted
-    version: "0.10.1"
+    version: "0.10.1+1"
   utf:
     description: utf
     source: hosted

Chapter_03/web/main.dart

@@ -1,7 +1,6 @@
 library recipe_book;
 
 import 'package:angular/angular.dart';
-import 'package:di/di.dart';
 
 import 'package:angular_dart_demo/rating/rating_component.dart';
 import 'package:angular_dart_demo/recipe_book.dart';

Chapter_04/lib/rating/rating_component.dart

@@ -53,9 +53,8 @@ class RatingComponent {
     stars = new List.generate(count, (i) => i + 1);
   }
 
-  String starClass(int star) {
-    return star > rating ? _STAR_OFF_CLASS : _STAR_ON_CLASS;
-  }
+  String starClass(int star) =>
+      star > rating ? _STAR_OFF_CLASS : _STAR_ON_CLASS;
 
   String starChar(int star) => star > rating ? _STAR_OFF_CHAR : _STAR_ON_CHAR;
 

Chapter_04/lib/rating/rating_component.html

@@ -1,5 +1,4 @@
 <span class="stars"
-      ng-if="cmp.rating != null"
       ng-repeat="star in cmp.stars"
       ng-click="cmp.handleClick(star)"
       ng-class="cmp.starClass(star)">

Chapter_04/lib/recipe_book.dart

@@ -21,6 +21,7 @@ class RecipeBookController {
 
   // Tooltip
   static final tooltip = new Expando<TooltipModel>();
+
   TooltipModel tooltipForRecipe(Recipe recipe) {
     if (tooltip[recipe] == null) {
       tooltip[recipe] = new TooltipModel(recipe.imgUrl,

Chapter_04/lib/tooltip/tooltip_directive.dart

@@ -7,17 +7,16 @@ import 'package:angular/angular.dart';
 @NgDirective(
     selector: '[tooltip]')
 class Tooltip {
-  dom.Element element;
+  final dom.Element element;
 
   @NgOneWay('tooltip')
   TooltipModel displayModel;
 
   dom.Element tooltipElem;
 
   Tooltip(this.element) {
-    element
-        ..onMouseEnter.listen((_) => _createTemplate())
-        ..onMouseLeave.listen((_) => _destroyTemplate());
+    element..onMouseEnter.listen((_) => _createTemplate())
+           ..onMouseLeave.listen((_) => _destroyTemplate());
   }
 
   void _createTemplate() {
@@ -47,19 +46,13 @@ class Tooltip {
         ..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();
-
     // position the tooltip.
-    // Figure out where the containing element sits in the window.
+    var elTopRight = element.offset.topRight;
+
     tooltipElem.style
         ..position = "absolute"
-        ..top = "${top - height}px"
-        ..left = "${left + width + 10}px";
+        ..top = "${elTopRight.y}px"
+        ..left = "${elTopRight.x + 10}px";
 
     // Add the tooltip to the document body. We add it here because
     // we need to position it absolutely, without reference to its

Chapter_04/pubspec.lock

@@ -88,7 +88,7 @@ packages:
   unittest:
     description: unittest
     source: hosted
-    version: "0.10.1"
+    version: "0.10.1+2"
   utf:
     description: utf
     source: hosted

Chapter_04/web/main.dart

@@ -1,7 +1,6 @@
 library recipe_book;
 
 import 'package:angular/angular.dart';
-import 'package:di/di.dart';
 
 import 'package:angular_dart_demo/recipe_book.dart';
 import 'package:angular_dart_demo/rating/rating_component.dart';

Chapter_05/lib/filter/category_filter.dart

@@ -12,5 +12,6 @@ class CategoryFilter {
           ? recipeList.toList()
           : recipeList.where((i) => filterMap[i.category] == true).toList();
     }
+    return const [];
   }
 }

Chapter_05/lib/rating/rating_component.dart

@@ -53,9 +53,8 @@ class RatingComponent {
     stars = new List.generate(count, (i) => i + 1);
   }
 
-  String starClass(int star) {
-    return star > rating ? _STAR_OFF_CLASS : _STAR_ON_CLASS;
-  }
+  String starClass(int star) =>
+      star > rating ? _STAR_OFF_CLASS : _STAR_ON_CLASS;
 
   String starChar(int star) => star > rating ? _STAR_OFF_CHAR : _STAR_ON_CHAR;
 

Chapter_05/lib/rating/rating_component.html

@@ -1,5 +1,4 @@
 <span class="stars"
-      ng-if="cmp.rating != null"
       ng-repeat="star in cmp.stars"
       ng-click="cmp.handleClick(star)"
       ng-class="cmp.starClass(star)">

Chapter_05/lib/recipe_book.dart

@@ -11,10 +11,10 @@ import 'tooltip/tooltip_directive.dart';
 class RecipeBookController {
 
   static const String LOADING_MESSAGE = "Loading recipe book...";
-  static const String ERROR_MESSAGE = """Sorry! The cook stepped out of the 
-kitchen and took the recipe book with him!""";
+  static const String ERROR_MESSAGE = "Sorry! The cook stepped out of the "
+      "kitchen and took the recipe book with him!";
 
-  Http _http;
+  final Http _http;
 
   // Determine the initial load state of the app
   String message = LOADING_MESSAGE;
@@ -26,10 +26,10 @@ kitchen and took the recipe book with him!""";
   List<Recipe> recipes = [];
 
   // Filter box
-  Map<String, bool> categoryFilterMap = {};
+  final categoryFilterMap = <String, bool>{};
   String nameFilterString = "";
 
-  RecipeBookController(Http this._http) {
+  RecipeBookController(this._http) {
     _loadData();
   }
 
@@ -62,9 +62,7 @@ kitchen and took the recipe book with him!""";
     _http.get('recipes.json')
       .then((HttpResponse response) {
         print(response);
-        for (Map recipe in response.data) {
-          recipes.add(new Recipe.fromJson(recipe));
-        }
+        recipes = response.data.map((d) => new Recipe.fromJson(d)).toList();
         recipesLoaded = true;
       })
       .catchError((e) {

Chapter_05/lib/tooltip/tooltip_directive.dart

@@ -7,17 +7,16 @@ import 'package:angular/angular.dart';
 @NgDirective(
     selector: '[tooltip]')
 class Tooltip {
-  dom.Element element;
+  final dom.Element element;
 
   @NgOneWay('tooltip')
   TooltipModel displayModel;
 
   dom.Element tooltipElem;
 
   Tooltip(this.element) {
-    element
-        ..onMouseEnter.listen((_) => _createTemplate())
-        ..onMouseLeave.listen((_) => _destroyTemplate());
+    element..onMouseEnter.listen((_) => _createTemplate())
+           ..onMouseLeave.listen((_) => _destroyTemplate());
   }
 
   void _createTemplate() {
@@ -47,19 +46,13 @@ class Tooltip {
         ..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();
-
     // position the tooltip.
-    // Figure out where the containing element sits in the window.
+    var elTopRight = element.offset.topRight;
+
     tooltipElem.style
         ..position = "absolute"
-        ..top = "${top - height}px"
-        ..left = "${left + width + 10}px";
+        ..top = "${elTopRight.y}px"
+        ..left = "${elTopRight.x + 10}px";
 
     // Add the tooltip to the document body. We add it here because
     // we need to position it absolutely, without reference to its

Chapter_05/pubspec.lock

@@ -88,7 +88,7 @@ packages:
   unittest:
     description: unittest
     source: hosted
-    version: "0.10.1"
+    version: "0.10.1+1"
   utf:
     description: utf
     source: hosted

Chapter_05/web/index.html

@@ -15,7 +15,7 @@ <h3>Recipe List</h3>
       <div id="filters">
         <div>
           <label for="name-filter">Filter recipes by name</label>
-          <input id="name-filter" type="text" 
+          <input id="name-filter" type="text"
                  ng-model="ctrl.nameFilterString">
         </div>
         <div>
@@ -29,7 +29,7 @@ <h3>Recipe List</h3>
         </div>
         <input type="button" value="Clear Filters" ng-click="ctrl.clearFilters()">
       </div>
-  
+
       <div id="recipe-list">
         <ul>
           <li class="pointer"
@@ -41,8 +41,8 @@ <h3>Recipe List</h3>
             </span>
           </li>
         </ul>
-      </div>      
-  
+      </div>
+
       <div id="recipe-details" ng-if="ctrl.selectedRecipe != null">
         <h3>Recipe Details</h3>
           <div><strong>Name: </strong>{{ctrl.selectedRecipe.name}}</div>

Chapter_05/web/main.dart

@@ -1,7 +1,6 @@
 library recipe_book;
 
 import 'package:angular/angular.dart';
-import 'package:di/di.dart';
 
 import 'package:angular_dart_demo/recipe_book.dart';
 import 'package:angular_dart_demo/filter/category_filter.dart';

Chapter_06/lib/component/search_recipe_component.dart

@@ -7,16 +7,23 @@ import 'package:angular/angular.dart';
     templateUrl: 'packages/angular_dart_demo/component/search_recipe_component.html',
     publishAs: 'cmp')
 class SearchRecipeComponent {
+  Map<String, bool> _categoryFilterMap;
+  List<String> _categories;
+
   @NgTwoWay('name-filter-string')
   String nameFilterString = "";
 
   @NgTwoWay('category-filter-map')
-  Map<String, bool> categoryFilterMap;
+  Map<String, bool> get categoryFilterMap => _categoryFilterMap;
+  void set categoryFilterMap(values) {
+    _categoryFilterMap = values;
+    _categories = categoryFilterMap.keys.toList();
+  }
 
-  List<String> get categories => categoryFilterMap.keys.toList();
+  List<String> get categories => _categories;
 
   void clearFilters() {
-    categoryFilterMap.keys.forEach((f) => categoryFilterMap[f] = false);
+    _categoryFilterMap.keys.forEach((f) => _categoryFilterMap[f] = false);
     nameFilterString = "";
   }
 }

Chapter_06/lib/filter/category_filter.dart

@@ -9,8 +9,9 @@ class CategoryFilter {
       // If there is nothing checked, treat it as "everything is checked"
       bool nothingChecked = filterMap.values.every((isChecked) => !isChecked);
       return nothingChecked
-          ? recipeList.toList()
+          ? recipeList
           : recipeList.where((i) => filterMap[i.category] == true).toList();
     }
+    return const [];
   }
 }

Chapter_06/lib/rating/rating_component.dart

@@ -53,9 +53,8 @@ class RatingComponent {
     stars = new List.generate(count, (i) => i + 1);
   }
 
-  String starClass(int star) {
-    return star > rating ? _STAR_OFF_CLASS : _STAR_ON_CLASS;
-  }
+  String starClass(int star) =>
+      star > rating ? _STAR_OFF_CLASS : _STAR_ON_CLASS;
 
   String starChar(int star) => star > rating ? _STAR_OFF_CHAR : _STAR_ON_CHAR;
 

Chapter_06/lib/rating/rating_component.html

@@ -1,5 +1,4 @@
 <span class="stars"
-      ng-if="cmp.rating != null"
       ng-repeat="star in cmp.stars"
       ng-click="cmp.handleClick(star)"
       ng-class="cmp.starClass(star)">