work towards input, making it clearable, etc

brenthosie · May 19, 2015 · 3836321 · 3836321
1 parent 570aa79
commit 3836321
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 2 deletions.
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1 @@
+{"directory":"../"}
diff --git a/README.md b/README.md
@@ -1,2 +1 @@
-# clearable-input
-clearable-input is a Polymer element that encapsulates the idea of a text input that has a clickable icon inside the element to clear the input.
+See the [component page](http://xrapiddavex.github.io/clearable-input/bower_components/clearable-input/) for more information.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,23 @@
+{
+  "name": "clearable-input",
+  "version": "0.0.0",
+  "homepage": "https://github.com/xRapidDavex/clearable-input",
+  "authors": [
+    "Brent Hosie <[email protected]>",
+    "Garrett Nay <[email protected]"
+  ],
+  "description": "clearable-input is a Polymer element that encapsulates the idea of a text input that has a clickable icon inside the element to clear the input.",
+  "main": "clearable-input.html",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "../",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^0.5"
+  }
+}
diff --git a/clearable-input.html b/clearable-input.html
@@ -0,0 +1,74 @@
+<!--
+`clearable-input` is a Polymer element that encapsulates the idea of a text input that has a clickable icon inside the element to clear the input.
+
+<clearable-input></clearable-input>
+
+@author Brent Hosie
+@author Garrett Nay
+@element clearable-input
+@homepage http://github.com/xrapiddavex/clearable-input/
+-->
+
+<link rel="import" href="../polymer/polymer.html"/>
+
+<polymer-element name="clearable-input" attributes="placeholder value readonly backgroundColor">
+	<template>
+		<style>
+			div{
+				border:1px solid silver;
+				display: inline-block;
+			}
+			input {
+				float: left;
+				border: none;
+			}
+			input:focus, button:focus{
+				outline:transparent;
+			}
+			button {
+				cursor: pointer;
+				border: none;
+				padding: 0 2px 0 0;
+				margin: 0;
+				background: #fff;
+				position: relative;
+				font-weight: bold;
+				opacity: 0;
+			}
+		</style>
+		<div>
+			<input type="text" id="textInput" placeholder="{{placeholder}}" background-color="{{backgroundColor}}" value="{{value}}" on-keyUp="{{keyup}}"/>
+			<button id="clearInput" on-click="{{clearInput}}">&#10005;</button>
+		</div>
+	</template>
+	<script>
+		(function() {
+			"use strict";			
+
+			var determineButtonState = function() {
+				// when length 0, opacity is 0
+				this.$.clearInput.style.opacity = (this.$.textInput.value.length !== 0 ? 1 : 0);
+			};
+
+			Polymer({
+				ready: function() {
+					this.$.textInput.readOnly = (this.readonly !== void 0);
+					this.$.textInput.style.backgroundColor = this.readonlyBGColor;
+				},
+
+				keyup: function() {
+					determineButtonState.call(this);
+				},
+
+				textInputChanged: function() {
+					this.keyup();
+				},
+
+				clearInput: function() {
+					this.$.textInput.value = '';
+					this.keyup();
+				}
+			});
+		})();
+	</script>
+</polymer-element>
diff --git a/demo.html b/demo.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <title>clearable-input</title>
+    <script src="../webcomponentsjs/webcomponents.js"></script>
+    <link rel="import" href="clearable-input.html">
+</head>
+<body unresolved>
+	<clearable-input></clearable-input>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <script src="../webcomponentsjs/webcomponents.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+
+</head>
+<body unresolved>
+
+  <core-component-page></core-component-page>
+
+</body>
+</html>