polymer-core-rails 0.1.0 → 0.2.0

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

@@ -0,0 +1,454 @@
+<!--
+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
+-->
+
+<!--
+/**
+ * core-input is an unstyled single- or multi-line text field where user can
+ * enter input.
+ *
+ * Example:
+ *
+ *     <core-input placeholder="Placeholder text here"></core-input>
+ *
+ *     <core-input multiline placeholder="Enter multiple lines here"></core-input>
+ *
+ * The text input's value is considered "committed" if the user hits the "enter"
+ * key or blurs the input after changing the value. The `change` event is fired
+ * when the value becomes committed, and the committed value is stored in the
+ * `value` property. The current value of the input is stored in the `inputValue`
+ * property.
+ *
+ * Validation
+ * ----------
+ *
+ * core-input can optionally validate the value using the HTML5 constraints API,
+ * similar to native inputs. There are two methods to configure input validation:
+ *
+ * 1. By setting the `type` attribute. For example, setting it to `email` will
+ *    check the value is a valid email, and setting it to `number` will check
+ *    the input is a number.
+ *
+ * 2. By setting attributes related to validation. The attributes are `pattern`,
+ *    `min`, `max`, `step` and `required`.
+ *
+ * Only `required` is supported for multiline inputs currently.
+ *
+ * Example:
+ *
+ *     <core-input type="email" placeholder="enter your email"></core-input>
+ *
+ *     <core-input type="number" min="5" placeholder="enter a number greater than or equal to 5"></core-input>
+ *
+ *     <core-input pattern=".*abc.*" placeholder="enter something containing 'abc'"></core-input>
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
+ * for more info on validation.
+ *
+ * @group Polymer Core Elements
+ * @element core-input
+ * @homepage github.io
+ */
+-->
+
+<!--
+Fired when the inputValue of is changed. This is the same event as the DOM
+"input" event.
+
+@event input
+-->
+
+<!--
+Fired when the user commits the value of the input, either by the hitting the
+`enter` key or blurring the input after the changing the inputValue. Also see the
+DOM "change" event.
+
+@event change
+-->
+
+<!--
+Fired when the inputValue of this text input changes and fails validation.
+
+@event input-invalid
+@param {Object} detail
+@param {string} value The text input's inputValue.
+-->
+
+<!--
+Fired when the inputValue of this text input changes and passes validation.
+
+@event input-valid
+@param {Object} detail
+@param {string} value The text input's inputValue.
+-->
+<link href="../polymer/polymer.html" rel="import">
+
+<polymer-element name="core-input" on-focus="{{focusAction}}">
+
+  <template>
+
+    <link href="core-input.css" rel="stylesheet">
+
+    <template if="{{multiline}}">
+      <textarea id="input" value="{{inputValue}}" rows="{{rows}}" fit?="{{rows === 'fit'}}" disabled?="{{disabled}}" placeholder="{{placeholder}}" autofocus?="{{autofocus}}" required?="{{required}}" readonly?="{{readonly}}" maxlength="{{maxlength}}" aria-label="{{label || placeholder}}" aria-invalid="{{invalid}}" on-change="{{inputChangeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}"></textarea>
+    </template>
+
+    <template if="{{!multiline}}">
+      <input id="input" value="{{inputValue}}" disabled?="{{disabled}}" type="{{type}}" placeholder="{{placeholder}}" autofocus?="{{autofocus}}" required?="{{required}}" readonly?="{{readonly}}" pattern="{{pattern}}" min="{{min}}" max="{{max}}" step="{{step}}" maxlength="{{maxlength}}" aria-label="{{label || placeholder}}" aria-invalid="{{invalid}}" on-keypress="{{keypressAction}}" on-change="{{inputChangeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}">
+    </template>
+
+  </template>
+
+  <script>
+
+    Polymer('core-input', {
+      publish: {
+        /**
+         * Placeholder text that hints to the user what can be entered in
+         * the input.
+         *
+         * @attribute placeholder
+         * @type string
+         * @default ''
+         */
+        placeholder: '',
+  
+        /**
+         * If true, this input cannot be focused and the user cannot change
+         * its value.
+         *
+         * @attribute disabled
+         * @type boolean
+         * @default false
+         */
+        disabled: false,
+  
+        /**
+         * If true, the user cannot modify the value of the input.
+         *
+         * @attribute readonly
+         * @type boolean
+         * @default false
+         */
+        readonly: false,
+
+        /**
+         * If true, this input will automatically gain focus on page load.
+         *
+         * @attribute autofocus
+         * @type boolean
+         * @default false
+         */
+        autofocus: false,
+
+        /**
+         * If true, this input accepts multi-line input like a `<textarea>`
+         *
+         * @attribute multiline
+         * @type boolean
+         * @default false
+         */
+        multiline: false,
+  
+        /**
+         * (multiline only) The height of this text input in rows. The input
+         * will scroll internally if more input is entered beyond the size
+         * of the component. This property is meaningless if multiline is
+         * false. You can also set this property to "fit" and size the
+         * component with CSS to make the input fit the CSS size.
+         *
+         * @attribute rows
+         * @type number|'fit'
+         * @default 'fit'
+         */
+        rows: 'fit',
+  
+        /**
+         * The current value of this input. Changing inputValue programmatically
+         * will cause value to be out of sync. Instead, change value directly
+         * or call commit() after changing inputValue.
+         *
+         * @attribute inputValue
+         * @type string
+         * @default ''
+         */
+        inputValue: '',
+  
+        /**
+         * The value of the input committed by the user, either by changing the
+         * inputValue and blurring the input, or by hitting the `enter` key.
+         *
+         * @attribute value
+         * @type string
+         * @default ''
+         */
+        value: '',
+
+        /**
+         * Set the input type. Not supported for `multiline`.
+         *
+         * @attribute type
+         * @type string
+         * @default text
+         */
+        type: 'text',
+
+        /**
+         * If true, the input is invalid if its value is null.
+         *
+         * @attribute required
+         * @type boolean
+         * @default false
+         */
+        required: false,
+
+        /**
+         * A regular expression to validate the input value against. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
+         *
+         * @attribute pattern
+         * @type string
+         * @default '.*'
+         */
+        // FIXME(yvonne): The default is set to .* because we can't bind to pattern such
+        // that the attribute is unset if pattern is null.
+        pattern: '.*',
+
+        /**
+         * If set, the input is invalid if the value is less than this property. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
+         *
+         * @attribute min
+         */
+        min: null,
+
+        /**
+         * If set, the input is invalid if the value is greater than this property. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
+         *
+         * @attribute max
+         */
+        max: null,
+
+        /**
+         * If set, the input is invalid if the value is not `min` plus an integral multiple
+         * of this property. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
+         *
+         * @attribute step
+         */
+        step: null,
+
+        /**
+         * The maximum length of the input value.
+         *
+         * @attribute maxlength
+         * @type number
+         */
+        maxlength: null,
+  
+        /**
+         * If this property is true, the text input's inputValue failed validation.
+         *
+         * @attribute invalid
+         * @type boolean
+         * @default false
+         */
+        invalid: false,
+
+        /**
+         * If this property is true, validate the input as they are entered.
+         *
+         * @attribute validateImmediately
+         * @type boolean
+         * @default true
+         */
+        validateImmediately: true
+      },
+
+      ready: function() {
+        this.handleTabindex(this.getAttribute('tabindex'));
+      },
+
+      disabledChanged: function() {
+        if (this.disabled) {
+          this.setAttribute('aria-disabled', true);
+        } else {
+          this.removeAttribute('aria-disabled');
+        }
+      },
+
+      invalidChanged: function() {
+        this.classList.toggle('invalid', this.invalid);
+        this.fire('input-'+ (this.invalid ? 'invalid' : 'valid'), {value: this.inputValue});
+      },
+
+      inputValueChanged: function() {
+        if (this.validateImmediately) {
+          this.updateValidity_();
+        }
+      },
+
+      valueChanged: function() {
+        this.inputValue = this.value;
+      },
+
+      requiredChanged: function() {
+        if (this.validateImmediately) {
+          this.updateValidity_();
+        }
+      },
+
+      attributeChanged: function(attr, oldVal, curVal) {
+        if (attr === 'tabindex') {
+          this.handleTabindex(curVal);
+        }
+      },
+
+      handleTabindex: function(tabindex) {
+        if (tabindex > 0) {
+          this.$.input.setAttribute('tabindex', -1);
+        } else {
+          this.$.input.removeAttribute('tabindex');
+        }
+      },
+
+      /**
+       * Commits the inputValue to value.
+       *
+       * @method commit
+       */
+      commit: function() {
+         this.value = this.inputValue;
+      },
+
+      updateValidity_: function() {
+        if (this.$.input.willValidate) {
+          this.invalid = !this.$.input.validity.valid;
+        }
+      },
+
+      keypressAction: function(e) {
+        // disallow non-numeric input if type = number
+        if (this.type !== 'number') {
+          return;
+        }
+        var c = String.fromCharCode(e.charCode);
+        if (!c.match(/[\d-\.e]/)) {
+          e.preventDefault();
+        }
+      },
+
+      inputChangeAction: function() {
+        this.commit();
+        if (!window.ShadowDOMPolyfill) {
+          // re-fire event that does not bubble across shadow roots
+          this.fire('change', null, this);
+        }
+      },
+
+      focusAction: function(e) {
+        if (this.getAttribute('tabindex') > 0) {
+          // Forward focus to the inner input if tabindex is set on the element
+          // This will not cause an infinite loop because focus will not fire on the <input>
+          // again if it's already focused.
+          this.$.input.focus();
+        }
+      },
+
+      inputFocusAction: function(e) {
+        if (window.ShadowDOMPolyfill) {
+          // re-fire non-bubbling event if polyfill
+          this.fire('focus', null, this, false);
+        }
+      },
+
+      inputBlurAction: function() {
+        if (window.ShadowDOMPolyfill) {
+          // re-fire non-bubbling event
+          this.fire('blur', null, this, false);
+        }
+      },
+
+      blur: function() {
+        // forward blur method to the internal input / textarea element
+        this.$.input.blur();
+      },
+
+      click: function() {
+        // forward click method to the internal input / textarea element
+        this.$.input.click();
+      },
+
+      focus: function() {
+        // forward focus method to the internal input / textarea element
+        this.$.input.focus();
+      },
+
+      select: function() {
+        // forward select method to the internal input / textarea element
+        this.$.input.focus();
+      },
+
+      setSelectionRange: function(selectionStart, selectionEnd, selectionDirection) {
+        // forward setSelectionRange method to the internal input / textarea element
+        this.$.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+      },
+
+      setRangeText: function(replacement, start, end, selectMode) {
+        // forward setRangeText method to the internal input element
+        if (!this.multiline) {
+          this.$.input.setRangeText(replacement, start, end, selectMode);
+        }
+      },
+
+      stepDown: function(n) {
+        // forward stepDown method to the internal input element
+        if (!this.multiline) {
+          this.$.input.stepDown(n);
+        }
+      },
+
+      stepUp: function(n) {
+        // forward stepUp method to the internal input element
+        if (!this.multiline) {
+          this.$.input.stepUp(n);
+        }
+      },
+
+      get willValidate() {
+        return this.$.input.willValidate;
+      },
+
+      get validity() {
+        return this.$.input.validity;
+      },
+
+      get validationMessage() {
+        return this.$.input.validationMessage;
+      },
+
+      checkValidity: function() {
+        var r = this.$.input.checkValidity();
+        this.updateValidity_();
+        return r;
+      },
+
+      setCustomValidity: function(message) {
+        this.$.input.setCustomValidity(message);
+        this.updateValidity_();
+      }
+
+    });
+  </script>
+
+</polymer-element>

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

@@ -0,0 +1,142 @@
+<!--
+    @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, initial-scale=1, user-scalable=no">
+
+  <title>core-input</title>
+
+  <script src="../platform/platform.js"></script>
+
+  <link href="core-input.html" rel="import">
+
+  <style>
+    body {
+      padding: 24px;
+      margin: 0;
+      -webkit-transform: translateZ(0);
+      font-family: sans-serif;
+      font-size: 16px;
+    }
+
+    section {
+      margin: 2em 0;
+    }
+
+    aside {
+      background: #ccc;
+      padding: 1em;
+      margin-right: 2em;
+      font-size: 12px;
+      width: 250px;
+      border-radius: 3px;
+    }
+
+    core-input {
+      margin: 1em;
+    }
+
+    core-input[multiline] {
+      border: 1px dotted #ccc;
+    }
+
+    core-input.sized {
+      width: 500px;
+      height: 200px;
+    }
+
+    .validation core-input,
+    .validation core-input[multiline] {
+      border: solid 1px lime;
+    }
+
+    .validation core-input.invalid,
+    .validation core-input[multiline].invalid {
+      border: solid 1px red;
+    }
+
+  </style>
+
+</head>
+<body>
+
+  <section horizontal start layout>
+    <aside>A single-line text input. See console for committed values.</aside>
+    <core-input id="single" placeholder="Type something..."></core-input>
+    <script>
+      var single = document.getElementById('single');
+      single.addEventListener('change', function() {
+        console.log('single: value committed: ', single.value);
+      });
+    </script>
+  </section>
+
+  <section horizontal start layout>
+    <aside>The <code>type</code> attribute is supported. This is a single-line input with <code>type = password</code>. See console for committed values.</aside>
+    <core-input id="password" type="password" placeholder="Enter password..."></core-input>
+    <script>
+      var password = document.getElementById('password');
+      password.addEventListener('change', function() {
+        console.log('password: value committed: ', password.value);
+      });
+    </script>
+  </section>
+
+  <section horizontal start layout>
+    <aside>A multi-line text input with 3 rows. The input is normally unstyled but here is styled with a dotted border to show its size.</aside>
+    <core-input multiline rows="3" placeholder="Type many lines here..."></core-input>
+  </section>
+
+  <section horizontal start layout>
+    <aside>A multi-line text input sized with CSS. The input is normally unstyled but here is styled with a dotted border to show its size.</aside>
+    <core-input class="sized" multiline rows="fit" placeholder="This input is 500px * 200px"></core-input>
+  </section>
+
+  <section horizontal start layout>
+    <aside>Inputs with the <code>tabindex</code> attribute.</aside>
+    <div>
+      <core-input tabindex="2" placeholder="tabindex = 2"></core-input>
+      <br>
+      <core-input tabindex="3" placeholder="tabindex = 3"></core-input>
+      <br>
+      <core-input tabindex="1" placeholder="tabindex = 1"></core-input>
+    </div>
+  </section>
+
+  <section horizontal start layout>
+    <aside>Validation examples. The border color reflects the current validation state. See console for validation events.</aside>
+    <div class="validation">
+      <core-input id="validate-number" type="number" placeholder="type = number"></core-input>
+      <br>
+      <core-input id="validate-email" type="email" placeholder="type = email"></core-input>
+      <br>
+      <core-input id="validate-required" required placeholder="required"></core-input>
+      <br>
+      <core-input id="validate-ml-required" multiline rows="3" required placeholder="required (multiline)"></core-input>
+      <br>
+      <core-input id="validate-pattern" pattern="a*bc" placeholder="with pattern = a*bc"></core-input>
+      <br>
+      <core-input id="validate-min-max" type="number" min="5" max="10" placeholder="type = number, min = 5, max = 10"></core-input>
+      <br>
+      <core-input id="validate-step" type="number" step="2" placeholder="type = number, step = 2"></core-input>
+    </div>
+    <script>
+      document.querySelector('.validation').addEventListener('input-invalid', function(e, value, s) {
+        console.log(e.target.id, 'invalid, inputValue:', e.detail.value, e.target.validity);
+      });
+      document.querySelector('.validation').addEventListener('input-valid', function(e, value, s) {
+        console.log(e.target.id, 'valid, inputValue:', e.detail.value, e.target.validity);
+      });
+    </script>
+  </section>
+
+
+</body>

data/app/assets/components/core-input/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-input/metadata.html

@@ -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
+-->
+<x-meta id="core-input" label="Input" group="Core" isEditor>
+
+  <template>
+    <core-input placeholder="Type something..." style="padding: 15px;"></core-input>
+  </template>
+  
+  <template id="imports">
+    <link rel="import" href="core-input.html">
+  </template>
+  
+</x-meta>

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

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

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

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

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

@@ -14,6 +14,10 @@ html /deep/ core-item {
   white-space: nowrap;
 }
 
+html /deep/ core-item.font-scalable {
+  min-height: 2.5em;
+}
+
 html /deep/ core-item.core-selected {
   font-weight: bold;
 }
@@ -22,10 +26,19 @@ html /deep/ core-item::shadow core-icon {
   margin: 0 16px 0 4px;
 }
 
+html /deep/ core-item.font-scalable::shadow core-icon {
+  margin: 0 1em 0 0.25em;
+  height: 1.5em;
+  width: 1.5em;
+}
+
 html /deep/ core-item::shadow ::content > a {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
+  /* IE10 styling to ensure link is clickable. Cannot be completely
+  transparent or minifiers change it to `transparent` which does not work. */
+  background-color: rgba(0, 0, 0, 0.000001);
 }