Textual HTML5 AJAX widgets

2 files changed, 36 insertions, 13 deletions

diff --git a/lib/js/urweb.js b/lib/js/urweb.js
index 5cc49fec..c62670e7 100644
--- a/lib/js/urweb.js
+++ b/lib/js/urweb.js
@@ -1038,28 +1038,44 @@ function input(x, s, recreate, type, name) {
     return x;
 }
 
-function inp(s, name) {
+function inpt(type, s, name) {
     if (suspendScripts)
         return;
 
     var x = input(document.createElement("input"), s,
-                  function(x) { return function(v) { if (x.value != v) x.value = v; }; }, "text", name);
+                  function(x) { return function(v) { if (x.value != v) x.value = v; }; }, type, name);
     x.value = s.data;
     x.onkeyup = x.oninput = x.onchange = x.onpropertychange = function() { sv(s, x.value) };
 
     return x;
 }
 
+function inp(s, name) {
+    return inpt("text", s, name);
+}
+
 function password(s, name) {
-    if (suspendScripts)
-        return;
+    return inpt("password", s, name);
+}
 
-    var x = input(document.createElement("input"), s,
-                  function(x) { return function(v) { if (x.value != v) x.value = v; }; }, "password", name);
-    x.value = s.data;
-    x.onkeyup = x.oninput = x.onchange = x.onpropertychange = function() { sv(s, x.value) };
+function email(s, name) {
+    return inpt("email", s, name);
+}
 
-    return x;
+function search(s, name) {
+    return inpt("search", s, name);
+}
+
+function url(s, name) {
+    return inpt("url", s, name);
+}
+
+function tel(s, name) {
+    return inpt("tel", s, name);
+}
+
+function color(s, name) {
+    return inpt("color", s, name);
 }
 
 function selectValue(x) {
diff --git a/lib/ur/basis.urs b/lib/ur/basis.urs
index 9fb04484..1ee5be50 100644
--- a/lib/ur/basis.urs
+++ b/lib/ur/basis.urs
@@ -1036,10 +1036,17 @@ con cformTag = fn (attrs :: {Type}) (inner :: {Unit}) =>
                   -> [[Body] ~ ctx] => [[Body] ~ inner] =>
                         unit -> tag attrs ([Body] ++ ctx) ([Body] ++ inner) [] []
 
-val ctextbox : cformTag ([Value = string, Size = int, Source = source string, Placeholder = string, Onchange = transaction unit,
-                          Ontext = transaction unit] ++ boxAttrs ++ inputAttrs) []
-val cpassword : cformTag ([Value = string, Size = int, Source = source string, Placeholder = string, Onchange = transaction unit,
-                          Ontext = transaction unit] ++ boxAttrs ++ inputAttrs) []
+type ctext = cformTag ([Value = string, Size = int, Source = source string, Placeholder = string,
+                        Onchange = transaction unit, Ontext = transaction unit] ++ boxAttrs ++ inputAttrs) []
+
+val ctextbox : ctext
+val cpassword : ctext
+val cemail : ctext
+val csearch : ctext
+val curl : ctext
+val ctel : ctext
+val ccolor : ctext
+
 val button : cformTag ([Value = string] ++ boxAttrs) []
 
 val ccheckbox : cformTag ([Value = bool, Size = int, Source = source bool, Onchange = transaction unit] ++ boxAttrs ++ inputAttrs) []