Работа с диалогами

JS-расширение ui.dialogs.messagebox

JS расширение ui.dialogs.messagebox предоставляет API для создания стандартных диалогов типа alert и confirm (модуль UI с версии 19.0.500).

Подключение на PHP-странице

\Bitrix\Main\UI\Extension::load("ui.dialogs.messagebox");

Подключение в ES6

import { MessageBox } from 'ui.dialogs.messagebox';

Возможности

• 4 варианта кнопок: ОК, Да, Нет, Отмена.
• Несколько вариантов наборов кнопок: Ок, Да, Нет, Отмена, Ок-Отмена, Да-Отмена, Да-Нет, Да-Нет-Отмена.
• У каждой кнопки можно изменить текст и указать свой callback.
• Кнопка автоматически блокируется (disabled) для защиты от повторного нажатия.
• Если callback кнопки возвращает промис, кнопка переходит состояние "загрузка" (loading).
• Поддержка заголовка диалога. В этом случае кнопки становятся больше и отделяются от контента линией.
• Вместо стандартных кнопок можно указать произвольные (объекты или наследники класса BX.UI.Button).
• Режим modal добавляет оверлей.
• Дополнительно можно передать опции для BX.PopupWindow.

Базовое использование

Для быстрого создания диалогов используйте статические методы alert и confirm.

Примечание: Если диалог содержит многострочный текст или элементы верстки (картинки, чекбоксы и др.), обязательно задавайте заголовок.

Информационный диалог (alert)

Метод позволяет быстро создать информационный диалог (Alert).

BX.UI.Dialogs.MessageBox.alert("Message", (messageBox, button, event) => {});
BX.UI.Dialogs.MessageBox.alert("Message", (messageBox, button, event) => {}, "Продолжить");
BX.UI.Dialogs.MessageBox.alert("Message", "Title");
BX.UI.Dialogs.MessageBox.alert("Message", "Title", (messageBox, button, event) => {});
BX.UI.Dialogs.MessageBox.alert("Message", "Title", (messageBox, button, event) => {}, "Продолжить");

BX.UI.Dialogs.MessageBox.alert(
	message: string | Element | Node, 
	okCallback?: Function, 
	okCaption?: string
);

//Сигнатура метода с указанием заголовка диалога
BX.UI.Dialogs.MessageBox.alert(
	message: string | Element | Node, 
	title?: string, 
	okCallback?: Function, 
	okCaption?: string
);

Асинхронный callback

BX.UI.Dialogs.MessageBox.alert(
	"Асинхронная обработка нажатия кнопки", 
	(messageBox, button, event) => {
		return new Promise((resolve, reject) => {
			console.log("async job started.");
				setTimeout(() => {
					console.log("async job ended.");
					resolve(true);
				}, 3000);
		});
	}
);

Этот же пример, но без промисов.

BX.UI.Dialogs.MessageBox.alert(
	"Ручная асинхронная обработка нажатия кнопки", 
	(messageBox, button, event) => {

		console.log("async job started.");
		button.setWaiting();

		setTimeout(() => {
			button.setWaiting(false);
			messageBox.close();
			console.log("async job ended.");
		}, 3000);
	}
);

Диалог подтверждения (confirm)

Метод позволяет быстро создать диалог подтверждения (Confirm).

BX.UI.Dialogs.MessageBox.confirm("Message");
BX.UI.Dialogs.MessageBox.confirm("Message", () => {});
BX.UI.Dialogs.MessageBox.confirm("Message", () => {}, "Продолжить");
BX.UI.Dialogs.MessageBox.confirm("Message", () => {}, "Продолжить", () => {});
BX.UI.Dialogs.MessageBox.confirm("Message", "Title");
BX.UI.Dialogs.MessageBox.confirm("Message", "Title", () => {});
BX.UI.Dialogs.MessageBox.confirm("Message", "Title", () => {}, "Продолжить", () => {});

BX.UI.Dialogs.MessageBox.confirm(
	message: string | Element | Node, 
	okCallback?: Function, 
	okCaption?: string, 
	cancelCallback?: Function
);

//Сигнатура метода с указанием заголовка диалога
BX.UI.Dialogs.MessageBox.confirm(
	message: string | Element | Node, 
	title?: string, 
	okCallback?: Function, 
	okCaption?: string, 
	cancelCallback?: Function
);

Создание диалогов

Все настройки диалога можно передать через статический метод show.

BX.UI.Dialogs.MessageBox.show(
{
	message: "Текст, поясняющий назначение данного попапа, находится здесь.",
	modal: true,
	buttons: BX.UI.Dialogs.MessageBoxButtons.OK_CANCEL,
	onOk: function(messageBox)
	{
		console.log("onOk");
		messageBox.close();
	},
	onCancel: function(messageBox)
	{
		console.log("onCancel");
		messageBox.close();
	},
}
);

Произвольный набор кнопок:

BX.UI.Dialogs.MessageBox.show(
{
	message: `
		<label class="ui-ctl ui-ctl-checkbox">
			<input type="checkbox" class="ui-ctl-element">
				<div class="ui-ctl-label-text">удалить настройки и данные приложения</div>
		</label>
	`,
	title: "Вы уверены, что хотите удалить приложение?",
	buttons: [
		new BX.UI.Button(
		{
			color: BX.UI.Button.Color.DANGER,
			text: "Удалить"
		}
		),
		new BX.UI.CancelButton()
	],
}
);

Если нужно получить ссылку на объект диалога, есть метод create.

const messageBox = BX.UI.Dialogs.MessageBox.create(
{
	message: "Вы действительно хотите удалить файл?",
	title: "Подтверждение удаления",
	buttons: BX.UI.Dialogs.MessageBoxButtons.OK_CANCEL,
	onOk: function(messageBox)
	{
		console.log("onOk");
		messageBox.close();
	},
}
);

messageBox.show();

Или создать объект класса BX.UI.Dialogs.MessageBox.

const messageBox = new BX.UI.Dialogs.MessageBox(
{
	message: "Вы действительно хотите удалить файл?",
	title: "Подтверждение удаления",
	buttons: BX.UI.Dialogs.MessageBoxButtons.OK_CANCEL,
	okCaption: "Да",
	onOk: function() 
	{
		console.log("onOk");
	},
}
);


messageBox.show();

Обработка нажатия кнопок

По умолчанию нажатие на любую кнопку закрывает диалог. Если для кнопки определен обработчик, поведение диалога зависит от возвращаемого значения:

• true — диалог закрывается.
• false — с кнопки снимается заблокированность (disabled), диалог остается открытым.
• undefined (void) — никаких автоматических действий не выполняется, закрытие диалога или снятие заблокированности кнопки необходимо выполнить самостоятельно.
• Promise — кнопка переходит состояние "загрузка" (loading). Разрешение промиса (resolve) закрывает диалог, отклонение промиса (reject) возвращает кнопку в исходное состояние.

BX.UI.Dialogs.MessageBox.alert("Message", (messageBox, button, event) => 
{
	messageBox.close();
}
);

Аргументы обработчиков кнопок следующие:

• messageBox — объект диалога (экземпляр класса BX.UI.Dialogs.MessageBox).
• button — объект кнопки (экземпляр класса BX.UI.Button).
• event — объект события клика (MouseEvent).