polymer-iron-rails 1.0.0.pre.rc.1

data/app/assets/components/iron-fit-behavior/iron-fit-behavior.html

@@ -0,0 +1,230 @@
+<!--
+@license
+Copyright (c) 2015 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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<script>
+
+/**
+Polymer.IronFitBehavior fits an element in another element using `max-height` and `max-width`, and
+optionally centers it in the window or another element.
+
+The element will only be sized and/or positioned if it has not already been sized and/or positioned
+by CSS.
+
+CSS properties               | Action
+-----------------------------|-------------------------------------------
+`position` set               | Element is not centered horizontally or vertically
+`top` or `bottom` set        | Element is not vertically centered
+`left` or `right` set        | Element is not horizontally centered
+`max-height` or `height` set | Element respects `max-height` or `height`
+`max-width` or `width` set   | Element respects `max-width` or `width`
+
+@demo demo/index.html
+@polymerBehavior
+*/
+
+  Polymer.IronFitBehavior = {
+
+    properties: {
+
+      /**
+       * The element that will receive a `max-height`/`width`. By default it is the same as `this`,
+       * but it can be set to a child element. This is useful, for example, for implementing a
+       * scrolling region inside the element.
+       */
+      sizingTarget: {
+        type: Object,
+        value: function() {
+          return this;
+        }
+      },
+
+      /**
+       * The element to fit `this` into.
+       */
+      fitInto: {
+        type: Object,
+        value: window
+      },
+
+      /**
+       * Set to true to auto-fit on attach.
+       */
+      autoFitOnAttach: {
+        type: Boolean,
+        value: false
+      },
+
+      _fitInfo: {
+        type: Object
+      }
+
+    },
+
+    get _fitWidth() {
+      var fitWidth;
+      if (this.fitInto === window) {
+        fitWidth = this.fitInto.innerWidth;
+      } else {
+        fitWidth = this.fitInto.getBoundingClientRect().width;
+      }
+      return fitWidth;
+    },
+
+    get _fitHeight() {
+      var fitHeight;
+      if (this.fitInto === window) {
+        fitHeight = this.fitInto.innerHeight;
+      } else {
+        fitHeight = this.fitInto.getBoundingClientRect().height;
+      }
+      return fitHeight;
+    },
+
+    attached: function() {
+      if (this.autoFitOnAttach) {
+        if (window.getComputedStyle(this).display === 'none') {
+          setTimeout(function() {
+            this.fit();
+          }.bind(this));
+        } else {
+          this.fit();
+        }
+      }
+    },
+
+    /**
+     * Fits and optionally centers the element into the window, or `fitInfo` if specified.
+     */
+    fit: function() {
+      this._discoverInfo();
+      this.constrain();
+      this.center();
+    },
+
+    /**
+     * Memoize information needed to position and size the target element.
+     */
+    _discoverInfo: function() {
+      if (this._fitInfo) {
+        return;
+      }
+      var target = window.getComputedStyle(this);
+      var sizer = window.getComputedStyle(this.sizingTarget);
+      this._fitInfo = {
+        positionedBy: {
+          vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
+            'bottom' : null),
+          horizontally: target.left !== 'auto' ? 'left' : (target.right !== 'auto' ?
+            'right' : null),
+          css: target.position
+        },
+        sizedBy: {
+          height: sizer.maxHeight !== 'none',
+          width: sizer.maxWidth !== 'none'
+        },
+        margin: {
+          top: parseInt(target.marginTop, 10) || 0,
+          right: parseInt(target.marginRight, 10) || 0,
+          bottom: parseInt(target.marginBottom, 10) || 0,
+          left: parseInt(target.marginLeft, 10) || 0
+        }
+      };
+    },
+
+    /**
+     * Resets the target element's position and size constraints, and clear
+     * the memoized data.
+     */
+    resetFit: function() {
+      if (!this._fitInfo || !this._fitInfo.sizedBy.height) {
+        this.sizingTarget.style.maxHeight = '';
+        this.style.top = '';
+      }
+      if (!this._fitInfo || !this._fitInfo.sizedBy.width) {
+        this.sizingTarget.style.maxWidth = '';
+        this.style.left = '';
+      }
+      if (this._fitInfo) {
+        this.style.position = this._fitInfo.positionedBy.css;
+      }
+      this._fitInfo = null;
+    },
+
+    /**
+     * Equivalent to calling `resetFit()` and `fit()`. Useful to call this after the element,
+     * the window, or the `fitInfo` element has been resized.
+     */
+    refit: function() {
+      this.resetFit();
+      this.fit();
+    },
+
+    /**
+     * Constrains the size of the element to the window or `fitInfo` by setting `max-height`
+     * and/or `max-width`.
+     */
+    constrain: function() {
+      var info = this._fitInfo;
+      // position at (0px, 0px) if not already positioned, so we can measure the natural size.
+      if (!this._fitInfo.positionedBy.vertically) {
+        this.style.top = '0px';
+      }
+      if (!this._fitInfo.positionedBy.horizontally) {
+        this.style.left = '0px';
+      }
+      // need border-box for margin/padding
+      this.sizingTarget.style.boxSizing = 'border-box';
+      // constrain the width and height if not already set
+      var rect = this.getBoundingClientRect();
+      if (!info.sizedBy.height) {
+        this._sizeDimension(rect, info.positionedBy.vertically, 'top', 'bottom', 'Height');
+      }
+      if (!info.sizedBy.width) {
+        this._sizeDimension(rect, info.positionedBy.horizontally, 'left', 'right', 'Width');
+      }
+    },
+
+    _sizeDimension: function(rect, positionedBy, start, end, extent) {
+      var info = this._fitInfo;
+      var max = extent === 'Width' ? this._fitWidth : this._fitHeight;
+      var flip = (positionedBy === end);
+      var offset = flip ? max - rect[end] : rect[start];
+      var margin = info.margin[flip ? start : end];
+      var offsetExtent = 'offset' + extent;
+      var sizingOffset = this[offsetExtent] - this.sizingTarget[offsetExtent];
+      this.sizingTarget.style['max' + extent] = (max - margin - offset - sizingOffset) + 'px';
+    },
+
+    /**
+     * Centers horizontally and vertically if not already positioned. This also sets
+     * `position:fixed`.
+     */
+    center: function() {
+      if (!this._fitInfo.positionedBy.vertically || !this._fitInfo.positionedBy.horizontally) {
+        // need position:fixed to center
+        this.style.position = 'fixed';
+      }
+      if (!this._fitInfo.positionedBy.vertically) {
+        var top = (this._fitHeight - this.offsetHeight) / 2;
+        top -= this._fitInfo.margin.top;
+        this.style.top = top + 'px';
+      }
+      if (!this._fitInfo.positionedBy.horizontally) {
+        var left = (this._fitWidth - this.offsetWidth) / 2;
+        left -= this._fitInfo.margin.left;
+        this.style.left = left + 'px';
+      }
+    }
+
+  };
+
+</script>

data/app/assets/components/iron-fit-behavior/test/index.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 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
+-->
+<html>
+  <head>
+
+    <title>iron-fit-behavior tests</title>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+    <script src="../../web-component-tester/browser.js"></script>
+
+  </head>
+  <body>
+
+    <script>
+
+      WCT.loadSuites([
+        'iron-fit-behavior.html'
+      ]);
+
+    </script>
+
+  </body>
+</html>

data/app/assets/components/iron-fit-behavior/test/iron-fit-behavior.html

@@ -0,0 +1,332 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 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
+-->
+<html>
+  <head>
+
+    <title>iron-fit-behavior tests</title>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents.js"></script>
+
+    <script src="../../web-component-tester/browser.js"></script>
+    <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+    <link rel="import" href="../../test-fixture/test-fixture.html">
+    <link rel="import" href="test-fit.html">
+
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      .absolute {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      .scrolling {
+        overflow: auto;
+      }
+
+      .sized-x {
+        width: 200px;
+      }
+
+      .sized-y {
+        height: 200px;
+      }
+
+      .positioned-left {
+        position: absolute;
+        left: 100px;
+      }
+
+      .positioned-right {
+        position: absolute;
+        right: 100px;
+      }
+
+      .positioned-top {
+        position: absolute;
+        top: 100px;
+      }
+
+      .positioned-bottom {
+        position: absolute;
+        bottom: 100px;
+      }
+
+      .with-max-width {
+        max-width: 500px;
+      }
+
+      .with-max-height {
+        max-height: 500px;
+      }
+
+      .with-margin {
+        margin: 20px;
+      }
+
+    </style>
+
+  </head>
+  <body>
+
+    <test-fixture id="absolute">
+      <template>
+        <test-fit auto-fit-on-attach class="absolute">
+          Absolutely positioned
+        </test-fit>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="sized-xy">
+      <template>
+        <test-fit auto-fit-on-attach class="sized-x sized-y">
+          Sized (x/y), auto center/center
+        </test-fit>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="sized-x">
+      <template>
+        <test-fit auto-fit-on-attach class="sized-x">
+          Sized (x), auto center/center
+        </test-fit>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="positioned-xy">
+      <template>
+        <test-fit auto-fit-on-attach class="sized-x positioned-left positioned-top">
+          Sized (x/y), positioned/positioned
+        </test-fit>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="inline-positioned-xy">
+      <template>
+        <test-fit auto-fit-on-attach class="sized-x sized-y" style="position:absolute;right:100px;bottom:100px;">
+          Sized (x/y), positioned/positioned
+        </test-fit>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="sectioned">
+      <template>
+        <test-fit auto-fit-on-attach class="sized-x">
+          <div>
+            Sized (x), auto center/center with scrolling section
+          </div>
+          <div class="internal"></div>
+        </test-fit>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="constrain-target">
+      <template>
+        <div class="constrain" style="position: fixed; top: 0; left: 0; width: 50vw; height: 50vh; border: 1px solid black;">
+          <test-fit auto-fit-on-attach class="el">
+            <div>
+              Auto center/center to parent element
+            </div>
+          </test-fit>
+        </div>
+      </template>
+    </test-fixture>
+
+    <template id="ipsum">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </template>
+
+    <script>
+
+      function makeScrolling(el) {
+        el.classList.add('scrolling');
+        var template = document.getElementById('ipsum');
+        for (var i = 0; i < 20; i++) {
+          el.appendChild(template.content.cloneNode(true));
+        }
+      }
+
+      suite('manual positioning', function() {
+
+        test('css positioned element is not re-positioned', function() {
+          var el = fixture('positioned-xy');
+          var rect = el.getBoundingClientRect();
+          assert.equal(rect.top, 100, 'top is unset');
+          assert.equal(rect.left, 100, 'left is unset');
+        });
+
+        test('inline positioned element is not re-positioned', function() {
+          var el = fixture('inline-positioned-xy');
+          var rect = el.getBoundingClientRect();
+          // need to measure document.body here because mocha sets a min-width on html,body, and
+          // the element is positioned wrt to that by css
+          var bodyRect = document.body.getBoundingClientRect();
+          assert.equal(rect.top, bodyRect.height - rect.height - 100, 'top is unset');
+          assert.equal(rect.left, bodyRect.width - rect.width - 100, 'left is unset');
+        });
+
+        test('position property is preserved after', function() {
+          var el = fixture('absolute');
+          assert.equal(getComputedStyle(el).position, 'absolute', 'position:absolute is preserved');
+        })
+
+      });
+
+      suite('fit to window', function() {
+
+        test('sized element is centered in viewport', function() {
+          var el = fixture('sized-xy');
+          var rect = el.getBoundingClientRect();
+          assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
+          assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
+        });
+
+        test('sized element with margin is centered in viewport', function() {
+          var el = fixture('sized-xy');
+          el.classList.add('with-margin');
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
+          assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
+        });
+
+        test('scrolling element is centered in viewport', function() {
+          var el = fixture('sized-x');
+          makeScrolling(el);
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
+          assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
+        });
+
+        test('scrolling element is constrained to viewport height', function() {
+          var el = fixture('sized-x');
+          makeScrolling(el);
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height');
+        });
+
+        test('scrolling element with max-height is centered in viewport', function() {
+          var el = fixture('sized-x');
+          el.classList.add('with-max-height');
+          makeScrolling(el);
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
+          assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
+        });
+
+        test('scrolling element with max-height respects max-height', function() {
+          var el = fixture('sized-x');
+          el.classList.add('with-max-height');
+          makeScrolling(el);
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.isTrue(rect.height <= 500, 'height is less than or equal to max-height');
+        });
+
+        test('css positioned, scrolling element is constrained to viewport height (top,left)', function() {
+          var el = fixture('positioned-xy');
+          makeScrolling(el);
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.isTrue(rect.height <= window.innerHeight - 100, 'height is less than or equal to viewport height');
+        });
+
+        test('css positioned, scrolling element is constrained to viewport height (bottom, right)', function() {
+          var el = fixture('sized-x');
+          el.classList.add('positioned-bottom');
+          el.classList.add('positioned-right');
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.isTrue(rect.height <= window.innerHeight - 100, 'height is less than or equal to viewport height');
+        });
+
+        test('sized, scrolling element with margin is centered in viewport', function() {
+          var el = fixture('sized-x');
+          el.classList.add('with-margin');
+          makeScrolling(el);
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
+          assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
+        });
+
+        test('sized, scrolling element is constrained to viewport height', function() {
+          var el = fixture('sized-x');
+          el.classList.add('with-margin');
+          makeScrolling(el);
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.isTrue(rect.height <= window.innerHeight - 20 * 2, 'height is less than or equal to viewport height');
+        });
+
+        test('css positioned, scrolling element with margin is constrained to viewport height (top, left)', function() {
+          var el = fixture('positioned-xy');
+          el.classList.add('with-margin');
+          makeScrolling(el);
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.isTrue(rect.height <= window.innerHeight - 100 - 20 * 2, 'height is less than or equal to viewport height');
+        });
+
+        test('css positioned, scrolling element with margin is constrained to viewport height (bottom, right)', function() {
+          var el = fixture('sized-x');
+          el.classList.add('positioned-bottom');
+          el.classList.add('positioned-right');
+          el.classList.add('with-margin')
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.isTrue(rect.height <= window.innerHeight - 100 - 20 * 2, 'height is less than or equal to viewport height');
+        });
+
+        test('scrolling sizingTarget is constrained to viewport height', function() {
+          el = fixture('sectioned');
+          var internal = Polymer.dom(el).querySelector('.internal');
+          el.sizingTarget = internal;
+          makeScrolling(internal);
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height');
+        });
+
+      });
+
+      suite('fit to element', function() {
+
+        test('element fits in another element', function() {
+          var constrain = fixture('constrain-target');
+          var el = Polymer.dom(constrain).querySelector('.el')
+          makeScrolling(el);
+          el.fitInto = constrain;
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          var crect = constrain.getBoundingClientRect();
+          assert.isTrue(rect.height <= crect.height, 'width is less than or equal to fitInto width');
+          assert.isTrue(rect.height <= crect.height, 'height is less than or equal to fitInto height');
+        });
+
+      });
+
+    </script>
+
+  </body>
+</html>

data/app/assets/components/iron-fit-behavior/test/test-fit.html

@@ -0,0 +1,42 @@
+<!--
+@license
+Copyright (c) 2015 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
+-->
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../iron-fit-behavior.html">
+
+<dom-module id="test-fit">
+
+  <style>
+    :host {
+      display: block;
+      background: black;
+      color: white;
+      padding: 8px;
+    }
+  </style>
+
+  <template>
+    <content></content>
+  </template>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'test-fit',
+
+    behaviors: [
+      Polymer.IronFitBehavior
+    ]
+
+  });
+
+</script>

data/app/assets/components/iron-flex-layout/README.md

@@ -0,0 +1,4 @@
+iron-flex-layout
+================
+
+Layout styles for the iron elements.

data/app/assets/components/iron-flex-layout/bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "iron-flex-layout",
+  "version": "1.0.1",
+  "description": "Provide flexbox-based layouts",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "layout"
+  ],
+  "private": true,
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}