summaryrefslogtreecommitdiffstats
path: root/public_html
diff options
context:
space:
mode:
authorFlorian Pritz <bluewind@xinu.at>2016-11-01 17:27:20 +0100
committerFlorian Pritz <bluewind@xinu.at>2016-11-01 17:27:20 +0100
commitcb58719aa2db88fc810b1d5724ec9f6e7fdc984c (patch)
treeaf2055c6d513c4c3c3e3305e0539ed7f547581ab /public_html
parent9efd2db81ccf987a5455e0e4575c7d3f9072870f (diff)
parentc3d5786689bbc4a7f499f07cf1390afd800dc69a (diff)
Merge branch 'webui-multipaste' into dev
Diffstat (limited to 'public_html')
-rw-r--r--public_html/data/css/style.css37
-rw-r--r--public_html/data/js/application.js3
-rw-r--r--public_html/data/js/multipaste.js86
-rw-r--r--public_html/data/js/thumbnail-view.js42
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');
},