Move form utilities to form-utils.js
This commit is contained in:
JC Brand
parent
3b8c2d1b00
commit
56c5a9c8d0
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
160
src/form-utils.js
Normal file
160
src/form-utils.js
Normal file
|
|
@ -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;
|
||||
}));
|
||||
138
src/utils.js
138
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user