[API] Show dialog from toolbar

src/MCT.js

@@ -3,13 +3,15 @@ define([
     'legacyRegistry',
     'uuid',
     './api/api',
-    'text!./adapter/templates/edit-object-replacement.html'
+    'text!./adapter/templates/edit-object-replacement.html',
+    './ui/Dialog'
 ], function (
     EventEmitter,
     legacyRegistry,
     uuid,
     api,
-    editObjectTemplate
+    editObjectTemplate,
+    Dialog
 ) {
     function MCT() {
         EventEmitter.call(this);
@@ -83,6 +85,10 @@ define([
         });
     };
 
+    MCT.prototype.dialog = function (view) {
+        return new Dialog(view).show();
+    };
+
     MCT.prototype.start = function () {
         legacyRegistry.register('adapter', this.legacyBundle);
         this.emit('start');

src/ui/Dialog.js

@@ -0,0 +1,22 @@
+define(['text!./overlay.html', 'zepto'], function (overlayTemplate, $) {
+    function Dialog(view) {
+        this.view = view;
+    }
+
+    Dialog.prototype.show = function () {
+        var $body = $('body');
+        var $overlay = $(overlayTemplate);
+        var $contents = $overlay.find('.contents');
+        var $close = $overlay.find('.close');
+
+        $body.append($overlay);
+        $close.on('click', function () {
+            $overlay.remove();
+            this.view.destroy();
+        }.bind(this));
+
+        this.view.show($contents[0]);
+    };
+
+    return Dialog;
+});

src/ui/overlay.html

@@ -0,0 +1,7 @@
+<div class="abs overlay">
+    <div class="abs blocker"></div>
+    <div class="abs holder">
+        <a class="clk-icon icon ui-symbol close">x</a>
+        <div class="abs contents"></div>
+    </div>
+</div>

tutorials/todo/todo.js

@@ -114,7 +114,16 @@ define([
 
             $(container).append($els);
 
-            $add.on('click', window.alert.bind(window, "Add!"));
+            $add.on('click', function () {
+                mct.dialog({
+                    show: function (container) {
+                        $(container).append($('<span>Dialog!</span>'));
+                    },
+                    destroy: function () {
+
+                    }
+                });
+            });
             $remove.on('click', window.alert.bind(window, "Remove!"));
         };