diff --git a/src/MCT.js b/src/MCT.js index 8088e80744..4361460ef1 100644 --- a/src/MCT.js +++ b/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'); diff --git a/src/ui/Dialog.js b/src/ui/Dialog.js new file mode 100644 index 0000000000..e2706894bd --- /dev/null +++ b/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; +}); diff --git a/src/ui/overlay.html b/src/ui/overlay.html new file mode 100644 index 0000000000..3f0a3f6d48 --- /dev/null +++ b/src/ui/overlay.html @@ -0,0 +1,7 @@ +
diff --git a/tutorials/todo/todo.js b/tutorials/todo/todo.js index 4c11088cfb..1cc7e6b1af 100644 --- a/tutorials/todo/todo.js +++ b/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($('Dialog!')); + }, + destroy: function () { + + } + }); + }); $remove.on('click', window.alert.bind(window, "Remove!")); };