basic-carousel-fit.html

<!--
Lets the user navigate laterally through a sequence of child elements, without
requiring that an explicit height and width be applied to the carousel.

basic-carousel-fit is a variant of the
[basic-carousel](http://github.com/basic-web-components/basic-carousel)
component. That component requires that you use styling to explicitly set a
height and width on the carousel. In contrast, basic-carousel-fit automatically
examines its child elements, determines their maximum height and width, and then
sets its own size accordingly.

Example: if a basic-carousel-fit contains three child images of different sizes:

    <basic-carousel-fit>
      <img src="small.jpg">
      <img src="medium.jpg">
      <img src="large.jpg">
    </basic-carousel-fit>

it will size itself to the largest image.

In all other respects, basic-carousel-fit works identically to basic-carousel;
see that component for complete details on behavior and other notes.

The fact that basic-carousel and basic-carousel-fit are distinct is an interim
strategy. It is hoped that, at some point, they can be unified to create a
single carousel that adapts its layout behavior to its applied styling.

@element basic-carousel-fit
@demo http://basic-web-components.github.io/basic-web-components/src/basic-carousel-fit/?dom=shadow
-->


<link rel="import" href="../basic-aspect/basic-aspect.html">
<link rel="import" href="../basic-keyboard/basic-keyboard.html">
<link rel="import" href="../basic-keyboard-direction/basic-keyboard-direction.html">
<link rel="import" href="../basic-trackpad-direction/basic-trackpad-direction.html">
<link rel="import" href="../basic-swipe-direction/basic-swipe-direction.html">
<link rel="import" href="../basic-direction-selection/basic-direction-selection.html">
<link rel="import" href="../basic-item-selection/basic-item-selection.html">
<link rel="import" href="../basic-accessible-list/basic-accessible-list.html">
<link rel="import" href="../basic-content-items/basic-content-items.html">
<link rel="import" href="../basic-children-content/basic-children-content.html">
<link rel="import" href="../basic-sliding-viewport-fit/basic-sliding-viewport-fit.html">
<link rel="import" href="../basic-spread-fit/basic-spread-fit.html">

<dom-module id="basic-carousel-fit">
  <template>

    <style>
    :host {
      display: inline-block;
    }

    [target="child"] {
      display: -webkit-flex;
      display: flex;
      -webkit-flex: 1;
      flex: 1;
    }

    basic-spread-fit {
      height: 100%;
    }
    </style>

    <basic-item-selection selection-required="true"></basic-item-selection>
    <basic-trackpad-direction target="child">
      <basic-swipe-direction target="child">
        <basic-sliding-viewport-fit id="viewport" target="child">
          <basic-spread-fit id="spread" role="presentation">
            <content id="content"></content>
          </basic-spread-fit>
        </basic-sliding-viewport-fit>
      </basic-swipe-direction>
    </basic-trackpad-direction>

  </template>
</dom-module>

<script>
Polymer({

  aspects: [
    Basic.AccessibleList,
    Basic.ContentItems,
    Basic.DirectionSelection,
    Basic.Keyboard,
    Basic.KeyboardDirection
  ],

  behaviors: [Basic.Aspect],

  /**
   * Returns the positional index for the indicated item.
   *
   * @method indexOfItem
   * @param {Object} item The item whose index is requested.
   * @returns {Number} The index of the item, or -1 if not found.
   */
  indexOfItem: function(item) {
    return this.collective.indexOfItem(item);
  },

  is: 'basic-carousel-fit',

  /**
   * The current set of items in the list.
   *
   * @property items
   * @type [Object]
   */
  get items() {
    return this.collective.items;
  },

  properties: {

    selectedIndex: {
      type: Number
    },

    selectedItem: {
      type: Object
    },

    target: {
      value: 'shadow'
    }

  },

  ready: function() {
    this.$.spread.addEventListener('basic-layout', function(event) {
      var viewport = this.$.viewport;
      viewport.style.width = event.detail.width + 'px';
      viewport.style.height = event.detail.height + 'px';
    }.bind(this));
  },

  /**
   * The index of the item which is currently selected, or -1 if there is no
   * selection.
   *
   * @property selectedIndex
   * @type Number
   */
  get selectedIndex() {
    // See note at basic-item-selection's selectedIndex getter.
    if (this._readied) {
      return this.collective.selectedIndex;
    }
  },
  set selectedIndex(index) {
    this.collective.selectedIndex = index;
  },

  /**
   * The currently selected item, or null if there is no selection.
   *
   * @property selectedItem
   * @type Object
   */
  get selectedItem() {
    return this.collective.selectedItem;
  },
  set selectedItem(item) {
    this.collective.selectedItem = item;
  },

  /**
   * Select the first item in the list.
   *
   * @method selectFirst
   */
  selectFirst: function() {
    return this.collective.selectFirst();
  },

  /**
   * Select the last item in the list.
   *
   * @method selectLast
   */
  selectLast: function() {
    return this.collective.selectLast();
  },

  /**
   * Select the next item in the list.
   *
   * @method selectNext
   */
  selectNext: function() {
    return this.collective.selectNext();
  },

  /**
   * Select the previous item in the list.
   *
   * @method selectPrevious
   */
  selectPrevious: function() {
    return this.collective.selectPrevious();
  }
});

/*
 * The following comments document API members provided by mixins. Ideally these
 * docs will eventually be pulled from the mixin source files, but for now are
 * copied here by hand.
 */

/**
 * Fires when the items in the list change.
 *
 * @event items-changed
 */

/**
 * Fires when a new item has been selected.
 *
 * @event selected-item-changed
 * @param detail.selectedItem The new selected item.
 * @param detail.previousItem The previously selected item.
 */
</script>