basic-spread-fit.html

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

This is a variant of basic-spread-items which automatically sizes itself to
contain the tallest/widest items in a list.

@element basic-spread-fit
-->

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

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

    <style>
    :host {
      display: inline-block;
      overflow: hidden;
      position: relative;
    }

    basic-stack {
      display: inline-block;
    }

    #stack ::content .item {
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    </style>

    <basic-stack id="stack">
      <content></content>
    </basic-stack>

  </template>
</dom-module>

<script>
Polymer({

  behaviors: [Basic.Aspect],

  contribute: {

    itemAdded: function(item) {
      /*
       * We want to be able to style children that might be reprojected. This
       * is easy to accomplish in native Shadow DOM, but hard in Shady DOM.
       * To simplify this, we apply a class to all children, then define a rule
       * to style everything with that class.
       */
      item.classList.add('item');
    }

  },

  is: 'basic-spread-fit',

  properties: {
    target: {
      value: 'shadow'
    }
  },

  ready: function() {
    this.$.stack.addEventListener('basic-layout', function(event) {
      this._layout(event.detail.width, event.detail.height);
    }.bind(this));
  },

  /**
   * Force the component to recalculate its size.
   *
   * @method recalc
   */
  recalc: function() {
    this.$.stack.recalc();
  },

  _layout: function(width, height) {
    var items = this.collective.items;
    var count = items.length;
    this.style.width = (count * width) + 'px';
    this.style.height = height + 'px';
    items.forEach(function(element, index) {
      var offset = (index + 0.5) * width;
      element.style.left = offset + 'px';
      element.style.top = '50%';
    });
  }

});
</script>