Разработчику: модальные окна и уведомления

Из пользовательского custom.js можно показывать дизайнеру диалоги, произвольные модальные окна и уведомления. Всё это делается через корневой инстанс интерфейса — pp.interface.root. Весь код размещайте внутри обработчика PP_ready (см. «Основы кастомизации»).

В PlanPlace нет сторонних alert/toastr/swal — используется собственная система модалок на Vue. Поэтому показывайте окна именно описанными ниже методами, а не браузерным alert().

Диалог «Да / Нет»

Самый частый случай — спросить подтверждение. Метод yn_modal:

document.addEventListener('PP_ready', function (e) {
    const pp = e.detail.pp;

    pp.interface.root.yn_modal({
        heading: 'Подтверждение',
        body: 'Очистить весь проект?',      // можно HTML
        fn: function () {
            // нажали «Да»
            console.log('Подтверждено');
        },
        no_callback: function () {
            // нажали «Нет» или закрыли
            console.log('Отменено');
        }
    });
});

Поддерживаются дополнительные поля: yes_text, no_text (подписи кнопок), css_class (класс окна), hide_on_click.

Произвольное модальное окно

Когда нужен не просто «Да/Нет», а своё содержимое — show_custom_modal:

pp.interface.root.$emit('show_custom_modal', {
    heading: 'Параметры заказа',
    body: '<div id="my-modal-content">…ваш HTML…</div>', // верстка
    css_class: 'my-modal',
    callback: function (modal) {
        // вызывается при закрытии;
        // верните false, чтобы НЕ закрывать окно (например, при ошибке валидации)
        return true;
    }
});

Разметку для тела модалки удобно заранее положить в custom.html (он попадает в конец <body>), а в body передавать ссылку/копию или просто управлять видимостью своего блока.

Связь с кастомными функциями. У модалки можно указать fn_name — имя функции из реестра кастомных функций (global_options.custom_functions[fn_name]), которая вызовется при закрытии. Это альтернатива callback.

Уведомления (колокольчик)

Чтобы показать ненавязчивое уведомление в блоке уведомлений сцены:

// добавить одно уведомление
pp.interface.root.$emit('notifications_add', {
    text: 'Расчёт обновлён',
    action: null,     // имя события, которое сработает по клику (необязательно)
    read: false
});

// заменить весь список уведомлений
pp.interface.root.$emit('notifications_set', [
    { text: 'Сообщение 1', read: false },
    { text: 'Сообщение 2', read: false }
]);

Если у уведомления задать action (имя события), то при клике по нему интерфейс вызовет это событие — так можно связать уведомление с собственным обработчиком.

Учтите настройку конструктора «Скрыть блок уведомлений на сцене» (см. «Настройки конструктора»): если блок скрыт, уведомления через колокольчик не будут видны — тогда используйте модалку.

Типичные сценарии

Предупреждение о некорректных размерах. Подпишитесь на событие модуля или спецификации (см. основы) и при выходе за допустимые габариты покажите yn_modal или уведомление.
Подтверждение перед отправкой на расчёт. Перехватите действие и вызовите yn_modal с проверкой комплектности проекта.
Своя панель параметров заказа. Положите разметку в custom.html, открывайте её через show_custom_modal, обрабатывайте ввод в callback.

Коротко

Модалки и уведомления показываются через pp.interface.root: yn_modal({heading, body, fn, no_callback}) — диалог «Да/Нет»; $emit('show_custom_modal', {heading, body, callback}) — произвольное окно (верните false в callback, чтобы не закрывать); $emit('notifications_add', {text}) — уведомление. Разметку для окон держите в custom.html. Весь код — внутри обработчика PP_ready.