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

data/app/assets/components/iron-image/iron-image.html

@@ -0,0 +1,394 @@
+<!--
+@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-flex-layout/classes/iron-flex-layout.html">
+
+<!--
+`iron-image` is an element for displaying an image that provides useful sizing and
+preloading options not found on the standard `<img>` tag.
+
+The `sizing` option allows the image to be either cropped (`cover`) or
+letterboxed (`contain`) to fill a fixed user-size placed on the element.
+
+The `preload` option prevents the browser from rendering the image until the
+image is fully loaded.  In the interim, either the element's CSS `background-color`
+can be be used as the placeholder, or the `placeholder` property can be
+set to a URL (preferably a data-URI, for instant rendering) for an
+placeholder image.
+
+The `fade` option (only valid when `preload` is set) will cause the placeholder
+image/color to be faded out once the image is rendered.
+
+Examples:
+
+  Basically identical to &lt;img src="..."&gt; tag:
+
+    <iron-image src="http://lorempixel.com/400/400"></iron-image>
+
+  Will letterbox the image to fit:
+
+    <iron-image style="width:400px; height:400px;" sizing="contain"
+      src="http://lorempixel.com/600/400"></iron-image>
+
+  Will crop the image to fit:
+
+    <iron-image style="width:400px; height:400px;" sizing="cover"
+      src="http://lorempixel.com/600/400"></iron-image>
+
+  Will show light-gray background until the image loads:
+
+    <iron-image style="width:400px; height:400px; background-color: lightgray;"
+      sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
+
+  Will show a base-64 encoded placeholder image until the image loads:
+
+    <iron-image style="width:400px; height:400px;" placeholder="data:image/gif;base64,..."
+      sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
+
+  Will fade the light-gray background out once the image is loaded:
+
+    <iron-image style="width:400px; height:400px; background-color: lightgray;"
+      sizing="cover" preload fade src="http://lorempixel.com/600/400"></iron-image>
+
+
+@group Iron Elements
+@element iron-image
+@demo demo/index.html
+-->
+
+<dom-module id="iron-image">
+
+  <style>
+
+    :host {
+      display: inline-block;
+      overflow: hidden;
+      position: relative;
+    }
+
+    :host([sizing]) #img {
+      display: none;
+    }
+
+    #placeholder {
+      background-color: inherit;
+      opacity: 1;
+    }
+
+    #placeholder.faded-out {
+      transition: opacity 0.5s linear;
+      opacity: 0;
+    }
+
+  </style>
+
+  <template>
+
+    <img id="img" role="none" hidden$="[[_computeImageVisibility(sizing)]]">
+    <div id="placeholder" hidden$="[[_computePlaceholderVisibility(fade,loaded,preload)]]" class$="[[_computePlaceholderClassName(fade,loaded,preload)]]"></div>
+    <content></content>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'iron-image',
+
+    properties: {
+      /**
+       * The URL of an image.
+       *
+       * @attribute src
+       * @type string
+       * @default ''
+       */
+      src: {
+        observer: '_srcChanged',
+        type: String,
+        value: ''
+      },
+
+      /**
+       * When true, the image is prevented from loading and any placeholder is
+       * shown.  This may be useful when a binding to the src property is known to
+       * be invalid, to prevent 404 requests.
+       *
+       * @attribute preventLoad
+       * @type boolean
+       * @default false
+       */
+      preventLoad: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Sets a sizing option for the image.  Valid values are `contain` (full
+       * aspect ratio of the image is contained within the element and
+       * letterboxed) or `cover` (image is cropped in order to fully cover the
+       * bounds of the element), or `null` (default: image takes natural size).
+       *
+       * @attribute sizing
+       * @type string
+       * @default null
+       */
+      sizing: {
+        type: String,
+        value: null
+      },
+
+      /**
+       * When a sizing option is uzed (`cover` or `contain`), this determines
+       * how the image is aligned within the element bounds.
+       *
+       * @attribute position
+       * @type string
+       * @default 'center'
+       */
+      position: {
+        type: String,
+        value: 'center'
+      },
+
+      /**
+       * When `true`, any change to the `src` property will cause the `placeholder`
+       * image to be shown until the
+       *
+       * @attribute preload
+       * @type boolean
+       * @default false
+       */
+      preload: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * This image will be used as a background/placeholder until the src image has
+       * loaded.  Use of a data-URI for placeholder is encouraged for instant rendering.
+       *
+       * @attribute placeholder
+       * @type string
+       * @default null
+       */
+      placeholder: {
+        type: String,
+        value: null
+      },
+
+      /**
+       * When `preload` is true, setting `fade` to true will cause the image to
+       * fade into place.
+       *
+       * @attribute fade
+       * @type boolean
+       * @default false
+       */
+      fade: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Read-only value that is true when the image is loaded.
+       *
+       * @attribute preloaded
+       * @type boolean
+       * @default false
+       */
+      loaded: {
+        notify: true,
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Read-only value that tracks the loading state of the image when the `preload`
+       * option is used.
+       *
+       * @attribute loading
+       * @type boolean
+       * @default false
+       */
+      loading: {
+        notify: true,
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Can be used to set the width of image (e.g. via binding); size may also be
+       * set via CSS.
+       *
+       * @attribute width
+       * @type number
+       * @default null
+       */
+      width: {
+        observer: '_widthChanged',
+        type: Number,
+        value: null
+      },
+
+      /**
+       * Can be used to set the height of image (e.g. via binding); size may also be
+       * set via CSS.
+       *
+       * @attribute height
+       * @type number
+       * @default null
+       */
+      height: {
+        observer: '_heightChanged',
+        type: Number,
+        value: null
+      },
+
+      _placeholderBackgroundUrl: {
+        type: String,
+        computed: '_computePlaceholderBackgroundUrl(preload,placeholder)',
+        observer: '_placeholderBackgroundUrlChanged'
+      },
+
+      requiresPreload: {
+        type: Boolean,
+        computed: '_computeRequiresPreload(preload,loaded)'
+      },
+
+      canLoad: {
+        type: Boolean,
+        computed: '_computeCanLoad(preventLoad, src)'
+      }
+
+    },
+
+    observers: [
+      '_transformChanged(sizing, position)',
+      '_loadBehaviorChanged(canLoad, preload, loaded)',
+      '_loadStateChanged(src, preload, loaded)',
+    ],
+
+    ready: function() {
+      if (!this.hasAttribute('role')) {
+        this.setAttribute('role', 'img');
+      }
+    },
+
+    _computeImageVisibility: function() {
+      return !!this.sizing;
+    },
+
+    _computePlaceholderVisibility: function() {
+      return !this.preload || (this.loaded && !this.fade);
+    },
+
+    _computePlaceholderClassName: function() {
+      if (!this.preload) {
+        return '';
+      }
+
+      var className = 'fit';
+      if (this.loaded && this.fade) {
+        className += ' faded-out';
+      }
+      return className;
+    },
+
+    _computePlaceholderBackgroundUrl: function() {
+      if (this.preload && this.placeholder) {
+        return 'url(' + this.placeholder + ')';
+      }
+
+      return null;
+    },
+
+    _computeRequiresPreload: function() {
+      return this.preload && !this.loaded;
+    },
+
+    _computeCanLoad: function() {
+      return Boolean(!this.preventLoad && this.src);
+    },
+
+    _widthChanged: function() {
+      this.style.width = isNaN(this.width) ? this.width : this.width + 'px';
+    },
+
+    _heightChanged: function() {
+      this.style.height = isNaN(this.height) ? this.height : this.height + 'px';
+    },
+
+    _srcChanged: function(newSrc, oldSrc) {
+      if (newSrc !== oldSrc) {
+        this.loaded = false;
+      }
+    },
+
+    _placeholderBackgroundUrlChanged: function() {
+      this.$.placeholder.style.backgroundImage =
+        this._placeholderBackgroundUrl;
+    },
+
+    _transformChanged: function() {
+      var placeholderStyle = this.$.placeholder.style;
+
+      this.style.backgroundSize =
+        placeholderStyle.backgroundSize = this.sizing;
+
+      this.style.backgroundPosition =
+        placeholderStyle.backgroundPosition =
+        this.sizing ? this.position : null;
+
+      this.style.backgroundRepeat =
+        placeholderStyle.backgroundRepeat =
+        this.sizing ? 'no-repeat' : null;
+    },
+
+    _loadBehaviorChanged: function() {
+      var img;
+
+      if (!this.canLoad) {
+        return;
+      }
+
+      if (this.requiresPreload) {
+        img = new Image();
+        img.src = this.src;
+
+        this.loading = true;
+
+        img.onload = function() {
+          this.loading = false;
+          this.loaded = true;
+        }.bind(this);
+      } else {
+        this.loaded = true;
+      }
+    },
+
+    _loadStateChanged: function() {
+      if (this.requiresPreload) {
+        return;
+      }
+
+      if (this.sizing) {
+        this.style.backgroundImage = this.src ? 'url(' + this.src + ')': '';
+      } else {
+        this.$.img.src = this.src || '';
+      }
+    }
+  });
+
+</script>

data/app/assets/components/iron-image/test/index.html

@@ -0,0 +1,25 @@
+<!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>
+    <meta charset="utf-8">
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      WCT.loadSuites([
+        'iron-image.html'
+      ]);
+    </script>
+  </body>
+</html>

data/app/assets/components/iron-image/test/iron-image.html

@@ -0,0 +1,78 @@
+<!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-image</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+    <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+    <link rel="import" href="../../polymer/polymer.html">
+    <link rel="import" href="../../test-fixture/test-fixture.html">
+    <link rel="import" href="../iron-image.html">
+  </head>
+  <body>
+    <test-fixture id="TrivialImage">
+      <template>
+        <iron-image></iron-image>
+      </template>
+    </test-fixture>
+    <script>
+      suite('<iron-image>', function() {
+        function randomImageUrl () {
+          return '../demo/polymer.svg?' + Math.random();
+        }
+
+        var image;
+
+        suite('basic behavior', function() {
+          setup(function() {
+            image = fixture('TrivialImage');
+          });
+
+          test('can load images given a src', function(done) {
+            image.addEventListener('loaded-changed', function onLoadedChanged() {
+              image.removeEventListener('loaded-changed', onLoadedChanged);
+
+              try {
+                expect(image.loaded).to.be.eql(true);
+                done();
+              } catch (e) {
+                done(e);
+              }
+            });
+            image.src = randomImageUrl();
+          });
+
+          test('will reload images when src changes', function(done) {
+            var loadCount = 0;
+
+            image.addEventListener('loaded-changed', function onLoadedChanged() {
+              if (image.loaded === true) {
+                loadCount++;
+
+                if (loadCount === 2) {
+                  done();
+                } else {
+                  image.src = randomImageUrl();
+                  image.removeEventListener('loaded-changed', onLoadedChanged);
+                }
+              }
+            });
+
+            image.src = randomImageUrl();
+          });
+        });
+      });
+    </script>
+  </body>
+</html>

data/app/assets/components/iron-input/README.md

@@ -0,0 +1,16 @@
+# iron-input
+
+An input with data binding.
+
+By default you can only get notified of changes to an `input`'s `value` due to user input:
+
+```html
+<input value="{{myValue::input}}">
+```
+
+`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
+for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
+
+```html
+<input is="iron-input" bind-value="{{myValue}}">
+```

data/app/assets/components/iron-input/bower.json

@@ -0,0 +1,36 @@
+{
+  "name": "iron-input",
+  "version": "1.0.2",
+  "description": "An input element with data binding",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "input"
+  ],
+  "main": [
+    "iron-input.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-input.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/iron-input",
+  "ignore": [],
+  "dependencies": {
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "paper-styles": "polymerelements/paper-styles#^1.0.2",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/iron-input/demo/index.html

@@ -0,0 +1,87 @@
+<!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>
+
+  <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">
+
+  <title>iron-input demo</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../iron-input.html">
+
+  <link href="../../paper-styles/paper-styles.html" rel="import">
+  <link href="../../paper-styles/demo-pages.html" rel="import">
+
+  <style is="custom-style">
+
+    .vertical-section {
+      @apply(--paper-font-body1);
+
+      line-height: 40px;
+    }
+
+    code {
+      color: var(--google-grey-700);
+    }
+
+    input[is=iron-input] {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    input, button {
+      font-size: 20px;
+      padding: 0.2em;
+    }
+
+  </style>
+</head>
+<body>
+
+  <div class="vertical-section vertical-section-container centered">
+    <template is="dom-bind">
+      <p>
+        <input is="iron-input" bind-value="{{bindValue}}" value="{{value::input}}">
+        <br>
+        bind to <code>bind-value</code>: <b>[[bindValue]]</b>
+        <br>
+        bind to <code>value::input</code>: <b>{{value}}</b>
+      </p>
+
+      <p on-click="setValue">
+        set bind-value to: <input> <button is="paper-button" value="bindValue">set</button>
+        <br>
+        set value to: <input> <button value="value">set</button>
+      </p>
+    </template>
+    <p>only allows these characters:
+    <code>!@#0123456789</code></p>
+    <input is="iron-input" allowed-pattern="[!@#0-9]" prevent-invalid-input>
+
+  </div>
+
+  <script>
+    var scope = document.querySelector('template[is=dom-bind]');
+
+    scope.setValue = function(event) {
+      if (!(event.target instanceof HTMLButtonElement)) {
+        return;
+      }
+      document.querySelector('input[is=iron-input]')[event.target.value] = event.target.previousElementSibling.value;
+    }
+  </script>
+
+</body>
+</html>

data/app/assets/components/iron-input/hero.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<rect x="49" y="53" width="2" height="18"/>
+	<path d="M188,78H37V44h151V78z M39,76h147V46H39V76z"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/app/assets/components/iron-input/index.html

@@ -0,0 +1,30 @@
+<!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>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+  <title>iron-input</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../polymer/polymer.html">
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>