📚 pbMessage — универсальный вывод сообщений

pbMessage — это маленький универсальный класс, который показывает успешные или ошибочные сообщения после pbFetch или любых твоих асинхронных операций.

✅ Зачем нужен

• Позволяет автоматически показывать сообщения из JSON-ответов { success: true|false, message: "..." }.
• Работает по умолчанию вместе с pbFetch — без ручного вывода.
• Контролируется через кастомные события pb:success и pb:error — ты можешь отменить автоматический показ.
• Можно легко настроить CSS классы, куда вставлять сообщение и как его очищать.

⚙️ Как работает

🚦 Основная логика

pbMessage.success(ctx, message)
pbMessage.error(ctx, message)
pbMessage.clear(ctx)

• ctx — это контекст, в котором ищется элемент для вывода. Обычно это form, или pb-target элемент, или весь document.
• Если в ctx есть [pb-success-message] или [pb-error-message] — используется он.
• Если нет — ищется [pb-message] как общий fallback.
• Если ничего не найдено — сообщение не показывается (выводи в консоль или обрабатывай иначе).

🏷️ Как разметить HTML

1️⃣ Один универсальный блок

<div pb-message class="d-none"></div>

2️⃣ Раздельные блоки для успеха и ошибки

<div pb-success-message class="d-none"></div>
<div pb-error-message class="d-none"></div>

✔️ Рекомендуется располагать эти блоки внутри формы или внутри таргета, чтобы pbMessage точно нашёл их по контексту.

📌 Пример разметки формы

<form id="my-form">
	<input type="text" name="name">
	<button
		type="submit"
		pb-post="/api/submit"
		pb-expect="json"
		pb-include="#my-form input"
	>
		Отправить
	</button>

	<!-- Лучше внутри формы -->
	<p pb-success-message class="text-success d-none"></p>
	<p pb-error-message class="text-danger d-none"></p>
</form>

🧩 Автоматическая интеграция с pbFetch

Если ты делаешь запрос и получаешь { success: true, message: "..." }:

• Если запрос успешен (response.ok), pbFetch вызовет:

pbMessage.success(ctx, data.message)

• Если ошибка (!response.ok), pbFetch вызовет:

pbMessage.error(ctx, data.message)

Ты можешь отменить автопоказ, добавив в обработчике:

document.addEventListener('pb:success', (e) => {
    e.preventDefault(); // сообщение не покажется автоматически
    // твоя логика
});

🎨 Настройка классов через конфиг и системные настройки

По умолчанию классы для сообщений подставляются из системных настроек:

• pageblocks_msg_success — классы для успешного сообщения
• pageblocks_msg_error — классы для ошибок
• pageblocks_hidden_class — класс, который скрывает блок сообщений (например, d-none)

Пример значений из настроек:

pageblocks_msg_success = "text-success"
pageblocks_msg_error = "text-danger,text-error"
pageblocks_hidden_class = "d-none"

В JS они используются так:

pbMessage.config = {
  successClasses: ['text-success'], // или те, что заданы в настройке
  errorClasses: ['text-danger', 'text-error'],
  hiddenClass: 'd-none' // или другое значение из pageblocks_hidden_class
};

Можно вручную переопределить через setConfig():

pbMessage.setConfig({
  successClasses: ['alert', 'alert-success'],
  errorClasses: ['alert', 'alert-danger'],
  hiddenClass: 'hidden' // например, TailwindCSS класс
});

💡 Важно: Если используются системные настройки, то при генерации pbMessage они подставляются автоматически. Если классы нужно поменять динамически — используйте pbMessage.setConfig().

🧹 Очистка сообщений

Если нужно убрать сообщение и сбросить классы:

pbMessage.clear(form);
// или pbMessage.clear(targetElement);

🔥 Полный API

Метод	Описание
pbMessage.success(ctx, message)	Показать успешное сообщение
pbMessage.error(ctx, message)	Показать ошибку
pbMessage.clear(ctx)	Очистить все сообщения и сбросить добавленные классы
pbMessage.setSuccessHandler(fn)	Переопределить обработчик для успеха
pbMessage.setErrorHandler(fn)	Переопределить обработчик для ошибок
pbMessage.setConfig({...})	Задать CSS классы для успеха/ошибки (массивы классов)

✔️ Пример с использованием SweetAlert2

pbMessage.setSuccessHandler((ctx, message) => {
    Swal.fire({
        icon: 'success',
        title: 'Успех!',
        text: message
    });
});

pbMessage.setErrorHandler((ctx, message) => {
    Swal.fire({
        icon: 'error',
        title: 'Ошибка!',
        text: message
    });
});