Improve post composer + replying

- Make it modular so that different entry points can show different
things and respond differently (reply, new discussion, edit post)
- Resizable
- Fullscreen
- Confirm on close

ember/app/controllers/composer.js

@@ -1,41 +1,72 @@
 import Ember from 'ember';
 
-export default Ember.Controller.extend({
+export default Ember.Controller.extend(Ember.Evented, {
 
     needs: ['index', 'application'],
 
-    user: Ember.Object.create({avatarNumber: 1}),
+    content: null,
 
-    discussion: null,
-
-    showing: true,
+    showing: false,
     minimized: false,
+    fullScreen: false,
 
-    title: 'Replying to <em>Some Discussion Title</em>',
+    switchContent: function(newContent) {
+        var composer = this;
+        this.confirmExit().then(function() {
+            composer.set('content', null);
+            Ember.run.next(function() {
+                composer.set('content', newContent);
+            });
+        });
+    },
+
+    confirmExit: function() {
+        var composer = this;
+        var promise = new Ember.RSVP.Promise(function(resolve, reject) {
+            var content = composer.get('content');
+            if (content) {
+                content.send('willExit', reject);
+            }
+            resolve();
+        });
+        return promise;
+    },
 
     actions: {
         close: function() {
+            var composer = this;
+            this.confirmExit().then(function() {
+                composer.send('hide');
+            });
+        },
+        hide: function() {
             this.set('showing', false);
+            this.set('fullScreen', false);
+            var content = this.get('content');
+            if (content) {
+                content.send('reset');
+            }
         },
         minimize: function() {
-        	this.set('minimized', true);
+            this.set('minimized', true);
+        	this.set('fullScreen', false);
         },
         show: function() {
-        	this.set('minimized', false);
+            var composer = this;
+            Ember.run.next(function() {
+                composer.set('showing', true);
+            	composer.set('minimized', false);
+                composer.trigger('focus');
+            });
         },
-        save: function(value) {
-        	var store = this.store;
-        	var discussion = this.get('discussion');
-        	var controller = this;
-
-        	var post = store.createRecord('post', {
-			  content: value,
-			  discussion: discussion
-			});
-        	post.save().then(function(post) {
-        		discussion.set('posts', discussion.get('posts')+','+post.get('id'));
-        		controller.get('delegate').send('replyAdded', post);
-        	});
+        fullScreen: function() {
+            this.set('fullScreen', true);
+            this.set('minimized', false);
+            this.trigger('focus');
+        },
+        exitFullScreen: function() {
+            this.set('fullScreen', false);
+            this.trigger('focus');
         }
     }
 

ember/app/controllers/discussion.js

@@ -1,6 +1,8 @@
 import Ember from 'ember';
 
 import PostStream from '../models/post-stream';
+import ComposerReply from '../components/discussions/composer-reply';
+import ActionButton from '../components/ui/controls/action-button';
 
 export default Ember.ObjectController.extend(Ember.Evented, {
 
@@ -38,28 +40,52 @@ export default Ember.ObjectController.extend(Ember.Evented, {
         });
     },
 
+    saveReply: function(discussion, content) {
+        var controller = this;
+        var composer = this.get('controllers.composer');
+        var stream = this.get('stream');
+
+        composer.set('content.loading', true);
+
+        var post = this.store.createRecord('post', {
+            content: content,
+            discussion: discussion
+        });
+
+        var promise = post.save().then(function(post) {
+            if (discussion == controller.get('model')) {
+                discussion.set('posts', discussion.get('posts')+','+post.get('id'));
+                stream.set('ids', controller.get('model.postIds'));
+                stream.addPostToEnd(post);
+            }
+            composer.send('hide');
+        }, function(reason) {
+            var error = reason.errors[0].detail;
+            alert(error);
+        });
+
+        promise.finally(function() {
+            composer.set('content.loading', false);
+        });
+
+        return promise;
+    },
+
     actions: {
         reply: function() {
+            var controller = this;
+            var discussion = this.get('model');
             var composer = this.get('controllers.composer');
-            // composer.beginPropertyChanges();
-            composer.set('minimized', false);
-            composer.set('showing', true);
-            composer.set('title', 'Replying to <em>'+this.get('model.title')+'</em>');
-            composer.set('delegate', this);
-            composer.set('discussion', this.get('model'));
-            // composer.endPropertyChanges();
-        },
-
-        replyAdded: function(post) {
-            var stream = this.get('stream');
-            stream.set('ids', this.get('model.postIds'));
-            var index = stream.get('count') - 1;
-            stream.get('content').pushObject(Ember.Object.create({
-                indexStart: index,
-                indexEnd: index,
-                content: post
-            }));
-            this.get('controllers.composer').set('showing', false);
+            if (composer.get('content.discussion') != discussion) {
+                composer.switchContent(ComposerReply.create({
+                    user: controller.get('session.user'),
+                    discussion: discussion,
+                    submit: function(value) {
+                        controller.saveReply(this.get('discussion'), value);
+                    }
+                }));
+            }
+            composer.send('show');
         },
 
         // This action is called when the start position of the discussion