Move form utilities to form-utils.js

src/config.js

@@ -25,13 +25,14 @@ require.config({
         "emojione":                 "node_modules/emojione/lib/js/emojione",
         "es6-promise":              "node_modules/es6-promise/dist/es6-promise.auto",
         "eventemitter":             "node_modules/otr/build/dep/eventemitter",
+        "form-utils":               "src/form-utils",
         "jquery":                   "node_modules/jquery/dist/jquery",
         "jquery.browser":           "node_modules/jquery.browser/dist/jquery.browser",
         "jquery.noconflict":        "src/jquery.noconflict",
         "lodash":                   "node_modules/lodash/lodash",
         "lodash.converter":         "3rdparty/lodash.fp",
-        "lodash.noconflict":        "src/lodash.noconflict",
         "lodash.fp":                "src/lodash.fp",
+        "lodash.noconflict":        "src/lodash.noconflict",
         "pluggable":                "node_modules/pluggable.js/dist/pluggable",
         "polyfill":                 "src/polyfill",
         "sizzle":                   "node_modules/jquery/sizzle/dist/sizzle",
@@ -45,8 +46,8 @@ require.config({
         "typeahead":                "components/typeahead.js/index",
         "underscore":               "src/underscore-shim",
         "utils":                    "src/utils",
-        "xss.noconflict":           "src/xss.noconflict",
         "xss":                      "node_modules/xss/dist/xss",
+        "xss.noconflict":           "src/xss.noconflict",
 
         // Converse
         "converse":                 "src/converse",

src/converse-muc.js

@@ -12,6 +12,7 @@
 (function (root, factory) {
     define([
             "jquery.noconflict",
+            "form-utils",
             "converse-core",
             "lodash.fp",
             "tpl!chatarea",
@@ -38,6 +39,7 @@
     ], factory);
 }(this, function (
             $,
+            utils,
             converse,
             fp,
             tpl_chatarea,
@@ -65,7 +67,7 @@
     const ROOMS_PANEL_ID = 'chatrooms';
     const CHATROOMS_TYPE = 'chatroom';
 
-    const { Strophe, Backbone, Promise, $iq, $build, $msg, $pres, b64_sha1, sizzle, utils, _, moment } = converse.env;
+    const { Strophe, Backbone, Promise, $iq, $build, $msg, $pres, b64_sha1, sizzle, _, moment } = converse.env;
 
     // Add Strophe Namespaces
     Strophe.addNamespace('MUC_ADMIN', Strophe.NS.MUC + "#admin");

src/converse-register.js

@@ -11,6 +11,7 @@
  */
 (function (root, factory) {
     define(["jquery.noconflict",
+            "form-utils",
             "converse-core",
             "tpl!form_username",
             "tpl!register_panel",
@@ -22,6 +23,7 @@
     ], factory);
 }(this, function (
             $,
+            utils,
             converse,
             tpl_form_username,
             tpl_register_panel,
@@ -34,7 +36,7 @@
     "use strict";
 
     // Strophe methods for building stanzas
-    const { Strophe, Backbone, utils, $iq, _ } = converse.env;
+    const { Strophe, Backbone, $iq, _ } = converse.env;
 
     // Add Strophe Namespaces
     Strophe.addNamespace('REGISTER', 'jabber:iq:register');

src/form-utils.js

@@ -0,0 +1,160 @@
+// Converse.js (A browser based XMPP chat client)
+// http://conversejs.org
+//
+// This is the utilities module.
+//
+// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
+// Licensed under the Mozilla Public License (MPLv2)
+//
+/*global define, escape, locales, Jed */
+(function (root, factory) {
+    define([
+        "sizzle",
+        "lodash.noconflict",
+        "utils",
+        "tpl!field",
+        "tpl!select_option",
+        "tpl!form_select",
+        "tpl!form_textarea",
+        "tpl!form_checkbox",
+        "tpl!form_username",
+        "tpl!form_input",
+        "tpl!form_captcha"
+    ], factory);
+}(this, function (
+        sizzle,
+        _,
+        u,
+        tpl_field,
+        tpl_select_option,
+        tpl_form_select,
+        tpl_form_textarea,
+        tpl_form_checkbox,
+        tpl_form_username,
+        tpl_form_input,
+        tpl_form_captcha
+    ) {
+    "use strict";
+
+    var XFORM_TYPE_MAP = {
+        'text-private': 'password',
+        'text-single': 'text',
+        'fixed': 'label',
+        'boolean': 'checkbox',
+        'hidden': 'hidden',
+        'jid-multi': 'textarea',
+        'list-single': 'dropdown',
+        'list-multi': 'dropdown'
+    };
+
+    u.webForm2xForm = function (field) {
+        /* Takes an HTML DOM and turns it into an XForm field.
+         *
+         * Parameters:
+         *      (DOMElement) field - the field to convert
+         */
+        let value;
+        if (field.getAttribute('type') === 'checkbox') {
+            value = field.checked && 1 || 0;
+        } else if (field.tagName == "textarea") {
+            value = _.filter(field.value.split('\n'), _.trim);
+        } else {
+            value = field.value;
+        }
+        return u.stringToDOM(
+            tpl_field({
+                name: field.getAttribute('name'),
+                value: value
+            })
+        )[0];
+    };
+
+    u.xForm2webForm = function (field, stanza) {
+        /* Takes a field in XMPP XForm (XEP-004: Data Forms) format
+         * and turns it into an HTML field.
+         *
+         * Returns either text or a DOM element (which is not ideal, but fine
+         * for now).
+         *
+         *  Parameters:
+         *      (XMLElement) field - the field to convert
+         */
+        if (field.getAttribute('type') === 'list-single' ||
+            field.getAttribute('type') === 'list-multi') {
+
+            const values = _.map(
+                u.queryChildren(field, 'value'),
+                _.partial(_.get, _, 'textContent')
+            );
+            const options = _.map(
+                u.queryChildren(field, 'option'),
+                function (option) {
+                    const value = _.get(option.querySelector('value'), 'textContent');
+                    return tpl_select_option({
+                        'value': value,
+                        'label': option.getAttribute('label'),
+                        'selected': _.startsWith(values, value),
+                        'required': _.isNil(field.querySelector('required'))
+                    })
+                }
+            );
+            return tpl_form_select({
+                'name': field.getAttribute('var'),
+                'label': field.getAttribute('label'),
+                'options': options.join(''),
+                'multiple': (field.getAttribute('type') === 'list-multi'),
+                'required': _.isNil(field.querySelector('required'))
+            })
+        } else if (field.getAttribute('type') === 'fixed') {
+            const text = _.get(field.querySelector('value'), 'textContent');
+            const el = u.stringToDOM('<p class="form-help">');
+            el.textContent = text;
+            return el;
+        } else if (field.getAttribute('type') === 'jid-multi') {
+            return tpl_form_textarea({
+                'name': field.getAttribute('var'),
+                'label': field.getAttribute('label') || '',
+                'value': _.get(field.querySelector('value'), 'textContent'),
+                'required': _.isNil(field.querySelector('required'))
+            })
+        } else if (field.getAttribute('type') === 'boolean') {
+            return tpl_form_checkbox({
+                'name': field.getAttribute('var'),
+                'type': XFORM_TYPE_MAP[field.getAttribute('type')],
+                'label': field.getAttribute('label') || '',
+                'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '',
+                'required': _.isNil(field.querySelector('required'))
+            })
+        } else if (field.getAttribute('type') && field.getAttribute('var') === 'username') {
+            return tpl_form_username({
+                'domain': ' @'+this.domain,
+                'name': field.getAttribute('var'),
+                'type': XFORM_TYPE_MAP[field.getAttribute('type')],
+                'label': field.getAttribute('label') || '',
+                'value': _.get(field.querySelector('value'), 'textContent'),
+                'required': _.isNil(field.querySelector('required'))
+            })
+        } else if (field.getAttribute('type')) {
+            return tpl_form_input({
+                'name': field.getAttribute('var'),
+                'type': XFORM_TYPE_MAP[field.getAttribute('type')],
+                'label': field.getAttribute('label') || '',
+                'value': _.get(field.querySelector('value'), 'textContent'),
+                'required': _.isNil(field.querySelector('required'))
+            })
+        } else {
+            if (field.getAttribute('var') === 'ocr') { // Captcha
+                const uri = field.querySelector('uri');
+                const el = sizzle('data[cid="'+uri.textContent.replace(/^cid:/, '')+'"]', stanza)[0];
+                return tpl_form_captcha({
+                    'label': field.getAttribute('label'),
+                    'name': field.getAttribute('var'),
+                    'data': _.get(el, 'textContent'),
+                    'type': uri.getAttribute('type'),
+                    'required': _.isNil(field.querySelector('required'))
+                })
+            }
+        }
+    }
+    return u;
+}));

src/utils.js

@@ -16,14 +16,6 @@
         "locales",
         "moment_with_locales",
         "strophe",
-        "tpl!field",
-        "tpl!select_option",
-        "tpl!form_select",
-        "tpl!form_textarea",
-        "tpl!form_checkbox",
-        "tpl!form_username",
-        "tpl!form_input",
-        "tpl!form_captcha"
     ], factory);
 }(this, function (
         sizzle,
@@ -32,15 +24,7 @@
         _,
         locales,
         moment,
-        Strophe,
-        tpl_field,
-        tpl_select_option,
-        tpl_form_select,
-        tpl_form_textarea,
-        tpl_form_checkbox,
-        tpl_form_username,
-        tpl_form_input,
-        tpl_form_captcha
+        Strophe
     ) {
     "use strict";
     locales = locales || {};
@@ -49,17 +33,6 @@
 
     const URL_REGEX = /\b(https?:\/\/|www\.|https?:\/\/www\.)[^\s<>]{2,200}\b/g;
 
-    var XFORM_TYPE_MAP = {
-        'text-private': 'password',
-        'text-single': 'text',
-        'fixed': 'label',
-        'boolean': 'checkbox',
-        'hidden': 'hidden',
-        'jid-multi': 'textarea',
-        'list-single': 'dropdown',
-        'list-multi': 'dropdown'
-    };
-
     var afterAnimationEnd = function (el, callback) {
         el.classList.remove('visible');
         if (_.isFunction(callback)) {
@@ -447,28 +420,6 @@
         return _.filter(el.children, _.partial(u.matchesSelector, _, selector));
     };
 
-    u.webForm2xForm = function (field) {
-        /* Takes an HTML DOM and turns it into an XForm field.
-         *
-         * Parameters:
-         *      (DOMElement) field - the field to convert
-         */
-        let value;
-        if (field.getAttribute('type') === 'checkbox') {
-            value = field.checked && 1 || 0;
-        } else if (field.tagName == "textarea") {
-            value = _.filter(field.value.split('\n'), _.trim);
-        } else {
-            value = field.value;
-        }
-        return u.stringToDOM(
-            tpl_field({
-                name: field.getAttribute('name'),
-                value: value
-            })
-        )[0];
-    };
-
     u.contains = function (attr, query) {
         return function (item) {
             if (typeof attr === 'object') {
@@ -485,93 +436,6 @@
         };
     };
 
-    u.xForm2webForm = function (field, stanza) {
-        /* Takes a field in XMPP XForm (XEP-004: Data Forms) format
-         * and turns it into an HTML field.
-         *
-         * Returns either text or a DOM element (which is not ideal, but fine
-         * for now).
-         *
-         *  Parameters:
-         *      (XMLElement) field - the field to convert
-         */
-        if (field.getAttribute('type') === 'list-single' ||
-            field.getAttribute('type') === 'list-multi') {
-
-            const values = _.map(
-                u.queryChildren(field, 'value'),
-                _.partial(_.get, _, 'textContent')
-            );
-            const options = _.map(
-                u.queryChildren(field, 'option'),
-                function (option) {
-                    const value = _.get(option.querySelector('value'), 'textContent');
-                    return tpl_select_option({
-                        'value': value,
-                        'label': option.getAttribute('label'),
-                        'selected': _.startsWith(values, value),
-                        'required': _.isNil(field.querySelector('required'))
-                    })
-                }
-            );
-            return tpl_form_select({
-                'name': field.getAttribute('var'),
-                'label': field.getAttribute('label'),
-                'options': options.join(''),
-                'multiple': (field.getAttribute('type') === 'list-multi'),
-                'required': _.isNil(field.querySelector('required'))
-            })
-        } else if (field.getAttribute('type') === 'fixed') {
-            const text = _.get(field.querySelector('value'), 'textContent');
-            const el = u.stringToDOM('<p class="form-help">');
-            el.textContent = text;
-            return el;
-        } else if (field.getAttribute('type') === 'jid-multi') {
-            return tpl_form_textarea({
-                'name': field.getAttribute('var'),
-                'label': field.getAttribute('label') || '',
-                'value': _.get(field.querySelector('value'), 'textContent'),
-                'required': _.isNil(field.querySelector('required'))
-            })
-        } else if (field.getAttribute('type') === 'boolean') {
-            return tpl_form_checkbox({
-                'name': field.getAttribute('var'),
-                'type': XFORM_TYPE_MAP[field.getAttribute('type')],
-                'label': field.getAttribute('label') || '',
-                'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '',
-                'required': _.isNil(field.querySelector('required'))
-            })
-        } else if (field.getAttribute('type') && field.getAttribute('var') === 'username') {
-            return tpl_form_username({
-                'domain': ' @'+this.domain,
-                'name': field.getAttribute('var'),
-                'type': XFORM_TYPE_MAP[field.getAttribute('type')],
-                'label': field.getAttribute('label') || '',
-                'value': _.get(field.querySelector('value'), 'textContent'),
-                'required': _.isNil(field.querySelector('required'))
-            })
-        } else if (field.getAttribute('type')) {
-            return tpl_form_input({
-                'name': field.getAttribute('var'),
-                'type': XFORM_TYPE_MAP[field.getAttribute('type')],
-                'label': field.getAttribute('label') || '',
-                'value': _.get(field.querySelector('value'), 'textContent'),
-                'required': _.isNil(field.querySelector('required'))
-            })
-        } else {
-            if (field.getAttribute('var') === 'ocr') { // Captcha
-                const uri = field.querySelector('uri');
-                const el = sizzle('data[cid="'+uri.textContent.replace(/^cid:/, '')+'"]', stanza)[0];
-                return tpl_form_captcha({
-                    'label': field.getAttribute('label'),
-                    'name': field.getAttribute('var'),
-                    'data': _.get(el, 'textContent'),
-                    'type': uri.getAttribute('type'),
-                    'required': _.isNil(field.querySelector('required'))
-                })
-            }
-        }
-    }
 
     u.detectLocale = function (library_check) {
         /* Determine which locale is supported by the user's system as well