io-number.html

<!--
I/O element for number data type.

    <io-number value="3.141592653589793"></io-number>

@element io-number
@extends io-base-editable
@homepage https://github.com/arodic/io-value
@demo http://akirodic.com/components/io-value/demo.html
@blurb I/O element for number data type.
@status alpha
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="_io-base-editable.html">

<polymer-element name="io-number" extends="io-base-editable">
  <template>
    <link rel="stylesheet" href="_io-base.css" shim-shadowdom>
    <link rel="stylesheet" href="_io-base-editable.css" shim-shadowdom>
    <style type="text/css" shim-shadowdom>
      :host .io-editor.hidden {
        visibility: hidden;
        position: absolute;
        pointer-events: none;
      }
      :host input.io-editor {
        font: inherit;
        padding: 0;
        margin: 0;
        border: none;
      }
    </style>
    <content></content>
    <span id="value" class="io-editor qasel_io-number_{{value | makeValidClass}}" tabindex="0" spellcheck="false" contenteditable></span>
  </template>
  <script type="text/javascript">
    (function() {
      var isValid = function(string) {
        if (string == undefined) return false;
        if (!isNaN(string) && (string.slice(-1) != '.') && string != '') {
          return true;
        } else {
          return false;
        }
      };
      var validKeys = [46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 189, 190, 37, 38, 39, 40, 8, 9];
      var enterKey = 13;
      var selection;
      Polymer({
        placeholder: "number",
        eventDelegates: {
          'keydown': 'keydownAction',
          'click': 'updateImmediateValue'
        },
        createNumericEditor: function() {
          this._numericEditor = document.createElement('input');
          this._numericEditor.className = 'io-editor';
          this._numericEditor.setAttribute('tabindex', 0);
          this._numericEditor.setAttribute('type', 'number');
          this._displayOnlySpan = this.$.value;
          this._numericEditor.addEventListener('change', function(event) {
            this.immediateValue = Number(this._numericEditor.value);
            this.value = this.immediateValue;
          }.bind(this));
        },
        enableNumericEditor: function() {
          this._displayOnlySpan.removeAttribute('tabindex');
          this._displayOnlySpan.classList.toggle('hidden', true);
          this._numericEditor.value = this.immediateValue;
          this.shadowRoot.appendChild(this._numericEditor);
        },
        disableNumericEditor: function() {
          this._displayOnlySpan.setAttribute('tabindex', 0);
          this._displayOnlySpan.classList.toggle('hidden', false);
          this._displayOnlySpan.textContent = this.immediateValue;
          this.shadowRoot.removeChild(this._numericEditor);
        },
        resizeNumericEditor: function() {
          this._displayOnlySpan.textContent = this.immediateValue;
          computedTextStyle = window.getComputedStyle(this._displayOnlySpan);
          computedTextWidth = computedTextStyle.width;
          this._numericEditor.style.width = parseFloat(computedTextWidth) + 16 + 'px';
        },
        focusAction: function(event) {
          this.super(arguments);
          if (this.focused) {
            if (!this._numericEditor) {
              this.createNumericEditor();
            }
            this.enableNumericEditor();
            this.resizeNumericEditor();
            this._numericEditor.focus();
          }
        },
        blurAction: function(event) {
          this.updateImmediateValue();
          this.super(arguments);
          if (event.path[0] == this._numericEditor) {
            this.disableNumericEditor();
          }
        },
        keydownAction: function(event) {
          if (this.disabled) return;
          if (event.path[0] != this._numericEditor) return;
          // TODO: dont prevent refresh
          if (validKeys.indexOf(event.which) === -1) {
            event.preventDefault();
            return;
          }
          if (event.which == enterKey) {
            this._numericEditor.blur();
            event.preventDefault();
            selection = window.getSelection();
            selection.removeAllRanges();
            return;
          }
          this.async(function() {
            this.updateImmediateValue();
          }.bind(this));
        },
        updateImmediateValue: function() {
          if (isValid(this._numericEditor.value)) {
            this.immediateValue = Number(this._numericEditor.value);
            this._numericEditor.classList.toggle('invalid', false);
          } else if (this._numericEditor.value == '') {
            this.immediateValue = NaN;
            this.value = NaN;
          } else {
            this._numericEditor.classList.toggle('invalid', true);
          }
        },
        valueChanged: function() {
          this.immediateValue = Number(this.value);
        },
        immediateValueChanged: function() {
          if (this.updateImmediate) {
              this.value = Number(this.immediateValue);
          }
          if (this._numericEditor) {
            this.resizeNumericEditor();
          }
          if (!this.focused) {
            if (this.immediateValue === null) {
              this.value = null;
              if (this._numericEditor) {
                this._numericEditor.value = '';
                this._displayOnlySpan.textContent = '';
              } else {
                this.$.value.textContent = '';
              }
            } else {
              if (this._numericEditor) {
                this._numericEditor.value = this.immediateValue;
                this._displayOnlySpan.textContent = this.immediateValue;
              } else {
                this.$.value.textContent = this.immediateValue;
              }
            }
            this.$.value.classList.toggle('invalid', false);
          }
        }
      });
    })();
  </script>
</polymer-element>