2022-08-21 13:03:32 +02:00
|
|
|
import './alert.js';
|
2021-09-17 12:17:43 +02:00
|
|
|
import Confirm from './confirm.js';
|
2020-06-08 16:08:50 +02:00
|
|
|
import { Model } from '@converse/skeletor/src/model.js';
|
2020-03-06 11:41:16 +01:00
|
|
|
|
2020-12-02 18:37:32 +01:00
|
|
|
let modals = [];
|
2022-08-21 13:03:32 +02:00
|
|
|
let modals_map = {};
|
2020-12-01 18:50:35 +01:00
|
|
|
|
|
|
|
const modal_api = {
|
2020-12-02 18:37:32 +01:00
|
|
|
/**
|
|
|
|
* API namespace for methods relating to modals
|
|
|
|
* @namespace _converse.api.modal
|
|
|
|
* @memberOf _converse.api
|
|
|
|
*/
|
|
|
|
modal: {
|
|
|
|
/**
|
|
|
|
* Shows a modal of type `ModalClass` to the user.
|
|
|
|
* Will create a new instance of that class if an existing one isn't
|
|
|
|
* found.
|
|
|
|
* @param { Class } ModalClass
|
2022-08-21 13:03:32 +02:00
|
|
|
* @param { Object } [properties] - Optional properties that will be set on a newly created modal instance.
|
2020-12-03 16:56:54 +01:00
|
|
|
* @param { Event } [event] - The DOM event that causes the modal to be shown.
|
2020-12-02 18:37:32 +01:00
|
|
|
*/
|
2022-08-21 13:03:32 +02:00
|
|
|
show (name, properties, ev) {
|
|
|
|
let modal;
|
|
|
|
if (typeof name === 'string') {
|
|
|
|
modal = this.get(name) ?? this.create(name, properties);
|
|
|
|
Object.assign(modal, properties);
|
|
|
|
} else {
|
|
|
|
// Legacy...
|
|
|
|
const ModalClass = name;
|
|
|
|
const id = ModalClass.id ?? properties.id;
|
|
|
|
modal = this.get(id) ?? this.create(ModalClass, properties);
|
|
|
|
}
|
2020-12-02 18:37:32 +01:00
|
|
|
modal.show(ev);
|
|
|
|
return modal;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Return a modal with the passed-in identifier, if it exists.
|
|
|
|
* @param { String } id
|
|
|
|
*/
|
|
|
|
get (id) {
|
2022-08-21 13:03:32 +02:00
|
|
|
return modals_map[id] ?? modals.filter(m => m.id == id).pop();
|
2020-12-02 18:37:32 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Create a modal of the passed-in type.
|
2022-08-21 13:03:32 +02:00
|
|
|
* @param { String } name
|
2020-12-03 16:56:54 +01:00
|
|
|
* @param { Object } [properties] - Optional properties that will be
|
2020-12-02 18:37:32 +01:00
|
|
|
* set on the modal instance.
|
|
|
|
*/
|
2022-08-21 13:03:32 +02:00
|
|
|
create (name, properties) {
|
|
|
|
let modal;
|
|
|
|
if (typeof name === 'string') {
|
|
|
|
const ModalClass = customElements.get(name);
|
|
|
|
modal = modals_map[name] = new ModalClass(properties);
|
|
|
|
} else {
|
|
|
|
// Legacy...
|
|
|
|
const ModalClass = name;
|
|
|
|
modal = new ModalClass(properties);
|
|
|
|
modals.push(modal);
|
|
|
|
}
|
2020-12-02 18:37:32 +01:00
|
|
|
return modal;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Remove a particular modal
|
2022-08-21 13:03:32 +02:00
|
|
|
* @param { String } name
|
2020-12-02 18:37:32 +01:00
|
|
|
*/
|
2022-08-21 13:03:32 +02:00
|
|
|
remove (name) {
|
|
|
|
let modal;
|
|
|
|
if (typeof name === 'string') {
|
|
|
|
modal = modals_map[name];
|
|
|
|
delete modals_map[name];
|
|
|
|
} else {
|
|
|
|
// Legacy...
|
|
|
|
modal = name;
|
|
|
|
modals = modals.filter(m => m !== modal);
|
|
|
|
}
|
|
|
|
modal?.remove();
|
2020-12-02 18:37:32 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Remove all modals
|
|
|
|
*/
|
|
|
|
removeAll () {
|
|
|
|
modals.forEach(m => m.remove());
|
|
|
|
modals = [];
|
2022-08-21 13:03:32 +02:00
|
|
|
modals_map = {};
|
2020-12-02 18:37:32 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-12-01 18:50:35 +01:00
|
|
|
/**
|
|
|
|
* Show a confirm modal to the user.
|
|
|
|
* @method _converse.api.confirm
|
|
|
|
* @param { String } title - The header text for the confirmation dialog
|
2021-09-17 12:17:43 +02:00
|
|
|
* @param { (Array<String>|String) } messages - The text to show to the user
|
2020-12-01 18:50:35 +01:00
|
|
|
* @param { Array<Field> } fields - An object representing a fields presented to the user.
|
|
|
|
* @property { String } Field.label - The form label for the input field.
|
|
|
|
* @property { String } Field.name - The name for the input field.
|
|
|
|
* @property { String } [Field.challenge] - A challenge value that must be provided by the user.
|
|
|
|
* @property { String } [Field.placeholder] - The placeholder for the input field.
|
|
|
|
* @property { Boolean} [Field.required] - Whether the field is required or not
|
|
|
|
* @returns { Promise<Array|false> } A promise which resolves with an array of
|
|
|
|
* filled in fields or `false` if the confirm dialog was closed or canceled.
|
|
|
|
*/
|
|
|
|
async confirm (title, messages=[], fields=[]) {
|
|
|
|
if (typeof messages === 'string') {
|
|
|
|
messages = [messages];
|
2020-03-06 11:41:16 +01:00
|
|
|
}
|
2020-12-01 18:50:35 +01:00
|
|
|
const model = new Model({title, messages, fields, 'type': 'confirm'})
|
|
|
|
const confirm = new Confirm({model});
|
|
|
|
confirm.show();
|
|
|
|
let result;
|
|
|
|
try {
|
|
|
|
result = await confirm.confirmation;
|
|
|
|
} catch (e) {
|
|
|
|
result = false;
|
2020-03-06 11:41:16 +01:00
|
|
|
}
|
2020-12-01 18:50:35 +01:00
|
|
|
confirm.remove();
|
|
|
|
return result;
|
2020-03-06 11:41:16 +01:00
|
|
|
},
|
|
|
|
|
2020-12-01 18:50:35 +01:00
|
|
|
/**
|
|
|
|
* Show a prompt modal to the user.
|
|
|
|
* @method _converse.api.prompt
|
|
|
|
* @param { String } title - The header text for the prompt
|
2021-09-17 12:17:43 +02:00
|
|
|
* @param { (Array<String>|String) } messages - The prompt text to show to the user
|
2020-12-01 18:50:35 +01:00
|
|
|
* @param { String } placeholder - The placeholder text for the prompt input
|
|
|
|
* @returns { Promise<String|false> } A promise which resolves with the text provided by the
|
|
|
|
* user or `false` if the user canceled the prompt.
|
|
|
|
*/
|
|
|
|
async prompt (title, messages=[], placeholder='') {
|
|
|
|
if (typeof messages === 'string') {
|
|
|
|
messages = [messages];
|
|
|
|
}
|
|
|
|
const model = new Model({
|
|
|
|
title,
|
|
|
|
messages,
|
|
|
|
'fields': [{
|
|
|
|
'name': 'reason',
|
|
|
|
'placeholder': placeholder,
|
|
|
|
}],
|
|
|
|
'type': 'prompt'
|
|
|
|
})
|
|
|
|
const prompt = new Confirm({model});
|
|
|
|
prompt.show();
|
|
|
|
let result;
|
|
|
|
try {
|
|
|
|
result = (await prompt.confirmation).pop()?.value;
|
|
|
|
} catch (e) {
|
|
|
|
result = false;
|
|
|
|
}
|
|
|
|
prompt.remove();
|
|
|
|
return result;
|
2020-03-06 11:41:16 +01:00
|
|
|
},
|
|
|
|
|
2020-12-01 18:50:35 +01:00
|
|
|
/**
|
|
|
|
* Show an alert modal to the user.
|
|
|
|
* @method _converse.api.alert
|
|
|
|
* @param { ('info'|'warn'|'error') } type - The type of alert.
|
|
|
|
* @param { String } title - The header text for the alert.
|
2021-09-17 12:17:43 +02:00
|
|
|
* @param { (Array<String>|String) } messages - The alert text to show to the user.
|
2020-12-01 18:50:35 +01:00
|
|
|
*/
|
|
|
|
alert (type, title, messages) {
|
|
|
|
if (typeof messages === 'string') {
|
|
|
|
messages = [messages];
|
|
|
|
}
|
|
|
|
let level;
|
|
|
|
if (type === 'error') {
|
|
|
|
level = 'alert-danger';
|
|
|
|
} else if (type === 'info') {
|
|
|
|
level = 'alert-info';
|
|
|
|
} else if (type === 'warn') {
|
|
|
|
level = 'alert-warning';
|
2020-03-06 11:41:16 +01:00
|
|
|
}
|
|
|
|
|
2020-12-02 18:37:32 +01:00
|
|
|
const model = new Model({
|
|
|
|
'title': title,
|
|
|
|
'messages': messages,
|
|
|
|
'level': level,
|
|
|
|
'type': 'alert'
|
|
|
|
})
|
2022-08-21 13:03:32 +02:00
|
|
|
modal_api.modal.show('converse-alert-modal', { model });
|
2020-03-06 11:41:16 +01:00
|
|
|
}
|
2020-12-01 18:50:35 +01:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
2021-09-17 12:17:43 +02:00
|
|
|
export default modal_api;
|