Merge pull request #1 from PolymerElements/initial-impl

implement iron-validatable-behavior
PolymerElements · May 6, 2015 · def3f34 · def3f34
2 parents 3abb5d7 + 6d5312e
commit def3f34
Show file tree

Hide file tree

Showing 10 changed files with 363 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # iron-validatable-behavior
 Implements an element validated with Polymer.IronValidatorBehavior
+
diff --git a/bower.json b/bower.json
@@ -0,0 +1,32 @@
+{
+  "name": "iron-validatable-behavior",
+  "version": "0.8.0",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "web-component",
+    "polymer"
+  ],
+  "main": [
+    "iron-validatable-behavior.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-validatable-behavior.git"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/PolymerElements/iron-validatable-behavior",
+  "ignore": [],
+  "dependencies": {
+    "polymer": "Polymer/polymer#v0.8.0-rc.7",
+    "iron-meta": "PolymerElements/iron-meta#^0.8.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^0.8.0",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^0.8.0",
+    "test-fixture": "PolymerElements/test-fixture#^0.8.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "Polymer/webcomponentsjs#^0.6.0"
+  }
+}
diff --git a/demo/cats-only.html b/demo/cats-only.html
@@ -0,0 +1,46 @@
+<!--
+@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-validator-behavior/iron-validator-behavior.html">
+
+<script>
+
+  Polymer({
+
+    is: 'cats-only',
+
+    behaviors: [
+      Polymer.IronValidatorBehavior
+    ],
+
+    validateObject: function(obj) {
+      var valid = true;
+      for (key in obj) {
+        if (obj[key] !== 'cats') {
+          valid = false;
+          break;
+        }
+      }
+      return valid;
+    },
+
+    validate: function(values) {
+      if (typeof values === 'object') {
+        return this.validateObject(values);
+      } else {
+        var value = Array.isArray(values) ? values.join('') : values;
+        return value.match(/^(c|ca|cat|cats)?$/) !== null;
+      }
+    }
+
+  });
+
+</script>
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,68 @@
+<!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-validatable-behavior demo</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../iron-meta/iron-meta.html">
+  <link rel="import" href="cats-only.html">
+  <link rel="import" href="validatable-input.html">
+
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+
+  <style>
+
+    .valid {
+      color: limegreen;
+    }
+
+    .invalid {
+      color: red;
+    }
+
+  </style>
+
+</head>
+<body>
+
+  <template is="x-autobind">
+
+    <cats-only></cats-only>
+
+    <section>
+
+      <p>
+        only type <code>cats</code>:
+
+        <input is="validatable-input" invalid="{{invalid}}" validator="cats-only">
+
+        <span class="valid" hidden$="[[invalid]]">valid</span>
+        <span class="invalid" hidden$="[[!invalid]]">invalid</span>
+      </p>
+
+    </section>
+
+  </template>
+
+  <script>
+
+    document.querySelector('template[is="x-autobind"]').invalid = false;
+
+  </script>
+
+</body>
diff --git a/demo/validatable-input.html b/demo/validatable-input.html
@@ -0,0 +1,46 @@
+<!--
+@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.html">
+
+<script>
+
+  Polymer({
+
+    is: 'validatable-input',
+
+    extends: 'input',
+
+    properties: {
+
+      invalid: {
+        notify: true,
+        type: Boolean,
+        value: false
+      }
+
+    },
+
+    behaviors: [
+      Polymer.IronValidatableBehavior
+    ],
+
+    listeners: {
+      'input': '_onInput'
+    },
+
+    _onInput: function(event) {
+      this.invalid = !this.validate(event.target.value);
+    }
+
+  });
+
+</script>
diff --git a/index.html b/index.html
@@ -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-validatable-behavior</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>
diff --git a/iron-validatable-behavior.html b/iron-validatable-behavior.html
@@ -0,0 +1,80 @@
+<!--
+@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-meta/iron-meta.html">
+
+<!--
+Use `Polymer.IronValidatableBehavior` to implement an element that validates user input.
+-->
+
+<script>
+
+  Polymer.IronValidatableBehavior = {
+
+    properties: {
+
+      /**
+       * Namespace for this validator.
+       */
+      validatorType: {
+        type: String,
+        value: 'validator'
+      },
+
+      /**
+       * Name of the validator to use.
+       */
+      validator: {
+        type: String
+      },
+
+      /**
+       * True if the last call to `validate` is invalid.
+       */
+      invalid: {
+        reflectToAttribute: true,
+        type: Boolean,
+        value: false
+      },
+
+      _validatorMeta: {
+        type: Object
+      }
+
+    },
+
+    get _validator() {
+      return this._validatorMeta && this._validatorMeta.byKey(this.validator);
+    },
+
+    ready: function() {
+      this._validatorMeta = new Polymer.IronMeta({type: this.validatorType});
+    },
+
+    /**
+     * Returns true if there is a validator.
+     */
+    hasValidator: function() {
+      return this._validator != null;
+    },
+
+    /**
+     * Validates the value.
+     */
+    validate: function(values) {
+      var valid = this._validator && this._validator.validate(values);
+      this.invalid = !valid;
+      return valid;
+    }
+
+  };
+
+</script>
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,33 @@
+<!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>paper-validatable-behavior tests</title>
+
+    <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">
+
+    <script src="../../web-component-tester/browser.js"></script>
+
+  </head>
+  <body>
+
+    <script>
+
+      /* no tests */
+      WCT.loadSuites([]);
+
+    </script>
+
+  </body>
+</html>
diff --git a/test/simple-validator.html b/test/simple-validator.html
@@ -0,0 +1,26 @@
+<!--
+@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-validator-behavior.html">
+
+<script>
+
+  Polymer({
+
+    is: 'simple-validator',
+
+    behaviors: [
+      Polymer.IronValidatorBehavior
+    ]
+
+  });
+
+</script>
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1,3 @@
		# iron-validatable-behavior
		Implements an element validated with Polymer.IronValidatorBehavior