five-bells-visualization/public/bower_components/core-layout-trbl/core-layout-trbl.html

Tool to visualize Five Bells payments

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
`<core-layout-trbl>` arranges nodes horizontally via absolute positioning.
Set the `vertical` attribute (boolean) to arrange vertically instead.

`<core-layout-trbl>` arranges it's <b>sibling elements</b>, not
it's children.

One arranged node may be marked as elastic by giving it a `flex`
attribute (boolean).

You may remove a node from layout by giving it a `nolayout`
attribute (boolean).

CSS Notes:

`padding` is ignored on the parent node.
`margin` is ignored on arranged nodes.
`min-width` is ignored on arranged nodes, use `min-width` on the parent node 
instead.

Example: 

Arrange three `div` into columns. `flex` attribute on Column Two makes that
column elastic.

     <core-layout-trbl></core-layout-trbl>
     <div>Column One</div>
     <div flex>Column Two</div>
     <div>Column Three</div>

Remember that `<core-layout-trbl>` arranges it's sibling elements, not it's children.

If body has width 52 device pixels (in this case, ascii characters), call that 52px.
Column One has it's natural width of 12px (including border), Column Three has it's
natural width of 14px, body border uses 2px, and Column Two automatically uses the
remaining space: 24px.

     |-                    52px                        -| 
     ----------------------------------------------------
     ||Column One||      Column Two      ||Column Three||
     ----------------------------------------------------
      |-  12px  -||-     (24px)         -||    14px   -|

As the parent node resizes, the elastic column reacts via CSS to adjust it's size.
No javascript is used during parent resizing, for best performance. 

Changes in content or sibling size are not handled automatically. 

     ----------------------------------------------------------------
     ||Column One|             Column Two             |Column Three||
     ----------------------------------------------------------------

     --------------------------------------
     ||Column One|Column Two|Column Three||
     --------------------------------------

Arrange in rows by adding the `vertical` attribute.

Example:

     <core-layout-trbl vertical></core-layout-trbl>
     <div>Row One</div>
     <div flex>Row Two</div>
     <div>Row Three</div>

This setup will cause Row Two to stretch to fill the container.

     -----------             -----------
     |---------|             |---------|
     |         |             |         |
     |Row One  |             |Row One  |
     |         |             |         |
     |---------|             |---------|
     |         |             |         |
     |Row Two  |             |Row Two  |
     |         |             |         |
     |---------|             |         |
     |         |             |         |
     |Row Three|             |         |
     |         |             |---------|
     |---------|             |         |
     -----------             |Row Three|
                             |         |
                             |---------|
                             |---------|

Layouts can be nested arbitrarily.

     <core-layout-trbl></core-layout-trbl>
     <div>Menu</div>
     <div flex>
        <core-layout-trbl vertical></core-layout-trbl>
        <div>Title</div>
        <div>Toolbar</div>
        <div flex>Main</div>
        <div>Footer</div>
     </div>

Renders something like this

     --------------------------------
     ||Menu     ||Title            ||
     ||         ||-----------------||
     ||         ||Toolbar          ||
     ||         ||-----------------||
     ||         ||Main             ||
     ||         ||                 ||
     ||         ||-----------------||
     ||         ||Footer           ||
     --------------------------------

@group Polymer Core Elements
@element core-layout-trbl
-->
<link rel="import" href="../polymer/polymer.html">

<polymer-element name="core-layout-trbl" attributes="vertical">

  <template>

    <style>
      :host {
        display: none;
      }
    </style>

  </template>

  <script>

    Polymer('core-layout-trbl', {

      vertical: false,

      ready: function() {
        this.setAttribute('nolayout', '');
      },

      attached: function() {
        this.asyncMethod(function() {
          this.prepare();
          this.layout();
        });
      },

      prepare: function() {
        var parent = this.parentNode.host || this.parentNode;
        // explicit position harmful on <body>
        if (parent.localName !== 'body') {
        // may recalc
          var cs = window.getComputedStyle(parent);
          if (cs.position === 'static') {
            parent.style.position = 'relative';
          }
          //parent.style.overflow = 'hidden';
        }
        // changes will cause another recalc at next validation step
        var stylize = this.stylize, vertical;
        this.parentNode.childNodes.array().forEach(function(c, i) {
          if (c.nodeType === Node.ELEMENT_NODE && !c.hasAttribute('nolayout')) {
            stylize(c, {
              position: 'absolute',
              boxSizing: 'border-box',
              MozBoxSizing: 'border-box',
            });
            // test for auto-vertical
            if (vertical === undefined) {
              vertical = (c.offsetWidth == 0 && c.offsetHeight !== 0);
            }
          }
        });
        this.vertical = this.vertical || vertical;
      },

      /**
       * Arrange sibling nodes end-to-end in one dimension.
       *
       * Arrangement is horizontal unless the `vertical`
       * attribute is applied on this node.
       *
       * @method layout
       */
      layout: function() {
        var parent = this.parentNode.host || this.parentNode;
        var vertical = this.vertical;
        var ww = 0, hh = 0, pre = [], fit, post = [];
        var list = pre;
        // gather element information (at most one recalc)
        this.parentNode.childNodes.array().forEach(function(c, i) {
          if (c.nodeType===Node.ELEMENT_NODE && !c.hasAttribute('nolayout')) {
            var info = {
              element: c,
              w: c.offsetWidth,
              h: c.offsetHeight
            };
            if (!c.hasAttribute('fit') && !c.hasAttribute('flex')) {
              ww += c.offsetWidth;
              hh += c.offsetHeight;
              list.push(info);
            } else {
              fit = c;
              list = post;
              ww = hh = 0;
            }
          }
        });
        // update layout styles (invalidate, no recalc)
        var v = 0;
        var mxp = 0, myp = 0;
        var stylize = this.stylize;
        pre.forEach(function(info) {
          if (vertical) {
            stylize(info.element, {
              top: v + 'px', right: mxp, height: info.h + 'px', left: mxp
            });
          } else {
            stylize(info.element, {
              top: myp, width: info.w + 'px', bottom: myp, left: v + 'px'
            });
          }
          v += vertical ? info.h : info.w;
        });
        if (fit) {
          if (vertical) {
            stylize(fit, {
              top: v + 'px', right: mxp, bottom: hh + 'px', left: mxp
            });
          } else {
            stylize(fit, {
              top: myp, right: ww + 'px', bottom: myp, left: v + 'px'
            });
          }
          v = vertical ? hh : ww;
          post.forEach(function(info) {
            v -= vertical ? info.h : info.w;
            if (vertical) {
              stylize(info.element, {
                height: info.h + 'px', right: mxp, bottom: v + 'px', left: mxp
              });
            } else {
              stylize(info.element, {
                top: myp, right: v + 'px', bottom: myp, width: info.w + 'px'
              });
            }
          });
        }
      },

      stylize: function(element, styles) {
        var style = element.style;
        Object.keys(styles).forEach(function(k){
          style[k] = styles[k];
        });
      }

  });

  </script>

</polymer-element>