vivus-svg.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link href="https://polygit.org/components/polymer/polymer.html" rel="import">
<link rel="import" href="https://rawgit.com/lloydud/vivus-svg/master/vivus-import.html">
<!--
A light weight wrapper around vivus-svg

Example:

    <vivus-svg file="hi.svg" type="scenario-sync" start="autostart" duration="20" dash-gap="20" force-render="false"></vivus-svg>

@demo demo/index.html
@hero hero.svg
-->

<dom-module id="vivus-svg">
  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
      }
    </style>
    <div id="svg"></div>
  </template>

  <script>
    Polymer({
      is: 'vivus-svg',

      properties: {
        /** Link to the SVG to animate. If set, Vivus will create an object tag and append it to the DOM element given to the constructor. Be careful, use the onReady callback before playing with the Vivus instance. */
        file: {
          type: String
        },

        /** The fill color of the svg */
        fill: {
          type: String,
          value: 'white'
        },

        /** The stroke color of the svg */
        stroke: {
          type: String,
          value: 'black'
        },

        /** Defines what kind of animation will be used: delayed, async, oneByOne, script, scenario or scenario-sync. [Default: delayed] */
        type: {
          type: String,
          value: 'delayed'
        },

        /** Animation duration, in frames. [Default: 200] */
        duration: {
          type: Number,
          value: 200
        },

        /** Defines how to trigger the animation (inViewport once the SVG is in the viewport, manual gives you the freedom to call draw method to start, autostart makes it start right now). [Default: inViewport] **/
        start: {
          type: String,
          value: 'inViewport'
        },

        /** Time between the drawing of first and last path, in frames (only for delayed animations). */
        delay: {
          type: Number,
          value: 0
        },

        /** Whitespace extra margin between dashes. Increase it in case of glitches at the initial state of the animation. [Default: 2] */
        dashGap: {
          type: Number,
          value: 2
        },

        /** Force the browser to re-render all updated path items. By default, the value is true on IE only. (check the 'troubleshoot' section for more details). */
        forceRender: {
          type: Boolean,
          value: true
        },

        /** Removes all extra styling on the SVG, and leaves it as original. */
        selfDestroy: {
          type: Boolean,
          value: false
        },

        _img: {
          type: Object
        }
      },

      animate: function () {
        this._img.reset();
        this._img.play();
      },

      ready: function () {
        var that = this;
        this._img = new Vivus(this.$.svg,
          {
            type: this.type,
            duration: this.duration,
            file: this.file,
            start: this.start,
            delay: this.delay,
            dashGap: this.dashGap,
            forceRender: this.forceRender,
            selfDestroy: this.selfDestroy,
            onReady: function (myVivus) {
              /**
              * @fires ready
              */
              that.fire('ready', myVivus);
              myVivus.el.setAttribute('fill', that.fill);
              myVivus.el.setAttribute('stroke', that.stroke);
            }
          });

      }

    });
  </script>
</dom-module>