composer changeS

public/src/modules/composer.js

@@ -192,7 +192,7 @@ define(['taskbar'], function(taskbar) {
 			});
 
 
-			postContainer.on('click', '.action-bar button', function() {
+			postContainer.on('click', '.formatting-bar button', function() {
 				var	action = $(this).attr('data-action');
 
 				switch(action) {
@@ -283,25 +283,39 @@ define(['taskbar'], function(taskbar) {
 				$('#fileForm')[0].reset();
 			});
 
+			postContainer.find('.nav-tabs a').click(function (e) {
+				e.preventDefault();
+				$(this).tab('show');
+				return false;
+			});
+
+			postContainer.find('.nav-tabs a').on('shown.bs.tab', function (e) {
+  				if($(e.target).attr('href') === '#preview') {
+  					socket.emit('modules.composer.renderPreview', bodyEl.val(), function(err, preview) {
+  						postContainer.find('.preview').html(preview);
+  					});
+  				}
+			});
+
 
 			var	resizeActive = false,
-				resizeCenterX = 0,
+				resizeCenterY = 0,
 				resizeOffset = 0,
 				resizeStart = function(e) {
 					bodyRect = document.body.getBoundingClientRect();
 					resizeRect = resizeEl.getBoundingClientRect();
-					resizeCenterX = resizeRect.left + (resizeRect.width/2);
-					resizeOffset = resizeCenterX - e.clientX;
-					resizeSnaps.half = bodyRect.width / 2;
-					resizeSnaps.none = bodyRect.width;
+					resizeCenterY = resizeRect.top + (resizeRect.height/2);
+					resizeOffset = resizeCenterY - e.clientY;
 					resizeActive = true;
 
 					$(document.body).on('mousemove', resizeAction);
+					$(document.body).on('mouseup', resizeStop);
 					document.body.addEventListener('touchmove', resizeTouchAction);
 				},
 				resizeStop = function() {
 					resizeActive = false;
 					$(document.body).off('mousemove', resizeAction);
+					$(document.body).off('mouseup', resizeStop);
 					document.body.removeEventListener('touchmove', resizeTouchAction);
 				},
 				resizeTouchAction = function(e) {
@@ -310,41 +324,23 @@ define(['taskbar'], function(taskbar) {
 				},
 				resizeAction = function(e) {
 					if (resizeActive) {
-						position = (e.clientX + resizeOffset);
-						if (Math.abs(position - resizeSnaps.half) <= 15) {
-							// Half snap
-							postContainer.css('width', resizeSnaps.half);
-							resizeSavePosition(resizeSnaps.half);
-						} else if (Math.abs(position - resizeSnaps.none) <= 30) {
-							// Minimize snap
-							postContainer.css('width', bodyRect.width - resizeSnaps.none + 15);
-							resizeSavePosition(resizeSnaps.none);
-						} else if (position <= 30) {
-							// Full snap
-							postContainer.css('width', bodyRect.width - 15);
-							resizeSavePosition(bodyRect.width - 15);
-						} else {
-							// OH SNAP, NO SNAPS!
-							postContainer.css('width', bodyRect.width - position);
-							resizeSavePosition(bodyRect.width - position);
-						}
+						position = (e.clientY + resizeOffset);
+
+						postContainer.css('height', $(window).height() - position);
+						resizeSavePosition($(window).height() - position);
 					}
+					return false;
 				},
 				resizeSavePosition = function(px) {
-					var	percentage = px/bodyRect.width;
+					var	percentage = px / $(window).height();
 					localStorage.setItem('composer:resizePercentage', percentage);
 				},
-				resizeSnaps = {
-					none: 0,
-					half: 0,
-					full: 0
-				},
 				resizeRect, bodyRect;
 
 			var resizeEl = postContainer.find('.resizer')[0];
 
 			resizeEl.addEventListener('mousedown', resizeStart);
-			resizeEl.addEventListener('mouseup', resizeStop);
+
 			resizeEl.addEventListener('touchstart', function(e) {
 				e.preventDefault();
 				resizeStart(e.touches[0]);
@@ -364,6 +360,24 @@ define(['taskbar'], function(taskbar) {
 		});
 	}
 
+	//http://stackoverflow.com/questions/14441456/how-to-detect-which-device-view-youre-on-using-twitter-bootstrap-api
+	function findBootstrapEnvironment() {
+		var envs = ['xs', 'sm', 'md', 'lg'];
+
+		$el = $('<div>');
+		$el.appendTo($('body'));
+
+		for (var i = envs.length - 1; i >= 0; i--) {
+			var env = envs[i];
+
+			$el.addClass('hidden-'+env);
+			if ($el.is(':hidden')) {
+				$el.remove();
+				return env;
+			}
+		}
+	}
+
 	composer.activateReposition = function(post_uuid) {
 
 		if(composer.active && composer.active !== post_uuid) {
@@ -375,15 +389,18 @@ define(['taskbar'], function(taskbar) {
 			postContainer = $('#cmp-uuid-' + post_uuid);
 
 		composer.active = post_uuid;
+		var env = findBootstrapEnvironment();
 
 		if (percentage) {
-			if (bodyRect.width >= 768) {
-				postContainer.css('width', Math.floor(bodyRect.width * percentage) + 'px');
-			} else {
-				postContainer.css('width', '100%');
+			if ( env === 'md' || env === 'lg') {
+				postContainer.css('height', Math.floor($(window).height() * percentage) + 'px');
 			}
 		}
 
+		if(env === 'sm' || env === 'xs') {
+			postContainer.css('height', $(window).height() - $('#header-menu').height());
+		}
+
 		if(config.imgurClientIDSet) {
 			postContainer.find('.upload-instructions').removeClass('hide');
 			postContainer.find('.img-upload-btn').removeClass('hide');

public/templates/composer.tpl

@@ -17,20 +17,31 @@
 						<input type="file" id="files" name="files[]" multiple class="hide"/>
 				</form>
 			</div>
-			<!-- <div class="btn btn-link pull-right">Preview</div> -->
-		</div>
-		<textarea tabIndex="2"></textarea>
-		<div class="preview"></div>
-		<div class="imagedrop"><div>Drag and Drop Images Here</div></div>
-		<div class="text-center upload-instructions hide visible-lg visible-md">
-			<small>Upload images by dragging & dropping them</small>
-		</div>
-		<div class="btn-toolbar action-bar">
 			<div class="btn-group pull-right">
 				<button class="btn btn-default" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>
 				<button data-action="post" class="btn btn-default" tabIndex="3"><i class="fa fa-check"></i> Submit</button>
 			</div>
 		</div>
-		<div class="resizer"><div class="trigger"><i class="fa fa-chevron-left"></i></div></div>
+
+		<ul class="nav nav-tabs">
+			<li class="active"><a href="#write" data-toggle="tab">Write</a></li>
+			<li><a href="#preview" data-toggle="tab">Preview</a></li>
+		</ul>
+
+		<div class="tab-content">
+			<div class="tab-pane active" id="write">
+				<textarea class="write" tabIndex="2"></textarea>
+			</div>
+			<div class="tab-pane" id="preview">
+				<div class="preview well"></div>
+			</div>
+		</div>
+
+		<div class="imagedrop"><div>Drag and Drop Images Here</div></div>
+		<div class="text-center upload-instructions hide visible-lg visible-md">
+			<small>Upload images by dragging & dropping them</small>
+		</div>
+
+		<div class="resizer"><div class="trigger text-center"><i class="fa fa-chevron-up"></i></div></div>
 	</div>
 </div>

src/socket.io/modules.js

@@ -63,6 +63,11 @@ SocketModules.composer.editCheck = function(socket, pid, callback) {
 	});
 };
 
+SocketModules.composer.renderPreview = function(socket, content, callback) {
+	var preview = require('marked')(content);
+	callback(null, preview);
+}
+
 /* Chat */
 
 SocketModules.chats = {};