From 9151040250ea97417c9d4f685fd4072fbd7a1b05 Mon Sep 17 00:00:00 2001
From: barisusakli <barisusakli@gmail.com>
Date: Fri, 20 Jun 2014 14:51:01 -0400
Subject: [PATCH] side by side preview

---
 public/src/modules/composer.js            | 25 +++++++++++++++--------
 public/src/modules/composer/formatting.js |  3 ++-
 public/src/modules/composer/preview.js    | 22 ++++++++++++++++++++
 3 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 public/src/modules/composer/preview.js

diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js
index 2194bde928..1672fafbdf 100644
--- a/public/src/modules/composer.js
+++ b/public/src/modules/composer.js
@@ -2,7 +2,17 @@
 
 /* globals define, socket, app, config, ajaxify, utils, translator, templates, bootbox */
 
-define('composer', ['taskbar', 'composer/controls', 'composer/uploads', 'composer/formatting', 'composer/drafts', 'composer/tags'], function(taskbar, controls, uploads, formatting, drafts, tags) {
+var dependencies = [
+	'taskbar',
+	'composer/controls',
+	'composer/uploads',
+	'composer/formatting',
+	'composer/drafts',
+	'composer/tags',
+	'composer/preview'
+];
+
+define('composer', dependencies, function(taskbar, controls, uploads, formatting, drafts, tags, preview) {
 	var composer = {
 		active: undefined,
 		posts: {},
@@ -214,7 +224,7 @@ define('composer', ['taskbar', 'composer/controls', 'composer/uploads', 'compose
 					uploads.toggleThumbEls(postContainer, composer.posts[post_uuid].topic_thumb || '');
 				}
 
-				bodyEl.val(draft ? draft : postData.body);
+
 
 				postContainer.on('change', 'input, textarea', function() {
 					composer.posts[post_uuid].modified = true;
@@ -249,14 +259,12 @@ define('composer', ['taskbar', 'composer/controls', 'composer/uploads', 'compose
 					return false;
 				});
 
-				bodyEl.on('blur', function() {
-					socket.emit('modules.composer.renderPreview', bodyEl.val(), function(err, preview) {
-						preview = $(preview);
-						preview.find('img').addClass('img-responsive');
-						postContainer.find('.preview').html(preview);
-					});
+				bodyEl.on('input propertychange', function() {
+					preview.render(postContainer);
 				});
 
+				bodyEl.val(draft ? draft : postData.body);
+				preview.render(postContainer);
 				drafts.init(postContainer, postData);
 
 				handleResize(postContainer);
@@ -274,7 +282,6 @@ define('composer', ['taskbar', 'composer/controls', 'composer/uploads', 'compose
 
 				formatting.addComposerButtons();
 
-
 			});
 		});
 	}
diff --git a/public/src/modules/composer/formatting.js b/public/src/modules/composer/formatting.js
index e1495cb02f..f3a9256441 100644
--- a/public/src/modules/composer/formatting.js
+++ b/public/src/modules/composer/formatting.js
@@ -2,7 +2,7 @@
 
 /* globals define */
 
-define('composer/formatting', ['composer/controls'], function(controls) {
+define('composer/formatting', ['composer/controls', 'composer/preview'], function(controls, preview) {
 
 	var formatting = {};
 
@@ -86,6 +86,7 @@ define('composer/formatting', ['composer/controls'], function(controls) {
 
 			if(formattingDispatchTable.hasOwnProperty(iconClass)){
 				formattingDispatchTable[iconClass](textarea, textarea.selectionStart, textarea.selectionEnd);
+				preview.render(postContainer);
 			}
 		});
 	};
diff --git a/public/src/modules/composer/preview.js b/public/src/modules/composer/preview.js
new file mode 100644
index 0000000000..16e4898d97
--- /dev/null
+++ b/public/src/modules/composer/preview.js
@@ -0,0 +1,22 @@
+'use strict';
+
+/* globals define, socket*/
+
+define('composer/preview', function() {
+	var preview = {};
+
+	preview.render = function(postContainer) {
+
+		var textarea = postContainer.find('textarea');
+		socket.emit('modules.composer.renderPreview', textarea.val(), function(err, preview) {
+			if (err) {
+				return;
+			}
+			preview = $(preview);
+			preview.find('img').addClass('img-responsive');
+			postContainer.find('.preview').html(preview);
+		});
+	};
+
+	return preview;
+});
\ No newline at end of file