closes #2223, ability to select multiple tags

public/less/admin/manage/tags.less

@@ -11,9 +11,10 @@
 			.tag-item {
 				cursor: pointer;
 				display: inline-block;
-				margin-top: 22px;
 				font-size: 11px;
 			}
+
+			.user-select(none);
 		}
 
 		.save {

public/src/forum/admin/manage/tags.js

@@ -1,16 +1,13 @@
 "use strict";
 /*global define, socket, app, admin, utils, bootbox, RELATIVE_PATH*/
 
-define('forum/admin/manage/tags', ['forum/infinitescroll'], function(infinitescroll) {
+define('forum/admin/manage/tags', ['forum/infinitescroll', 'admin/selectable'], function(infinitescroll, selectable) {
 	var	Tags = {};
 	var timeoutId = 0;
 
 	Tags.init = function() {
 		handleColorPickers();
-
-		$('.tag-list').on('click', '.save', function() {
-			save($(this));
-		});
+		selectable.enable('.tag-management', '.tag-row');
 
 		$('#tag-search').on('input propertychange', function() {
 			if (timeoutId) {
@@ -31,14 +28,18 @@ define('forum/admin/manage/tags', ['forum/infinitescroll'], function(infinitescr
 			}, 100);
 		});
 
-		$('.tag-item').on('click', function(ev) {
-			var tagName = $(this).text(),
-				tag = $(this),
-				row = tag.parents('.tag-row');
+		$('#modify').on('click', function(ev) {
+			var tagsToModify = $('.tag-row.dropped');
+			if (!tagsToModify.length) {
+				return;
+			}
+
+			var firstTag = $(tagsToModify[0]),
+				title = tagsToModify.length > 1 ? 'Editing multiple tags' : 'Editing ' + firstTag.find('.tag-item').text() + ' tag';
 
 			bootbox.dialog({
-				title: "Editing " + tagName + " tag",
-				message: $(this).parents('.tag-row').find('.tag-modal').html(),
+				title:  title,
+				message: firstTag.find('.tag-modal').html(),
 				buttons: {
 					success: {
 						label: "Save",
@@ -48,18 +49,15 @@ define('forum/admin/manage/tags', ['forum/infinitescroll'], function(infinitescr
 								bgColor = modal.find('[data-name="bgColor"]').val(),
 								color = modal.find('[data-name="color"]').val();
 
-							row.find('[data-name="bgColor"]').val(bgColor);
-							row.find('[data-name="color"]').val(color);
-							row.find('.tag-item').css('background-color', bgColor).css('color', color);
+							tagsToModify.each(function(idx, tag) {
+								tag = $(tag);
+								
+								tag.find('[data-name="bgColor"]').val(bgColor);
+								tag.find('[data-name="color"]').val(color);
+								tag.find('.tag-item').css('background-color', bgColor).css('color', color);
 
 								save(tag);
-						}
-					},
-					info: {
-						label: "Click to view topics tagged \"" + tagName + "\"",
-						className: "btn-info",
-						callback: function() {
-							window.open(RELATIVE_PATH + '/tags/' + tagName);
+							});
 						}
 					}
 				}
@@ -89,15 +87,13 @@ define('forum/admin/manage/tags', ['forum/infinitescroll'], function(infinitescr
 		$('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
 	}
 
-	function save(saveBtn) {
-		var tagRow = saveBtn.parents('.tag-row');
-
+	function save(tag) {
 		var data = {
-			tag: tagRow.attr('data-tag'),
-			bgColor : tagRow.find('[data-name="bgColor"]').val(),
-			color : tagRow.find('[data-name="color"]').val()
+			tag: tag.attr('data-tag'),
+			bgColor : tag.find('[data-name="bgColor"]').val(),
+			color : tag.find('[data-name="color"]').val()
 		};
-		console.log(data);
+		
 		socket.emit('admin.tags.update', data, function(err) {
 			if (err) {
 				return app.alertError(err.message);
@@ -106,7 +102,5 @@ define('forum/admin/manage/tags', ['forum/infinitescroll'], function(infinitescr
 		});
 	}
 
-
-
 	return Tags;
 });

src/views/admin/manage/tags.tpl

@@ -5,19 +5,19 @@
 	</div>
 	<!-- ENDIF !tags.length -->
 
-	<div class="panel panel-default">
+	<div class="col-lg-9">
+		<div class="panel panel-default tag-management">
 			<div class="panel-heading">Tag Management</div>
 			<div class="panel-body">
 				<input class="form-control" type="text" id="tag-search" placeholder="Search"/><br/>
 
 
 				<div class="row">
-				<p>Click on a tag to modify its background and text colours</p>
 					<div class="tag-list">
 						<!-- BEGIN tags -->
 						<div class="tag-row" data-tag="{tags.value}">
 							<div data-value="{tags.value}">
-							<span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span><span class="tag-topic-count">{tags.score}</span>
+								<span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span><span class="tag-topic-count"><a href="{relative_path}/tags/{tags.value}" target="_blank">{tags.score}</a></span>
 							</div>
 							<div class="tag-modal hidden">
 								<div class="form-group">
@@ -35,4 +35,16 @@
 				</div>
 			</div>
 		</div>
+	</div>
+
+	<div class="col-lg-3">
+		<div class="panel panel-default">
+			<div class="panel-heading">Modify Tag</div>
+			<div class="panel-body">
+				<p>Select tags via clicking and/or dragging, use shift to select multiple.</p>
+				<button class="btn btn-primary btn-md" id="modify">Modify Selected Tags</button>
+			</div>
+		</div>
+	</div>
+	
 </div>