Push down demo.html and phoneItIn.js files and extract css file.

stevecj · stevecj · commit 976d4ec683f5 · 2013-09-02T22:53:19.000-07:00
diff --git a/README.md b/README.md
@@ -21,9 +21,5 @@ number will look, whether there are any problems, and whether
 entry is complete. Upon leaving the input, the value is re-
 formatted to standard.
 
-Note: This project is in early develpment and has just reached
-the point of starting to be useful in production. It currently
-works only with very modern browsers and it will be much
-firendlier once it can display an indication of when a complete
-phone number has been entered or when invalid or extra characters
-have been entered. These indications are coming very soon.
+Note that this code currently relies on features only present
+in up-to-date modern browsers.
diff --git a/SpecRunner.html b/SpecRunner.html
@@ -8,7 +8,7 @@
   <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
 
   <!-- include source files here... -->
-  <script type="text/javascript" src="src/phoneItIn.js"></script>
+  <script type="text/javascript" src="src/scripts/phoneItIn.js"></script>
 
   <!-- include spec files here... -->
   <script type="text/javascript" src="spec/support/phoneItInDrivers/Browser.js"></script>
diff --git a/demo.html b/demo.html
diff --git a/src/demo.html b/src/demo.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="styles/phoneItIn.css">
+  </head>
+  <body>
+    <label for='name'>Name</label><input id='name' type='text' /><br />
+    <label for='phone'>Phone</label><input id='phone' type='tel' /><br />
+
+    <script type="text/javascript" src="scripts/phoneItIn.js"></script>
+    <script>
+      var phoneItInUI = new phoneItIn.UI();
+      phoneItInUI.bindToInput( document.getElementById('phone') );
+    </script>
+  </body>
+</html>
diff --git a/src/scripts/phoneItIn.js b/src/scripts/phoneItIn.js
@@ -1,3 +1,30 @@
+/****
+ * Copyright (c) 2013 Steve Jorgensen
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.  
+ ****/
+
+/****
+ * See https://github.com/stevecj/phoneItIn for information and updates.
+ ****/
+
 var phoneItIn = phoneItIn || {};
 
 phoneItIn.formatters = phoneItIn.formatters || {};
diff --git a/src/styles/phoneItIn.css b/src/styles/phoneItIn.css
@@ -0,0 +1,15 @@
+#phin-help {
+  padding: 3px
+}
+
+#phin-help-inner {
+  border: solid 1px #bbb; padding: 0.125em 0.25em; color: #666;
+}
+
+.phin-invalid #phin-help-inner {
+  background-color: #fbb; color: #844;
+}
+
+.phin-complete #phin-help-inner {
+  background-color: #bfb; color: #484;
+}
