polymer-paper-rails 0.1.0 → 0.2.0

data/app/assets/components/core/transition/core-transition-css.html.erb

@@ -1,76 +0,0 @@
-<!--
-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_import_tag "core/transition/core-transition" %>
-
-<polymer-element name="core-transition-css" extends="core-transition" attributes="transitionType">
-<template>
-  <%= stylesheet_link_tag "core/transition/core-transition-overlay",'no-shim' => true %>
-</template>
-<script>
-
-  Polymer('core-transition-css', {
-
-    baseClass: 'core-transition',
-    openedClass: 'core-opened',
-    closedClass: 'core-closed',
-    completeEventName: 'transitionend',
-
-    registerCallback: function(element) {
-      this.transitionStyle = element.templateContent().firstElementChild;
-    },
-
-    // template is just for loading styles, we don't need a shadowRoot
-    fetchTemplate: function() {
-      return null;
-    },
-
-    go: function(node, state) {
-      if (state.opened !== undefined) {
-        this.transitionOpened(node, state.opened);
-      }
-    },
-
-    setup: function(node) {
-      if (!node._hasTransitionStyle) {
-        if (!node.shadowRoot) {
-          node.createShadowRoot().innerHTML = '<content></content>';
-        }
-        this.installScopeStyle(this.transitionStyle, 'transition',
-            node.shadowRoot);
-        node._hasTransitionStyle = true;
-        node.classList.add(this.baseClass);
-        if (this.transitionType) {
-          node.classList.add(this.baseClass + '-' + this.transitionType);
-        }
-      }
-    },
-
-    transitionOpened: function(node, opened) {
-      this.listenOnce(node, this.completeEventName, function() {
-        node.classList.toggle(this.revealedClass, opened);
-        if (!opened) {
-          node.classList.remove(this.closedClass);
-        }
-        this.complete(node);
-      });
-      node.classList.toggle(this.openedClass, opened);
-      node.classList.toggle(this.closedClass, !opened);
-    }
-
-  });
-</script>
-</polymer-element>
-
-<core-transition-css id="core-transition-fade"></core-transition-css>
-<core-transition-css id="core-transition-center" transitionType="center"></core-transition-css>
-<core-transition-css id="core-transition-top" transitionType="top"></core-transition-css>
-<core-transition-css id="core-transition-bottom" transitionType="bottom"></core-transition-css>
-<core-transition-css id="core-transition-left" transitionType="left"></core-transition-css>
-<core-transition-css id="core-transition-right" transitionType="right"></core-transition-css>

data/app/assets/components/core/transition/core-transition.html.erb

@@ -1,44 +0,0 @@
-<!--
-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_import_tag "core/meta/core-meta" %>
-
-<polymer-element name="core-transition" extends="core-meta">
-
-  <script>
-    Polymer('core-transition', {
-
-      type: 'transition',
-
-      go: function(node, state) {
-        this.complete(node);
-      },
-
-      setup: function(node) {
-      },
-
-      teardown: function(node) {
-      },
-
-      complete: function(node) {
-        this.fire('core-transitionend', null, node);
-      },
-
-      listenOnce: function(node, event, fn, args) {
-        var self = this;
-        var listener = function() {
-          fn.apply(self, args);
-          node.removeEventListener(event, listener, false);
-        }
-        node.addEventListener(event, listener, false);
-      }
-
-    });
-  </script>
-</polymer-element>

data/app/assets/components/paper-input/paper-input.html.erb

@@ -1,398 +0,0 @@
-<!--
-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
--->
-
-<%= html_import_tag "core/input/core-input" %>
-<%= html_import_tag "core/style/core-style" %>
-
-<core-style id="paper-input">
-
-#label.focused,
-#floatedLabel.focused {
-  color: {{g.paperInput.focusedColor}};
-}
-
-#underlineHighlight.focused,
-#caretInner {
-  background-color: {{g.paperInput.focusedColor}};
-}
-
-#error,
-:host(.invalid) #label.focused,
-:host(.invalid) #floatedLabel.focused {
-  color: {{g.paperInput.invalidColor}};
-}
-:host(.invalid) #underlineHighlight.focused,
-:host(.invalid) #caretInner {
-  background-color: {{g.paperInput.invalidColor}};
-}
-
-</core-style>
-
-<polymer-element name="paper-input" extends="core-input" attributes="label floatingLabel maxRows error" on-down="{{downAction}}" on-up="{{upAction}}">
-
-  <template>
-
-    <%= stylesheet_link_tag "paper-input/paper-input" %>
-
-    <core-style ref="paper-input"></core-style>
-
-    <div id="floatedLabel" class="hidden" hidden?="{{!floatingLabel}}"><span id="floatedLabelSpan">{{label}}</span></div>
-
-    <div id="container" on-transitionend="{{transitionEndAction}}" on-webkitTransitionEnd="{{transitionEndAction}}">
-
-      <div id="label"><span id="labelSpan">{{label}}</span></div>
-
-      <div id="inputContainer">
-
-        <div id="inputClone">
-          <span id="inputCloneSpan" aria-hidden="true">&nbsp;</span>
-        </div>
-
-        <template if="{{multiline}}">
-          <div id="minInputHeight"></div>
-          <div id="maxInputHeight"></div>
-        </template>
-
-        <shadow></shadow>
-
-      </div>
-
-      <div id="underlineContainer">
-        <div id="underline"></div>
-        <div id="underlineHighlight" class="focusedColor"></div>
-      </div>
-
-      <div id="caret">
-        <div id="caretInner" class="focusedColor"></div>
-      </div>
-
-    </div>
-
-    <div id="errorContainer">
-      <div id="error" role="alert" aria-hidden="{{!invalid}}">{{error}}</div>
-      <div id="errorIcon"></div>
-    </div>
-
-  </template>
-
-  <script>
-
-  (function() {
-
-    var paperInput = CoreStyle.g.paperInput = CoreStyle.g.paperInput || {};
-    paperInput.focusedColor = '#4059a9';
-    paperInput.invalidColor = '#d34336';
-
-    Polymer('paper-input', {
-
-      /**
-       * 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,
-
-      focused: false,
-      pressed: false,
-
-      attached: function() {
-        if (this.multiline) {
-          this.resizeInput();
-          window.requestAnimationFrame(function() {
-            this.$.underlineContainer.classList.add('animating');
-          }.bind(this));
-        }
-      },
-
-      resizeInput: function() {
-        var height = this.$.inputClone.getBoundingClientRect().height;
-        var bounded = this.maxRows > 0 || this.rows > 0;
-        if (bounded) {
-          var minHeight = this.$.minInputHeight.getBoundingClientRect().height;
-          var maxHeight = this.$.maxInputHeight.getBoundingClientRect().height;
-          height = Math.max(minHeight, Math.min(height, maxHeight));
-        }
-        this.$.inputContainer.style.height = height + 'px';
-        this.$.underlineContainer.style.top = height + 'px';
-      },
-
-      prepareLabelTransform: function() {
-        var toRect = this.$.floatedLabelSpan.getBoundingClientRect();
-        var fromRect = this.$.labelSpan.getBoundingClientRect();
-        if (toRect.width !== 0) {
-          this.$.label.cachedTransform = 'scale(' + (toRect.width / fromRect.width) + ') ' +
-            'translateY(' + (toRect.bottom - fromRect.bottom) + 'px)';
-        }
-      },
-
-      rowsChanged: function() {
-        if (this.multiline && !isNaN(parseInt(this.rows))) {
-          this.$.minInputHeight.innerHTML = '';
-          for (var i = 0; i < this.rows; i++) {
-            this.$.minInputHeight.appendChild(document.createElement('br'));
-          }
-          this.resizeInput();
-        }
-      },
-
-      maxRowsChanged: function() {
-        if (this.multiline && !isNaN(parseInt(this.maxRows))) {
-          this.$.maxInputHeight.innerHTML = '';
-          for (var i = 0; i < this.maxRows; i++) {
-            this.$.maxInputHeight.appendChild(document.createElement('br'));
-          }
-          this.resizeInput();
-        }
-      },
-
-      inputValueChanged: function() {
-        this.super();
-
-        if (this.multiline) {
-          var escaped = this.inputValue.replace(/\n/gm, '<br>');
-          if (!escaped || escaped.lastIndexOf('<br>') === escaped.length - 4) {
-            escaped += '&nbsp';
-          }
-          this.$.inputCloneSpan.innerHTML = escaped;
-          this.resizeInput();
-        }
-
-        if (!this.floatingLabel) {
-          this.$.label.classList.toggle('hidden', this.inputValue);
-        }
-
-        if (this.floatingLabel && !this.focused) {
-          this.$.label.classList.toggle('hidden', this.inputValue);
-          this.$.floatedLabel.classList.toggle('hidden', !this.inputValue);
-        }
-      },
-
-      labelChanged: function() {
-        if (this.floatingLabel && this.$.floatedLabel && this.$.label) {
-          // If the element is created programmatically, labelChanged is called before
-          // binding. Run the measuring code in async so the DOM is ready.
-          this.async(function() {
-            this.prepareLabelTransform();
-          });
-        }
-      },
-
-      placeholderChanged: function() {
-        this.label = this.placeholder;
-      },
-
-      inputFocusAction: function() {
-        if (!this.pressed) {
-          if (this.floatingLabel) {
-            this.$.floatedLabel.classList.remove('hidden');
-            this.$.floatedLabel.classList.add('focused');
-            this.$.floatedLabel.classList.add('focusedColor');
-          }
-          this.$.label.classList.add('hidden');
-          this.$.underlineHighlight.classList.add('focused');
-          this.$.caret.classList.add('focused');
-
-          this.super(arguments);
-        }
-        this.focused = true;
-      },
-
-      inputBlurAction: function() {
-        this.super(arguments);
-
-        this.$.underlineHighlight.classList.remove('focused');
-        this.$.caret.classList.remove('focused');
-        if (this.floatingLabel) {
-          this.$.floatedLabel.classList.remove('focused');
-          this.$.floatedLabel.classList.remove('focusedColor');
-          if (!this.inputValue) {
-            this.$.floatedLabel.classList.add('hidden');
-          }
-        }
-        if (!this.inputValue) {
-          this.$.label.classList.remove('hidden');
-          this.$.label.classList.add('animating');
-          this.async(function() {
-            this.$.label.style.webkitTransform = 'none';
-            this.$.label.style.transform = 'none';
-          });
-        }
-        this.focused = false;
-      },
-
-      downAction: function(e) {
-        if (this.disabled) {
-          return;
-        }
-
-        if (this.focused) {
-          return;
-        }
-
-        this.pressed = true;
-        var rect = this.$.underline.getBoundingClientRect();
-        var right = e.x - rect.left;
-        this.$.underlineHighlight.style.webkitTransformOriginX = right + 'px';
-        this.$.underlineHighlight.style.transformOriginX = right + 'px';
-        this.$.underlineHighlight.classList.remove('focused');
-        this.underlineAsync = this.async(function() {
-          this.$.underlineHighlight.classList.add('pressed');
-        }, null, 200);
-
-        // No caret animation if there is text in the input.
-        if (!this.inputValue) {
-          var width = this.$.inputCloneSpan.getBoundingClientRect().width;
-          if (width < right) {
-            this.$.caret.style.left = width + 'px';
-            this.$.caret.classList.remove('focused');
-          }
-        }
-      },
-
-      upAction: function(e) {
-        if (this.disabled) {
-          return;
-        }
-
-        if (!this.pressed) {
-          return;
-        }
-
-        // if a touchevent caused the up, the synthentic mouseevents will blur
-        // the input, make sure to prevent those from being generated.
-        if (e._source === 'touch') {
-          e.preventDefault();
-        }
-
-        if (this.underlineAsync) {
-          clearTimeout(this.underlineAsync);
-          this.underlineAsync = null;
-        }
-
-        // Focus the input here to bring up the virtual keyboard.
-        this.$.input.focus();
-        this.pressed = false;
-        this.animating = true;
-
-        this.$.underlineHighlight.classList.remove('pressed');
-        this.$.underlineHighlight.classList.add('animating');
-        this.async(function() {
-          this.$.underlineHighlight.classList.add('focused');
-        });
-
-        // No caret animation if there is text in the input.
-        if (!this.inputValue) {
-          this.$.caret.classList.add('animating');
-          this.async(function() {
-            this.$.caret.classList.add('focused');
-          }, null, 100);
-        }
-
-        if (this.floatingLabel) {
-          this.$.label.classList.add('focusedColor');
-          this.$.label.classList.add('animating');
-          if (!this.$.label.cachedTransform) {
-            this.prepareLabelTransform();
-          }
-          this.$.label.style.webkitTransform = this.$.label.cachedTransform;
-          this.$.label.style.transform = this.$.label.cachedTransform;
-        }
-      },
-
-      keypressAction: function() {
-        if (this.animating) {
-          this.transitionEndAction();
-        }
-      },
-
-      transitionEndAction: function(e) {
-        this.animating = false;
-        if (this.pressed) {
-          return;
-        }
-
-        if (this.focused) {
-
-          if (this.floatingLabel || this.inputValue) {
-            this.$.label.classList.add('hidden');
-          }
-
-          if (this.floatingLabel) {
-            this.$.label.classList.remove('focusedColor');
-            this.$.label.classList.remove('animating');
-            this.$.floatedLabel.classList.remove('hidden');
-            this.$.floatedLabel.classList.add('focused');
-            this.$.floatedLabel.classList.add('focusedColor');
-          }
-
-          this.async(function() {
-            this.$.underlineHighlight.classList.remove('animating');
-            this.$.caret.classList.remove('animating');
-          }, null, 100);
-
-        } else {
-
-          this.$.label.classList.remove('animating');
-
-        }
-      }
-
-    });
-
-  }());
-
-  </script>
-
-</polymer-element>