From 6303ac4a90e0552fef7e26e2a774059cd815a19c Mon Sep 17 00:00:00 2001
From: barisusakli <barisusakli@gmail.com>
Date: Fri, 20 Jun 2014 19:18:13 -0400
Subject: [PATCH] closes #1716, #1717

---
 public/src/modules/composer.js         |  8 ++++-
 public/src/modules/composer/preview.js | 43 ++++++++++++++++++++------
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js
index 1672fafbdf..d96c1d401e 100644
--- a/public/src/modules/composer.js
+++ b/public/src/modules/composer.js
@@ -263,8 +263,14 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting
 					preview.render(postContainer);
 				});
 
+				bodyEl.on('scroll', function() {
+					preview.matchScroll(postContainer);
+				})
+
 				bodyEl.val(draft ? draft : postData.body);
-				preview.render(postContainer);
+				preview.render(postContainer, function() {
+					preview.matchScroll(postContainer);
+				});
 				drafts.init(postContainer, postData);
 
 				handleResize(postContainer);
diff --git a/public/src/modules/composer/preview.js b/public/src/modules/composer/preview.js
index 16e4898d97..4ef5568941 100644
--- a/public/src/modules/composer/preview.js
+++ b/public/src/modules/composer/preview.js
@@ -5,17 +5,42 @@
 define('composer/preview', function() {
 	var preview = {};
 
-	preview.render = function(postContainer) {
+	var timeoutId = 0;
 
+	preview.render = function(postContainer, callback) {
+		callback = callback || function() {};
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+			timeoutId = 0;
+		}
 		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);
-		});
+
+		timeoutId = setTimeout(function() {
+			socket.emit('modules.composer.renderPreview', textarea.val(), function(err, preview) {
+				timeoutId = 0;
+				if (err) {
+					return;
+				}
+				preview = $(preview);
+				preview.find('img').addClass('img-responsive');
+				postContainer.find('.preview').html(preview);
+				callback();
+			});
+		}, 250);
+	};
+
+	preview.matchScroll = function(postContainer) {
+		var textarea = postContainer.find('textarea');
+		var preview = postContainer.find('.preview');
+		var diff = textarea[0].scrollHeight - textarea.height();
+
+		if (diff === 0) {
+			return;
+		}
+
+		var scrollPercent = textarea.scrollTop() / diff;
+
+		preview.scrollTop(Math.max(preview[0].scrollHeight - preview.height(), 0) * scrollPercent);
 	};
 
 	return preview;