From c149c2802dc821653ef6ae5d2232e7ab85534e7a Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Tue, 24 Feb 2015 15:41:52 -0800
Subject: [PATCH] Implement quantum ink splashes

These aren't 100% correct, but they look somewhat reasonable.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/954023002
---
 examples/stocks/stock.sky      |  3 +-
 framework/material-element.sky | 30 ++++++++++++
 framework/sky-drawer.sky       |  2 +-
 framework/sky-ink-splash.sky   | 84 ++++++++++++++++++++++++++++++++++
 4 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 framework/material-element.sky
 create mode 100644 framework/sky-ink-splash.sky

diff --git a/examples/stocks/stock.sky b/examples/stocks/stock.sky
index 71261f6f118..335fada1fd2 100644
--- a/examples/stocks/stock.sky
+++ b/examples/stocks/stock.sky
@@ -3,6 +3,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
+<import src="/sky/framework/material-element.sky" />
 <import src="/sky/framework/sky-element.sky" />
 <import src="stock-arrow.sky" />
 
@@ -46,7 +47,7 @@
 import "dart:sky";
 
 @Tagname('stock')
-class Stock extends SkyElement {
+class Stock extends MaterialElement {
   var model; // model.Stock
 
   void shadowRootReady() {
diff --git a/framework/material-element.sky b/framework/material-element.sky
new file mode 100644
index 00000000000..046019219b7
--- /dev/null
+++ b/framework/material-element.sky
@@ -0,0 +1,30 @@
+<!--
+// 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="sky-element.sky" />
+<import src="sky-ink-splash.sky" />
+<script>
+import "dart:sky";
+
+HTMLStyleElement _kStyleElement;
+
+class MaterialElement extends SkyElement {
+  MaterialElement() {
+    addEventListener('pointerdown', _handlePointerDown);
+  }
+
+  void _handlePointerDown(PointerEvent event) {
+    // We set the transform here to become a container for absolutely positioned
+    // elements. We should either have a better way of becoming such a container
+    // or we should make every RenderBlock be such a container.
+    style['transform'] = 'translateX(0)';
+
+    ClientRect rect = getBoundingClientRect();
+    SkyInkSplash splash = new SkyInkSplash();
+    shadowRoot.prependChild(splash);
+    splash.start(event.x, event.y, rect);
+  }
+}
+</script>
diff --git a/framework/sky-drawer.sky b/framework/sky-drawer.sky
index d9a4e9ab7f8..2a997dd9f63 100644
--- a/framework/sky-drawer.sky
+++ b/framework/sky-drawer.sky
@@ -144,7 +144,7 @@ class SkyDrawer extends SkyElement implements AnimationDelegate {
   }
 
   void _handleFlingStart(event) {
-    double direction = event.velocityX.sign();
+    double direction = event.velocityX.sign;
     double velocityX = event.velocityX.abs() / 1000;
     if (velocityX < _kMinFlingVelocity)
       return;
diff --git a/framework/sky-ink-splash.sky b/framework/sky-ink-splash.sky
new file mode 100644
index 00000000000..9f920e92711
--- /dev/null
+++ b/framework/sky-ink-splash.sky
@@ -0,0 +1,84 @@
+<!--
+// 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="sky-element.sky" />
+
+<sky-element>
+<template>
+  <style>
+    :host {
+      position: absolute;
+      pointer-events: none;
+      overflow: hidden;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
+
+    #splash {
+      position: absolute;
+      background-color: rgba(0, 0, 0, 0.4);
+      border-radius: 0;
+      top: 0;
+      left: 0;
+      height: 0;
+      width: 0;
+    }
+  </style>
+  <div id="splash" />
+</template>
+<script>
+import "animation/controller.dart";
+import "animation/curves.dart";
+import "animation/timer.dart";
+import "dart:math" as math;
+import "dart:sky";
+
+const double _kSplashSize = 400.0;
+const double _kSplashDuration = 500.0;
+
+@Tagname('sky-ink-splash')
+class SkyInkSplash extends SkyElement implements AnimationDelegate {
+  AnimationController _animation;
+  Element _splash;
+  double _offsetX;
+  double _offsetY;
+
+  SkyInkSplash() {
+    _animation = new AnimationController(this);
+  }
+
+  void shadowRootReady() {
+    _splash = shadowRoot.getElementById('splash');
+  }
+
+  void start(double x, double y, ClientRect rect) {
+    _offsetX = x - rect.left;
+    _offsetY = y - rect.top;
+    _animation.start(
+      begin: 0.0,
+      end: _kSplashSize,
+      duration: _kSplashDuration,
+      curve: easeOut);
+  }
+
+  void updateAnimation(double p) {
+    if (p == _kSplashSize) {
+      remove();
+      return;
+    }
+    _splash.style['top'] = '${_offsetY - p/2}px';
+    _splash.style['left'] = '${_offsetX - p/2}px';
+    _splash.style['width'] = '${p}px';
+    _splash.style['height'] = '${p}px';
+    _splash.style['border-radius'] = '${p}px';
+    _splash.style['opacity'] = '${1.0 - (p / _kSplashSize)}';
+  }
+}
+
+_init(script) => register(script, SkyInkSplash);
+</script>
+</sky-element>