basic-stack.html

<!--
Stacks its child elements on top of each other, taking on the maximum height
and width of the child elements.

@element basic-stack
-->

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

<dom-module id="basic-stack">
  <template>

    <style>
    :host {
      box-sizing: border-box;
      display: inline-block;
      position: relative;
    }

    #stackContainer {
      display: block;
      left: 0;
      position: relative;
      top: 0;
      width: 100%;
    }

    #stackContainer ::content > * {
      position: absolute;
    }
    </style>

    <basic-children-content id="stackContainer">
      <content id="content"></content>
    </basic-children-content>

  </template>
</dom-module>

<script>
Polymer({

  behaviors: [
    Basic.Aspect,
    Basic.Resized
  ],

  contribute: {

    contentChanged: function() {
      this._listenForLoadEvents('img');
      this._listenForLoadEvents('iframe');
      setTimeout(function() {
        this.recalc();
      }.bind(this));
    }

  },

  is: 'basic-stack',

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

  /**
   * Force the component to recalculate its size.
   *
   * @method recalc
   */
  recalc: function() {
    var contentNodes = this.collective.content;
    if (!contentNodes) {
      return;
    }
    var maxWidth = 0;
    var maxHeight = 0;
    Array.prototype.forEach.call(contentNodes, function(node) {
      // We use getBoundingClientRect so we can get fractional sizes.
      var rect = node.getBoundingClientRect();
      maxWidth = Math.max(maxWidth, rect.width);
      maxHeight = Math.max(maxHeight, rect.height);
    });
    maxWidth = Math.ceil(maxWidth); // Round up when hard-coding width.
    var width = maxWidth ?
      maxWidth + 'px' :
      null;
    var height = maxHeight ?
      maxHeight + 'px' :
      null;
    this.$.stackContainer.style.width = width;
    this.$.stackContainer.style.height = height;

    var event = new CustomEvent('basic-layout', {
      bubbles: true,
      detail: {
        count: contentNodes.length,
        height: parseInt(height),
        width: parseInt(width)
      }
    });
    this.dispatchEvent(event);
  },

  resized: function(event) {
    if (this.$ && this.$.stackContainer) {
      var foo = this.$.stackContainer.style;
      this.$.stackContainer.style.width = '100%';
      this.recalc();
    }
  },

  // Listen for load events on children of the specified tag type.
  // TODO: Share this with basic-framed-content.
  _listenForLoadEvents: function(tag) {
    var childNodes = Basic.ContentHelpers.flattenChildNodes(this);
    Array.prototype.forEach.call(childNodes, function(child) {
      if (child.localName === tag) {
        child.addEventListener('load', function() {
          this.recalc();
        }.bind(this));
      }
    }.bind(this));
  }

});
</script>