things-editor-animation.html

<!--
@license
Copyright © HatioLab Inc. All rights reserved.
-->
<link rel="import" href="../polymer/polymer.html" />

<link rel="import" href="../iron-pages/iron-pages.html" />
<link rel="import" href="../things-i18n-msg/things-i18n-msg.html" />
<link rel="import" href="./things-editor-number-input.html" />
<link rel="import" href="./things-editor-angle-input.html" /> <link rel="import" href="./things-editor-value.html" />

<!--
컴포넌트의 그림자를 주는 속성이다.

Example:

    <things-editor-animation value={{animation}}>
    </things-editor-animation>

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

<dom-module id="things-editor-animation">
  <template>
    <style>
      :host {
        display: block;
        @apply (--things-editor-animation);
      }

      paper-radio-button {
        padding: 2px 1px 10px 7px !important;
      }

      .icon-only-label {
        @apply (--things-properties-icon-only-label);
        float: left;
        margin-top: 2px;
        margin-left: 40px;
      }

      .icon-only-label.color {
        background-position: 70% -498px;
      }

      things-editor-color::animation #text {
        width: 71%;
      }

      label {
        @apply (--things-label);
      }

      input {
        @apply (--things-input);
      }

      fieldset {
        @apply (--things-fieldset);
      }

      legend {
        @apply (--things-fieldset-legend);
      }
    </style>

    <label><things-i18n-msg msgid="label.waiting-time" auto>waiting time</things-i18n-msg></label>
    <input is="things-editor-number-input" number="{{animation.delay::change}}" placeholder="ms" />

    <label><things-i18n-msg msgid="label.duration" auto>duration</things-i18n-msg></label>
    <input is="things-editor-number-input" number="{{animation.duration::change}}" placeholder="ms" />

    <template is="dom-if" if="[[_isRotation(value.type)]]">
      <label><things-i18n-msg msgid="label.theta" auto>theta</things-i18n-msg></label>
      <input is="things-editor-angle-input" radian="{{animation.theta::change}}" />
    </template>

    <template is="dom-if" if="[[_isVibration(value.type)]]">
      <label><things-i18n-msg msgid="label.theta" auto>theta</things-i18n-msg></label>
      <input is="things-editor-angle-input" radian="{{animation.theta::change}}" />
    </template>

    <template is="dom-if" if="[[_isHeartbeat(value.type)]]">
      <label><things-i18n-msg msgid="label.scale" auto>scale</things-i18n-msg></label>
      <input is="things-editor-number-input" number="{{animation.scale::change}}" />
    </template>

    <template is="dom-if" if="[[_isMoving(value.type)]]">
      <label><things-i18n-msg msgid="label.x-axes" auto>X-axes</things-i18n-msg></label>
      <input is="things-editor-number-input" number="{{animation.x::change}}" />

      <label><things-i18n-msg msgid="label.y-axes" auto>Y-axes</things-i18n-msg></label>
      <input is="things-editor-number-input" number="{{animation.y::change}}" />
    </template>

    <template is="dom-if" if="[[_isFade(value.type)]]">
      <label><things-i18n-msg msgid="label.start-alpha" auto>start alpha</things-i18n-msg></label>
      <input is="things-editor-number-input" number="{{animation.startAlpha::change}}" />

      <label><things-i18n-msg msgid="label.end-alpha" auto>end alpha</things-i18n-msg></label>
      <input is="things-editor-number-input" number="{{animation.endAlpha::change}}" />
    </template>

    <template is="dom-if" if="[[_isOutline(value.type)]]">
      <label><things-i18n-msg msgid="label.target" auto>target</things-i18n-msg></label>
      <input required value="{{animation.rideOn::change}}" />
    </template>

    <label><things-i18n-msg msgid="label.repeat" auto>repeat</things-i18n-msg></label>
    <input type="checkbox" checked="{{animation.repeat::change}}" />
  </template>

  <script>
    Polymer({
      is: 'things-editor-animation',

      properties: {
        value: {
          notify: true
        }
      },

      listeners: {
        'value-changed': 'onChangedValue'
      },

      observers: ['onChangedAnimation(animation.*)'],

      onChangedValue: function(changed, after) {
        if (this.changedOnThis) {
          return
        }

        var value = after.value

        if (!value) {
          this.animation = {}
          return
        }

        this.animation = Object.assign({}, value)
      },

      onChangedAnimation: function(changed) {
        if (changed.path.indexOf('animation.') !== 0) return

        this.changedOnThis = true

        var prop = changed.path.substr(10)
        this.set('value.' + prop, changed.value)

        this.changedOnThis = false
      },

      _isOutline: function(type) {
        return type == 'outline'
      },

      _isRotation: function(type) {
        return type == 'rotation'
      },

      _isVibration: function(type) {
        return type == 'vibration'
      },

      _isHeartbeat: function(type) {
        return type == 'heartbeat'
      },

      _isMoving: function(type) {
        return type == 'moving'
      },

      _isFade: function(type) {
        return type == 'fade'
      }
    })
  </script>
</dom-module>