Site content

addon/styles/ember-dialog/structure.scss

@@ -12,7 +12,7 @@
   transform: translateY(-50%);
 
   &.substrate {
-    position: absolute;
+    position: fixed;
     width: 100%;
     max-width: inherit;
     height: 100%;

tests/dummy/app/controllers/cookbook/creating.js

@@ -0,0 +1,42 @@
+import Ember from "ember";
+import hbs from 'htmlbars-inline-precompile';
+
+export default Ember.Controller.extend({
+
+  username: "Vladimir Milkov",
+
+  count: 0,
+
+  actions: {
+
+    simpleAlert() {
+      alert("Hello, " + this.get("username"));
+    },
+
+    dialogAlert() {
+      this.get("dialog").alert(hbs`Hello, {{contextObject.username}}`, this);
+    },
+
+    confirmDeletion() {
+      const promise = this.get("dialog").confirm(hbs`Are you sure?`);
+      promise.then(() => { alert("Remove"); })
+      promise.catch(() => { alert("Cancel"); })
+    },
+
+    showDialog() {
+      const promise = this.get("dialog").confirm(hbs`Count {{contextObject.count}}`, this);
+      promise.then(() => {
+        alert("10 reached!");
+      })
+    },
+
+    accept(presenter) {
+      this.incrementProperty("count");
+      if (this.get("count") > 10) {
+        presenter.accept();
+      }
+    }
+
+  }
+
+});

tests/dummy/app/controllers/getting-started.js

@@ -6,13 +6,9 @@ export default Ember.Controller.extend({
   actions: {
 
     showAlert() {
-
-      const template = hbs`Hello world {{title}} <span onclick={{action "showConfirm" target=contextObject}}>click</span>`;
-      const context = this;
-      const options = { title: "23151235" };
-
-      this.get("dialog").alert(template, context, options);
-
+      const promise = this.get("dialog").alert("test-message", this, {
+        title: "Alert"
+      });
     },
 
     showConfirm() {

tests/dummy/app/templates/cookbook.hbs

@@ -4,7 +4,7 @@
     <div class="row">
       <div class="col-sm-3 left-nav">
         <ul>
-          <li>{{#link-to 'cookbook.creating' class="w-link"}}Создание первого окна{{/link-to}}</li>
+          <li>{{#link-to 'cookbook.creating' class="w-link"}}Создание окон{{/link-to}}</li>
           <li>{{#link-to 'cookbook.customization' class="w-link"}}Кастомизация окон{{/link-to}}</li>
           <li>{{#link-to 'cookbook.prevent-closing' class="w-link"}}Запрет на закрытие окна{{/link-to}}</li>
           <li>{{#link-to 'cookbook.forms' class="w-link"}}Использование форм{{/link-to}}</li>

tests/dummy/app/templates/cookbook/creating.hbs

@@ -1,5 +1,7 @@
 <h1 class="w-title __w-first">Первое диалоговое окно</h1>
 
+<h2 class="w-subtitle __w-first">Создание alert диалогового окна</h2>
+
 <p>Во всех контроллерах после установки ember-dialog появляется свойство `dialog`, которое является ссылкой на сервис диалоговых окон - через который создаются все диалоговые окна.</p>
 
 <p>Чтобы создать наше первое диалоговое окно давайте создадим контроллер, роут и шаблон. Для этого перейдите в корень вашего проекта и запустите команды:</p>
@@ -8,12 +10,67 @@
 
 <p>Ember создаст для вас роут, шаблон и контроллер. Давайте теперь откроем созданный нами контроллер (он должен находиться здесь: <code>app/controllers/example.js</code>) и внесем в него следующие изменения:</p>
 
-<pre data-src="examples/cookbook/creating/controller-1.javascript" data-line="5-12" class="line-numbers"></pre>
+<pre data-src="examples/cookbook/creating/controller-1.javascript" data-line="4-7" class="line-numbers"></pre>
+
+<p>При заходе на url <code>http://127.0.0.1:4200/example</code> вы увидите дефолтное alert окно с текстом "Hello world!". Выполнение js кода было приостановлено до тех пор пока окно не будет закрыто. Выглядит окно так (ну вы и сами знаете ;)):</p>
+
+<div style="text-align: center"><img src="/assets/default-alert.png"></div>
+
+<p>Чтобы создать аналогичное диалоговое окно нужно изменить код следующим образом:</p>
+
+<pre data-src="examples/cookbook/creating/controller-2.javascript" data-line="7" class="line-numbers"></pre>
+
+<p>Будет показано следующее диалоговое окно.</p>
+
+<div style="text-align: center"><img src="/assets/dialog-alert.png"></div>
+
+<p>Попробуйте сами: <a class="w-link w-link__pseudo" onclick={{action "simpleAlert"}}>показать простой alert</a>, <a class="w-link w-link__pseudo" onclick={{action "dialogAlert"}}>показать диалоговое окно с лейаутом alert</a>.</p>
+
+
+
+<h2 class="w-subtitle">Создание confirm диалогового окна</h2>
+
+<p>Ключевым типом диалоговых окон в большинстве проектов является confirm (с двумя кнопками). Такие окна также могут быть созданы из контроллера. Любой метод создающий окно диалогового менеджера возвращает <code>Promise</code> объект, который становится выполненым при закрытии окна. В случае с alert промис на закрытие всего резолвится, но в случае confirm, промис может и зарежектиться. Давайте ближе к коду:</p>
+
+<pre data-src="examples/cookbook/creating/controller-3.javascript"></pre>
+
+Жми <a class="w-link w-link__pseudo" onclick={{action "confirmDeletion"}}>сюда</a>, чтобы посмотреть результат отработки примера выше.
+
+
+<h2 class="w-subtitle">Использование шаблонов</h2>
+
+<p>Тело диалогового окна может быть передано прямо при создании, следующим образом:</p>
+
+<pre data-src="examples/cookbook/creating/controller-5.javascript"></pre>
+
+<p>Но в крупных приложениях сообщения типа alert или confirm в разных местах программы одни и те же, и чтобы не плодить дубликаты можно текст сообщения вынести в отдельный шаблон и указывать вместо него путь.</p>
+
+<p>К примеру пример выше можно переделать следующим образом. Создать шаблон `app/templates/messages/alert-error.hbs` и использовать его для показа в диалоговом окне в различных местах программы.</p>
+
+<pre data-src="examples/cookbook/creating/controller-4.javascript"></pre>
+
+<p>Хорошей практикой для своих проектов я выбрал использование специальной директории для шаблонов-сообщений: <code>/messages/</code>. Рекомендую вам поступить также.</p>
+
+
+<h2 class="w-subtitle">Прокидывание данных в диалоговое окно</h2>
+
+<p>Любой метод для создания диалогового окна принимает 3 аргумента: шаблон, контекст, опции (исключанием является лишь метод <code>show</code>, который принимает также layout).</p>
+
+<p><b>Шаблон</b> &mdash; путь до шаблона или предкомпилированный шаблон, который нужно вывести в теле диалогового окна.</p>
+
+<p><b>Контекст</b> &mdash; объект с данными, он записывается в специальное свойство объекта диалогового окна - contextObject и может быть использован для показа данных в шаблоне.</p>
+
+<p><b>Опции</b> &mdash; хеш влияющий на поведение диалогового окна, им оно расширяется. Ключи этого хеша неспосредственно доступны в шаблоне.</p>
+
+<p>Из следующего примера должно стать ясно, что к чему ;)</p>
+
+<pre data-src="examples/cookbook/creating/controller-6.javascript"></pre>
+
 
-<p>При заходе на url <code>http://127.0.0.1:4200/example</code> мы увидим дефолтное alert окно с текстом "Hello world!". Выполнение js кода было приостановлено до тех пор пока окно не будет закрыто. Выглядит окно так:</p>
+<h2 class="w-subtitle">Контроль закрытия</h2>
 
-<img src="/assets/default-alert.png">
+<p>Порой требуется контролировать закрытие модального окна программно. Наиболее частым случаем является диалоговое окно содержащее некую форму (про формы - {{#link-to 'cookbook.forms' class='w-link'}}отдельная история{{/link-to}}), при закрытии окна нужно создавать определенную сущность по данным формы. Но данные могут быть не валидными и в таком случае закрывать окно не нужно. Как предотвратить закрытие окна? Ранее при создании окна мы получали Promise по закрытию которого могли производить те или иные действия, т.е. постфактум. Итак для того чтобы запретить закрытие диалогового окна мы должны переопределить интересующий нас action у context отвечающий за его закрытие: accept и decline. Первым аргументом в action приходит presenter (инстанс компонента диалогового окна), у которого определены одноименные методы. Вот пример из которого все должно стать ясно.</p>
 
-<p>Давайте изменим</p>
+<pre data-src="examples/cookbook/creating/controller-7.javascript"></pre>
 
-<pre data-src="examples/cookbook/creating/controller-2.javascript" data-line="5-12" class="line-numbers"></pre>
+<a class="w-link w-link__pseudo" onclick={{action "showDialog"}}>Проверьте сами</a>.

tests/dummy/public/examples/cookbook/creating/controller-1.javascript

@@ -1,14 +1,8 @@
 import Ember from "ember";
 
 export default Ember.Controller.extend({
-
-  init() {
-    this._super(...arguments);
-    this.showGreeting();
-  },
-
-  showGreeting() {
-    alert("Hello world!");
-  }
-
+  username: "Vladimir Milkov",
+  showGreeting: Ember.on('init', function() {
+    alert("Hello, " + this.get("username"));
+  })
 });

tests/dummy/public/examples/cookbook/creating/controller-2.javascript

@@ -1,15 +1,9 @@
 import Ember from "ember";
+import hbs from 'htmlbars-inline-precompile';
 
 export default Ember.Controller.extend({
-
-  init() {
-    this._super(...arguments);
-    this.showGreeting();
-  },
-
-  showGreeting() {
-    const dialog = this.get("dialog");
-    dialog.alert("messages/hello-world");
-  }
-
+  username: "Vladimir Milkov",
+  showGreeting: Ember.on('init', function() {
+    this.get("dialog").alert(hbs`Hello, {{contextObject.username}}`, this);
+  })
 });

tests/dummy/public/examples/cookbook/creating/controller-3.javascript

@@ -0,0 +1,10 @@
+import Ember from "ember";
+import hbs from 'htmlbars-inline-precompile';
+
+export default Ember.Controller.extend({
+  remove: Ember.on('init', function() {
+    const promise = this.get("dialog").confirm(hbs`Are you sure?`);
+    promise.then(() => { alert("Remove"); })
+    promise.catch(() => { alert("Cancel"); })
+  })
+});

tests/dummy/public/examples/cookbook/creating/controller-4.javascript

@@ -0,0 +1,9 @@
+import Ember from "ember";
+import hbs from 'htmlbars-inline-precompile';
+
+export default Ember.Controller.extend({
+  showError: Ember.on('init', function() {
+    const error = "500 Server Error"
+    this.get("dialog").alert("messages/alert-error", null, { error });
+  })
+});

tests/dummy/public/examples/cookbook/creating/controller-5.javascript

@@ -0,0 +1,9 @@
+import Ember from "ember";
+import hbs from 'htmlbars-inline-precompile';
+
+export default Ember.Controller.extend({
+  showError: Ember.on('init', function() {
+    const error = "500 Server Error"
+    this.get("dialog").alert(hbs`Critical error: {{error}}`, null, { error });
+  })
+});

tests/dummy/public/examples/cookbook/creating/controller-6.javascript

@@ -0,0 +1,12 @@
+import Ember from "ember";
+import hbs from 'htmlbars-inline-precompile';
+
+export default Ember.Controller.extend({
+  username: "Vladimir Milkov",
+  remove: Ember.on('init', function() {
+    const template = hbs`Press here if you are sure to delete user named {{contextObject.username}}`;
+    const context = this;
+    const options = { substrate: false };
+    this.get("dialog").confirm(template, context, options);
+  })
+});

tests/dummy/public/examples/cookbook/creating/controller-7.javascript

@@ -0,0 +1,21 @@
+import Ember from "ember";
+import hbs from 'htmlbars-inline-precompile';
+
+export default Ember.Controller.extend({
+  count: 0,
+  showDialog: Ember.on('init', function() {
+    const promise = this.get("dialog").confirm(hbs`Count {{contextObject.count}}`, this);
+    promise.then(() => {
+      alert("10 reached!");
+    })
+  }),
+
+  actions: {
+    accept(presenter) {
+      this.incrementProperty("count");
+      if (this.get("count") > 10) {
+        presenter.accept();
+      }
+    }
+  }
+});