io-string.html

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

    <io-string value="Hi"></io-string>

@element io-string
@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 string data type.
@status alpha
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="_io-base-editable.html">

<polymer-element name="io-string" 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>
      input {
        border: none;
        background-color: transparent;
      }
    </style>
    <content></content>
    <template if="{{disabled}}">
      <span class="io-editor">{{value}}</span>
    </template>
    <template if="{{!disabled}}">
      <input id="value"
        class="io-editor qasel_io-string_{{value | makeValidClass}}"
        tabindex="0"
        spellcheck="false"
        autocomplete="{{autocomplete}}"
        value="{{immediateValue}}"
        placeholder="{{placeholder}}"
        flex>
      </input>
    </template>
  </template>
  <script type="text/javascript">
      Polymer({
        publish: {
          // TODO: allow multiline input
          // multiline: {value: false, reflect: true},
          autocomplete: false
        },
        placeholder: "string",
        eventDelegates: {
          'keydown': 'keydownAction'
        },
        keydownAction: function(event) {
          if (this.disabled) return;
          if (event.path[0] !== this.$.value) return;
          if (event.which == 13 && !this.multiline) {
            event.preventDefault();
            this.blur();
            this.async(function() {
              this.updateImmediateValue();
            }.bind(this));
          }
        },
        blurAction: function(event) {
          this.updateImmediateValue();
          this.super(arguments);
        },
        updateImmediateValue: function(event) {
          this.value = this.immediateValue;
        },
        immediateValueChanged: function() {
          if (this.updateImmediate) {
            this.updateImmediateValue();
          }
        },
        valueChanged: function() {
          this.immediateValue = this.value;
        }
      });
  </script>
</polymer-element>