Add alert modal and close profile modal on save
This commit is contained in:
parent
64754fa33a
commit
28ec15094e
@ -6953,6 +6953,8 @@ body.reset {
|
|||||||
color: #818479; }
|
color: #818479; }
|
||||||
#conversejs .modal {
|
#conversejs .modal {
|
||||||
background-color: rgba(0, 0, 0, 0.4); }
|
background-color: rgba(0, 0, 0, 0.4); }
|
||||||
|
#conversejs .modal .modal-body p {
|
||||||
|
padding: 0.25rem 0; }
|
||||||
#conversejs .selected {
|
#conversejs .selected {
|
||||||
color: #578EA9 !important; }
|
color: #578EA9 !important; }
|
||||||
#conversejs .circle {
|
#conversejs .circle {
|
||||||
|
@ -6953,6 +6953,8 @@ body.reset {
|
|||||||
color: #818479; }
|
color: #818479; }
|
||||||
#conversejs .modal {
|
#conversejs .modal {
|
||||||
background-color: rgba(0, 0, 0, 0.4); }
|
background-color: rgba(0, 0, 0, 0.4); }
|
||||||
|
#conversejs .modal .modal-body p {
|
||||||
|
padding: 0.25rem 0; }
|
||||||
#conversejs .selected {
|
#conversejs .selected {
|
||||||
color: #578EA9 !important; }
|
color: #578EA9 !important; }
|
||||||
#conversejs .circle {
|
#conversejs .circle {
|
||||||
|
@ -176,6 +176,12 @@ body.reset {
|
|||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
p {
|
||||||
|
padding: 0.25rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
|
@ -8,15 +8,15 @@
|
|||||||
if (typeof define === 'function' && define.amd) {
|
if (typeof define === 'function' && define.amd) {
|
||||||
define([
|
define([
|
||||||
"converse-core",
|
"converse-core",
|
||||||
|
"tpl!alert_modal",
|
||||||
"bootstrap",
|
"bootstrap",
|
||||||
"underscore",
|
|
||||||
"backbone",
|
|
||||||
"backbone.vdomview"
|
"backbone.vdomview"
|
||||||
], factory);
|
], factory);
|
||||||
}
|
}
|
||||||
}(this, function (converse, bootstrap, _, Backbone) {
|
}(this, function (converse, tpl_alert_modal, bootstrap) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
const { Strophe, Backbone, _ } = converse.env;
|
||||||
|
|
||||||
converse.plugins.add('converse-modal', {
|
converse.plugins.add('converse-modal', {
|
||||||
|
|
||||||
@ -44,12 +44,64 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
show (ev) {
|
show (ev) {
|
||||||
|
if (ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
this.trigger_el = ev.target;
|
this.trigger_el = ev.target;
|
||||||
this.trigger_el.classList.add('selected');
|
this.trigger_el.classList.add('selected');
|
||||||
|
}
|
||||||
this.modal.show();
|
this.modal.show();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
_converse.Alert = _converse.BootstrapModal.extend({
|
||||||
|
|
||||||
|
initialize () {
|
||||||
|
_converse.BootstrapModal.prototype.initialize.apply(this, arguments);
|
||||||
|
this.model.on('change', this.render, this);
|
||||||
|
},
|
||||||
|
|
||||||
|
toHTML () {
|
||||||
|
return tpl_alert_modal(this.model.toJSON());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/************************ BEGIN API ************************/
|
||||||
|
// We extend the default converse.js API to add methods specific to MUC chat rooms.
|
||||||
|
let alert
|
||||||
|
|
||||||
|
_.extend(_converse.api, {
|
||||||
|
'alert': {
|
||||||
|
'show' (type, title, messages) {
|
||||||
|
if (_.isString(messages)) {
|
||||||
|
messages = [messages];
|
||||||
|
}
|
||||||
|
if (type === Strophe.LogLevel.ERROR) {
|
||||||
|
type = 'alert-danger';
|
||||||
|
} else if (type === Strophe.LogLevel.INFO) {
|
||||||
|
type = 'alert-info';
|
||||||
|
} else if (type === Strophe.LogLevel.WARN) {
|
||||||
|
type = 'alert-warning';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_.isUndefined(alert)) {
|
||||||
|
const model = new Backbone.Model({
|
||||||
|
'title': title,
|
||||||
|
'messages': messages,
|
||||||
|
'type': type
|
||||||
|
})
|
||||||
|
alert = new _converse.Alert({'model': model});
|
||||||
|
} else {
|
||||||
|
alert.model.set({
|
||||||
|
'title': title,
|
||||||
|
'messages': messages,
|
||||||
|
'type': type
|
||||||
|
});
|
||||||
|
}
|
||||||
|
alert.show();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}));
|
}));
|
||||||
|
@ -90,22 +90,17 @@
|
|||||||
|
|
||||||
setVCard (body, data) {
|
setVCard (body, data) {
|
||||||
_converse.api.vcard.set(data)
|
_converse.api.vcard.set(data)
|
||||||
.then(() => {
|
.then(() => _converse.api.vcard.update(this.model.vcard, true))
|
||||||
_converse.api.vcard.update(this.model.vcard, true);
|
.catch((err) => {
|
||||||
|
|
||||||
const html = tpl_alert({
|
|
||||||
'message': __('Profile data succesfully saved'),
|
|
||||||
'type': 'alert-primary'
|
|
||||||
});
|
|
||||||
body.insertAdjacentHTML('afterBegin', html);
|
|
||||||
}).catch((err) => {
|
|
||||||
_converse.log(err, Strophe.LogLevel.FATAL);
|
_converse.log(err, Strophe.LogLevel.FATAL);
|
||||||
const html = tpl_alert({
|
_converse.api.alert.show(
|
||||||
'message': __('An error happened while trying to save your profile data'),
|
Strophe.LogLevel.ERROR,
|
||||||
'type': 'alert-danger'
|
__('Error'),
|
||||||
});
|
[__("Sorry, an error happened while trying to save your profile data."),
|
||||||
body.insertAdjacentHTML('afterBegin', html);
|
__("You can check your browser's developer console for any error output.")]
|
||||||
|
)
|
||||||
});
|
});
|
||||||
|
this.modal.hide();
|
||||||
},
|
},
|
||||||
|
|
||||||
onFormSubmitted (ev) {
|
onFormSubmitted (ev) {
|
||||||
|
16
src/templates/alert_modal.html
Normal file
16
src/templates/alert_modal.html
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<div class="modal" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header {{{o.type}}}">
|
||||||
|
<h5 class="modal-title">{{{o.title}}}</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">{[ _.each(o.messages, function (message) { ]}
|
||||||
|
<p>{{{message}}}</p>
|
||||||
|
{[ }) ]}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
Loading…
Reference in New Issue
Block a user