Зоны встраивания плагинов

В YCLIENTS все Frontend‑плагины (ERP‑ и виджет‑плагины) встраиваются в заранее определенные зоны интерфейса хост‑приложения с помощью простых HTML‑контейнеров и стандартизированных событий.

Контейнер

В коде хоста создается пустой HTML элемент:

<div data-plugin-container="area-name"></div>

где area-name — одна из предопределенных областей:

• Зоны встраивания виджета онлайн-записи
• Зоны встраивания ERP

Инициализация

Хост‑приложение сообщает о готовности контейнера и передает его идентификатор и начальные данные:

document.dispatchEvent(new CustomEvent(
  'host:area-name:ready',
  {
    detail: {
      area: 'area-name',
      containerId: 'area-name|container-id',
      payload: { /* данные для плагина */ }
    }
  }
));

Типы плагинов

• Инъекционный плагин — вставляет собственный UI в контейнер хоста («инъекция»).
• Конфигурационный плагин — не рисует ничего сам, но передает хосту конфигурацию, реагируя на host:…:ready.

События от плагина

• plugin:container-id:ready — плагин отправляет настройки или подтверждение корректного монтирования.
• plugin:container-id:shutdown — плагин сообщает об ошибке или невозможности выполнить задачу.

Обновление данных

Когда хост обновляет контекст (например, новые параметры), он шлет:

document.dispatchEvent(new CustomEvent(
  'host:area-name:update',
  { detail: { /* свежие данные */ } }
));

Плагин на это событие реагирует и пересчитывает свое состояние/UI.

Хост‑плагин взаимодействие

Хост‑приложение                                                 Плагин
     |                                                             |
     | 1. Создание контейнера                                      |
     |    <div data-plugin-container="area-name">                  |
     |------------------------------------------------------------>|
     |                                                             |
     | 2. Инициализация                                            |
     |    host:area-name:ready{area, containerId, payload}         |
     |------------------------------------------------------------>|
     |                                                             |
 alt Плагин‑инъекция                                               |
     |                                                             |
     |    3a. Инъекция UI                                          |
     |       (найти контейнер и вставить приложение)               |
     |       plugin:container-id:ready{area, containerId, payload} |
     |<------------------------------------------------------------|
 else Плагин‑конфигурация                                          |
     |                                                             |
     |    3b. Конфигурация                                         |
     |       plugin:container-id:ready{area, containerId, payload} |
     |<------------------------------------------------------------|
 end                                                               |
     | 4. Обновление                                               |
     |    host:area-name:update{area, containerId, payload}        |
     |------------------------------------------------------------>|
     |                                                             |
     | 5. Ошибка                                                   | 
     |    plugin:container-id:shutdown{area, containerId, payload} |
     |<------------------------------------------------------------|

1. Создание — хост содержит HTML‑элемент с аттрибутом data-plugin-container.
2. Инициализация — хост отправляет host:{area}:ready.
3. Инъекция UI — плагин вставляет html разметку в контейнер и отправляем событие plugin:{containerId}:ready.
4. Конфигурация — плагин отправляет событие plugin:{containerId}:ready с конфигурацией в поле payload.
5. Обновление — при изменении данных хост отправляет событие host:{area}:update.
6. Ошибка — в случае сбоя отправляется событие plugin:{containerId}:shutdown.