Move example fn widgets into sky/framework/components

sky/framework/components/drawer.dart

-part of widgets;
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../animation/curves.dart';
+import '../animation/generator.dart';
+import '../fn.dart';
+import '../theme/colors.dart';
+import '../theme/shadows.dart';
+import 'dart:async';
+import 'dart:math' as math;
+import 'dart:sky' as sky;
 
 const double _kWidth = 256.0;
 const double _kMinFlingVelocity = 0.4;
 const double _kBaseSettleDurationMS = 246.0;
 const double _kMaxSettleDurationMS = 600.0;
 const Cubic _kAnimationCurve = easeOut;
 
 class DrawerAnimation extends Animation {
-
   Stream<double> get onPositionChanged => onValueChanged;
 
   bool get _isMostlyClosed => value <= -_kWidth / 2;
 
   DrawerAnimation() {
     value = -_kWidth;
   }
 
   void toggle(_) => _isMostlyClosed ? _open() : _close();
 
@@ skipping 39 matching lines @@
 
     double targetPosition = direction < 0.0 ? -_kWidth : 0.0;
     double distance = (targetPosition - value).abs();
     double duration = distance / velocityX;
 
     animateTo(targetPosition, duration, curve: linear);
   }
 }
 
 class Drawer extends Component {
-
-  static Style _style = new Style('''
+  static final Style _style = new Style('''
     position: absolute;
     z-index: 2;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     box-shadpw: ${Shadow[3]};'''
   );
 
-  static Style _maskStyle = new Style('''
+  static final Style _maskStyle = new Style('''
     background-color: black;
     will-change: opacity;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;'''
   );
 
-  static Style _contentStyle = new Style('''
+  static final Style _contentStyle = new Style('''
     background-color: ${Grey[50]};
     will-change: transform;
     position: absolute;
     z-index: 3;
     width: 256px;
     top: 0;
     left: 0;
     bottom: 0;'''
   );
 
   DrawerAnimation animation;
   List<Node> children;
 
   Drawer({
     Object key,
     this.animation,
     this.children
-  }) : super(key: key);
+  }) : super(key: key) {
+    events.listen('pointerdown', animation.handlePointerDown);
+    events.listen('pointermove', animation.handlePointerMove);
+    events.listen('pointerup', animation.handlePointerUp);
+    events.listen('pointercancel', animation.handlePointerCancel);
+  }
 
   double _position = -_kWidth;
 
   bool _listening = false;
 
   void _ensureListening() {
     if (_listening)
       return;
 
     _listening = true;
@@ skipping 23 matching lines @@
       key: 'Content',
       style: _contentStyle,
       inlineStyle: contentInlineStyle,
       children: children
     );
 
     return new Container(
       style: _style,
       inlineStyle: inlineStyle,
       children: [ mask, content ]
-    )..events.listen('pointerdown', animation.handlePointerDown)
-     ..events.listen('pointermove', animation.handlePointerMove)
-     ..events.listen('pointerup', animation.handlePointerUp)
-     ..events.listen('pointercancel', animation.handlePointerCancel);
-
+    );
   }
 }