basic-spread-items.html

<!--
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">
  <template>

    <style>
    :host {
      display: block;
    }

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

    #spreadContainer ::content > * {
      object-fit: var(--basic-item-object-fit, contain);
      touch-action: none;
      height: 100%;
      -webkit-user-drag: none;
      -moz-user-select: none;
      user-select: none;
    }
    </style>

    <div id="spreadContainer">
      <content></content>
    </div>

  </template>
</dom-module>

<script>
Polymer({

  contribute: {

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

  },

  is: 'basic-spread-items'

});
</script>