Использование API DModal для отображения модальных окон (также известных как всплывающие окна/диалоги) в Discourse

[Discourse]

Discourse 3.1.0.beta6 поставляется с новым API на основе компонента <DModal>.

Этот API заменяет старый API на основе контроллеров, который теперь устарел. Если у вас есть существующие модальные окна, использующие старые API, ознакомьтесь с руководством по миграции здесь.

Отрисовка модального окна

Модальные окна отрисовываются путем включения компонента <DModal> в шаблон Handlebars. Если у вас еще нет подходящего шаблона, ознакомьтесь с материалами по адресу Using Plugin Outlet Connectors from a Theme or Plugin.

Простое модальное окно будет выглядеть примерно так:

<DButton
  @translatedLabel="Показать модальное окно"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <DModal @title="Мое модальное окно" @closeModal={{fn (mut this.modalIsVisible) false}}>
    Привет, мир, это содержимое модального окна
  </DModal>
{{/if}}

Здесь используется хелпер mut как способ установки значения, доступный только в hbs. Вы также можете установить modalIsVisible с помощью любого другого стандартного метода Ember.

Этот пример создаст простое модальное окно, как показано ниже:

Обертка в компонент

Прежде чем добавлять какую-либо сложность, обычно лучше обернуть новое модальное окно в собственное определение компонента. Перенесем содержимое <DModal> в новый компонент <MyModal />.

// components/my-modal.gjs
<template>
  <DModal @title="Мое модальное окно" @closeModal={{@closeModal}}>
    Привет, мир, это содержимое модального окна
  </DModal>
</template>

Обновление этого файла .gjs до компонента на основе классов позволит вам внедрять более сложную логику и состояние.

Чтобы использовать новый компонент, обновите место вызова, чтобы ссылаться на него, обязательно передав аргумент @closeModal.

<DButton
  @translatedLabel="Показать модальное окно"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <MyModal @closeModal={{fn (mut this.modalIsVisible) false}} />
{{/if}}

Добавление нижнего колонтитула

Во многих модальных окнах есть какой-либо призыв к действию. В Discourse они обычно располагаются внизу модального окна. Чтобы это стало возможным, у DModal есть несколько «именованных блоков», в которые можно отрисовывать содержимое. Вот обновленный пример с двумя кнопками в нижнем колонтитуле, одна из которых — наша стандартная кнопка DModalCancel.

<DModal @title="Мое модальное окно" @closeModal={{@closeModal}}>
  <:body>
    Привет, мир, это содержимое модального окна
  </:body>
  <:footer>
    <DButton class="btn-primary" @translatedLabel="Отправить" />
    <DModalCancel @close={{@closeModal}} />
  </:footer>
</DModal>

Отрисовка модального окна из контекста, отличного от hbs

В идеале экземпляры <DModal> должны отрисовываться внутри шаблона Ember с использованием декларативного метода, показанного выше. Если это невозможно для вашего случая использования, это можно сделать, внедрив сервис modal и вызвав modal.show().

Убедитесь, что вы обернули свое модальное окно в собственный компонент, как описано выше. Затем запустите модальное окно, передав ссылку на класс вашего компонента в showModal:

import MyModal from "discourse/components/my-modal";

// (внедрите сервис modal в соответствующем месте)

// Добавьте этот вызов каждый раз, когда хотите открыть модальное окно.
// Аргумент `@closeModal` будет автоматически передан вашему компоненту.
this.modal.show(MyModal);

// Опционально передайте параметр `model`. Он будет передан вашему компоненту как `@model`.
// Это может включать данные, а также действия/колбэки для использования вашим модальным окном.
this.modal.show(MyModal, {
  model: { topic: this.topic, someAction: this.someAction },
});

// `modal.show()` возвращает промис, поэтому вы можете дождаться его закрытия.
// Он будет разрешен с данными, переданными в действие `@closeModal`.
const result = await this.modal.show(MyModal);

Еще больше возможностей настройки!

У <DModal> есть несколько именованных блоков и аргументов. Ознакомьтесь с интерактивным гайдлайном по стилям для получения информации об аргументах и с реализацией шаблона d-modal для именованных блоков.

---

Этот документ находится под контролем версий — предлагайте изменения на GitHub.