2018-04-16 18:08:00 +02:00
|
|
|
// Converse.js
|
2019-03-04 17:47:45 +01:00
|
|
|
// https://conversejs.org
|
2018-04-16 18:08:00 +02:00
|
|
|
//
|
2019-02-18 19:17:06 +01:00
|
|
|
// Copyright (c) 2013-2019, the Converse.js developers
|
2018-04-16 18:08:00 +02:00
|
|
|
// Licensed under the Mozilla Public License (MPLv2)
|
2019-07-11 10:48:52 +02:00
|
|
|
/**
|
|
|
|
* @module converse-modal
|
|
|
|
*/
|
2018-10-23 03:41:38 +02:00
|
|
|
import "backbone.vdomview";
|
2019-01-25 07:15:18 +01:00
|
|
|
import bootstrap from "bootstrap.native";
|
2018-10-23 03:41:38 +02:00
|
|
|
import converse from "@converse/headless/converse-core";
|
2019-07-04 14:12:12 +02:00
|
|
|
import tpl_alert from "templates/alert.html";
|
2018-10-23 03:41:38 +02:00
|
|
|
import tpl_alert_modal from "templates/alert_modal.html";
|
2018-05-09 10:09:42 +02:00
|
|
|
|
2019-07-04 14:12:12 +02:00
|
|
|
const { Strophe, Backbone, sizzle, _ } = converse.env;
|
2019-04-06 22:10:00 +02:00
|
|
|
const u = converse.env.utils;
|
2018-05-09 10:09:42 +02:00
|
|
|
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
converse.plugins.add('converse-modal', {
|
2018-05-09 10:09:42 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
initialize () {
|
|
|
|
const { _converse } = this;
|
|
|
|
|
|
|
|
_converse.BootstrapModal = Backbone.VDOMView.extend({
|
|
|
|
|
2019-07-04 14:12:12 +02:00
|
|
|
events: {
|
|
|
|
'click .nav-item .nav-link': 'switchTab'
|
|
|
|
},
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
initialize () {
|
|
|
|
this.render().insertIntoDOM();
|
|
|
|
this.modal = new bootstrap.Modal(this.el, {
|
|
|
|
backdrop: 'static',
|
|
|
|
keyboard: true
|
|
|
|
});
|
2019-08-05 01:39:57 +02:00
|
|
|
this.el.addEventListener('hide.bs.modal', () => u.removeClass('selected', this.trigger_el), false);
|
2018-10-23 03:41:38 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
insertIntoDOM () {
|
|
|
|
const container_el = _converse.chatboxviews.el.querySelector("#converse-modals");
|
|
|
|
container_el.insertAdjacentElement('beforeEnd', this.el);
|
|
|
|
},
|
|
|
|
|
2019-07-04 14:12:12 +02:00
|
|
|
switchTab (ev) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
sizzle('.nav-link.active', this.el).forEach(el => {
|
|
|
|
u.removeClass('active', this.el.querySelector(el.getAttribute('href')));
|
|
|
|
u.removeClass('active', el);
|
|
|
|
});
|
|
|
|
u.addClass('active', ev.target);
|
|
|
|
u.addClass('active', this.el.querySelector(ev.target.getAttribute('href')))
|
|
|
|
},
|
|
|
|
|
|
|
|
alert (message, type='primary') {
|
|
|
|
const body = this.el.querySelector('.modal-body');
|
|
|
|
body.insertAdjacentHTML(
|
|
|
|
'afterBegin',
|
|
|
|
tpl_alert({
|
|
|
|
'type': `alert-${type}`,
|
|
|
|
'message': message
|
|
|
|
})
|
|
|
|
);
|
|
|
|
const el = body.firstElementChild;
|
|
|
|
setTimeout(() => {
|
|
|
|
u.addClass('fade-out', el);
|
|
|
|
setTimeout(() => u.removeElement(el), 600);
|
|
|
|
}, 5000);
|
|
|
|
},
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
show (ev) {
|
|
|
|
if (ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
this.trigger_el = ev.target;
|
|
|
|
this.trigger_el.classList.add('selected');
|
2018-08-21 18:27:43 +02:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
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());
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
_converse.api.listen.on('afterTearDown', () => {
|
|
|
|
if (!_converse.chatboxviews) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const container = _converse.chatboxviews.el.querySelector("#converse-modals");
|
|
|
|
if (container) {
|
|
|
|
container.innerHTML = '';
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/************************ BEGIN API ************************/
|
|
|
|
// We extend the default converse.js API to add methods specific to MUC chat rooms.
|
2019-06-19 08:03:36 +02:00
|
|
|
let alert;
|
2018-10-23 03:41:38 +02:00
|
|
|
|
2019-04-29 09:07:15 +02:00
|
|
|
Object.assign(_converse.api, {
|
2018-10-23 03:41:38 +02:00
|
|
|
'alert': {
|
2019-08-07 12:19:53 +02:00
|
|
|
show (type, title, messages) {
|
2018-10-23 03:41:38 +02:00
|
|
|
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';
|
2018-05-09 10:09:42 +02:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
2019-07-29 10:19:05 +02:00
|
|
|
if (alert === undefined) {
|
2018-10-23 03:41:38 +02:00
|
|
|
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();
|
2018-05-09 10:09:42 +02:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|