RubyGems - polymer-gold-rails - Versions diffs - 1.0.0.pre.rc.1 - Mend

polymer-gold-rails 1.0.0.pre.rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

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

@@ -0,0 +1,120 @@
+<!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-icon</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-icon.html">
+  <link rel="import" href="../../iron-iconset/iron-iconset.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+<body>
+  <test-fixture id="TrivialIcon">
+    <template>
+      <iron-icon src="../demo/location.png"></iron-icon>
+    </template>
+  </test-fixture>
+  <test-fixture id="IconFromIconset">
+    <template>
+      <iron-iconset name="example" icons="location blank" src="location.png" size="24" width="48"></iron-iconset>
+      <iron-icon icon="example:location"></iron-icon>
+    </template>
+  </test-fixture>
+  <test-fixture id="WithoutAnIconSource">
+    <template>
+      <iron-icon icon=""></iron-icon>
+      <iron-icon></iron-icon>
+      <iron-icon src=""></iron-icon>
+    </template>
+  </test-fixture>
+  <script>
+function iconElementFor (node) {
+  var nodes = Polymer.dom(node.root).childNodes;
+  for (var i = 0; i < nodes.length; ++i) {
+    if (nodes[i].nodeName.match(/DIV|IMG/)) {
+      return nodes[i];
+    }
+  }
+}
+function hasIcon (node) {
+  return /png/.test(node.style.backgroundImage);
+}
+suite('<iron-icon>', function() {
+  suite('basic behavior', function() {
+    var icon;
+    setup(function() {
+      icon = fixture('TrivialIcon');
+    });
+    test('can be assigned an icon with the src attribute', function() {
+      expect(iconElementFor(icon)).to.be.ok;
+      expect(iconElementFor(icon).src).to.match(/demo\/location\.png/);
+    });
+    test('can change its src dynamically', function() {
+      icon.src = 'foo.png';
+      expect(iconElementFor(icon).src).to.match(/foo\.png/);
+    });
+  });
+  suite('when paired with an iconset', function() {
+    var icon;
+    setup(function() {
+      var elements = fixture('IconFromIconset');
+      icon = elements[1];
+    });
+    test('can be assigned an icon from the iconset', function() {
+      expect(hasIcon(icon)).to.be.ok;
+    });
+    test('can change its icon dynamically', function() {
+      var style = icon.style;
+      expect(style.backgroundPosition).to.match(/0(%|px) 0(%|px)/);
+      icon.icon = "example:blank";
+      expect(style.backgroundPosition).to.match(/-24px 0(%|px)/);
+    });
+  });
+  suite('when no icon source is provided', function() {
+    test('will politely wait for an icon source without throwing', function() {
+      document.createElement('iron-icon');
+      fixture('WithoutAnIconSource');
+    });
+  })
+});
+  </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>

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

@@ -0,0 +1,235 @@
+<!--
+@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-validatable-behavior/iron-validatable-behavior.html">
+<script>
+/*
+`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
+to `<input>`.
+### Two-way binding
+By default you can only get notified of changes to an `input`'s `value` due to user input:
+    <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.
+    <input is="iron-input" bind-value="{{myValue}}">
+### Custom validators
+You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.
+    <input is="iron-input" validator="my-custom-validator">
+### Stopping invalid input
+It may be desirable to only allow users to enter certain characters. You can use the
+`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
+is separate from validation, and `allowed-pattern` does not affect how the input is validated.
+    <!-- only allow characters that match [0-9] -->
+    <input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]">
+@hero hero.svg
+@demo demo/index.html
+*/
+  Polymer({
+    is: 'iron-input',
+    extends: 'input',
+    behaviors: [
+      Polymer.IronValidatableBehavior
+    ],
+    properties: {
+      /**
+       * Use this property instead of `value` for two-way data binding.
+       */
+      bindValue: {
+        observer: '_bindValueChanged',
+        type: String
+      },
+      /**
+       * Set to true to prevent the user from entering invalid input. The new input characters are
+       * matched with `allowedPattern` if it is set, otherwise it will use the `pattern` attribute if
+       * set, or the `type` attribute (only supported for `type=number`).
+       */
+      preventInvalidInput: {
+        type: Boolean
+      },
+      /**
+       * Regular expression to match valid input characters.
+       */
+      allowedPattern: {
+        type: String
+      },
+      _previousValidInput: {
+        type: String,
+        value: ''
+      },
+      _patternAlreadyChecked: {
+        type: Boolean,
+        value: false
+      }
+    },
+    listeners: {
+      'input': '_onInput',
+      'keypress': '_onKeypress'
+    },
+    get _patternRegExp() {
+      var pattern;
+      if (this.allowedPattern) {
+        pattern = new RegExp(this.allowedPattern);
+      } else if (this.pattern) {
+        pattern = new RegExp(this.pattern);
+      } else {
+        switch (this.type) {
+          case 'number':
+            pattern = /[0-9.,e-]/;
+            break;
+        }
+      }
+      return pattern;
+    },
+    ready: function() {
+      this.bindValue = this.value;
+    },
+    _bindValueChanged: function() {
+      if (this.value !== this.bindValue) {
+        this.value = !this.bindValue ? '' : this.bindValue;
+      }
+      // manually notify because we don't want to notify until after setting value
+      this.fire('bind-value-changed', {value: this.bindValue});
+    },
+    _onInput: function() {
+      // Need to validate each of the characters pasted if they haven't
+      // been validated inside `_onKeypress` already.
+      if (this.preventInvalidInput && !this._patternAlreadyChecked) {
+        var valid = this._checkPatternValidity();
+        if (!valid) {
+          this.value = this._previousValidInput;
+        }
+      }
+      this.bindValue = this.value;
+      this._previousValidInput = this.value;
+      this._patternAlreadyChecked = false;
+    },
+    _isPrintable: function(event) {
+      // What a control/printable character is varies wildly based on the browser.
+      // - most control characters (arrows, backspace) do not send a `keypress` event
+      //   in Chrome, but the *do* on Firefox
+      // - in Firefox, when they do send a `keypress` event, control chars have
+      //   a charCode = 0, keyCode = xx (for ex. 40 for down arrow)
+      // - printable characters always send a keypress event.
+      // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the keyCode
+      //   always matches the charCode.
+      // None of this makes any sense.
+      var nonPrintable =
+        (event.keyCode == 8)   ||  // backspace
+        (event.keyCode == 19)  ||  // pause
+        (event.keyCode == 20)  ||  // caps lock
+        (event.keyCode == 27)  ||  // escape
+        (event.keyCode == 45)  ||  // insert
+        (event.keyCode == 46)  ||  // delete
+        (event.keyCode == 144) ||  // num lock
+        (event.keyCode == 145) ||  // scroll lock
+        (event.keyCode > 32 && event.keyCode < 41)   || // page up/down, end, home, arrows
+        (event.keyCode > 111 && event.keyCode < 124); // fn keys
+      return !(event.charCode == 0 && nonPrintable);
+    },
+    _onKeypress: function(event) {
+      if (!this.preventInvalidInput && this.type !== 'number') {
+        return;
+      }
+      var regexp = this._patternRegExp;
+      if (!regexp) {
+        return;
+      }
+      // Handle special keys and backspace
+      if (event.metaKey || event.ctrlKey || event.altKey)
+        return;
+      // Check the pattern either here or in `_onInput`, but not in both.
+      this._patternAlreadyChecked = true;
+      var thisChar = String.fromCharCode(event.charCode);
+      if (this._isPrintable(event) && !regexp.test(thisChar)) {
+        event.preventDefault();
+      }
+    },
+    _checkPatternValidity: function() {
+      var regexp = this._patternRegExp;
+      if (!regexp) {
+        return true;
+      }
+      for (var i = 0; i < this.value.length; i++) {
+        if (!regexp.test(this.value[i])) {
+          return false;
+        }
+      }
+      return true;
+    },
+    /**
+     * Returns true if `value` is valid. The validator provided in `validator` will be used first,
+     * then any constraints.
+     * @return {Boolean} True if the value is valid.
+     */
+    validate: function() {
+      // Empty, non-required input is valid.
+      if (!this.required && this.value == '')
+        return true;
+      var valid;
+      if (this.hasValidator()) {
+        valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
+      } else {
+        this.invalid = !this.validity.valid;
+        valid = this.validity.valid;
+      }
+      this.fire('iron-input-validate');
+      return valid;
+    }
+  });
+  /*
+  The `iron-input-validate` event is fired whenever `validate()` is called.
+  @event iron-input-validate
+  */
+</script>