<!--
Spreads out a set of items horizontally so they take equal space.

This component currently requires an explicit size by applied to it. For a
variant that automatically sizes to fit the list items, see the related
component basic-spread-fit.

@element basic-spread-items
-->

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

<dom-module id="basic-spread-items">
  <style>
  :host {
    display: block;
  }

  #spreadContainer {
    display: -webkit-flex;
    display: flex;
    height: 100%;
    position: relative;
  }

  #spreadContainer ::content > * {
    object-fit: contain;
    touch-action: none;
    height: 100%;
    -webkit-user-drag: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
  }
  </style>
  <template>
    <div id="spreadContainer">
      <content></content>
    </div>
  </template>
</dom-module>

<script>
Polymer({

  contribute: {

    itemsChanged: function() {
      var items = this.items;
      this.count = items.length;
      this.$.spreadContainer.style.width = (this.count * 100) + '%';
    }

  },

  is: 'basic-spread-items'

});
</script>

<!--
Spreads out a set of items horizontally so they take equal space.

This component currently requires an explicit size by applied to it. For a
variant that automatically sizes to fit the list items, see the related
component basic-spread-fit.

@element basic-spread-items
-->

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

<dom-module id="basic-spread-items">
  <style>
  :host {
    display: block;
  }

  #spreadContainer {
    display: -webkit-flex;
    display: flex;
    height: 100%;
    position: relative;
  }

  #spreadContainer ::content > * {
    object-fit: contain;
    touch-action: none;
    height: 100%;
    -webkit-user-drag: none;
    -moz-user-select: none;
    user-select: none;
  }
  </style>
  <template>
    <div id="spreadContainer">
      <content></content>
    </div>
  </template>
</dom-module>

<script>
Polymer({

  contribute: {

    itemsChanged: function() {
      var items = this.items;
      this.count = items.length;
      this.$.spreadContainer.style.width = (this.count * 100) + '%';
      var itemWidth = (100 / this.count) + "%";
      items.forEach(function(item) {
        item.style.width = itemWidth;
      });
    }

  },

  is: 'basic-spread-items'

});
</script>

Handle case where the carousel is on a page that's narrower than the images.
Handle case where the carousel is on a page that's narrower than the images.
