Add fling support to sky-drawer

sky/framework/sky-drawer.sky

Index: sky/framework/sky-drawer.sky
diff --git a/sky/framework/sky-drawer.sky b/sky/framework/sky-drawer.sky
index 12c3b2bceff0835d908348feb3c458c5dba33105..13e0ef9e2ade22bad8c14eb58fa74eca4d5671ca 100644
--- a/sky/framework/sky-drawer.sky
+++ b/sky/framework/sky-drawer.sky
@@ -36,14 +36,15 @@
     }
   </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 {
@@ -104,8 +105,8 @@ module.exports = class extends SkyElement {
 
   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,
@@ -139,6 +140,23 @@ module.exports = class extends SkyElement {
     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>