From c553bb64715f40d1755bb84c277442df88e3a925 Mon Sep 17 00:00:00 2001 From: Florian Pritz Date: Tue, 6 Sep 2016 14:02:31 +0200 Subject: Add multipaste queue Signed-off-by: Florian Pritz --- public_html/data/css/style.css | 32 ++++++++++++++ public_html/data/js/application.js | 3 ++ public_html/data/js/multipaste.js | 86 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 121 insertions(+) create mode 100644 public_html/data/js/multipaste.js (limited to 'public_html/data') diff --git a/public_html/data/css/style.css b/public_html/data/css/style.css index 57366d3d6..8868c5995 100644 --- a/public_html/data/css/style.css +++ b/public_html/data/css/style.css @@ -42,6 +42,38 @@ 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; +} + +.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; 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; +}); +})(); -- cgit v1.2.3-24-g4f1b From b78773f3fb954654515d551bef9cb8e68cd4b05a Mon Sep 17 00:00:00 2001 From: Florian Pritz Date: Tue, 6 Sep 2016 14:40:31 +0200 Subject: Support creation of multipaste from upload thumbnail history Signed-off-by: Florian Pritz --- public_html/data/js/thumbnail-view.js | 42 +++++++++++++++++------------------ 1 file changed, 21 insertions(+), 21 deletions(-) (limited to 'public_html/data') 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 $('').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'); }, -- cgit v1.2.3-24-g4f1b From 6b60e109bb3feff911af34b13acdc75f2f9487b2 Mon Sep 17 00:00:00 2001 From: Florian Pritz Date: Tue, 6 Sep 2016 14:40:56 +0200 Subject: Add multipaste queue button to navigation Signed-off-by: Florian Pritz --- public_html/data/css/style.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'public_html/data') diff --git a/public_html/data/css/style.css b/public_html/data/css/style.css index 8868c5995..18ff1ee4f 100644 --- a/public_html/data/css/style.css +++ b/public_html/data/css/style.css @@ -54,6 +54,10 @@ height: 160px; } +.nav li.multipaste_button a { + color: #fff; +} + .ajaxFeedback { display: inline-block; } -- cgit v1.2.3-24-g4f1b From b8890e5758a077e123ea9e1d5f07e55ce94d9deb Mon Sep 17 00:00:00 2001 From: Florian Pritz Date: Tue, 6 Sep 2016 14:41:50 +0200 Subject: Set minimum width for popovers This fixes some weird small-width popovers on the thumbnail history when a thumbnail is being moved around. Signed-off-by: Florian Pritz --- public_html/data/css/style.css | 1 + 1 file changed, 1 insertion(+) (limited to 'public_html/data') diff --git a/public_html/data/css/style.css b/public_html/data/css/style.css index 18ff1ee4f..166a00c12 100644 --- a/public_html/data/css/style.css +++ b/public_html/data/css/style.css @@ -360,6 +360,7 @@ body { word-break: break-word; word-wrap: normal; max-width: 400px; + min-width: 250px } #upload_history .popover { -- cgit v1.2.3-24-g4f1b