io-boolean-icon.html

<!--
I/O element for boolean data type. Displays value as core-icon.

    <io-boolean-icon value="true" trueicon="done" falseicon="clear"></io-boolean-icon>

__Note__: When element is focused, pressing enter/spacebar will toggle the value.

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

<polymer-element name="io-boolean-icon" extends="io-base">
  <template>
    <link rel="stylesheet" href="_io-base.css" shim-shadowdom>
    <style type="text/css" shim-shadowdom>
      :host(:not([disabled])) > .io-editor {
        cursor: pointer;
      }
      :host > .io-editor {
        width: 1em;
        height: 1em;
      }
    </style>
    <content></content>
    <core-icon id="value" class="io-editor" tabindex="0" icon="{{value ? trueicon : falseicon}}"></core-icon>
  </template>
  <script>
    Polymer({
      publish: {
        /**
         * Element value.
         *
         * @attribute value
         * @default false
         */
        value: false,
        /**
         * Icon to display when value is true.
         * See Polymer core-icon for more information.
         *
         * @attribute trueicon
         * @type string
         * @default 'done'
         */
        trueicon: 'done',
        /**
         * Icon to display when value is false.
         * See Polymer core-icon for more information.
         *
         * @attribute falseicon
         * @type string
         * @default 'clear'
         */
        falseicon: 'clear'
      },
      eventDelegates: {
        'keydown': 'keydownAction',
        'down': 'downAction',
        'tap': 'tapAction'
      },
      downAction: function(event) {
        // prevent focus but let currently focused blur
        event.preventDefault();
        document.activeElement.blur();
      },
      tapAction: function(event) {
        if (this.disabled) return;
        if (event.path[0] == this.$.value) {
          this.toggle();
        }
      },
      keydownAction: function(event) {
        if (this.disabled) return;
        if (event.path[0] == this.$.value) {
          if (event.which == 13 || event.which == 32) {
            event.preventDefault(); // prevent blur
            this.toggle();
          }
        }
      },
      /**
       * Toggles the value.
       *
       * @method toggle
       */
      toggle: function() {
        this.setValue(!this.value);
      }
    });
  </script>
</polymer-element>