Легковесный и мощный Ember Addon позволяющий легко создавать кроссроутные диалоговые окна и программно контролировать их закрытие. Он состоит из сервиса, через который они создаются, и компонента - непосредственно самого диалогового окна (с нужным лейаутом и шаблоном).
Сразу к делу, как они выглядят? Можете сами взглянуть: alert, confirm и blank.
С помощью ember-dialog вы можете создавать любые всплавающие интерфейсы: диалоговые окна, модалки, предупреждения, баблы и т.п. Для минимизации кода библиотеки мы не стали включать их реализацию в проект, но постарались максимально подробно описать как это сделать в вашем проекте (см. разделы {{#link-to 'cookbook'}}{{t "navigation.cookbook"}}{{/link-to}} и {{#link-to 'tutorial'}}{{t "navigation.tutorial"}}{{/link-to}}). Также вы можете заглянуть в код библиотеки, вы будете приятно удивлены тем, каким количеством кода обеспечены описанные на этом сайте возможности.
Установка аддона такая же простая как:
Вы увидите что-то типа:
Принцип работы очень прост. У менеджера диалоговых окон вызывается один из методов (`show`, `alert`, `confirm` или `blank`), он создает компонент с нужными layout и template. Далее рендерит его и прикрепляет к body. Также создается Promise, resolve и reject методы которого кладутся в компонент, он же и возвращается из метода, для того чтобы подпрограмма которая запросила его создание могла узнать с каким результатом диалоговое окно закрылось. Каждый компонент (рабочее название Presenter) имеет 2 метода: один для accept-закрытия, другое для decline-закрытия. Эти методы доступны из шаблона и могут быть подвязаны к действиям пользователя, например при нажатии на какую-то кнопку внутри диалогового окна (в лейауте или шаблоне). Эти методы вызывают соответствующие методы самого Promise (который мы получили при создании модального окна, помните?), также компонент отстреливает соответствующее событие "accepted" или "declined". Менеджер диалоговых окон ловит эти события и по ним уничтожает компонент, происходит его открепление от DOM - оно исчезает. Все просто, не так ли? :)
Давайте представим, что вы хотите попросить пользователя подтвердить какое-то действие. Ему нужно показать модельное окно, для этого нужно вызвать метод `show` с нужным layout (нам нужно окно с 2 кнопкам: да и нет - лейаут `dialog/confirm` как раз создан для этого, давайте использовать его) и путь до шаблона, который мы хотим показать пользователю в модальном окне (сразу оговорюсь, что можно указать не путь до шаблона, а сам шаблон, почитать об этом вы можете здесь). Вызванный метод `show` создает и показывает пользователю модальное окно и возвращает нам Promise, который станет resolved или rejected при закрытии окна в соответствии с нажатой кнопкой (yes или no). Пример:
Метод `show` позволяет создавать различные типы диалоговых окон, используя различные layouts: с разным количеством кнопок, разлиными способами вывода на экран и пр. Мы предусмотрели наиболее частые варианты модальных окон: alert, confirm и blank. Так, что каждый раз указывать один и тот же лейаут в разных местах программы не обязательно, смотри пример:
Куда дальше идти? Вы можете посетить страницу {{#link-to 'tutorial' class="w-link"}}{{t "navigation.tutorial"}}{{/link-to}}, {{#link-to 'cookbook' class="w-link"}}{{t "navigation.cookbook"}}{{/link-to}} или покопаться в документации. Если у вас еще остались вопросы, пожалуйста, пишите issue - попробует вместе решить ваш use case.
Удачного пользования!