Add fling support to sky-drawer

sky/framework/sky-drawer.sky

 <!--
 // 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 src="animation/controller.sky" as="AnimationController" />
 <import src="animation/curves.sky" as="Curves" />
 <import src="sky-element/sky-element.sky" as="SkyElement" />
 <import src="sky-scrollable.sky" />
 
@@ skipping 18 matching lines @@
       background-color: yellow;
       will-change: transform;
       position: absolute;
       width: 256px;
       top: 0;
       left: 0;
       bottom: 0;
     }
   </style>
   <div id="mask" on-click="handleMaskClick" />
-  <div id="content">
+  <div id="content" on-gestureflingstart="handleFlingStart">
     <content/>
   </div>
 </template>
 <script>
 const kWidth = 256;
-const kMinAnimationDurationMS = 120;
-const kMaxAnimationDurationMS = 500;
+const kMinFlingVelocity = 0.4;
+const kMinAnimationDurationMS = 246;
+const kMaxAnimationDurationMS = 600;
 const kAnimationCurve = Curves.easeInOut;
 
 module.exports = class extends SkyElement {
   created() {
     this.position_ = 0;
     this.mask_ = null;
     this.content_ = null;
     this.animation_ = new AnimationController(this);
   }
 
@@ skipping 40 matching lines @@
 
   settle_() {
     if (this.isMostlyClosed)
       this.close();
     else
       this.open();
   }
 
   animateToPosition_(targetPosition) {
     var currentPosition = this.position_;
-    var animationDistance = Math.abs(targetPosition - currentPosition);
-    var duration = kMaxAnimationDurationMS * animationDistance / kWidth;
+    var distance = Math.abs(targetPosition - currentPosition);
+    var duration = kMaxAnimationDurationMS * distance / kWidth;
     this.animation_.start({
       begin: currentPosition,
       end: targetPosition,
       duration: Math.max(kMinAnimationDurationMS, duration),
       curve: kAnimationCurve,
     });
   }
 
   updateAnimation(position) {
     this.position = position;
@@ skipping 13 matching lines @@
 
   handlePointerUp(event) {
     if (!this.animation_.isAnimating)
       this.settle_();
   }
 
   handlePointerCancel(event) {
     if (!this.animation_.isAnimating)
       this.settle_();
   }
+
+  handleFlingStart(event) {
+    var direction = Math.sign(event.velocityX);
+    var velocityX = Math.abs(event.velocityX) / 1000;
+    if (velocityX < kMinFlingVelocity)
+      return;
+    var targetPosition = direction < 0 ? -kWidth : 0;
+    var currentPosition = this.position_;
+    var distance = Math.abs(targetPosition - currentPosition);
+    var duration = distance / velocityX;
+    this.animation_.start({
+      begin: currentPosition,
+      end: targetPosition,
+      duration: duration,
+      curve: Curves.linear,
+    });
+  }
 }.register();
 </script>
 </sky-element>