_io-base-editable.html

<!--
Base for io-value input elements

@element io-base-editable
@extends io-base
@homepage https://github.com/arodic/io-value
@demo http://akirodic.com/components/io-value/demo.html
@blurb Base for generic io-value input elements
@status alpha
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="_io-base.html">

<polymer-element name="io-base-editable" extends="io-base">
  <script>
    Polymer({
      publish: {
        /**
         * Immediate value to be updated on each key stroke.
         *
         * @attribute immediateValue
         * @type any
         * @default null
         */
        immediateValue: null,
        /**
         * Determines if value is updated from immediateValue on each key stroke
         *
         * @attribute updateImmediate
         * @type boolean
         * @default false
         */
        updateImmediate: false,
        /**
         * Determines if the input can be clicked.
         * If enabled, the input requires double-click to focus.
         *
         * @attribute clickmasked
         * @type boolean
         * @default false
         */
        clickmasked: {value: false, reflect: true},
        /**
         * Specifies a short hint that describes the expected value of an input field
         *
         * @attribute placeholder
         * @type string
         * @default ''
         */
        placeholder: '',
      },
      focused: false,
      eventDelegates: {
        'focus': 'focusAction',
        'blur': 'blurAction',
        'dblclick': 'dblclickAction',
        'contextmenu': 'dblclickAction',
        'mousedown': 'mousedownAction'
      },
      mousedownAction: function(event) {
        // prevent focus but let currently focused blur
        if (this.clickmasked && !this.focused) {
          event.preventDefault();
          document.activeElement.blur();
        }
      },
      focusAction: function(event) {
        event.stopPropagation();
        if (event.path[0] == this.$.value) {
          this.focused = true;
        }
      },
      blurAction: function(event) {
        event.stopPropagation();
        var selection = window.getSelection();
        selection.removeAllRanges();
        this.focused = false;
        if (this.clickmasked) this.disabledChanged();
        if (event.path[0] == this.$.value) {
          if (this.value !== this.immediateValue) {
            this.setValue(this.immediateValue);
          }
          // If content of the value is overflowing the container,
          // make sure the scroll resets at blur.
          this.$.value.scrollLeft = 0
        }
        this.immediateValueChanged();
      },
      dblclickAction: function(event) {
        if (this.clickmasked) {
          event.preventDefault();
          this.$.value.setAttribute('tabindex', 0);
          this.$.value.setAttribute('contenteditable', '');
          this.$.value.focus();
        }
      },
      placeholderChanged: function() {
        if (this.placeholder) {
          this.setAttribute('aria-label', this.placeholder);
        } else {
          this.removeAttribute('aria-label');
        }
      },
      clickmaskedChanged: function() {
        this.disabledChanged();
      }
    });
  </script>
</polymer-element>