io-menu-option.html

<!--
Menu option used internally by io-menu.
You should never need to create this element explicitly.
It is automatically created by io-menu.

@element io-menu-option
@homepage https://github.com/arodic/io-menu
@demo http://akirodic.com/components/io-menu/demo.html
@blurb Menu option used internally by io-menu.
@status alpha
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icon/core-icon.html">

<polymer-element name="io-menu-option" tabindex="0">
  <template>
    <link href="io-menu-option.css" rel="stylesheet" type="text/css" shim-shadowdom>
    <template if="{{expanded && (options.length || tooltip)}}">
      <io-menu expanded
        options="{{options}}"
        parentHeight="{{rect.heigh}}"
        parentWidth="{{rect.width}}"
        tooltip="{{tooltip}}"
        keepOpen="{{keepOpen}}"
        issubmenu>
      </io-menu>
    </template>
    <template if="{{icon}}"><core-icon icon="{{icon}}"></core-icon></template>
    <span id="label" class="{{icon ? 'has-icon' : ''}}">{{label}}</span>
    <!-- <template if="{{options.length}}"><core-icon icon="chevron-right"></core-icon></template> -->
    <template if="{{secondaryLabel}}"><div id="secondary-label">{{secondaryLabel}}</div></template>
  </template>
  <script type="text/javascript">
    Polymer('io-menu-option', {
      publish: {

        /**
         * Array of item objects.
         *
         * @attribute options
         * @type array
         * @default []
         */
        options: null,

        /**
         * Label to be displayed with the option
         *
         * @attribute label
         * @type string
         * @default ''
         */
        label: {value: '', reflect: true},

        /**
         * Secondary label/information to be displayed below the primary label.
         *
         * @attribute secondaryLabel
         * @type string
         * @default ''
         */
        secondaryLabel: {value: '', reflect: true},

        /**
         * Icon to be displayed with the option
         *
         * @attribute icon
         * @type string
         * @default ''
         */
        icon: {value: '', reflect: true},

        /**
         * Function to be fired when option is selected
         *
         * @attribute action
         * @type function
         * @default null
         */
        action: null,

        /**
         * Should the menu stay open when an action is selected/clicked?
         *
         * @attribute keepOpen
         * @type boolean
         * @default false
         */
        keepOpen: {value: false, reflect: true},

        /**
         * Reference to a button element in case the action requires button to be clicked.
         *
         * @attribute button
         * @type HTMLElement
         * @default null
         */
        button: null,

        /**
         * Arguments to be passed into action function
         *
         * @attribute arguments
         * @type Array
         * @default null
         */
        arguments: null,

        /**
         * Tooltip to be displayed with the option
         *
         * @attribute tooltip
         * @type string
         * @default ''
         */
        tooltip: {value: '', reflect: true},

        /**
         * Expanded state
         *
         * @attribute expanded
         * @type boolean
         * @default true
         */
        expanded: {value: false, reflect: true},

        disabled: {value: false, reflect: true},
        // TODO
        active: {value: false, reflect: true},
      },
      observe: {
        'options label icon action active disabled expanded' : 'update'
      },
      eventDelegates: {
        'keydown': 'keydownAction',
        'down': 'tapAction'
      },
      ready: function() {
        function stopPropagation(event) { event.stopPropagation(); event.preventDefault(); }
        PolymerGestures.addEventListener(this, 'down', stopPropagation);
        PolymerGestures.addEventListener(this, 'touchstart', stopPropagation);
        PolymerGestures.addEventListener(this, 'mousedown', stopPropagation);
      },
      tapAction: function(event) {
        if (this.disabled) return;
        if (this.button) {
          this.button.click();
        }
        if (typeof this.action == 'function') {
          if (this.arguments instanceof Array) {
            this.action.apply(null, this.arguments);
          } else {
            this.action.apply(null, [this.arguments]);
          }
        }
        if (typeof this.action === 'function' || this.arguments || this.button) {
          this.fire('io-menu-option-clicked', {
            label: this.label,
            action: this.action,
            keepOpen: this.keepOpen,
            arguments: this.arguments
          });
          // TODO: debug collapse
          this.expanded = false;
        }
      },
      keydownAction: function(event) {
        event.stopPropagation();
        event.preventDefault();
        if (event.which == 13) {
          if (this.disabled) return;
          // this.fireAction(event);
          this.tapAction(event); // TODO: test
        } else if (event.which == 37) {
          this.fire('io-change-option', { option: this, key: 'left' });
        } else if (event.which == 38) {
          this.fire('io-change-option', { option: this, key: 'up' });
        } else if (event.which == 39) {
          this.fire('io-change-option', { option: this, key: 'right' });
        } else if (event.which == 40) {
          this.fire('io-change-option', { option: this, key: 'down' });
        } else if (event.which == 9) {
          this.fire('io-change-option', { option: this, key: 'tab' });
        } else if (event.which == 27) {
          this.fire('io-change-option', { option: this, key: 'close' });
        }
      },
      update: function() {
        this.active = (this.action && !this.disabled) ||
          (this.arguments && !this.disabled) ||
          (this.options && this.options.length && !this.disabled);
        // TODO: timeout?
        this.rect = this.getBoundingClientRect();
      }
    });
  </script>
</polymer-element>