image uploading for categories, #2463

public/less/admin/admin.less

@@ -266,3 +266,19 @@
 		cursor: move;
 	}
 }
+
+.category-preview {
+	width: 100%;
+	height: 100px;
+	text-align: center;
+	color: white;
+	margin-top: 0;
+
+	.icon {
+		width: 30px;
+		height: 30px;
+		line-height: 40px;
+		display: inline-block;
+		margin: 35px 5px 0 5px;
+	}
+}

public/src/admin/manage/categories.js

@@ -1,47 +1,12 @@
 "use strict";
 /*global define, socket, app, bootbox, templates, ajaxify, RELATIVE_PATH*/
 
-define('admin/manage/categories', [
+define('admin/manage/categories', function() {
-	'uploader',
-	'admin/modules/iconSelect',
-	'admin/modules/colorpicker'
-], function(uploader, iconSelect, colorpicker) {
 	var	Categories = {};
 
 	Categories.init = function() {
 		var bothEl = $('#active-categories, #disabled-categories');
 
-		var modified_categories = {};
-
-		function modified(el) {
-			var cid = $(el).parents('li').attr('data-cid');
-			if(cid) {
-				modified_categories[cid] = modified_categories[cid] || {};
-				modified_categories[cid][$(el).attr('data-name')] = $(el).val();
-			}
-		}
-
-		function save() {
-			if(Object.keys(modified_categories).length) {
-				socket.emit('admin.categories.update', modified_categories, function(err, result) {
-					if (err) {
-						return app.alertError(err.message);
-					}
-
-					if (result && result.length) {
-						app.alert({
-							title: 'Updated Categories',
-							message: 'Category IDs ' + result.join(', ') + ' was successfully updated.',
-							type: 'success',
-							timeout: 2000
-						});
-					}
-				});
-				modified_categories = {};
-			}
-			return false;
-		}
-
 		function updateCategoryOrders(evt, ui) {
 			var categories = $(evt.target).children(),
 				modified = {},
@@ -82,11 +47,6 @@ define('admin/manage/categories', [
 			});
 		});
 
-		$('.blockclass, .admin-categories form select').each(function() {
-			var $this = $(this);
-			$this.val($this.attr('data-value'));
-		});
-
 		function showCreateCategoryModal() {
 			$('#new-category-modal').modal();
 		}
@@ -119,283 +79,8 @@ define('admin/manage/categories', [
 			});
 		}
 
-		function enableColorPicker(idx, inputEl) {
-			var $inputEl = $(inputEl),
-				previewEl = $inputEl.parents('[data-cid]').find('.preview-box');
-
-			colorpicker.enable($inputEl, function(hsb, hex) {
-				if ($inputEl.attr('data-name') === 'bgColor') {
-					previewEl.css('background', '#' + hex);
-				} else if ($inputEl.attr('data-name') === 'color') {
-					previewEl.css('color', '#' + hex);
-				}
-
-				modified($inputEl[0]);
-			});
-		}
-
-		function setupEditTargets() {
-			$('[data-edit-target]').on('click', function() {
-				var $this = $(this),
-					target = $($this.attr('data-edit-target'));
-
-				$this.addClass('hide');
-				target.removeClass('hide').on('blur', function() {
-					$this.removeClass('hide').children('span').html(this.value);
-					$(this).addClass('hide');
-				}).val($this.children('span').html());
-
-				target.focus();
-			});
-		}
-
-		$(function() {
-			var url = window.location.href,
-				parts = url.split('/'),
-				active = parts[parts.length - 1];
-
-			$('.nav-pills li').removeClass('active');
-			$('.nav-pills li a').each(function() {
-				var $this = $(this);
-				if ($this.attr('href').match(active)) {
-					$this.parent().addClass('active');
-					return false;
-				}
-			});
-
-
 		$('#addNew').on('click', showCreateCategoryModal);
 		$('#create-category-btn').on('click', createNewCategory);
-
-			$('#active-categories, #disabled-categories, #new-category-modal').on('click', '.icon', function(ev) {
-				iconSelect.init($(this).find('i'), modified);
-			});
-
-			$('.admin-categories form input, .admin-categories form select').on('change', function(ev) {
-				modified(ev.target);
-			});
-
-			// Colour Picker
-			$('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
-
-			$('.admin-categories').on('click', '.save', save);
-			$('.admin-categories').on('click', '.purge', function() {
-				var categoryRow = $(this).parents('li[data-cid]');
-				var	cid = categoryRow.attr('data-cid');
-
-				bootbox.confirm('Do you really want to purge this category "' + categoryRow.find('#cid-' + cid + '-name').val() + '"?<br/><strong class="text-danger">Warning!</strong> All topics and posts in this category will be purged!', function(confirm) {
-					if (!confirm) {
-						return;
-					}
-					socket.emit('admin.categories.purge', cid, function(err) {
-						if (err) {
-							return app.alertError(err.message);
-						}
-						app.alertSuccess('Category purged!');
-						categoryRow.remove();
-					});
-				});
-			});
-
-			$('.admin-categories').on('click', '.permissions', function() {
-				var	cid = $(this).parents('li[data-cid]').attr('data-cid');
-				Categories.launchPermissionsModal(cid);
-				return false;
-			});
-
-
-			$('.admin-categories').on('click', '.upload-button', function() {
-				var inputEl = $(this),
-					cid = inputEl.parents('li[data-cid]').attr('data-cid');
-
-				uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) {
-					inputEl.val(imageUrlOnServer);
-					var previewBox = inputEl.parents('li[data-cid]').find('.preview-box');
-					previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')')
-						.css('background-size', 'cover');
-					modified(inputEl[0]);
-				});
-			});
-
-			$('.admin-categories').on('click', '.delete-image', function() {
-				var parent = $(this).parents('li[data-cid]'),
-					inputEl = parent.find('.upload-button'),
-					preview = parent.find('.preview-box'),
-					bgColor = parent.find('.category_bgColor').val();
-
-				inputEl.val('');
-				modified(inputEl[0]);
-
-				preview.css('background', bgColor);
-
-				$(this).addClass('hide').hide();
-			});
-
-			$('#revertChanges').on('click', function() {
-				ajaxify.refresh();
-			});
-
-			setupEditTargets();
-
-			$('button[data-action="setParent"]').on('click', function() {
-				var cid = $(this).parents('[data-cid]').attr('data-cid'),
-					modal = $('#setParent');
-
-				modal.find('select').val($(this).attr('data-parentCid'));
-				modal.attr('data-cid', cid).modal();
-			});
-
-			$('button[data-action="removeParent"]').on('click', function() {
-				var cid = $(this).parents('[data-cid]').attr('data-cid');
-				var payload= {};
-				payload[cid] = {
-					parentCid: 0
-				};
-				socket.emit('admin.categories.update', payload, function(err) {
-					if (err) {
-						return app.alertError(err.message);
-					}
-					ajaxify.go('admin/manage/categories/active');
-				});
-			});
-
-			$('#setParent [data-cid]').on('click', function() {
-				var modalEl = $('#setParent'),
-					parentCid = $(this).attr('data-cid'),
-					payload = {};
-
-				payload[modalEl.attr('data-cid')] = {
-					parentCid: parentCid
-				};
-
-				socket.emit('admin.categories.update', payload, function(err) {
-					modalEl.one('hidden.bs.modal', function() {
-						ajaxify.go('admin/manage/categories/active');
-					});
-					modalEl.modal('hide');
-				});
-			});
-		});
-	};
-
-	Categories.launchPermissionsModal = function(cid) {
-		var	modal = $('#category-permissions-modal'),
-			searchEl = modal.find('#permission-search'),
-			resultsEl = modal.find('.search-results.users'),
-			groupsResultsEl = modal.find('.search-results.groups'),
-			searchDelay;
-
-		// Clear the search field and results
-		searchEl.val('');
-		resultsEl.html('');
-
-		searchEl.off().on('keyup', function() {
-			var	searchEl = this,
-				liEl;
-
-			clearTimeout(searchDelay);
-
-			searchDelay = setTimeout(function() {
-				socket.emit('admin.categories.search', {
-					username: searchEl.value,
-					cid: cid
-				}, function(err, results) {
-					if(err) {
-						return app.alertError(err.message);
-					}
-
-					templates.parse('admin/partials/categories/users', {
-						users: results
-					}, function(html) {
-						resultsEl.html(html);
-					});
-				});
-			}, 250);
-		});
-
-		Categories.refreshPrivilegeList(cid);
-
-		resultsEl.off().on('click', '[data-priv]', function(e) {
-			var	anchorEl = $(this),
-				uid = anchorEl.parents('li[data-uid]').attr('data-uid'),
-				privilege = anchorEl.attr('data-priv');
-			e.preventDefault();
-			e.stopPropagation();
-
-			socket.emit('admin.categories.setPrivilege', {
-				cid: cid,
-				uid: uid,
-				privilege: privilege,
-				set: !anchorEl.hasClass('active')
-			}, function(err) {
-				if (err) {
-					return app.alertError(err.message);
-				}
-				anchorEl.toggleClass('active', !anchorEl.hasClass('active'));
-				Categories.refreshPrivilegeList(cid);
-			});
-		});
-
-		modal.off().on('click', '.members li > img', function() {
-			searchEl.val($(this).attr('title'));
-			searchEl.keyup();
-		});
-
-		// User Groups and privileges
-		socket.emit('admin.categories.groupsList', cid, function(err, results) {
-			if(err) {
-				return app.alertError(err.message);
-			}
-
-			templates.parse('admin/partials/categories/groups', {
-				groups: results
-			}, function(html) {
-				groupsResultsEl.html(html);
-			});
-		});
-
-		groupsResultsEl.off().on('click', '[data-priv]', function(e) {
-			var	anchorEl = $(this),
-				name = anchorEl.parents('li[data-name]').attr('data-name'),
-				privilege = anchorEl.attr('data-priv');
-			e.preventDefault();
-			e.stopPropagation();
-
-			socket.emit('admin.categories.setGroupPrivilege', {
-				cid: cid,
-				name: name,
-				privilege: privilege,
-				set: !anchorEl.hasClass('active')
-			}, function(err) {
-				if (!err) {
-					anchorEl.toggleClass('active');
-				}
-			});
-		});
-
-		modal.modal();
-	};
-
-	Categories.refreshPrivilegeList = function (cid) {
-		var	modalEl = $('#category-permissions-modal'),
-			memberList = $('.members');
-
-		socket.emit('admin.categories.getPrivilegeSettings', cid, function(err, privilegeList) {
-			var	membersLength = privilegeList.length,
-				liEl, x, userObj;
-
-			memberList.html('');
-			if (membersLength > 0) {
-				for(x = 0; x < membersLength; x++) {
-					userObj = privilegeList[x];
-					liEl = $('<li/>').attr('data-uid', userObj.uid).html('<img src="' + userObj.picture + '" title="' + userObj.username + '" />');
-					memberList.append(liEl);
-				}
-			} else {
-				liEl = $('<li/>').addClass('empty').html('None.');
-				memberList.append(liEl);
-			}
-		});
 	};
 
 	return Categories;

public/src/admin/manage/category.js

@@ -11,8 +11,11 @@ define('admin/manage/category', [
 	Category.init = function() {
 		var modified_categories = {};
 
-		function modified(el) {
+		function modified(el, cid) {
-			var cid = $(el).parents('form').attr('data-cid');
+			if (!cid) {
+				cid = $(el).parents('form').attr('data-cid');
+			}
+
 			if (cid) {
 				modified_categories[cid] = modified_categories[cid] || {};
 				modified_categories[cid][$(el).attr('data-name')] = $(el).val();
@@ -75,16 +78,7 @@ define('admin/manage/category', [
 			});
 		}
 
-		$(function() {
+		// If any inputs have changed, prepare it for saving
-			var url = window.location.href,
-				parts = url.split('/'),
-				active = parts[parts.length - 1],
-				optionsEl = $('.options');
-
-			$('#new-category-modal').on('click', '.icon', function(ev) {
-				iconSelect.init($(this).find('i'), modified);
-			});
-
 		$('form.category input, form.category select').on('change', function(ev) {
 			modified(ev.target);
 		});
@@ -92,6 +86,8 @@ define('admin/manage/category', [
 		// Colour Picker
 		$('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
 
+		// Options menu events
+		var optionsEl = $('.options');
 		optionsEl.on('click', '.save', save);
 		optionsEl.on('click', '.revert', ajaxify.refresh);
 		optionsEl.on('click', '.purge', function() {
@@ -112,6 +108,23 @@ define('admin/manage/category', [
 			});
 		});
 
+		// Image Uploader
+		$('.upload-button').on('click', function() {
+			var inputEl = $(this),
+				cid = inputEl.attr('data-cid');
+
+			uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) {
+				inputEl.val(imageUrlOnServer);
+				var previewBox = inputEl.siblings('.category-preview');
+				previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')')
+					.css('background-size', 'cover');
+				modified(inputEl[0], cid);
+			});
+		});
+
+		$(function() {
+			
+
 			// $('.admin-categories').on('click', '.permissions', function() {
 			// 	var	cid = $(this).parents('li[data-cid]').attr('data-cid');
 			// 	Categories.launchPermissionsModal(cid);
@@ -119,32 +132,19 @@ define('admin/manage/category', [
 			// });
 
 
-			$('.admin-categories').on('click', '.upload-button', function() {
+			// $('.admin-categories').on('click', '.delete-image', function() {
-				var inputEl = $(this),
+			// 	var parent = $(this).parents('li[data-cid]'),
-					cid = inputEl.parents('li[data-cid]').attr('data-cid');
+			// 		inputEl = parent.find('.upload-button'),
+			// 		preview = parent.find('.preview-box'),
+			// 		bgColor = parent.find('.category_bgColor').val();
 
-				uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) {
+			// 	inputEl.val('');
-					inputEl.val(imageUrlOnServer);
+			// 	modified(inputEl[0]);
-					var previewBox = inputEl.parents('li[data-cid]').find('.preview-box');
-					previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')')
-						.css('background-size', 'cover');
-					modified(inputEl[0]);
-				});
-			});
 
-			$('.admin-categories').on('click', '.delete-image', function() {
+			// 	preview.css('background', bgColor);
-				var parent = $(this).parents('li[data-cid]'),
-					inputEl = parent.find('.upload-button'),
-					preview = parent.find('.preview-box'),
-					bgColor = parent.find('.category_bgColor').val();
 
-				inputEl.val('');
+			// 	$(this).addClass('hide').hide();
-				modified(inputEl[0]);
+			// });
-
-				preview.css('background', bgColor);
-
-				$(this).addClass('hide').hide();
-			});
 
 			setupEditTargets();
 

src/views/admin/manage/categories.tpl

@@ -47,16 +47,6 @@
 		</div>
 	</div>
 
-	<div class="col-lg-3">
-		<div class="panel panel-default">
-			<div class="panel-heading">Categories Control Panel</div>
-			<div class="panel-body">
-				<button class="btn btn-primary" id="addNew">Create New Category</button>
-				<button class="btn btn-default" id="revertChanges">Revert Changes</button>
-			</div>
-		</div>
-	</div>
-
 	<div class="col-lg-9">
 		<div class="panel panel-default">
 			<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
@@ -106,5 +96,4 @@
 	</div>
 	
 	<!-- IMPORT admin/partials/categories/new.tpl -->
-	<!-- IMPORT admin/partials/categories/permissions.tpl -->
 </div>

src/views/admin/manage/category.tpl

@@ -1,5 +1,5 @@
 <div class="row">
-	<div class="col-lg-9">
+	<div class="col-md-9">
 		<div class="panel panel-default">
 			<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
 			<div class="panel-body">
@@ -81,9 +81,31 @@
 				</form>
 			</div>
 		</div>
+
+		<!-- IMPORT admin/partials/categories/permissions.tpl -->
+	</div>
+
+	<div class="col-md-3 options">
+		<div class="panel panel-default hidden-sm">
+			<div class="panel-heading">Preview</div>
+			<div class="panel-body">
+				<div class="category-preview" style="
+					<!-- IF category.backgroundImage -->background-image: url({category.backgroundImage});<!-- ENDIF category.backgroundImage -->
+					<!-- IF category.bgColor -->background-color: {category.bgColor};<!-- ENDIF category.bgColor -->
+					color: {category.color};
+					background-size:cover;
+				">
+					<div class="icon">
+						<i data-name="icon" value="{category.icon}" class="fa {category.icon} fa-2x"></i>
+					</div>
+				</div>
+				<button type="button" data-cid="{category.cid}" data-name="image" data-value="{categories.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Upload Image</button>
+				<!-- IF categories.image -->
+				<small class="pointer delete-image"><i data-name="icon" value="fa-times" class="fa fa-times"></i></small>
+				<!-- ENDIF categories.image -->
+			</div>
 		</div>
 
-	<div class="col-lg-3 options">
 		<div class="panel panel-default">
 			<div class="panel-heading">Categories Control Panel</div>
 			<div class="panel-body">