polymer-core-rails 0.1.0 → 0.2.0

data/app/assets/components/core-iconset/{core-iconset.html.erb → core-iconset.html}

@@ -11,18 +11,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 /**
  * @group Polymer Core Elements
  *
- * The `core-iconset` element allows users to define their own icon sets.
+ * The `core-iconset` element allows users to define their own icon sets. 
  * The `src` property specifies the url of the icon image. Multiple icons may
  * be included in this image and they may be organized into rows.
  * The `icons` property is a space separated list of names corresponding to the
  * icons. The names must be ordered as the icons are ordered in the icon image.
  * Icons are expected to be square and are the size specified by the `iconSize`
- * property. The `width` property corresponds to the width of the icon image
+ * property. The `width` property corresponds to the width of the icon image 
  * and must be specified if icons are arranged into multiple rows in the image.
  *
  * All `core-iconset` elements are available for use by other `core-iconset`
  * elements via a database keyed by id. Typically, an element author that wants
- * to support a set of custom icons uses a `core-iconset` to retrieve
+ * to support a set of custom icons uses a `core-iconset` to retrieve 
  * and use another, user-defined iconset.
  *
  * Example:
@@ -32,9 +32,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
  *     </core-iconset>
  *
  * This will automatically register the icon set "my-icons" to the iconset
- * database.  To use these icons from within another element, make a
+ * database.  To use these icons from within another element, make a 
  * `core-iconset` element and call the `byId` method to retrieve a
- * given iconset. To apply a particular icon to an element, use the
+ * given iconset. To apply a particular icon to an element, use the 
  * `applyIcon` method. For example:
  *
  *     iconset.applyIcon(iconNode, 'car');
@@ -58,14 +58,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
  */
 -->
 
-<%= html_import_tag "core-meta/core-meta" %>
+<link rel="import" href="../core-meta/core-meta.html">
 
 <polymer-element name="core-iconset" extends="core-meta" attributes="src width icons iconSize">
-
+  
   <script>
-
+  
     Polymer('core-iconset', {
-
+  
       /**
        * The URL of the iconset image.
        *
@@ -132,7 +132,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         this.iconNames = [];
         this.themes = {};
       },
-
+  
       ready: function() {
         // TODO(sorvell): ensure iconset's src is always relative to the main
         // document
@@ -183,7 +183,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
        * @param {String|Number} icon The name of the icon or the index of the
        * icon within in the icon image.
        * @param {String} theme The name of the theme.
-       * @returns {Object} An object specifying the offset of the given icon
+       * @returns {Object} An object specifying the offset of the given icon 
        * within the icon resource file; `offsetX` is the horizontal offset and
        * `offsetY` is the vertical offset. Both values are in pixel units.
        */
@@ -205,28 +205,33 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
       /**
        * Applies an icon to the given element as a css background image. This
-       * method does not size the element, and it's often necessary to set
+       * method does not size the element, and it's often necessary to set 
        * the element's height and width so that the background image is visible.
        *
        * @method applyIcon
        * @param {Element} element The element to which the background is
        * applied.
        * @param {String|Number} icon The name or index of the icon to apply.
-       * @param {String} theme (optional) The name of the theme for the icon.
-       * @param {Number} scale (optional, defaults to 1) A scaling factor
+       * @param {Number} scale (optional, defaults to 1) A scaling factor 
        * with which the icon can be magnified.
+       * @return {Element} The icon element.
        */
       applyIcon: function(element, icon, scale) {
-         var offset = this.getOffset(icon);
-         scale = scale || 1;
-         if (element && offset) {
-           var style = element.style;
-           style.backgroundImage = 'url(' + this.src + ')';
-           style.backgroundPosition = (-offset.offsetX * scale + 'px') +
-              ' ' + (-offset.offsetY * scale + 'px');
-           style.backgroundSize = scale === 1 ? 'auto' :
-              this.width * scale + 'px';
-         }
+        var offset = this.getOffset(icon);
+        scale = scale || 1;
+        if (element && offset) {
+          var icon = element._icon || document.createElement('div');
+          var style = icon.style;
+          style.backgroundImage = 'url(' + this.src + ')';
+          style.backgroundPosition = (-offset.offsetX * scale + 'px') + 
+             ' ' + (-offset.offsetY * scale + 'px');
+          style.backgroundSize = scale === 1 ? 'auto' :
+             this.width * scale + 'px';
+          if (icon.parentNode !== element) {
+            element.appendChild(icon);
+          }
+          return icon;
+        }
       }
 
     });

data/app/assets/components/core-iconset/demo.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<!--
+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
+-->
+
+<html>
+<head>
+
+  <title>core-iconset</title>
+
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="core-iconset.html">
+  <link rel="import" href="../core-icon/core-icon.html">
+
+</head>
+<body unresolved>
+  
+  <!-- Register an icon set; you can do this anywhere, including an HTMLImport! -->
+  <core-iconset id="my-icons" src="my-icons.png" width="96" iconSize="24"
+      icons="location place starta stopb bus car train walk">
+  </core-iconset>
+
+  <core-iconset id="my-icons-big" src="my-icons-big.png" width="192" iconSize="48"
+      icons="location place starta stopb bus car train walk">
+  </core-iconset>
+
+  <!-- Now create a bunch of icons using our iconset -->
+  <core-icon icon="my-icons:location"></core-icon>
+  <core-icon icon="my-icons:place"></core-icon>
+  <core-icon icon="my-icons:starta"></core-icon>
+  <core-icon icon="my-icons:stopb"></core-icon>
+  <core-icon icon="my-icons:bus"></core-icon>
+  <core-icon icon="my-icons:car"></core-icon>
+  <core-icon icon="my-icons:train"></core-icon>
+  <core-icon icon="my-icons:walk"></core-icon>
+  <br>
+  <!-- icons may also be specified by index -->
+  <style>
+    .embiggen core-icon {
+      width: 48px;
+      height: 48px;
+    }
+  </style>
+
+  <div class="embiggen">
+    <core-icon icon="my-icons-big:0"></core-icon>
+    <core-icon icon="my-icons-big:1"></core-icon>
+    <core-icon icon="my-icons-big:2"></core-icon>
+    <core-icon icon="my-icons-big:3"></core-icon>
+    <core-icon icon="my-icons-big:4"></core-icon>
+    <core-icon icon="my-icons-big:5"></core-icon>
+    <core-icon icon="my-icons-big:6"></core-icon>
+    <core-icon icon="my-icons-big:7"></core-icon>
+  </div>
+
+ </body>
+</html>

data/app/assets/components/core-iconset/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+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
+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>
+
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+
+</head>
+<body unresolved>
+
+  <core-component-page></core-component-page>
+
+</body>
+</html>

data/app/assets/components/core-iconset-svg/README.md

@@ -0,0 +1,4 @@
+core-iconset-svg
+=========
+
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-iconset-svg) for more information.

data/app/assets/components/core-iconset-svg/bower.json

@@ -0,0 +1,8 @@
+{
+  "name": "core-iconset-svg",
+  "private": true,
+  "dependencies": {
+    "polymer": "Polymer/polymer#>=0.4.0 <1.0.0",
+    "core-iconset": "Polymer/core-iconset#>=0.4.0 <1.0.0"
+  }
+}

data/app/assets/components/core-iconset-svg/core-iconset-svg.html

@@ -46,7 +46,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
  * @homepage github.io
  */
 -->
-<%= html_import_tag "core-iconset/core-iconset" %>
+
+<link rel="import" href="../core-iconset/core-iconset.html">
 
 <polymer-element name="core-iconset-svg" extends="core-meta" attributes="iconSize">
 
@@ -115,9 +116,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
        * @param {Element} element The element to which the icon is
        * applied.
        * @param {String|Number} icon The name the icon to apply.
+       * @return {Element} The icon element
        */
-      applyIcon: function(element, icon, scale) {
-        var root = element.shadowRoot || element;
+      applyIcon: function(element, icon) {
+        var root = element;
         // remove old
         var old = root.querySelector('svg');
         if (old) {
@@ -128,26 +130,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         if (!svg) {
           return;
         }
-        var size = scale * this.iconSize;
-        if (size) {
-          svg.style.height = svg.style.width = size + 'px';
-        } else {
-          svg.setAttribute('height', '100%');
-          svg.setAttribute('width', '100%');
-          svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-        }
+        svg.setAttribute('height', '100%');
+        svg.setAttribute('width', '100%');
+        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
         svg.style.display = 'block';
         root.insertBefore(svg, root.firstElementChild);
+        return svg;
       },
-
+      
       /**
        * Tell users of the iconset, that the set has loaded.
-       * This finds all elements matching the selector argument and calls
+       * This finds all elements matching the selector argument and calls 
        * the method argument on them.
        * @method updateIcons
-       * @param selector {string} css selector to identify iconset users,
+       * @param selector {string} css selector to identify iconset users, 
        * defaults to '[icon]'
-       * @param method {string} method to call on found elements,
+       * @param method {string} method to call on found elements, 
        * defaults to 'updateIcon'
        */
       updateIcons: function(selector, method) {
@@ -161,7 +159,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           }
         }
       }
-
+      
 
     });
 

data/app/assets/components/core-iconset-svg/demo.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<!--
+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
+-->
+
+<html>
+<head>
+
+  <title>core-iconset-svg</title>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="svg-sample-icons.html">
+  <style shim-shadowdom>
+    .embiggen core-icon {
+      height: 128px;
+      width: 128px;
+    }
+
+    core-icon:nth-of-type(1) {
+      fill: orange;
+    }
+
+    core-icon:nth-of-type(2) {
+      fill: green;
+      stroke: orange;
+    }
+
+    core-icon:nth-of-type(3) {
+      fill: navy;
+    }
+
+    core-icon {
+      transition: all 0.5s;
+      -webkit-transition: all 0.5s;
+    }
+
+    core-icon:hover {
+      -webkit-filter: drop-shadow( 2px 2px 2px #333 );
+      filter: drop-shadow( 2px 2px 2px #333 );
+    }
+  </style>
+</head>
+<body unresolved>
+
+  <template is="auto-binding">
+    <div class="embiggen">
+      <template repeat="{{icon in icons}}">
+        <core-icon icon="{{icon}}"></core-icon>
+      </template>
+    </div>
+    <core-meta id="meta" type="iconset"></core-meta>
+  </template>
+  <script>
+    addEventListener('template-bound', function(e) {
+      var template = e.target;
+      var setName = 'svg-sample-icons';
+      var icons = template.$.meta.byId(setName).iconNames;
+      template.icons = icons.map(function(ic){ return setName + ':' +ic });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/core-iconset-svg/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+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
+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>
+
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+
+</head>
+<body unresolved>
+
+  <core-component-page></core-component-page>
+
+</body>
+</html>

data/app/assets/components/core-iconset-svg/svg-sample-icons.html

@@ -0,0 +1,68 @@
+
+<!--
+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
+-->
+
+<link rel="import" href="../core-icon/core-icon.html">
+<link rel="import" href="core-iconset-svg.html">
+
+<core-iconset-svg id="svg-sample-icons" iconSize="100">
+  <svg>
+    <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>
+      <path class="inner-logo"  d="M80.893,40.234c-0.006-0.039-0.016-0.076-0.022-0.115c-0.013-0.075-0.027-0.15-0.046-0.223
+      c-0.012-0.044-0.028-0.086-0.042-0.128c-0.021-0.065-0.042-0.13-0.068-0.193c-0.018-0.044-0.039-0.088-0.059-0.13
+      c-0.028-0.06-0.057-0.119-0.09-0.175c-0.024-0.042-0.051-0.083-0.076-0.124c-0.036-0.055-0.073-0.109-0.112-0.161
+      c-0.029-0.039-0.06-0.078-0.091-0.115c-0.042-0.049-0.086-0.098-0.132-0.143c-0.035-0.036-0.069-0.072-0.106-0.104
+      c-0.049-0.044-0.099-0.086-0.15-0.127c-0.04-0.031-0.079-0.062-0.12-0.091c-0.016-0.01-0.029-0.023-0.044-0.033L51.474,19.531
+      c-0.893-0.595-2.055-0.595-2.947,0L20.267,38.371c-0.015,0.01-0.028,0.023-0.044,0.033c-0.042,0.029-0.081,0.06-0.12,0.091
+      c-0.052,0.041-0.102,0.083-0.15,0.127c-0.037,0.032-0.071,0.068-0.106,0.104c-0.046,0.045-0.09,0.094-0.132,0.143
+      c-0.031,0.038-0.062,0.077-0.092,0.115c-0.039,0.052-0.076,0.106-0.111,0.161c-0.027,0.041-0.052,0.082-0.076,0.124
+      c-0.033,0.057-0.062,0.115-0.09,0.175c-0.021,0.042-0.042,0.086-0.06,0.13c-0.026,0.063-0.047,0.128-0.068,0.193
+      c-0.014,0.042-0.029,0.084-0.042,0.128c-0.02,0.073-0.032,0.148-0.046,0.223c-0.006,0.039-0.016,0.076-0.021,0.115
+      c-0.016,0.114-0.024,0.229-0.024,0.346V59.42c0,0.117,0.009,0.233,0.024,0.348c0.005,0.038,0.015,0.077,0.021,0.114
+      c0.014,0.075,0.027,0.149,0.046,0.223c0.012,0.043,0.028,0.086,0.042,0.128c0.021,0.065,0.042,0.13,0.068,0.195
+      c0.018,0.044,0.039,0.086,0.06,0.129c0.028,0.06,0.058,0.118,0.09,0.177c0.024,0.041,0.049,0.082,0.076,0.122
+      c0.035,0.056,0.072,0.109,0.111,0.161c0.029,0.041,0.061,0.078,0.092,0.115c0.042,0.049,0.086,0.098,0.132,0.144
+      c0.035,0.036,0.069,0.071,0.106,0.104c0.048,0.044,0.099,0.086,0.15,0.127c0.039,0.031,0.078,0.062,0.12,0.091
+      c0.016,0.01,0.029,0.023,0.044,0.032l28.259,18.84c0.446,0.297,0.96,0.447,1.474,0.447c0.513,0,1.027-0.149,1.473-0.447
+      l28.259-18.84c0.015-0.009,0.028-0.022,0.044-0.032c0.042-0.029,0.081-0.06,0.12-0.091c0.051-0.041,0.102-0.083,0.15-0.127
+      c0.037-0.033,0.071-0.068,0.106-0.104c0.046-0.046,0.09-0.095,0.132-0.144c0.031-0.037,0.062-0.075,0.091-0.115
+      c0.04-0.052,0.076-0.105,0.112-0.161c0.025-0.041,0.051-0.081,0.076-0.122c0.033-0.059,0.062-0.117,0.09-0.177
+      c0.02-0.042,0.041-0.085,0.059-0.129c0.026-0.065,0.047-0.13,0.068-0.195c0.014-0.042,0.03-0.085,0.042-0.128
+      c0.02-0.074,0.033-0.148,0.046-0.223c0.006-0.037,0.016-0.076,0.022-0.114c0.014-0.115,0.023-0.231,0.023-0.348V40.581
+      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> 
+    </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
+    c-1.767,3.133-2.778,6.773-2.778,10.659c0,7.357,3.622,13.849,9.127,17.65c-3.363-0.109-6.525-1.064-9.293-2.651
+    c-0.002,0.089-0.002,0.178-0.002,0.268c0,10.272,7.072,18.845,16.458,20.793c-1.721,0.484-3.534,0.744-5.405,0.744
+    c-1.322,0-2.606-0.134-3.859-0.379c2.609,8.424,10.187,14.555,19.166,14.726c-7.021,5.688-15.867,9.077-25.48,9.077
+    c-1.656,0-3.289-0.102-4.895-0.297C9.08,88.491,19.865,92,31.449,92c37.737,0,58.374-32.312,58.374-60.336
+    c0-0.92-0.02-1.834-0.059-2.743C93.771,25.929,97.251,22.195,100.001,17.942L100.001,17.942z"></path>
+
+    <g id="youtube">
+      <path class="youtube"  d="M98.77,27.492c-1.225-5.064-5.576-8.799-10.811-9.354C75.561,16.818,63.01,15.993,50.514,16
+      c-12.495-0.007-25.045,0.816-37.446,2.139c-5.235,0.557-9.583,4.289-10.806,9.354C0.522,34.704,0.5,42.574,0.5,50.001
+      c0,7.426,0,15.296,1.741,22.509c1.224,5.061,5.572,8.799,10.807,9.352c12.399,1.32,24.949,2.145,37.446,2.14
+      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> 
+    
+    </defs>
+  </svg>
+</core-iconset-svg>

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

@@ -0,0 +1,2 @@
+core-input
+==========

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

@@ -0,0 +1,6 @@
+{
+  "name": "core-input",
+  "dependencies": {
+    "polymer": "Polymer/polymer#>=0.4.0 <1.0.0"
+  }
+}

data/app/assets/components/core-input/core-input.css

@@ -1,3 +1,13 @@
+/*
+ * @license
+ * 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
+ */
+
 :host {
   display: inline-block;
   text-align: inherit;