RubyGems - polymer-paper-rails - Versions diffs - 0.2.6 → 1.0.0.pre.rc.1 - Mend

polymer-paper-rails 0.2.6 → 1.0.0.pre.rc.1

Files changed (634) hide show

data/app/assets/components/iron-iconset-svg/demo/index.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!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-iconset-svg</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link href="../../paper-styles/demo-pages.html" rel="import">
+  <link rel="import" href="svg-sample-icons.html">
+  <style is="custom-style">
+    .centered {
+      text-align: center;
+    }
+    iron-icon {
+      height: 64px;
+      width: 64px;
+      margin: auto 1em;
+    }
+    iron-icon:nth-of-type(1) {
+      fill: orange;
+    }
+    iron-icon:nth-of-type(2) {
+      fill: green;
+    }
+    iron-icon:nth-of-type(3) {
+      fill: navy;
+    }
+    iron-icon {
+      transition: all 0.5s;
+      -webkit-transition: all 0.5s;
+    }
+    iron-icon:hover {
+      -webkit-filter: drop-shadow( 2px 2px 2px var(--google-grey-700) );
+      filter: drop-shadow( 2px 2px 2px var(--google-grey-700) );
+    }
+  </style>
+</head>
+<body>
+  <div class="vertical-section vertical-section-container centered">
+    <iron-icon icon="svg-sample-icons:codepen"></iron-icon>
+    <iron-icon icon="svg-sample-icons:twitter"></iron-icon>
+    <iron-icon icon="svg-sample-icons:youtube"></iron-icon>
+  </div>
+</body>
+</html>

data/app/assets/components/{core-iconset-svg → iron-iconset-svg/demo}/svg-sample-icons.html RENAMED Viewed

@@ -1,6 +1,7 @@
 <!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+@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
@@ -8,13 +9,13 @@ 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="../core-icon/core-icon.html">
-<link rel="import" href="core-iconset-svg.html">
+<link rel="import" href="../../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-iconset-svg.html">
-<core-iconset-svg id="svg-sample-icons" iconSize="100">
+<iron-iconset-svg name="svg-sample-icons" size="100">
   <svg>
-    <defs>
-    <g id="codepen">
+    <defs>
+    <g id="codepen">
       <path class="outer-ring"  d="M50,0C22.385,0,0,22.385,0,50c0,27.615,22.385,50,50,50c27.614,0,50-22.385,50-50C100,22.385,77.615,0,50,0z M50,91.789
       C26.958,91.789,8.212,73.042,8.212,50C8.212,26.958,26.958,8.212,50,8.212c23.042,0,41.788,18.747,41.788,41.789
       C91.788,73.042,73.042,91.789,50,91.789z"></path>
@@ -42,9 +43,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       C80.916,40.464,80.907,40.348,80.893,40.234z M52.657,26.707l20.817,13.877l-9.298,6.221l-11.519-7.706V26.707z M47.343,26.707
       v12.393l-11.518,7.706l-9.299-6.221L47.343,26.707z M24.398,45.554L31.046,50l-6.648,4.446V45.554z M47.343,73.294L26.525,59.417
       l9.299-6.219l11.518,7.704V73.294z M50,56.286L40.603,50L50,43.715L59.397,50L50,56.286z M52.657,73.294V60.902l11.519-7.704
-      l9.298,6.219L52.657,73.294z M75.602,54.447L68.955,50l6.647-4.446V54.447z"></path>
+      l9.298,6.219L52.657,73.294z M75.602,54.447L68.955,50l6.647-4.446V54.447z"></path>
     </g>
     <path id="twitter" d="M100.001,17.942c-3.681,1.688-7.633,2.826-11.783,3.339
     c4.236-2.624,7.49-6.779,9.021-11.73c-3.965,2.432-8.354,4.193-13.026,5.146C80.47,10.575,75.138,8,69.234,8
     c-11.33,0-20.518,9.494-20.518,21.205c0,1.662,0.183,3.281,0.533,4.833c-17.052-0.884-32.168-9.326-42.288-22.155
@@ -61,8 +62,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       c12.494,0.005,25.047-0.817,37.443-2.14c5.234-0.555,9.586-4.291,10.81-9.352c1.741-7.213,1.753-15.083,1.753-22.509
       S100.51,34.704,98.77,27.492 M67.549,52.203L43.977,64.391c-2.344,1.213-4.262,0.119-4.262-2.428V38.036
       c0-2.548,1.917-3.644,4.262-2.429l23.572,12.188C69.896,49.008,69.896,50.992,67.549,52.203"></path>
-    </g>
+    </g>
     </defs>
   </svg>
-</core-iconset-svg>
+</iron-iconset-svg>

data/app/assets/components/iron-iconset-svg/index.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+</head>
+<body>
+  <iron-component-page></iron-component-page>
+</body>
+</html>

data/app/assets/components/iron-iconset-svg/iron-iconset-svg.html ADDED Viewed

@@ -0,0 +1,191 @@
+<!--
+@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-meta/iron-meta.html">
+<script>
+  /**
+   * The `iron-iconset-svg` element allows users to define their own icon sets
+   * that contain svg icons. The svg icon elements should be children of the
+   * `iron-iconset-svg` element. Multiple icons should be given distinct id's.
+   *
+   * Using svg elements to create icons has a few advantages over traditional
+   * bitmap graphics like jpg or png. Icons that use svg are vector based so they
+   * are resolution independent and should look good on any device. They are
+   * stylable via css. Icons can be themed, colorized, and even animated.
+   *
+   * Example:
+   *
+   *     <iron-iconset-svg id="my-svg-icons" iconSize="24">
+   *       <svg>
+   *         <defs>
+   *           <g id="shape">
+   *             <rect x="50" y="50" width="50" height="50" />
+   *             <circle cx="50" cy="50" r="50" />
+   *           </g>
+   *         </defs>
+   *       </svg>
+   *     </iron-iconset-svg>
+   *
+   * This will automatically register the icon set "my-svg-icons" to the iconset
+   * database.  To use these icons from within another element, make a
+   * `iron-iconset` element and call the `byId` method
+   * to retrieve a given iconset. To apply a particular icon inside an
+   * element use the `applyIcon` method. For example:
+   *
+   *     iconset.applyIcon(iconNode, 'car');
+   *
+   * @element iron-iconset-svg
+   */
+  Polymer({
+    is: 'iron-iconset-svg',
+    properties: {
+      /**
+       * The name of the iconset.
+       *
+       * @attribute name
+       * @type string
+       */
+      name: {
+        type: String,
+        observer: '_nameChanged'
+      },
+      /**
+       * The size of an individual icon. Note that icons must be square.
+       *
+       * @attribute iconSize
+       * @type number
+       * @default 24
+       */
+      size: {
+        type: Number,
+        value: 24
+      }
+    },
+    /**
+     * Construct an array of all icon names in this iconset.
+     *
+     * @return {!Array} Array of icon names.
+     */
+    getIconNames: function() {
+      this._icons = this._createIconMap();
+      return Object.keys(this._icons).map(function(n) {
+        return this.name + ':' + n;
+      }, this);
+    },
+    /**
+     * Applies an icon to the given element.
+     *
+     * An svg icon is prepended to the element's shadowRoot if it exists,
+     * otherwise to the element itself.
+     *
+     * @method applyIcon
+     * @param {Element} element Element to which the icon is applied.
+     * @param {string} iconName Name of the icon to apply.
+     * @return {Element} The svg element which renders the icon.
+     */
+    applyIcon: function(element, iconName) {
+      // insert svg element into shadow root, if it exists
+      element = element.root || element;
+      // Remove old svg element
+      this.removeIcon(element);
+      // install new svg element
+      var svg = this._cloneIcon(iconName);
+      if (svg) {
+        var pde = Polymer.dom(element);
+        pde.insertBefore(svg, pde.childNodes[0]);
+        return element._svgIcon = svg;
+      }
+      return null;
+    },
+    /**
+     * Remove an icon from the given element by undoing the changes effected
+     * by `applyIcon`.
+     *
+     * @param {Element} element The element from which the icon is removed.
+     */
+    removeIcon: function(element) {
+      // Remove old svg element
+      if (element._svgIcon) {
+        Polymer.dom(element).removeChild(element._svgIcon);
+        element._svgIcon = null;
+      }
+    },
+    /**
+     *
+     * When name is changed, register iconset metadata
+     *
+     */
+    _nameChanged: function() {
+      new Polymer.IronMeta({type: 'iconset', key: this.name, value: this});
+    },
+    /**
+     * Create a map of child SVG elements by id.
+     *
+     * @return {Object} Map of id's to SVG elements.
+     */
+    _createIconMap: function() {
+      // Objects chained to Object.prototype (`{}`) have members. Specifically,
+      // on FF there is a `watch` method that confuses the icon map, so we
+      // need to use a null-based object here.
+      var icons = Object.create(null);
+      Polymer.dom(this).querySelectorAll('[id]')
+        .forEach(function(icon) {
+          icons[icon.id] = icon;
+        });
+      return icons;
+    },
+    /**
+     * Produce installable clone of the SVG element matching `id` in this
+     * iconset, or `undefined` if there is no matching element.
+     *
+     * @return {Element} Returns an installable clone of the SVG element
+     * matching `id`.
+     */
+    _cloneIcon: function(id) {
+      // create the icon map on-demand, since the iconset itself has no discrete
+      // signal to know when it's children are fully parsed
+      this._icons = this._icons || this._createIconMap();
+      return this._prepareSvgClone(this._icons[id], this.size);
+    },
+    /**
+     * @param {Element} sourceSvg
+     * @param {number} size
+     * @return {Element}
+     */
+    _prepareSvgClone: function(sourceSvg, size) {
+      if (sourceSvg) {
+        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('viewBox', ['0', '0', size, size].join(' '));
+        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+        // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/370136
+        // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root
+        svg.style.cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;';
+        svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id');
+        return svg;
+      }
+      return null;
+    }
+  });
+</script>

data/app/assets/components/iron-iconset-svg/test/index.html ADDED Viewed

@@ -0,0 +1,30 @@
+<!doctype html>
+<!--
+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">
+  <title>Tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'iron-iconset-svg.html'
+    ]);
+  </script>
+</body>
+</html>

data/app/assets/components/iron-iconset-svg/test/iron-iconset-svg.html ADDED Viewed

@@ -0,0 +1,107 @@
+<!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-iconset-svg</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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="../iron-iconset-svg.html">
+  <link rel="import" href="../../iron-meta/iron-meta.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+<body>
+  <test-fixture id="TrivialIconsetSvg">
+    <template>
+      <iron-iconset-svg name="foo"></iron-iconset-svg>
+      <iron-meta type="iconset"></iron-meta>
+    </template>
+  </test-fixture>
+  <test-fixture id="StandardIconsetSvg">
+    <template>
+      <iron-iconset-svg name="my-icons" size="20">
+        <svg>
+          <defs>
+            <circle id="circle" cx="20" cy="20" r="10"></circle>
+            <rect id="square" x="0" y="0" width="20" height="20"></rect>
+          </defs>
+        </svg>
+      </iron-iconset-svg>
+      <div></div>
+    </template>
+  </test-fixture>
+  <script>
+    suite('<iron-iconset>', function () {
+      suite('basic behavior', function () {
+        var iconset;
+        var meta;
+        setup(function () {
+          var elements = fixture('TrivialIconsetSvg');
+          iconset = elements[0];
+          meta = elements[1];
+        });
+        test('it can be accessed via iron-meta', function () {
+          expect(meta.byKey('foo')).to.be.equal(iconset);
+        });
+      });
+      suite('when paired with a size and SVG definition', function () {
+        var iconset;
+        var div;
+        setup(function () {
+          var elements = fixture('StandardIconsetSvg');
+          iconset = elements[0];
+          div = elements[1];
+        });
+        test('appends a child to the target element', function () {
+          expect(div.firstElementChild).to.not.be.ok;
+          iconset.applyIcon(div, 'circle');
+          expect(div.firstElementChild).to.be.ok;
+        });
+        test('can be queried for all available icons', function () {
+          expect(iconset.getIconNames()).to.deep.eql(['my-icons:circle', 'my-icons:square']);
+        });
+        test('supports any icon defined in the svg', function () {
+          var lastSvgIcon;
+          iconset.getIconNames().forEach(function (iconName) {
+            iconset.applyIcon(div, iconName.split(':').pop());
+            expect(div.firstElementChild).to.not.be.equal(lastSvgIcon);
+            lastSvgIcon = div.firstElementChild;
+          });
+        });
+      });
+    });
+  </script>
+</body>
+</html>

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>