basic-tap-selection.html

<!--
Aspect which maps the tap gesture to item selection.

@element basic-tap-selection
-->

<link rel="../basic-aspect/basic-aspect.html">

<script>
// TODO: Allow this aspect to be abstract, so it doesn't need to be instantiated
// as a component.

Polymer({

  behaviors: [Basic.Aspect],

  contribute: {

    // Default implementation. This will typically be handled by other aspects
    // in the collective.
    set selectedIndex(index) {},

  },

  is: 'basic-tap-selection',

  ready: function() {
    /*
     * REVIEW: Which event should we listen to here?
     *
     * The standard use for this aspect is in list boxes. List boxes don't
     * appear to be consistent with regard to whether they select on mousedown
     * or click/mouseup.
     */
    this.addEventListener('mousedown', function(event) {
      this._selectElement(event.target);
      // Note: We don't call preventDefault here. The default behavior for
      // mousedown includes setting keyboard focus if the element doesn't
      // already have the focus, and we want to preserve that behavior.
      event.stopPropagation();
    }.bind(this));
  },

  // TODO: Handle the case where a list item has subelements. Walk up the DOM
  // hierarchy until we find an item in the list, or come back to this element,
  // in which case the element that was tapped isn't an item (and should be
  // ignored).
  _selectElement: function(element) {
    var index = this.collective.indexOfItem && this.collective.indexOfItem(element);
    if (index >= 0) {
      this.collective.selectedIndex = index;
    }
  }

});
</script>