Merge branch 'webui-multipaste' into dev

4 files changed, 147 insertions, 21 deletions

diff --git a/public_html/data/css/style.css b/public_html/data/css/style.css
index 57366d3d6..166a00c12 100644
--- a/public_html/data/css/style.css
+++ b/public_html/data/css/style.css
@@ -42,6 +42,42 @@
 	height: 50px;
 }
 
+.multipasteQueue .items>div {
+	height: 190px;
+	display: inline-block;
+	width: 150px;
+	vertical-align: top;
+	margin: 0 1px 20px 1px;
+}
+
+.multipasteQueue .items .item {
+	height: 160px;
+}
+
+.nav li.multipaste_button a {
+	color: #fff;
+}
+
+.ajaxFeedback {
+	display: inline-block;
+}
+
+/* Source: http://stackoverflow.com/a/26283602 */
+.glyphicon.spinning {
+	animation: spin 1s infinite linear;
+	-webkit-animation: spin2 1s infinite linear;
+}
+
+@keyframes spin {
+	from { transform: scale(1) rotate(0deg); }
+	to { transform: scale(1) rotate(360deg); }
+}
+
+@-webkit-keyframes spin2 {
+	from { -webkit-transform: rotate(0deg); }
+	to { -webkit-transform: rotate(360deg); }
+}
+
 @media (max-width: 768px) {
 	.dont-float {
 		float: left;
@@ -324,6 +360,7 @@ body {
 	word-break: break-word;
 	word-wrap: normal;
 	max-width: 400px;
+	min-width: 250px
 }
 
 #upload_history .popover {
diff --git a/public_html/data/js/application.js b/public_html/data/js/application.js
index 674f68008..d212ce04c 100644
--- a/public_html/data/js/application.js
+++ b/public_html/data/js/application.js
@@ -7,6 +7,7 @@ define(
 		'lexer-input',
 		'tabwidth-input',
 		'thumbnail-view',
+		'multipaste',
 		'uploader',
 		'tablesorter',
 		'jquery',
@@ -20,6 +21,7 @@ define(
 		LexerInput,
 		TabwidthInput,
 		ThumbnailView,
+		Multipaste,
 		Uploader,
 		TableSorter,
 		$
@@ -44,6 +46,7 @@ define(
 				TabwidthInput.initialize();
 				LexerInput.initialize();
 				ThumbnailView.initialize();
+				Multipaste.initialize();
 				Uploader.initialize();
 				TableSorter.initialize();
 				this.configureTooltips();
diff --git a/public_html/data/js/multipaste.js b/public_html/data/js/multipaste.js
new file mode 100644
index 000000000..21434ab0d
--- /dev/null
+++ b/public_html/data/js/multipaste.js
@@ -0,0 +1,86 @@
+(function () {
+'use strict';
+define(['underscore', 'util', 'jquery', 'jquery-ui'], function (_, Util, $) {
+	var ui = {
+		itemsContainer: ".multipasteQueue .items",
+		queueDeleteButton: ".multipaste_queue_delete",
+		submitButton: ".multipasteQueue button[type=submit]",
+		itemImages: ".multipasteQueue .items img",
+		form: ".multipasteQueue form",
+		csrfToken: "form input[name=csrf_test_name]",
+		ajaxFeedback: "form .ajaxFeedback",
+	};
+
+	var timer = 0;
+
+	var PrivateFunctions = {
+		setupQueueDeleteButtons: function() {
+			$(ui.queueDeleteButton).on('click', function(event) {
+				event.stopImmediatePropagation();
+				var id = $(event.target).data('id');
+				$(event.target).parent().remove();
+				PrivateFunctions.saveQueue();
+			});
+		},
+		setupTooltips: function() {
+			$(ui.itemImages).popover({
+				trigger: 'hover',
+				placement: 'auto bottom',
+				html: true
+			});
+		},
+		setupButtons: function() {
+			this.setupQueueDeleteButtons();
+		},
+		setupSortable: function() {
+			$(ui.itemsContainer).sortable({
+				revert: 100,
+				placeholder: "ui-state-highlight",
+				tolerance: "pointer",
+				stop: function(e, u) {
+					u.item.find("img").first().popover("show");
+				},
+				start: function(e, u) {
+					u.item.find("img").first().popover("show");
+				},
+				update: function(e, u) {
+					PrivateFunctions.saveQueue();
+				},
+			});
+
+			$(ui.itemsContainer).disableSelection();
+		},
+		saveQueue: function() {
+			var queue = $(ui.itemsContainer).sortable("toArray", {attribute: "data-id"});
+			console.log("queue changed ", queue);
+			clearTimeout(timer);
+			timer = setTimeout(function() {
+				var url = $(ui.form).data("ajax_url");
+				var csrf_token = $(ui.csrfToken).attr("value");
+				$(ui.ajaxFeedback).show();
+				$.ajax({
+					method: "POST",
+					url: url,
+					data: {
+						csrf_test_name: csrf_token,
+						ids: queue
+					},
+					complete: function() {
+						$(ui.ajaxFeedback).hide();
+					},
+				});
+			}, 2000);
+		},
+	};
+
+	var Multipaste = {
+		initialize: function () {
+			PrivateFunctions.setupButtons();
+			PrivateFunctions.setupSortable();
+			PrivateFunctions.setupTooltips();
+		},
+	};
+
+	return Multipaste;
+});
+})();
diff --git a/public_html/data/js/thumbnail-view.js b/public_html/data/js/thumbnail-view.js
index a2820069a..dc2f547ab 100644
--- a/public_html/data/js/thumbnail-view.js
+++ b/public_html/data/js/thumbnail-view.js
@@ -1,22 +1,22 @@
 (function () {
 'use strict';
-define(['jquery', 'underscore', 'jquery.colorbox'], function ($, _) {
+define(['jquery', 'underscore', 'multipaste', 'jquery.colorbox'], function ($, _, Multipaste) {
 	var ui = {
 		thumbnailLinks: '.upload_thumbnails a',
-		deleteButton: '#delete_button',
-		deleteForm: '#delete_form',
+		formButtons: '#submit_form button[type=submit]',
+		submitForm: '#submit_form',
 		markedThumbnails: '.upload_thumbnails .marked',
 		colorbox: '.colorbox',
 		thumbnails: '.upload_thumbnails',
-		toggleDeleteModeButton: '#toggle_delete_mode'
+		toggleSelectModeButton: '#toggle_select_mode',
 	};
 
 	var PrivateFunctions = {
-		inDeleteMode: false,
+		inSelectMode: false,
 
 		setupEvents: function () {
-			$(ui.toggleDeleteModeButton).on('click', _.bind(this.toggleDeleteMode, this));
-			$(ui.thumbnailLinks).on('click', _.bind(this.toggleMarkForDeletion, this));
+			$(ui.toggleSelectModeButton).on('click', _.bind(this.toggleSelectMode, this));
+			$(ui.thumbnailLinks).on('click', _.bind(this.thumbnailClick, this));
 			$(window).resize(_.bind(this.onResize, this));
 		},
 
@@ -53,39 +53,39 @@ define(['jquery', 'underscore', 'jquery.colorbox'], function ($, _) {
 			});
 		},
 
-		toggleDeleteMode: function () {
-			if (this.inDeleteMode) {
-				$(ui.deleteButton).hide();
-				$(ui.deleteForm).find('input').remove();
+		toggleSelectMode: function () {
+			if (this.inSelectMode) {
+				$(ui.formButtons).hide();
+				$(ui.submitForm).find('input').remove();
 				$(ui.markedThumbnails).removeClass('marked');
 				this.setupColorbox();
 			} else {
-				$(ui.deleteButton).show();
+				$(ui.formButtons).show();
 				this.removeColorbox();
 			}
-			this.inDeleteMode = !this.inDeleteMode;
+			this.inSelectMode = !this.inSelectMode;
 		},
 
-		deleteInput: function (id) {
+		submitInput: function (id) {
 			return $('<input>').attr({
 				type: 'hidden',
 				name: 'ids[' + id + ']',
 				value: id,
-				id: 'delete_' +id
+				id: 'submit_' +id
 			});
 		},
 
-		toggleMarkForDeletion: function (event) {
-			if (!this.inDeleteMode) { return; }
+		thumbnailClick: function (event) {
+			if (!this.inSelectMode) { return; }
 			event.preventDefault();
 			var id = $(event.target).closest('a').data('id');
 
-			var deleteInput = $(ui.deleteForm).find('input#delete_' + id);
+			var submitInput = $(ui.submitForm).find('input#submit_' + id);
 
-			if (deleteInput.length === 0) {
-				$(ui.deleteForm).append(this.deleteInput(id));
+			if (submitInput.length === 0) {
+				$(ui.submitForm).append(this.submitInput(id));
 			} else {
-				deleteInput.remove();
+				submitInput.remove();
 			}
 			$(event.target).closest('a').toggleClass('marked');
 		},