icon-transition.html

<!--
Copyright (c) 2014 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
-->

<!--
`icon-transition` is an element allowing line-based SVG icons to seamlessly change from one to the other. It provides an implementation of Material Design's [delightful details](http://www.google.com/design/spec/animation/delightful-details.html) transitions.

Example:

    <icon-transition id="icon1" on-mouseover="pickIcon" icon="plus" ></icon-transition>
    <icon-transition id="icon2" on-mouseover="pickIcon" icon="check" ></icon-transition>

    <script>
      Polymer({
        is: 'transition-demo',
        pickIcon: function(e) {
          this.icon = e.currentTarget.icon;
        }
      });
    </script>

In the above example, we have two `<icon-transition>` icons whose transitions are specified in CSS. Hovering over the icon triggers a transition from one icon to the next.

@group Polymer Labs Elements
@element icon-transition
@homepage github.io
@contributors Tom Wiltzius, Addy Osmani, Nicholas Albion
-->

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="icon-transition">
    <link rel="stylesheet" href="icon-transition.css">
    <template>
        <svg id="svg" viewbox="0 0 24 24" stroke$="{{color}}">
            <g transform="translate(12, 12)">
                <line x1="-1" y1="0" x2="1" y2="0"></line>
                <line x1="-1" y1="0" x2="1" y2="0"></line>
                <line x1="-1" y1="0" x2="1" y2="0"></line>
            </g>
        </svg>
    </template>
    <script>
        Polymer({
            is: 'icon-transition',

            properties: {
                /** Specify the stroke color of the current SVG icon */
                _rotate: 0,
                color: {
                    type: String,
                    value: '#000'
                },
                icon: {
                    type: String,
                    observer: 'iconChanged'
                }
            },

            iconChanged: function() {
                this._rotate += 180;

                var cl = this.icon;
                if ((this._rotate % 360) == 180) {
                    cl += ' rotate';
                }
                var svg = this.$.svg; // Polymer.dom(this.$.svg);
                svg.setAttribute('class', cl);

                var transform = 'rotate(' + this._rotate + 'deg)';
                if (document.documentElement.style.transform !== undefined) {
                    svg.style.transform = transform;
                } else {
                    svg.style.webkitTransform = transform;
                }
            }
        });
    </script>
</dom-module>