RubyGems - polymer-paper-rails - Versions diffs - 0.1.0 → 0.2.0 - Mend

polymer-paper-rails 0.1.0 → 0.2.0

Files changed (558) hide show

data/app/assets/components/paper-icon-button/paper-icon-button.css CHANGED Viewed

@@ -14,4 +14,4 @@ license that can be found in the LICENSE file.
 :host(:not([fill])) /deep/ #focusBg {
   border-radius: 50%;
-}
+}

data/app/assets/components/paper-icon-button/{paper-icon-button.html.erb → paper-icon-button.html} RENAMED Viewed

@@ -15,7 +15,7 @@ Example:
     <paper-icon-button iconSrc="star.png"></paper-icon-button>
-`paper-icon-button` includes a default icon set.  Use `icon` to specify
+`paper-icon-button` includes a default icon set.  Use `icon` to specify
 which icon from the icon set to use.
 Example:
@@ -35,21 +35,21 @@ See `core-iconset` for more information about how to use a custom icon set.
 @homepage github.io
 -->
-<%= html_import_tag "core/icon/core-icon" %>
-<%= html_import_tag "paper-button/paper-button" %>
+<link href="../core-icon/core-icon.html" rel="import">
+<link href="../paper-button/paper-button.html" rel="import">
 <polymer-element name="paper-icon-button" extends="paper-button" attributes="fill">
   <template>
-    <%= stylesheet_link_tag "paper-icon-button/paper-icon-button" %>
+    <link href="paper-icon-button.css" rel="stylesheet">
     <shadow></shadow>
   </template>
   <script>
     Polymer('paper-icon-button', {
       publish: {
@@ -81,7 +81,7 @@ See `core-iconset` for more information about how to use a custom icon set.
       }
     });
   </script>
 </polymer-element>

data/app/assets/components/paper-icon-button/pulse-ink.css ADDED Viewed

@@ -0,0 +1,20 @@
+/*
+ * @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
+ */
+@-webkit-keyframes pulse-ink {
+  0% {
+    -webkit-transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    opacity: 0.9;
+  }
+}

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

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

data/app/assets/components/paper-input/bower.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "name": "paper-input",
+  "private": true,
+  "dependencies": {
+    "polymer": "Polymer/polymer#>=0.4.0 <1.0.0",
+    "core-icon": "Polymer/core-icon#>=0.4.0 <1.0.0",
+    "core-icons": "Polymer/core-icons#>=0.4.0 <1.0.0",
+    "core-input": "Polymer/core-input#>=0.4.0 <1.0.0",
+    "core-style": "Polymer/core-style#>=0.4.0 <1.0.0"
+  }
+}

data/app/assets/components/paper-input/demo.html ADDED Viewed

@@ -0,0 +1,124 @@
+<!--
+    @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
+-->
+<!doctype html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>paper-input</title>
+  <script src="../platform/platform.js"></script>
+  <link href="../font-roboto/roboto.html" rel="import">
+  <link href="paper-input.html" rel="import">
+  <style shim-shadowdom>
+    body {
+      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+      margin: 0;
+      padding: 24px;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
+      -webkit-touch-callout: none;
+    }
+    paper-input.narrow {
+      width: 150px;
+    }
+  </style>
+</head>
+<body unresolved>
+  <section>
+    <paper-input label="Type something"></paper-input>
+    <br>
+    <paper-input label="Type something" value="Prefilled value"></paper-input>
+    <br>
+    <paper-input class="narrow" label="Long labels get truncated"></paper-input>
+    <br>
+    <paper-input label="Type only numbers" type="number" error="Input is not a number!"></paper-input>
+    <br>
+    <paper-input label="Type something" required error="This input requires a value!"></paper-input>
+    <br>
+    <paper-input disabled label="I'm disabled"></paper-input>
+    <br>
+    <paper-input floatingLabel label="Floating label"></paper-input>
+    <br>
+    <paper-input floatingLabel label="Type an email here (floating label)" type="email" error="Input is not an email!"></paper-input>
+    <br>
+    <paper-input multiline label="Type multiple lines here"></paper-input>
+    <br>
+    <paper-input floatingLabel multiline label="Type multiple lines here" value="Prefilled multiline input value"></paper-input>
+    <br>
+    <paper-input multiline rows="3" label="This input is 3 rows high"></paper-input>
+    <br>
+    <paper-input multiline maxRows="3" label="This input is at most 3 rows high"></paper-input>
+    <br>
+    <paper-input multiline label="Sized with CSS, height: 150px;" style="height: 150px;"></paper-input>
+    <br>
+    <paper-input multiline floatingLabel label="Multiple lines and a floating label"></paper-input>
+    <br>
+    <paper-input label="Becomes visible after polymer-ready" hidden></paper-input>
+    <paper-input multiline floatingLabel rows="2" label="Becomes visible after polymer-ready, min 2 rows" value="Some prefilled value" hidden></paper-input>
+    <br>
+  </section>
+  <script>
+    document.addEventListener('polymer-ready', function() {
+      setTimeout(function() {
+        Array.prototype.forEach.call(document.querySelectorAll('paper-input[hidden]'), function(node) {
+          node.removeAttribute('hidden');
+        });
+      }, 500);
+    });
+  </script>
+</body>

data/app/assets/components/paper-input/index.html ADDED Viewed

@@ -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 sources='["paper-input.html","../core-input/core-input.html"]'></core-component-page>
+</body>
+</html>

data/app/assets/components/paper-input/metadata.html ADDED Viewed

@@ -0,0 +1,23 @@
+<!--
+    @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
+-->
+<x-meta id="paper-input" label="Input" group="Paper" isEditor>
+  <template>
+    <paper-input label="Type something..."></paper-input>
+  </template>
+  <template id="imports">
+    <link rel="import" href="paper-input.html">
+  </template>
+  <property name="validate" kind="string"></property>
+  <property name="error" kind="string"></property>
+</x-meta>

data/app/assets/components/paper-input/paper-input.css ADDED Viewed

@@ -0,0 +1,152 @@
+/*
+ * @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;
+  outline: none;
+  text-align: inherit;
+  color: #757575;
+  padding: 0.75em 0;
+}
+:host /deep/ input,
+:host /deep/ textarea {
+  font: inherit;
+  color: #000;
+  /* fit to the container for auto-resizing */
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 0;
+  /* Important to use margin here so the margin remains visible
+   * when textarea scrolls internally. */
+  margin: 0.5em 0 0.25em;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+}
+:host /deep/ input::hover,
+:host /deep/ textarea::hover {
+  cursor: text;
+}
+input:invalid,
+textarea:invalid {
+  box-shadow: none;
+}
+textarea {
+  resize: none;
+  overflow: hidden;
+}
+[invisible] {
+  visibility: hidden;
+}
+[animated] {
+  visibility: visible !important;
+  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.floated-label {
+  font-size: 0.75em;
+  background: transparent;
+  white-space: nowrap;
+}
+.mirror-text {
+  padding: 0.5em 0 0.25em;
+  max-width: 100%;
+  white-space: nowrap;
+}
+:host([multiline]) .mirror-text {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.label {
+  padding: 0.5em 0 0.25em;
+  background: transparent;
+  pointer-events: none;
+}
+.label-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  max-width: 100%;
+  -moz-transform-origin: 0% 0%;
+  -webkit-transform-origin: 0% 0%;
+  transform-origin: 0% 0%;
+}
+.cursor {
+  position: absolute;
+  top: 0.4em;
+  left: 0;
+  width: 1px;
+  height: 1.4em;
+  opacity: 0.4;
+  -moz-transform-origin: 0%;
+  -webkit-transform-origin: 0%;
+  transform-origin: 0%;
+  -webkit-transform: none;
+  transform: none;
+}
+.cursor[invisible] {
+  opacity: 0.75;
+  -webkit-transform: translate3d(3em,0,0) scale3d(50,1,1);
+  transform: translate3d(3em,0,0) scale3d(50,1,1);
+}
+.underline {
+  height: 0px;
+  overflow: visible;
+}
+:host([disabled]) .underline {
+  border-bottom: 1px dashed;
+}
+.unfocused-underline {
+  height: 1px;
+  background: #757575;
+  border-bottom-color: #757575;
+}
+.focused-underline {
+  height: 2px;
+  -webkit-transform: none;
+  transform: none;
+}
+.focused-underline[invisible] {
+  -webkit-transform: scale3d(0,1,1);
+  transform: scale3d(0,1,1);
+}
+.error-text {
+  font-size: 0.75em;
+  padding: 0.5em 0;
+}
+.error-icon {
+  height: 20px;
+  width: 20px;
+}

data/app/assets/components/paper-input/paper-input.html ADDED Viewed

@@ -0,0 +1,314 @@
+<!--
+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
+-->
+<!--
+`paper-input` is a single- or multi-line text field where user can enter input.
+It can optionally have a label.
+Example:
+    <paper-input label="Your Name"></paper-input>
+    <paper-input multiline label="Enter multiple lines here"></paper-input>
+Theming
+--------
+Set `CoreStyle.g.paperInput.focusedColor` and `CoreStyle.g.paperInput.invalidColor` to theme
+the focused and invalid states.
+@group Paper Elements
+@element paper-input
+@extends core-input
+@homepage github.io
+-->
+<link href="../polymer/polymer.html" rel="import">
+<link href="../core-icon/core-icon.html" rel="import">
+<link href="../core-icons/core-icons.html" rel="import">
+<link href="../core-input/core-input.html" rel="import">
+<link href="../core-style/core-style.html" rel="import">
+<core-style id="paper-input">
+:host([focused]) .floated-label {
+  color: {{g.paperInput.focusedColor}};
+}
+.focused-underline,
+.cursor {
+  background-color: {{g.paperInput.focusedColor}};
+}
+:host(.invalid[focused]) .floated-label,
+:host([focused]) .error-text,
+:host([focused]) .error-icon {
+  color: {{g.paperInput.invalidColor}};
+}
+:host(.invalid) .focused-underline,
+:host(.invalid) .cursor {
+  background-color: {{g.paperInput.invalidColor}};
+}
+</core-style>
+<polymer-element name="paper-input" extends="core-input" layout vertical attributes="label floatingLabel maxRows error" on-transitionEnd="{{transitionEndAction}}" on-webkitTransitionEnd="{{transitionEndAction}}">
+  <template>
+    <link href="paper-input.css" rel="stylesheet">
+    <core-style ref="paper-input"></core-style>
+    <div class="floated-label" aria-hidden="true" hidden?="{{!floatingLabel}}" invisible?="{{!inputValue && !(type === 'number' && !validity.valid) || labelAnimated}}">
+      <!-- needed for floating label animation measurement -->
+      <span id="floatedLabelText" class="label-text">{{label}}</span>
+    </div>
+    <div flex auto relative on-down="{{downAction}}" on-up="{{upAction}}">
+      <div id="mirror" class="mirror-text" invisible aria-hidden="true"></div>
+      <div class="label" fit aria-hidden="true">
+        <!-- needed for floating label animation measurement -->
+        <span id="labelText" class="label-text" invisible?="{{inputValue || !inputValue && type === 'number' && !validity.valid}}" animated?=
+        "{{labelAnimated}}">{{label}}</span>
+      </div>
+      <div class="cursor" invisible?="{{!cursorAnimated}}" animated?="{{cursorAnimated}}"></div>
+      <shadow></shadow>
+    </div>
+    <div id="underline" class="underline" relative>
+      <div class="unfocused-underline" fit invisible?="{{disabled}}"></div>
+      <div id="focusedUnderline" class="focused-underline" fit invisible?="{{!focused}}" animated?="{{underlineAnimated}}"></div>
+    </div>
+    <div layout horizontal center hidden?="{{!invalid}}">
+      <div class="error-text" flex auto role="alert" aria-hidden="{{!invalid}}">{{error || validationMessage}}</div>
+      <core-icon class="error-icon" icon="warning"></core-icon>
+    </div>
+  </template>
+  <script>
+  (function() {
+    var paperInput = CoreStyle.g.paperInput = CoreStyle.g.paperInput || {};
+    paperInput.focusedColor = '#4059a9';
+    paperInput.invalidColor = '#d34336';
+    Polymer('paper-input', {
+      publish: {
+        /**
+         * The label for this input. It normally appears as grey text inside
+         * the text input and disappears once the user enters text.
+         *
+         * @attribute label
+         * @type string
+         * @default ''
+         */
+        label: '',
+        /**
+         * If true, the label will "float" above the text input once the
+         * user enters text instead of disappearing.
+         *
+         * @attribute floatingLabel
+         * @type boolean
+         * @default false
+         */
+        floatingLabel: false,
+        /**
+         * (multiline only) If set to a non-zero value, the height of this
+         * text input will grow with the value changes until it is maxRows
+         * rows tall. If the maximum size does not fit the value, the text
+         * input will scroll internally.
+         *
+         * @attribute maxRows
+         * @type number
+         * @default 0
+         */
+        maxRows: 0,
+        /**
+         * The message to display if the input value fails validation. If this
+         * is unset or the empty string, a default message is displayed depending
+         * on the type of validation error.
+         *
+         * @attribute error
+         * @type string
+         */
+        error: '',
+        focused: {value: false, reflect: true}
+      },
+      get inputValueForMirror() {
+        var tokens = this.inputValue ? String(this.inputValue).replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
+        // Enforce the min and max heights for a multiline input here to
+        // avoid measurement
+        if (this.multiline) {
+          if (this.maxRows && tokens.length > this.maxRows) {
+            tokens = tokens.slice(0, this.maxRows);
+          }
+          while (this.rows && tokens.length < this.rows) {
+            tokens.push('');
+          }
+        }
+        return tokens.join('<br>') + '&nbsp;';
+      },
+      get inputHasValue() {
+        // if type = number, the input value is the empty string until a valid number
+        // is entered so we must do some hacks here
+        return this.inputValue || (this.type === 'number' && !this.validity.valid);
+      },
+      syncInputValueToMirror: function() {
+        this.$.mirror.innerHTML = this.inputValueForMirror;
+      },
+      ready: function() {
+        this.syncInputValueToMirror();
+      },
+      prepareLabelTransform: function() {
+        var toRect = this.$.floatedLabelText.getBoundingClientRect();
+        var fromRect = this.$.labelText.getBoundingClientRect();
+        if (toRect.width !== 0) {
+          var sy = toRect.height / fromRect.height;
+          this.$.labelText.cachedTransform =
+            'scale3d(' + (toRect.width / fromRect.width) + ',' + sy + ',1) ' +
+            'translate3d(0,' + (toRect.top - fromRect.top) / sy + 'px,0)';
+        }
+      },
+      animateFloatingLabel: function() {
+        if (!this.floatingLabel || this.labelAnimated) {
+          return;
+        }
+        if (!this.$.labelText.cachedTransform) {
+          this.prepareLabelTransform();
+        }
+        // If there's still no cached transform, the input is invisible so don't
+        // do the animation.
+        if (!this.$.labelText.cachedTransform) {
+          return;
+        }
+        this.labelAnimated = true;
+        // Handle interrupted animation
+        this.async(function() {
+          this.transitionEndAction();
+        }, null, 250);
+        if (this.inputHasValue) {
+          this.$.labelText.style.webkitTransform = this.$.labelText.cachedTransform;
+          this.$.labelText.style.transform = this.$.labelText.cachedTransform;
+        } else {
+          // Handle if the label started out floating
+          if (!this.$.labelText.style.webkitTransform && !this.$.labelText.style.transform) {
+            this.$.labelText.style.webkitTransform = this.$.labelText.cachedTransform;
+            this.$.labelText.style.transform = this.$.labelText.cachedTransform;
+            this.$.labelText.offsetTop;
+          }
+          this.$.labelText.style.webkitTransform = '';
+          this.$.labelText.style.transform = '';
+        }
+      },
+      inputValueChanged: function(old) {
+        this.super();
+        this.syncInputValueToMirror();
+        if (old && !this.inputValue || !old && this.inputValue) {
+          this.animateFloatingLabel();
+        }
+      },
+      placeholderChanged: function() {
+        this.label = this.placeholder;
+      },
+      inputFocusAction: function() {
+        this.super(arguments);
+        this.focused = true;
+      },
+      inputBlurAction: function(e) {
+        this.super(arguments);
+        this.focused = false;
+      },
+      downAction: function(e) {
+        if (this.disabled) {
+          return;
+        }
+        if (this.focused) {
+          return;
+        }
+        // The underline spills from the tap location
+        var rect = this.$.underline.getBoundingClientRect();
+        var right = e.x - rect.left;
+        this.$.focusedUnderline.style.mozTransformOrigin = right + 'px';
+        this.$.focusedUnderline.style.webkitTransformOrigin = right + 'px ';
+        this.$.focusedUnderline.style.transformOriginX = right + 'px';
+        // Animations only run when the user interacts with the input
+        this.underlineAnimated = true;
+        // Cursor animation only runs if the input is empty
+        if (!this.inputHasValue) {
+          this.cursorAnimated = true;
+        }
+        // Handle interrupted animation
+        this.async(function() {
+          this.transitionEndAction();
+        }, null, 250);
+      },
+      keydownAction: function() {
+        this.super();
+        // more type = number hacks. see core-input for more info
+        if (this.type === 'number') {
+          var valid = !this.inputValue && this.validity.valid;
+          this.async(function() {
+            if (valid !== (!this.inputValue && this.validity.valid)) {
+              this.animateFloatingLabel();
+            }
+          });
+        }
+      },
+      transitionEndAction: function() {
+        this.underlineAnimated = false;
+        this.cursorAnimated = false;
+        this.labelAnimated = false;
+      }
+    });
+  }());
+  </script>
+</polymer-element>