diff options
Diffstat (limited to 'public_html/data')
| -rw-r--r-- | public_html/data/css/style.css | 32 | ||||
| -rw-r--r-- | public_html/data/js/application.js | 3 | ||||
| -rw-r--r-- | public_html/data/js/multipaste.js | 86 |
3 files changed, 121 insertions, 0 deletions
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; +}); +})(); |