bubble-overlay.html

<!--
Copyright 2015 Google Inc. All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at

      http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
CONDITIONS OF ANY KIND, either express or implied. See the License for the
specific language governing permissions and limitations under the License.
-->
<link rel="import" href="../../components/polymer/polymer.html">

<script src="bubble.js"></script>

<!--
Canvas overlay to draw animated cut-out bubbles over the content.
-->
<dom-module id="bubble-overlay">
<template>
  <style>
    :host {
      position: relative;
      display: block;
    }
    canvas {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
    }
  </style>
  <canvas id="canvas"></canvas>
  <content></content>
</template>
<script>
  Polymer({
    is: 'bubble-overlay',

    properties: {

      /**
       * Color of the overlay.
       */
      color: {
        type: String,
        value: '#ff0000'
      },

      bubbles: {
        type: Array,
        value: function() { return []; }
      }

    },

    ready: function() {
      this.ctx = this.$.canvas.getContext('2d');
      this.draw();
    },

    /**
     * Draws the overlay and the bubbles;
     */
    draw: function() {
      this.$.canvas.width = window.innerWidth;
      this.$.canvas.height = window.innerHeight;
      this.ctx.fillStyle = this.color;
      this.ctx.fillRect(0, 0, this.$.canvas.width, this.$.canvas.height);
      this.refresh();
    },

    /**
     * Cuts out all bubbles on the overlay;
     */
    refresh: function() {
      if (this.bubbles && this.bubbles.length) {
        this.ctx.save();
        for (var i = 0; i < this.bubbles.length; i++) {
          this.bubbles[i].cutout();
        }
        this.ctx.restore();
      }
    },

    /**
     * Registers a new bubble with the overlay.
     *
     * @param {Element} bubble An canvas-bubble element.
     */
    registerBubble: function(bubble) {
      if (!this.bubbles) {
        this.bubbles = [];
      }
      this.bubbles.push(bubble);
      bubble.addEventListener(Bubble.EventType.UPDATE, function() {
        this.refresh();
      }.bind(this));
    }
  });
</script>
</dom-module>


<!--
A cut-out bubble in the canvas over the content.
Must be a child of bubble-overlay.
-->
<dom-module id="canvas-bubble">
<template>
  <style>
    :host {
      position: absolute;
      display: block;
      border-radius: 50%;
    };
  </style>
</template>
<script>
  Polymer({

    is: 'canvas-bubble',

    properties: {

      /**
       * Bubble's radius (0 is closed).
       */
      radius: {
        type: Number,
        value: 0
      },

      /**
       * Bubble's location along x axis.
       */
      x: {
        type: Number,
        value: 0,
        notify: true
      },

      /**
       * Bubble's location along y axis.
       */
      y: {
        type: Number,
        value: 0,
        notify: true
      },

      /**
       * Underlying canvas bubble.
       * @type Bubble
       */
      bubble: {
        type: Object,
        value: undefined
      }

    },

    observers: [
      '_moveBubble(x, y, radius, bubble)'
    ],

    ready: function() {
      this._setupBubble();
      this._updatePosition();
    },

    _setupBubble: function() {
      var parent = Polymer.dom(this).parentNode;

      if (parent.localName !== 'bubble-overlay') {
        console.warn(
            'The parent element of the bubble has to be a <bubble-overlay>.');
      }
      this.bubble = new Bubble(this.x, this.y, parent);

      this.bubble.addEventListener('translate', function(e) {
        this.fire('translate');
      }.bind(this));

      this.bubble.addEventListener('resize', function(e) {
        this.fire('resize');
      }.bind(this));
    },

    _updatePosition: function() {
      this.style.width = 2 * this.radius + 'px';
      this.style.height = 2 * this.radius + 'px';
      this.style.top = this.y - this.radius + 'px';
      this.style.left = this.x - this.radius + 'px';
    },

    _moveBubble: function(x, y, radius, bubble) {
      this.bubble.move(x, y, radius);
    },

    /**
     * Changes bubble's radius.
     *
     * @method open
     * @param {number} radius A new radius.
     * @param {Function} callback To be called after opening is finished.
     */
    open: function(radius, callback) {
      this.bubble.open(radius, callback);
      this.radius = radius;
      this._updatePosition();
    },

    /**
     * Changes bubble's location and optionally radius.
     *
     * @method move
     * @param {number} x A new location along x axis.
     * @param {number} y A new location along y axis.
     * @param {number} radius A new radius.
     * @param {Function} callback To be called after opening is finished.
     */
    move: function(x, y, radius, callback) {
      this.bubble.translate(x, y, radius, callback);
      this.x = x;
      this.y = y;
      this.radius = radius;
      this._updatePosition();
    }
  });
</script>
</dom-module>