Rework HTML form building
authorFlorian Zeitz <florob@babelmonkeys.de>
Sun, 18 Dec 2011 02:23:05 +0000 (03:23 +0100)
committerFlorian Zeitz <florob@babelmonkeys.de>
Sun, 18 Dec 2011 02:23:05 +0000 (03:23 +0100)
index.html
js/adhoc.js

index 5390947b474ad369726cab7a78f6d23ac464bcc6..acf79d341defb98ddc8cc353e0f0c41f79bb192d 100644 (file)
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<!DOCTYPE html>
+
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>adHocWeb</title>
index 02be46c6342512080f728e4c18c5a8261c54321f..3f2ae2b4e96843896f95fdc1a4dc8c540be2e529 100644 (file)
@@ -1,3 +1,26 @@
+/*
+ * Implementation of ECMA Script 5 like bind from:
+ * https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
+ */
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function (oThis) {
+    if (typeof this !== "function") {
+      /* closest thing possible to the ECMAScript 5 internal IsCallable function */
+      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+    }
+    var fSlice = Array.prototype.slice,
+        aArgs = fSlice.call(arguments, 1),
+        fToBind = this,
+        fNOP = function () {},
+        fBound = function () {
+          return fToBind.apply(this instanceof fNOP ? this : oThis || window, Args.concat(fSlice.call(arguments)));
+        };
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+    return fBound;
+  };
+}
+
 Strophe.addNamespace("ADHOC", "http://jabber.org/protocol/commands");
 
 var Adhoc = {
@@ -16,117 +39,106 @@ var Adhoc = {
     },
 
     addForm: function (elem, x) {
+        var self = this;
         var form = $("<form action='#'/>");
         form.submit(function(event) {
-            Adhoc.executeCommand("execute", Adhoc.serializeToDataform('form'),
-                function(e) { Adhoc.displayResult(elem, e) });
+            self.executeCommand("execute", self.serializeToDataform('form'),
+                function(e) { self.displayResult(elem, e) });
             event.preventDefault();
         });
         var fieldset = $("<fieldset/>");
         form.append(fieldset);
-        if ($(x).find("title").length > 0)
-            $("<legend/>").text($(x).find("title").text()).appendTo(fieldset);
-        if ($(x).find("instructions").length > 0)
-            $("<p/>").text($(x).find("instructions").text()).appendTo(fieldset);
+        $(x).find("title").each(function() { $("<legend/>").text($(this).text()).appendTo(fieldset); });
+        $(x).find("instructions").each(function() { $("<p/>").text($(this).text()).appendTo(fieldset); });
         $(x).find("field").each(function() {
-            var item = null;
-            var type = $(this).attr("type");
-            if($(this).attr("label")) {
-                $("<label/>").text($(this).attr("label")).attr("for", $(this).attr("var")).appendTo(fieldset);
+            var item = self.buildHTMLField(this);
+            var label = $(this).attr("label");
+            if(label) {
+                $("<label/>").text(label).attr("for", $(this).attr("var")).appendTo(fieldset);
                 $("<br/>").appendTo(fieldset);
             }
-            switch(type) {
-            case "hidden":
-                item = $("<input type='hidden'/>");
-                break;
-            case "boolean":
-                item = $("<input type='checkbox'/>");
-                break;
-            case "text-multi":
-                item = $("<textarea rows='10' cols='70'/>");
-                break;
-            case "text-single":
-                item = $("<input type='text'/>");
-                break;
-            case "fixed":
-                item = $("<input type='text'/>").attr("readonly",true);
-                break;
-            case "jid-multi":
-                item = $("<textarea rows='10' cols='70'/>");
-                break;
-            case "jid-single":
-                item = $("<input type='text'/>");
-                break;
-            case "list-multi":
-                item = $("<select multiple='multiple'/>");
-                $(this).find("option").each(function() {
-                    $("<option/>").val($(this).find("value").text()).text($(this).attr("label")).appendTo(item);
-                });
-                break;
-            case "list-single":
-                item = $("<select/>");
-                $(this).find("option").each(function() {
-                    $("<option/>").val($(this).find("value").text()).text($(this).attr("label")).appendTo(item);
-                });
-                break;
-            case "text-private":
-                item = $("<input type='password'/>");
-                break;
-            default:
-                item = $("<input/>");
-            }
-            item.addClass("df-item");
-            if ($(this).find("value").length > 0) {
-                var value = null;
-                if ((type == "text-multi") || (type == "jid-multi")) {
-                    value = "";
-                    $(this).find("value").each(function() {
-                        value = value + $(this).text() + "\n";
-                    });
-                    item.val(value);
-                } else if (type == "list-multi") {
-                    $(this).children("value").each(function() {
-                        item.children('option[value="' + $(this).text() + '"]').each(function() {
-                            $(this).attr("selected", "selected");
-                });
-                    });
-                } else {
-                    item.val($(this).find("value").text());
-                }
-            }
-            if ($(x).attr("type") == "result")
+            if ($(x).attr("type") === "result")
                 item.attr("readonly", true);
-            if ($(this).attr("var")) {
-                item.attr("name", $(this).attr("var"));
-                item.attr("id", $(this).attr("var"));
-            }
             fieldset.append(item);
-            if (type != "hidden")
+            if ($(this).attr("type") !== "hidden")
                 fieldset.append("<br/>");
         });
         $(elem).append(form);
     },
 
+    buildHTMLField: function(fld) {
+        var field = $(fld), html = {
+            "hidden"     : "<input type='hidden'/>",
+            "boolean"    : "<input type='checkbox'/>",
+            "fixed"       : "<input type='text' readonly='true'/>",
+            "text-single" : "<input type='text'/>",
+            "text-private": "<input type='password'/>",
+            "text-multi"  : "<textarea rows='10' cols='70'/>",
+            "jid-single"  : "<input type='text'/>",
+            "jid-multi"   : "<textarea rows='10' cols='70'/>",
+            "list-single" : "<select/>",
+            "list-multi"  : "<select multiple='multiple'/>",
+        };
+        var type = field.attr('type');
+        var input = $(html[type] || "<input/>");
+        var name = field.attr("var");
+
+        input.addClass("df-item");
+        if (name) {
+            input.attr("name", name);
+            input.attr("id", name);
+        }
+
+        if (field.find("required").length > 0)
+            input.attr("required", "required");
+
+        /* Add possible values to the lists */
+        if (type === 'list-multi' || type==='list-single') {
+            field.find("option").each(function() {
+                var option = $("<option/>");
+                option.text($(this).attr("label"));
+                option.val($(this).find("value").text());
+                input.append(option);
+            });
+        }
+
+        /* Add/select default values */
+        field.children("value").each(function() {
+            var value = $(this).text();
+            if ((type === "text-multi") || (type === "jid-multi")) {
+                input.text(input.text() + value + "\n"); /* .append() would work, but doesn't escape */
+            } else if (type === "list-multi") {
+                input.children('option[value="' + value + '"]').each(function() {
+                    $(this).attr("selected", "selected");
+                });
+            } else {
+                input.val(value);
+            }
+        });
+
+        return input;
+    },
+
     serializeToDataform: function (form) {
         st = $build("x", {"xmlns": "jabber:x:data", "type": "submit"});
         $(form).find(".df-item").each(function(){
             st.c("field", {"var": $(this).attr("name")});
-            if (this.nodeName.toLowerCase() == "select" && this.multiple) {
+            if (this.nodeName.toLowerCase() === "select" && this.multiple) {
                 for (var i = 0; i < this.options.length; i++)
                     if (this.options[i].selected)
                         st.c("value").t(this.options[i].text).up();
-            } else if (this.nodeName.toLowerCase() == "textarea") {
+            } else if (this.nodeName.toLowerCase() === "textarea") {
                 var sp_value = this.value.split(/\r?\n|\r/g);
                 for(var i = 0; i < sp_value.length; i++)
                     st.c("value").t(sp_value[i]).up();
-            } else if (this.nodeName.toLowerCase() == "input" && this.type == "checkbox") {
+            } else if (this.nodeName.toLowerCase() === "input" && this.type === "checkbox") {
                 if (this.checked) {
                     st.c("value").t("1");
                 } else {
                     st.c("value").t("0");
                 }
             } else {
-                // if this has value then
+                /* if this has value then */
                 st.c("value").t($(this).val()).up();
             }
             st.up();
@@ -136,21 +148,22 @@ var Adhoc = {
     },
 
     displayResult: function (elem, result) {
+        var self = this;
         var status = $(result).find("command").attr("status");
         var kinds = {'prev': 'Prev', 'next': 'Next', 'complete': 'Complete'};
 
         $(elem).empty();
         $(result).find("command > *").each(function(index, e) {
             if ($(e).is("note")) {
-                Adhoc.addNote(elem, $(e).text(), $(e).attr("type"));
+                self.addNote(elem, $(e).text(), $(e).attr("type"));
             } else if ($(e).is("x[xmlns=jabber:x:data]")) {
-                Adhoc.addForm(elem, e);
+                self.addForm(elem, e);
             }
         });
-        if (status == "executing") {
+        if (status === "executing") {
             for (kind in kinds) {
                 input = $("<input type='button' disabled='disabled' value='" + kinds[kind] + "'/>").click(function() {
-                    Adhoc.executeCommand(kind, (kind != 'prev') && Adhoc.serializeToDataform('form'), function(e) { Adhoc.displayResult(elem, e) });
+                    self.executeCommand(kind, (kind != 'prev') && self.serializeToDataform('form'), function(e) { self.displayResult(elem, e) });
                 });
                 if ($(result).find('actions ' + kind).length > 0)
                     input.removeAttr("disabled");
@@ -158,57 +171,60 @@ var Adhoc = {
             }
 
             $("<input type='button' id='executeButton' value='Execute'/>").click(function() {
-                Adhoc.executeCommand("execute", Adhoc.serializeToDataform('form'), function(e) { Adhoc.displayResult(elem, e) });
+                self.executeCommand("execute", self.serializeToDataform('form'), function(e) { self.displayResult(elem, e) });
             }).appendTo(elem);
 
             $("<input type='button' value='Cancel'/>").click(function() {
-                Adhoc.cancelCommand(function(e) { Adhoc.displayResult(elem, e) });
+                self.cancelCommand(function(e) { self.displayResult(elem, e) });
             }).appendTo(elem);
         } else {
             input = $("<input type='button' value='Start over'/>").bind("click", function() {
                 $(elem).empty();
-                Adhoc.status.sessionid = null;
-                Adhoc.status.cmdNode = null;
-                Adhoc.getCommandNodes(elem);
+                self.status.sessionid = null;
+                self.status.cmdNode = null;
+                self.getCommandNodes(elem);
             });
             $(elem).append(input);
         }
     },
 
     runCommand: function (item, callback) {
-        Adhoc.status.cmdNode = $(item).attr("id"); // Save node of executed command (in global var)
-        Adhoc.executeCommand("execute", false, function(result) {
-            Adhoc.status.sessionid = $(result).find("command").attr("sessionid");
+        var cb;
+        this.status.cmdNode = $(item).attr("id"); /* Save node of executed command (in global var) */
+        cb = function(result) {
+            this.status.sessionid = $(result).find("command").attr("sessionid");
             callback(result);
-        });
+        }
+        this.executeCommand("execute", false, cb.bind(this));
     },
 
     executeCommand: function (type, childs, callback) {
-        if (Adhoc.status.sessionid)
-            var execIQ = $iq({ type: "set", to: Adhoc.status.queryJID, id: connection.getUniqueId() })
-                .c("command", { xmlns: Strophe.NS.ADHOC, node: Adhoc.status.cmdNode, sessionid: Adhoc.status.sessionid, action: type });
+        if (this.status.sessionid)
+            var execIQ = $iq({ type: "set", to: this.status.queryJID, id: connection.getUniqueId() })
+                .c("command", { xmlns: Strophe.NS.ADHOC, node: this.status.cmdNode, sessionid: this.status.sessionid, action: type });
         else
-            var execIQ = $iq({ type: "set", to: Adhoc.status.queryJID, id: connection.getUniqueId() })
-                .c("command", { xmlns: Strophe.NS.ADHOC, node: Adhoc.status.cmdNode, action: type });
+            var execIQ = $iq({ type: "set", to: this.status.queryJID, id: connection.getUniqueId() })
+                .c("command", { xmlns: Strophe.NS.ADHOC, node: this.status.cmdNode, action: type });
         if (childs)
             execIQ.cnode(childs);
             connection.sendIQ(execIQ, callback);
     },
 
     cancelCommand: function (callback) {
-        Adhoc.executeCommand("cancel", false, callback);
-        Adhoc.status.cmdNode = null
-        Adhoc.status.sessionid = null;
+        this.executeCommand("cancel", false, callback);
+        this.status.cmdNode = null
+        this.status.sessionid = null;
     },
 
     getCommandNodes: function (elem) {
-        var nodesIQ = $iq({ type: "get", to: Adhoc.status.queryJID, id: connection.getUniqueId() }).c("query", {xmlns: Strophe.NS.DISCO_ITEMS, node: Strophe.NS.ADHOC});
+        var self = this;
+        var nodesIQ = $iq({ type: "get", to: self.status.queryJID, id: connection.getUniqueId() }).c("query", {xmlns: Strophe.NS.DISCO_ITEMS, node: Strophe.NS.ADHOC});
         connection.sendIQ(nodesIQ, function(result) {
             var items = $("<ul></ul>");
             $(elem).append(items);
             $(result).find("item").each(function(index, e) {
                 $("<li></li>").append($("<a href='#' id='" + $(e).attr("node") + "'>" + $(e).attr("name") + "</a>").click(function (event) {
-                    Adhoc.runCommand(this, function (result) { Adhoc.displayResult(elem, result); });
+                    self.runCommand(this, function (result) { self.displayResult(elem, result); });
                     event.preventDefault();
                 })).appendTo(items);
             });
@@ -216,23 +232,22 @@ var Adhoc = {
     },
 
     checkFeatures: function (elem, jid) {
-        if (Adhoc.status.sessionid)
-            Adhoc.cancelCommand();
-        Adhoc.status.queryJID = jid;
-        var featureIQ = $iq({ type: "get", to: Adhoc.status.queryJID, id: connection.getUniqueId() }).c("query", {xmlns: Strophe.NS.DISCO_INFO});
+        var cb, ecb;
+        if (this.status.sessionid)
+            this.cancelCommand();
+        this.status.queryJID = jid;
+        var featureIQ = $iq({ type: "get", to: this.status.queryJID, id: connection.getUniqueId() }).c("query", {xmlns: Strophe.NS.DISCO_INFO});
         $(elem).empty();
-        connection.sendIQ(featureIQ,
-            function(result) { /* Callback */
-                if ($(result).find("feature[var='" + Strophe.NS.ADHOC + "']").length > 0) {
-                    Adhoc.getCommandNodes(elem);
-                } else {
-                    $(elem).append("<p>" + Adhoc.status.queryJID + " does NOT support AdHoc commands</p>");
-                }
-            },
-            function(result) { /* Errback */
-                $(elem).append("<p>Couldn't get list of supported features</p>");
+        cb = function(result) { /* Callback */
+            if ($(result).find("feature[var='" + Strophe.NS.ADHOC + "']").length > 0) {
+                this.getCommandNodes(elem);
+            } else {
+                $(elem).append("<p>" + this.status.queryJID + " does NOT support AdHoc commands</p>");
             }
-        );
+        }
+        ecb = function(result) { /* Errback */
+            $(elem).append("<p>Couldn't get list of supported features</p>");
+        }
+        connection.sendIQ(featureIQ, cb.bind(this), ecb.bind(this));
     }
-
 }