Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Bootstrap markup for auto-generated forms

Browse Source
This commit is contained in:
JC Brand 2018-07-02 20:10:18 +02:00
parent 1540d81126
commit d335173fd7
9 changed files with 70 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/converse.css
View File

@ -8712,11 +8712,6 @@ body.reset {
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
font-size: 90%;
color: #A53214; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
display: block; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],

65
dist/converse.js vendored
View File

@ -76473,7 +76473,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
fieldset_el.insertAdjacentHTML('beforeend', `<legend>${title}</legend>`);
if (instructions && instructions !== title) {
fieldset_el.insertAdjacentHTML('beforeend', `<p class="instructions">${instructions}</p>`);
fieldset_el.insertAdjacentHTML('beforeend', `<p class="form-help">${instructions}</p>`);
}
_.each(fields, function (field) {
@ -85041,18 +85041,23 @@ return __p
var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
module.exports = function(o) {
var __t, __p = '', __e = _.escape;
__p += '<!-- src/templates/form_checkbox.html -->\n<label class="checkbox" for="' +
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
__p += '<!-- src/templates/form_checkbox.html -->\n<div class="form-group">\n <input id="' +
__e(o.id) +
'" name="' +
__e(o.name) +
'" type="checkbox" ' +
__e(o.checked) +
' ';
if (o.required) { ;
__p += ' required ';
} ;
__p += ' >\n <label class="form-check-label" for="' +
__e(o.id) +
'">' +
__e(o.label) +
'<input name="' +
__e(o.name) +
'" type="' +
__e(o.type) +
'" ' +
__e(o.checked) +
'></label>\n\n';
'</label>\n</div>\n';
return __p
};
@ -85069,13 +85074,17 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
module.exports = function(o) {
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
__p += '<!-- src/templates/form_input.html -->\n<label>\n ' +
__p += '<!-- src/templates/form_input.html -->\n<div class="form-group">\n <label for="' +
__e(o.id) +
'">' +
__e(o.label) +
'\n <input name="' +
'</label>\n <input class="form-control" name="' +
__e(o.name) +
'" type="' +
__e(o.type) +
'" \n ';
'" id="' +
__e(o.id) +
'"\n ';
if (o.placeholder) { ;
__p += ' placeholder="' +
__e(o.placeholder) +
@ -85089,9 +85098,9 @@ __e(o.value) +
} ;
__p += '\n ';
if (o.required) { ;
__p += ' class="required" ';
__p += ' required ';
} ;
__p += ' >\n</label>\n';
__p += ' >\n</div>\n';
return __p
};
@ -85108,17 +85117,21 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
module.exports = function(o) {
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
__p += '<!-- src/templates/form_select.html -->\n<label>\n ' +
__p += '<!-- src/templates/form_select.html -->\n<div class="form-group">\n <label for="' +
__e(o.id) +
'">' +
__e(o.label) +
'\n <select name="' +
'</label>\n <select class="form-control" id="' +
__e(o.id) +
'" name="' +
__e(o.name) +
'" ';
'" ';
if (o.multiple) { ;
__p += ' multiple="multiple" ';
} ;
__p += '>' +
((__t = (o.options)) == null ? '' : __t) +
'</select>\n</label>\n';
'</select>\n</div>\n';
return __p
};
@ -85855,7 +85868,7 @@ __e(o.__("Account Registration:")) +
__e(o.domain) +
'</legend>\n<p class="title">' +
__e(o.title) +
'</p>\n<p class="instructions">' +
'</p>\n<p class="form-help instructions">' +
__e(o.instructions) +
'</p>\n<div class="form-errors hidden"></div>\n\n<fieldset class="buttons">\n <input type="submit" class="btn btn-primary" value="' +
__e(o.__('Register')) +
@ -87673,6 +87686,14 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
}));
};
u.getUniqueId = function () {
return 'xxxxxxxx-xxxx'.replace(/[x]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c === 'x' ? r : r & 0x3 | 0x8;
return v.toString(16);
});
};
u.xForm2webForm = function (field, stanza, domain) {
/* Takes a field in XMPP XForm (XEP-004: Data Forms) format
* and turns it into an HTML field.
@ -87699,6 +87720,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
});
return tpl_form_select({
'id': u.getUniqueId(),
'name': field.getAttribute('var'),
'label': field.getAttribute('label'),
'options': options.join(''),
@ -87718,8 +87740,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
});
} else if (field.getAttribute('type') === 'boolean') {
return tpl_form_checkbox({
'id': u.getUniqueId(),
'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'))
@ -87740,6 +87762,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
});
} else {
return tpl_form_input({
'id': u.getUniqueId(),
'label': field.getAttribute('label') || '',
'name': field.getAttribute('var'),
'placeholder': null,

6
sass/_chatrooms.scss
View File

@ -249,12 +249,6 @@
font-size: 90%;
color: $error-color;
}
.chatroom-form {
label,
input[type=text] {
display: block;
}
}
input[type=button],
input[type=submit] {
margin: 0 0.5em;

2
src/converse-muc-views.js
View File

@ -1045,7 +1045,7 @@
fieldset_el.insertAdjacentHTML('beforeend', `<legend>${title}</legend>`);
if (instructions && instructions !== title) {
fieldset_el.insertAdjacentHTML('beforeend', `<p class="instructions">${instructions}</p>`);
fieldset_el.insertAdjacentHTML('beforeend', `<p class="form-help">${instructions}</p>`);
}
_.each(fields, function (field) {
fieldset_el.insertAdjacentHTML('beforeend', u.xForm2webForm(field, stanza));

6
src/templates/form_checkbox.html
View File

@ -1,2 +1,4 @@
<label class="checkbox" for="{{{o.name}}}">{{{o.label}}}<input name="{{{o.name}}}" type="{{{o.type}}}" {{{o.checked}}}></label>
<div class="form-group">
<input id="{{{o.id}}}" name="{{{o.name}}}" type="checkbox" {{{o.checked}}} {[ if (o.required) { ]} required {[ } ]} >
<label class="form-check-label" for="{{{o.id}}}">{{{o.label}}}</label>
</div>

10
src/templates/form_input.html
View File

@ -1,7 +1,7 @@
<label>
{{{o.label}}}
<input name="{{{o.name}}}" type="{{{o.type}}}"
<div class="form-group">
<label for="{{{o.id}}}">{{{o.label}}}</label>
<input class="form-control" name="{{{o.name}}}" type="{{{o.type}}}" id="{{{o.id}}}"
{[ if (o.placeholder) { ]} placeholder="{{{o.placeholder}}}" {[ } ]}
{[ if (o.value) { ]} value="{{{o.value}}}" {[ } ]}
{[ if (o.required) { ]} class="required" {[ } ]} >
</label>
{[ if (o.required) { ]} required {[ } ]} >
</div>

8
src/templates/form_select.html
View File

@ -1,4 +1,4 @@
<label>
{{{o.label}}}
<select name="{{{o.name}}}" {[ if (o.multiple) { ]} multiple="multiple" {[ } ]}>{{o.options}}</select>
</label>
<div class="form-group">
<label for="{{{o.id}}}">{{{o.label}}}</label>
<select class="form-control" id="{{{o.id}}}" name="{{{o.name}}}" {[ if (o.multiple) { ]} multiple="multiple" {[ } ]}>{{o.options}}</select>
</div>

2
src/templates/registration_form.html
View File

@ -1,6 +1,6 @@
<legend>{{{o.__("Account Registration:")}}} {{{o.domain}}}</legend>
<p class="title">{{{o.title}}}</p>
<p class="instructions">{{{o.instructions}}}</p>
<p class="form-help instructions">{{{o.instructions}}}</p>
<div class="form-errors hidden"></div>
<fieldset class="buttons">

12
src/utils/form.js
View File

@ -73,6 +73,14 @@
);
};
u.getUniqueId = function () {
return 'xxxxxxxx-xxxx'.replace(/[x]/g, function(c) {
var r = Math.random() * 16 | 0,
v = c === 'x' ? r : r & 0x3 | 0x8;
return v.toString(16);
});
};
u.xForm2webForm = function (field, stanza, domain) {
/* Takes a field in XMPP XForm (XEP-004: Data Forms) format
* and turns it into an HTML field.
@ -104,6 +112,7 @@
}
);
return tpl_form_select({
'id': u.getUniqueId(),
'name': field.getAttribute('var'),
'label': field.getAttribute('label'),
'options': options.join(''),
@ -122,8 +131,8 @@
});
} else if (field.getAttribute('type') === 'boolean') {
return tpl_form_checkbox({
'id': u.getUniqueId(),
'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'))
@ -144,6 +153,7 @@
});
} else {
return tpl_form_input({
'id': u.getUniqueId(),
'label': field.getAttribute('label') || '',
'name': field.getAttribute('var'),
'placeholder': null,