sky/framework/elements/sky-ink-splash.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="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";
import "dart:async";

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;
  Completer<SkyInkSplash> _completer = new Completer();

  SkyInkSplash() {
    _animation = new AnimationController(this);
  }

  void shadowRootReady() {
    _splash = shadowRoot.getElementById('splash');
  }

  Future 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);
    return _completer.future;
  }

  void _done() {
    remove();
    _completer.complete(this);
  }

  void cancel() {
    // TODO(eseidel): Should fade away instead of stopping immediately.
    _animation.stop();
    _done();
  }

  void updateAnimation(double p) {
    if (p == _kSplashSize) {
      _done();
      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>