closes #172, #173, #174

public/css/style.less

@@ -571,7 +571,7 @@ body .navbar .nodebb-inline-block {
 			height: 200px;
 		}
 		
-		#imagedrop {
+		.imagedrop {
 			text-align: center;
 			color: white;
 			position: absolute;
@@ -585,7 +585,7 @@ body .navbar .nodebb-inline-block {
 			display: none;
 		}
 		
-		#imagelist {
+		.imagelist {
 			position: absolute;
 			bottom: 50px;
 			left: 5%;

public/src/modules/composer.js

@@ -7,10 +7,27 @@ define(['taskbar'], function(taskbar) {
 			postContainer: undefined,
 		};
 
+	function createImageLabel(img, postImages) {
+		var imageLabel = $('<div class="label"><span>'+ img.name +'</span></div>');
+		var closeButton = $('<button class="close">&times;</button>');
+
+		closeButton.on('click', function(e) {
+
+			imageLabel.remove();
+			var index = postImages.indexOf(img);
+			if(index !== -1) {
+				postImages.splice(index, 1);
+			}
+		});
+
+		imageLabel.append(closeButton);
+		return imageLabel;
+	}
+
 	function loadFile(file) {
 		var reader = new FileReader(),
-			dropDiv = $('#imagedrop'),
+			dropDiv = $('.post-window .imagedrop'),
-			imagelist = $('#imagelist'),
+			imagelist = $('.post-window .imagelist'),
 			uuid = dropDiv.parents('[data-uuid]').attr('data-uuid'),
 			posts = composer.posts[uuid];
 		
@@ -25,18 +42,8 @@ define(['taskbar'], function(taskbar) {
 
 			posts.images.push(img);
 
-			var imageLabel = $('<div class="label"><span>'+ file.name +'</span></div>');
+			var imageLabel = createImageLabel(img, posts.images);
-			var closeButton = $('<button class="close">&times;</button>');
-			closeButton.on('click', function(e) {
 
-				imageLabel.remove();
-				var index = posts.images.indexOf(img);
-				if(index !== -1) {
-					posts.images.splice(index, 1);
-				}
-			});
-
-			imageLabel.append(closeButton);      	
 			imagelist.append(imageLabel);
 			dropDiv.hide();
 		});
@@ -46,16 +53,20 @@ define(['taskbar'], function(taskbar) {
 
 	function initializeFileReader() {
 		jQuery.event.props.push( "dataTransfer" );
-		
+		console.log(config);
 		if(window.FileReader) {
-			var	drop = $('#imagedrop');
+			var drop = $('.post-window .imagedrop');
+			var textarea = $('.post-window textarea');
 
-			$(composer.postContainer).on('dragenter dragover', function() {
+			textarea.on('dragenter', function() {
-				var	textareaEl = this.querySelector('textarea'),
-					offset = textareaEl.offsetTop;
 
-				drop.css('top', offset + 'px');
+				drop.css('top', textarea.position().top + 'px');
 				drop.show();
+
+				drop.on('dragleave', function(ev) {
+					drop.hide();
+					drop.off('dragleave');
+				});
 			});
 			
 			function cancel(e) {
@@ -100,8 +111,8 @@ define(['taskbar'], function(taskbar) {
 														'</div>' +
 													'</div>' +
 													'<textarea tabIndex="2"></textarea>' +
-													'<div id="imagelist"></div>'+
+													'<div class="imagelist"></div>'+
-													'<div id="imagedrop"><div>Drag and Drop Images Here</div></div>'+
+													'<div class="imagedrop"><div>Drag and Drop Images Here</div></div>'+
 													'<div class="btn-toolbar action-bar">' +
 														'<div class="btn-group" style="float: right; margin-right: -8px">' +
 															'<button data-action="minimize" class="btn hidden-phone" tabIndex="4"><i class="icon-download-alt"></i> Minimize</button>' +
@@ -153,12 +164,14 @@ define(['taskbar'], function(taskbar) {
 
 			// Post Window events
 			var	jPostContainer = $(composer.postContainer),
-				postContentEl = composer.postContainer.querySelector('textarea')
+				postContentEl = composer.postContainer.querySelector('textarea');
+
 			jPostContainer.on('change', 'input, textarea', function() {
 				var uuid = $(this).parents('.post-window')[0].getAttribute('data-uuid');
 				if (this.nodeName === 'INPUT') composer.posts[uuid].title = this.value;
 				else if (this.nodeName === 'TEXTAREA') composer.posts[uuid].body = this.value;
 			});
+
 			jPostContainer.on('click', '.action-bar button', function() {
 				var	action = this.getAttribute('data-action'),
 					uuid = $(this).parents('.post-window').attr('data-uuid');
@@ -168,6 +181,7 @@ define(['taskbar'], function(taskbar) {
 					case 'discard': composer.discard(uuid); break;
 				}
 			});
+
 			jPostContainer.on('click', '.formatting-bar span', function() {
 				var iconClass = this.querySelector('i').className,
 					cursorEnd = postContentEl.value.length,
@@ -240,13 +254,22 @@ define(['taskbar'], function(taskbar) {
 		});
 	}
 
+	function createPostImages(images) {
+		var imagelist = $(composer.postContainer).find('.imagelist');
+		imagelist.empty();
+
+		if(images && images.length) {
+			for(var i=0; i<images.length; ++i) {
+				var imageLabel = createImageLabel(images[i], images);
+				imagelist.append(imageLabel);
+			}
+		}
+	}
+
 	composer.load = function(post_uuid) {
 		var post_data = composer.posts[post_uuid],
 			titleEl = composer.postContainer.querySelector('input'),
-			bodyEl = composer.postContainer.querySelector('textarea'),
+			bodyEl = composer.postContainer.querySelector('textarea');
-			imagelist = $(composer.postContainer).find('#imagelist');
-
-		imagelist.empty();
 
 		composer.reposition(post_uuid);
 		composer.active = post_uuid;
@@ -263,7 +286,9 @@ define(['taskbar'], function(taskbar) {
 			titleEl.value = post_data.title;
 			titleEl.readOnly = false;
 		}
-		bodyEl.value = post_data.body
+		bodyEl.value = post_data.body;
+
+		createPostImages(post_data.images);
 
 		// Direct user focus to the correct element
 		if ((parseInt(post_data.tid) || parseInt(post_data.pid)) > 0) {
@@ -346,7 +371,8 @@ define(['taskbar'], function(taskbar) {
 
 	composer.discard = function(post_uuid) {
 		if (composer.posts[post_uuid]) {
-			$(composer.postContainer).find('#imagedrop').html('');
+			$(composer.postContainer).find('.imagedrop').html('');
+			$(composer.postContainer).find('.imagelist').empty();
 			delete composer.posts[post_uuid];
 			composer.minimize();
 			taskbar.discard('composer', post_uuid);

public/templates/admin/settings.tpl

@@ -8,6 +8,8 @@
 		<input type="text" placeholder="Your Community Name" data-field="title" />
 		<label>Site Description</label>
 		<input type="text" class="input-xxlarge" placeholder="A short description about your community" data-field="description" />
+		<label>Imgur Client ID</label>
+		<input type="text" class="input-xxlarge" placeholder="Imgur ClientID for image uploads" data-field="imgurClientID" />
 	</form>
 </div>
 

src/install.js

@@ -84,11 +84,11 @@ var	async = require('async'),
 
 				server_conf.base_url = protocol + '//' + host;
 				server_conf.relative_path = relative_path;
-				server_conf.imgurClientID = '';
 				
 				meta.config.set('postDelay', 10000);
 				meta.config.set('minimumPostLength', 8);
 				meta.config.set('minimumTitleLength', 3);
+				meta.config.set('imgurClientID', '');
 
 				install.save(server_conf, client_conf, callback);
 			});

src/posts.js

@@ -230,6 +230,7 @@ var	RDB = require('./redis.js'),
 					postData.relativeTime = utils.relativeTime(postData.timestamp)
 					postData.fav_star_class = 'icon-star-empty';
 					postData['edited-class'] = 'none';
+					postData.show_banned = 'hide';
 					postData.uploadedImages = JSON.parse(postData.uploadedImages);
 
 					var socketData = {
@@ -327,7 +328,7 @@ var	RDB = require('./redis.js'),
 
 	function uploadPostImages(postData, images, callback) {
 		var imgur = require('./imgur');
-		imgur.setClientID(global.nconf.get('imgurClientID'));
+		imgur.setClientID(config.imgurClientID);
 
 		var uploadedImages = [];					
 
@@ -341,6 +342,7 @@ var	RDB = require('./redis.js'),
 						uploadedImages.push(img);
 						callback(null);
 					} else {
+						winston.error('Can\'t upload image, did you set imgurClientID?');
 						callback(data);
 					}
 				}