Обзор возможностей, настроек и особенностей устройства компонента модального окна в технологии Flexberry Ember.

Назначение компонента

Компонент модального окна в технологии Flexberry Ember предназначен для отображения данных внутри модального окна.

Модальное окно используется в таких компонентах технологии Flexberry Ember как:

  • Компонент лукапа: выбор значения и просмотр выбранного значения в некоторых случаях производится на модальном окне.
  • Файловый компонент: просмотр файла происходит в модальном окне.
  • Списковый компонент и компонент групэдита: некоторые настройки, такие как, например, настройка фильтров, производятся в модальном окне.

Обзор возможностей и API компонента

Компонент модального окна реализован на базе компонента Semantic UI Modal, поэтому часть настроек аналогичны:

  • title - заголовок модального окна (рекомендуется задавать локализованное значение).
  • sizeClass - css-класс размера модального окна, возможные варианты: ‘small’, ‘large’, ‘fullscreen’. Если ничего не указано, то используется ‘small’.
  • viewImageContent - флаг, определяющий, что в модальном окне будет отображаться изображение, что изменит используемые css-классы разметки (используется, в частности, в окне просмотра файла в файловом контроле).
  • useOkButton - флаг, определяющий, следует ли на модальном окне отображать кнопку “Ок”. Если ничего не указано, то используется ‘true’.
  • useCloseButton - флаг, определяющий, следует ли на модальном окне отображать кнопку закрытия. Если ничего не указано, то используется ‘true’.
  • componentName - имя компонента.
  • useSidePageMode - открывать модальное окошко в режиме sidepage
  • settings - настройки, которые передаются внутреннему компоненту Semantic UI Modal
    • Параметр context позволяет изменить селектор области, которая должна быть закрыта фоном модального окна. По умолчанию параметр имеет значение '.ember-application > .ember-view' - т.е. весь экран.

Если ничего не было переопределено, то:

  • при срабатывании onVisible наружу прокидывается Action определённый для created.
  • при срабатывании onApprove наружу прокидывается Action, определённый для ok,
  • при срабатывании onHidden наружу прокидывается Action определённый для close.

Пример использования модального окна, применяемый в компоненте лукапа.


{{#modal-dialog
  title=title
  sizeClass=modalDialogSettings.sizeClass
  close='removeModalDialog'
  created='createdModalDialog'
  useOkButton=modalDialogSettings.useOkButton
  useCloseButton=modalDialogSettings.useCloseButton
  componentName=componentName
  settings=modalDialogSettings.settings
  data-test-lookup-dialog=true
}}
  {{outlet 'modal-content'}}
{{/modal-dialog}}

Дополнительные ссылки:

Вызов модального окна через экшен

Вызов модального окна через action (showModalDialog) позволяет показывать модальное окно через контроллер. Это рекомендуемый способ работы с модальными окнами ember-flexberry.

Чтобы показать модальное окно, используя экшен (showModalDialog) необходимо:

  • вынести шаблон модального окошка в отдельный файл (напр. /templates/my-modal.hbs): ```hbs

{{#modal-dialog title=”Выберите запись” sizeClass=”fullscreen” close=’removeModalDialog’ created=’createdModalDialog’ useOkButton=true useCloseButton=false componentName=componentName settings=model.settings }} {{#each model.records as record}} {{record}} {{/each}} {{/modal-dialog}}

- вызвать action `showModalDialog`:
```javascript
this.send('showModalDialog', 'templates/my-modal',
{
  controller: 'my-modal-controller',
  model: {
    records: ['Запись 1', 'Запись 2', 'Запись 3'],
    settings: {
      closable: false
    }
  }
});

с указанием:

  • шаблона модального окна (/templates/my-modal)
  • контроллера модального окна (my-modal-controller - находится в папке controllers; можно использовать любой L и E контроллер)
  • передаваемых в модальное окошко данных (model - данные можно передать только через объект model)

Модальное окно отобразит данные согласно своему шаблону. Необходимо помнить, что в шаблон модального окна данные передаются через объект model.

Отображение одного модального окна поверх другого

Отображение двух модальных окон на странице может быть выполнено с помощью двух механизмов.

Способ 1. Использование логических переменных в шаблоне

Чтобы отобразить два модальных окна, необходимо:

  1. добавить оба модальных окна в шаблон нужной страницы:
  2. перенести второе модальное окно в блок #if <переменная>, где <переменная> будет переключать видимость второго модального окна
  3. переключить <переменную> в первом модальном окне

Итоговый пример выглядит так:


{{#if showFirstModal}}
  {{#modal-dialog
    title="Первое окно"
    close=(action set "showFirstModal" false)
  }}
    <button class="ui button" {{action set "showSecondModal" true}}>
      Открыть второе окно
    </button>
  {{/modal-dialog}}
{{/if}}

{{#if showSecondModal}}
  {{#modal-dialog
    title="Второе окно"
    close=(action set "showSecondModal" false)
  }}
    <p>Это второе окно!</p>
  {{/modal-dialog}}
{{/if}}

Для активации первого окна необходимо переключить showFirstModal в true. Для активации второго окна нажать кнопку Открыть второе окно внутри первого окна.

Способ 2. Использование showModalDialog

Для отображения двух модальных окон, можно использовать action showModalDialog с указанием разных outlet для отрисовки. Для начала, необходимо иметь несколько outlet в application.hbs (напр. modal и modal-second, при чём outlet второго модального окна должен быть последним):


<div class="ui main container">
  {{outlet "editrecord-modal"}}
  {{outlet "modal"}}
  {{outlet "modal-second"}}
</div>

Для открытия второго модального окна, необходимо указать view и outlet для отрисовки:

this.send('showModalDialog', 'templates/my-modal', { controller: 'my-modal-controller' }); //отрисовка первого модального окна в стандартный outlet modal
this.send('showModalDialog', 'templates/my-second-modal', { controller: 'my-modal-controller' }, { view: 'application', outlet: 'modal-second' }); // отрисовка второго модального окна в outlet modal-second на странице application

После этого в шаблоне второго модального окна (my-second-modal), необходимо определить action для закрытия этого окна:


{{#modal-dialog
  close=(action "closeSecondModalDialog")
  ...
}}
{{/modal-dialog}}

И реализовать этот action следующим образом:

actions: {
  closeSecondModalDialog() {
    this.send('removeModalDialog', { outlet: 'modal-second' });
  }
}

Особенности устройства роутинга и компонента для отображения модального окна

Особенности устройства роутинга и компонента для отображения модального окна будут рассмотрены на примере внутреннего устройства компонента лукапа.

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

Таким образом, при использовании модального окна типичным является то, что: