things-editor-angle-input.html

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

<!--
Degree 각도 값을 입력 받아서, radian 값으로 변환해주는 input의 확장 엘리먼트이다.

Example:

    <input is="things-editor-angle-input" radian="{{radian}}">

@demo demo/index-editor-angle-input.html
@hero hero.svg
-->

<dom-module id="things-editor-angle-input">
  <script>
    (function () {
      'use strict';

      Polymer({
        is: 'things-editor-angle-input',
        extends: 'input',

        properties: {
          /**
           * `degree`는 각도의 degree값으로 input element의 입력값과 연동된다.
           */
          degree: {
            type: String,
            notify: true
          },

          /**
           * `radian`은 각도의 ragian값이다.
           */
          radian: {
            type: Number,
            notify: true,
            reflectToAttribute: true
          }
        },

        listeners: {
          'change': "_onChangeValue"
        },

        observers: [
          "_onChangeDegree(degree)",
          "_onChangeRadian(radian)"
        ],

        created() {
          this.setAttribute('type', 'number');

          if (!this.getAttribute('placeholder'))
            this.setAttribute('placeholder', '°');
        },

        _onChangeValue(e) {

          /* 에디터에서 값을 바꾼 경우 */
          this.set('degree', Number(this.value));
        },

        _onChangeRadian(radian) {
          if (this._dont_loop)
            return

          /* 외부에서 바인딩된 변수의 값을 바꾼 경우 */
          if (isNaN(Number(radian))) {
            this.value = undefined;
            this.degree = undefined;
          } else {
            this.value = Math.round(radian * 180 / Math.PI);
            this.set('degree', this.value);
          }
        },

        _onChangeDegree(degree) {
          this._dont_loop = true;

          if (isNaN(degree)) {
            this.set('radian', undefined);
          } else {
            this.set('radian', degree * (Math.PI / 180));
          }

          this._dont_loop = false;
        }
      });
    })();
  </script>
</dom-module>