Skip to content

C
converse.js
Commit d335173f authored by JC Brand's avatar JC Brand
Browse files
Options

Bootstrap markup for auto-generated forms

parent 1540d811
Show whitespace changes
Inline Side-by-side
Showing with 70 additions and 46 deletions
css/converse.css
View file @ d335173f
......@@ -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],
......
dist/converse.js
View file @ d335173f
......@@ -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,9 +85117,13 @@ 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) { ;
......@@ -85118,7 +85131,7 @@ __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,
sass/_chatrooms.scss
View file @ d335173f
......@@ -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;
......
src/converse-muc-views.js
View file @ d335173f
......@@ -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));
......
src/templates/form_checkbox.html
View file @ d335173f
<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>
src/templates/form_input.html
View file @ d335173f
<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>
src/templates/form_select.html
View file @ d335173f
<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>
src/templates/registration_form.html
View file @ d335173f
<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">
......
src/utils/form.js
View file @ d335173f
......@@ -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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7