ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added ability to stop uploads

Browse source
This commit is contained in:
Marcin Kurczewski 2014-10-11 18:22:32 +02:00
parent 02294a355d
commit 6bb5b53377
4 changed files with 188 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public_html/css/forms.css
View file

@ -69,7 +69,9 @@ input[type=button] {
position: relative; position: relative;
padding: 2px 15px 3px 15px; padding: 2px 15px 3px 15px;
border: 0; border: 0;
box-shadow: 0 1px 1px 0 #e5e5e5, 0 0 0 1px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 1px 0 #e5e5e5,
0 0 0 1px rgba(0, 0, 0, 0.15) inset,
0 5px 1px -4px white inset;
color: #444; color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(255, 255, 255, 0.5);
font-family: 'Droid Sans', sans-serif; font-family: 'Droid Sans', sans-serif;
@ -103,6 +105,10 @@ button.highlight::before,
input[type=button].highlight::before { input[type=button].highlight::before {
background: linear-gradient(rgb(160, 221, 251), rgb(101, 188, 239)); background: linear-gradient(rgb(160, 221, 251), rgb(101, 188, 239));
} }
button.highlight-red::before,
input[type=button].highlight-red::before {
background: linear-gradient(rgba(255, 181, 143, 1), rgba(255, 148, 122, 1));
}
button:focus, button:focus,
textarea:focus, textarea:focus,

3
public_html/css/post-upload.css
View file

@ -106,6 +106,9 @@
display: inline-block; display: inline-block;
margin: 0.3em 0.3em 0 0; margin: 0.3em 0.3em 0 0;
} }
#post-upload-step2 .operations .stop {
display: none;
}
#post-upload-step2 form { #post-upload-step2 form {
width: 100%; width: 100%;

315
public_html/js/Presenters/PostUploadPresenter.js
View file

@ -22,6 +22,7 @@ App.Presenters.PostUploadPresenter = function(
var tagInput; var tagInput;
var fileDropper; var fileDropper;
var interactionEnabled = true; var interactionEnabled = true;
var stopNextUpload = false;
function init(params, loaded) { function init(params, loaded) {
topNavigationPresenter.select('upload'); topNavigationPresenter.select('upload');
@ -58,7 +59,8 @@ App.Presenters.PostUploadPresenter = function(
$el.find('.remove').click(removeButtonClicked); $el.find('.remove').click(removeButtonClicked);
$el.find('.move-up').click(moveUpButtonClicked); $el.find('.move-up').click(moveUpButtonClicked);
$el.find('.move-down').click(moveDownButtonClicked); $el.find('.move-down').click(moveDownButtonClicked);
$el.find('.submit').click(submitButtonClicked); $el.find('.upload').click(uploadButtonClicked);
$el.find('.stop').click(stopButtonClicked);
} }
function getDefaultPost() { function getDefaultPost() {
@ -113,35 +115,6 @@ App.Presenters.PostUploadPresenter = function(
} }
} }
function addPostFromFile(file) {
var post = _.extend({}, getDefaultPost(), {fileName: file.name});
fileDropper.readAsDataURL(file, function(content) {
post.content = content;
if (file.type.match('image.*')) {
post.thumbnail = content;
postThumbnailLoaded(post);
}
});
postAdded(post);
}
function addPostFromUrl(url) {
var post = _.extend({}, getDefaultPost(), {url: url, source: url, fileName: url});
postAdded(post);
var matches = url.match(/watch.*?=([a-zA-Z0-9_-]+)/);
if (matches) {
var youtubeThumbnailUrl = 'http://img.youtube.com/vi/' + matches[1] + '/mqdefault.jpg';
post.thumbnail = youtubeThumbnailUrl;
postThumbnailLoaded(post);
} else if (url.match(/image|img|jpg|png|gif/i)) {
post.thumbnail = url;
postThumbnailLoaded(post);
}
}
function postAdded(post) { function postAdded(post) {
var allPosts = getAllPosts(); var allPosts = getAllPosts();
allPosts.push(post); allPosts.push(post);
@ -153,34 +126,6 @@ App.Presenters.PostUploadPresenter = function(
updatePostTableRow(post); updatePostTableRow(post);
} }
function createPostTableRow(post) {
var $table = $el.find('table');
var $row = $table.find('.template').clone(true);
post.$tableRow = $row;
$row.removeClass('template');
$row.find('td:not(.checkbox)').click(postTableRowClicked);
$row.find('td.checkbox').click(postTableCheckboxClicked);
$row.find('img').mouseenter(postTableRowImageHovered);
$row.find('img').mouseleave(postTableRowImageUnhovered);
$row.data('post', post);
$table.find('tbody').append($row);
$row.find('td.checkbox input').attr('id', _.uniqueId());
$row.find('td.checkbox label').attr('for', $row.find('td.checkbox input').attr('id'));
postChanged(post);
selectPostTableRow(post);
showOrHidePostsTable();
}
function updatePostTableRow(post) {
var $row = post.$tableRow;
$row.find('.tags').text(post.tags.join(', ') || '-');
$row.find('.safety div').attr('class', 'safety-' + post.safety);
}
function postThumbnailLoaded(post) { function postThumbnailLoaded(post) {
var selectedPosts = getSelectedPosts(); var selectedPosts = getSelectedPosts();
if (selectedPosts.length === 1 && selectedPosts[0] === post && post.thumbnail !== null) { if (selectedPosts.length === 1 && selectedPosts[0] === post && post.thumbnail !== null) {
@ -189,24 +134,6 @@ App.Presenters.PostUploadPresenter = function(
updatePostThumbnailInTable(post); updatePostThumbnailInTable(post);
} }
function updatePostThumbnailInForm(post) {
if (post.thumbnail === null) {
$el.find('.form-slider .thumbnail img').hide();
} else {
$el.find('.form-slider .thumbnail img').show()[0].setAttribute('src', post.thumbnail);
}
}
function updatePostThumbnailInTable(post) {
var $row = post.$tableRow;
if (post.thumbnail === null) {
$row.find('img')[0].setAttribute('src', util.transparentPixel());
//huge speedup thanks to this condition
} else if ($row.find('img').attr('src') !== post.thumbnail) {
$row.find('img')[0].setAttribute('src', post.thumbnail);
}
}
function postTableRowClicked(e) { function postTableRowClicked(e) {
e.preventDefault(); e.preventDefault();
if (!interactionEnabled) { if (!interactionEnabled) {
@ -245,7 +172,6 @@ App.Presenters.PostUploadPresenter = function(
} }
function postTableCheckboxesChanged(e) { function postTableCheckboxesChanged(e) {
var $table = $el.find('table');
if (!interactionEnabled) { if (!interactionEnabled) {
if (typeof(e) !== 'undefined') { if (typeof(e) !== 'undefined') {
e.preventDefault(); e.preventDefault();
@ -253,6 +179,7 @@ App.Presenters.PostUploadPresenter = function(
return; return;
} }
var $table = $el.find('table');
$table.find('tbody tr').each(function(i, row) { $table.find('tbody tr').each(function(i, row) {
var $row = jQuery(row); var $row = jQuery(row);
var checked = $row.find('input[type=checkbox]').prop('checked'); var checked = $row.find('input[type=checkbox]').prop('checked');
@ -265,6 +192,129 @@ App.Presenters.PostUploadPresenter = function(
postTableSelectionChanged(selectedPosts); postTableSelectionChanged(selectedPosts);
} }
function postTableRowImageHovered(e) {
var $img = jQuery(this);
if ($img.parents('tr').data('post').thumbnail) {
var $lightbox = jQuery('#lightbox');
$lightbox.find('img').attr('src', $img.attr('src'));
$lightbox
.show()
.css({
left: ($img.position().left + $img.outerWidth()) + 'px',
top: ($img.position().top + ($img.outerHeight() - $lightbox.outerHeight()) / 2) + 'px',
});
}
}
function postTableRowImageUnhovered(e) {
jQuery('#lightbox').hide();
}
function removeButtonClicked(e) {
e.preventDefault();
removePosts(getSelectedPosts());
}
function moveUpButtonClicked(e) {
e.preventDefault();
movePostsUp(getSelectedPosts());
}
function moveDownButtonClicked(e) {
e.preventDefault();
movePostsDown(getSelectedPosts());
}
function uploadButtonClicked(e) {
e.preventDefault();
if (!interactionEnabled) {
return;
}
startUpload();
}
function stopButtonClicked(e) {
e.preventDefault();
if (!uploadStopped()) {
stopUpload();
}
}
function addPostFromFile(file) {
var post = _.extend({}, getDefaultPost(), {fileName: file.name});
fileDropper.readAsDataURL(file, function(content) {
post.content = content;
if (file.type.match('image.*')) {
post.thumbnail = content;
postThumbnailLoaded(post);
}
});
postAdded(post);
}
function addPostFromUrl(url) {
var post = _.extend({}, getDefaultPost(), {url: url, source: url, fileName: url});
postAdded(post);
var matches = url.match(/watch.*?=([a-zA-Z0-9_-]+)/);
if (matches) {
var youtubeThumbnailUrl = 'http://img.youtube.com/vi/' + matches[1] + '/mqdefault.jpg';
post.thumbnail = youtubeThumbnailUrl;
postThumbnailLoaded(post);
} else if (url.match(/image|img|jpg|png|gif/i)) {
post.thumbnail = url;
postThumbnailLoaded(post);
}
}
function createPostTableRow(post) {
var $table = $el.find('table');
var $row = $table.find('.template').clone(true);
post.$tableRow = $row;
$row.removeClass('template');
$row.find('td:not(.checkbox)').click(postTableRowClicked);
$row.find('td.checkbox').click(postTableCheckboxClicked);
$row.find('img').mouseenter(postTableRowImageHovered);
$row.find('img').mouseleave(postTableRowImageUnhovered);
$row.data('post', post);
$table.find('tbody').append($row);
$row.find('td.checkbox input').attr('id', _.uniqueId());
$row.find('td.checkbox label').attr('for', $row.find('td.checkbox input').attr('id'));
postChanged(post);
selectPostTableRow(post);
showOrHidePostsTable();
}
function updatePostTableRow(post) {
var $row = post.$tableRow;
$row.find('.tags').text(post.tags.join(', ') || '-');
$row.find('.safety div').attr('class', 'safety-' + post.safety);
}
function updatePostThumbnailInForm(post) {
if (post.thumbnail === null) {
$el.find('.form-slider .thumbnail img').hide();
} else {
$el.find('.form-slider .thumbnail img').show()[0].setAttribute('src', post.thumbnail);
}
}
function updatePostThumbnailInTable(post) {
var $row = post.$tableRow;
if (post.thumbnail === null) {
$row.find('img')[0].setAttribute('src', util.transparentPixel());
//huge speedup thanks to this condition
} else if ($row.find('img').attr('src') !== post.thumbnail) {
$row.find('img')[0].setAttribute('src', post.thumbnail);
}
}
function getAllPosts() { function getAllPosts() {
return allPosts; return allPosts;
} }
@ -273,21 +323,16 @@ App.Presenters.PostUploadPresenter = function(
allPosts = newPosts; allPosts = newPosts;
} }
function setAllPostsFromTable() { function syncPostsWithTable() {
var newPosts = _.map($el.find('tbody tr'), function(row) { setAllPosts(_.map($el.find('tbody tr'), function(row) {
var $row = jQuery(row); return jQuery(row).data('post');
return $row.data('post'); }));
});
setAllPosts(newPosts);
} }
function getSelectedPosts() { function getSelectedPosts() {
var selectedPosts = []; return _.map($el.find('tbody tr.selected'), function(row) {
$el.find('tbody tr.selected').each(function(i, row) { return jQuery(row).data('post');
var $row = jQuery(row);
selectedPosts.push($row.data('post'));
}); });
return selectedPosts;
} }
function postTableSelectionChanged(selectedPosts) { function postTableSelectionChanged(selectedPosts) {
@ -419,25 +464,6 @@ App.Presenters.PostUploadPresenter = function(
}); });
} }
function postTableRowImageHovered(e) {
var $img = jQuery(this);
if ($img.parents('tr').data('post').thumbnail) {
var $lightbox = jQuery('#lightbox');
$lightbox.find('img').attr('src', $img.attr('src'));
$lightbox
.show()
.css({
left: ($img.position().left + $img.outerWidth()) + 'px',
top: ($img.position().top + ($img.outerHeight() - $lightbox.outerHeight()) / 2) + 'px',
});
}
}
function postTableRowImageUnhovered(e) {
var $lightbox = jQuery('#lightbox');
$lightbox.hide();
}
function selectPostTableRow(post) { function selectPostTableRow(post) {
if (post) { if (post) {
var $table = $el.find('table'); var $table = $el.find('table');
@ -471,26 +497,11 @@ App.Presenters.PostUploadPresenter = function(
} }
} }
function removeButtonClicked(e) {
e.preventDefault();
removePosts(getSelectedPosts());
}
function moveUpButtonClicked(e) {
e.preventDefault();
movePostsUp(getSelectedPosts());
}
function moveDownButtonClicked(e) {
e.preventDefault();
movePostsDown(getSelectedPosts());
}
function removePosts(posts) { function removePosts(posts) {
_.each(posts, function(post) { _.each(posts, function(post) {
post.$tableRow.remove(); post.$tableRow.remove();
}); });
setAllPostsFromTable(); syncPostsWithTable();
showOrHidePostsTable(); showOrHidePostsTable();
postTableCheckboxesChanged(); postTableCheckboxesChanged();
} }
@ -500,7 +511,7 @@ App.Presenters.PostUploadPresenter = function(
var $row = post.$tableRow; var $row = post.$tableRow;
$row.insertBefore($row.prev('tr:not(.selected)')); $row.insertBefore($row.prev('tr:not(.selected)'));
}); });
setAllPostsFromTable(); syncPostsWithTable();
} }
function movePostsDown(posts) { function movePostsDown(posts) {
@ -508,16 +519,38 @@ App.Presenters.PostUploadPresenter = function(
var $row = post.$tableRow; var $row = post.$tableRow;
$row.insertAfter($row.next('tr:not(.selected)')); $row.insertAfter($row.next('tr:not(.selected)'));
}); });
setAllPostsFromTable(); syncPostsWithTable();
}
function startUpload() {
$el.find('tbody input[type=checkbox]').prop('checked', false);
postTableCheckboxesChanged();
$el.find('.upload').hide();
$el.find('.stop').show();
interactionEnabled = false;
uploadNextPost();
}
function uploadStopped() {
return stopNextUpload;
}
function stopUpload() {
stopNextUpload = true;
} }
function uploadNextPost() { function uploadNextPost() {
messagePresenter.hideMessages($messages); messagePresenter.hideMessages($messages);
if (uploadStopped()) {
showUploadError('Upload stopped.');
return;
}
var posts = getAllPosts(); var posts = getAllPosts();
if (posts.length === 0) { if (posts.length === 0) {
util.disableExitConfirmation(); onUploadCompleted();
router.navigate('#/posts');
return; return;
} }
@ -538,9 +571,7 @@ App.Presenters.PostUploadPresenter = function(
formData.tags = post.tags.join(' '); formData.tags = post.tags.join(' ');
if (post.tags.length === 0) { if (post.tags.length === 0) {
messagePresenter.hideMessages($messages); showUploadError('No tags set.');
messagePresenter.showError($messages, 'No tags set.');
interactionEnabled = true;
return; return;
} }
@ -553,24 +584,22 @@ App.Presenters.PostUploadPresenter = function(
uploadNextPost(); uploadNextPost();
}); });
}).fail(function(response) { }).fail(function(response) {
messagePresenter.hideMessages($messages); showUploadError(response.json && response.json.error || response);
messagePresenter.showError($messages, response.json && response.json.error || response);
interactionEnabled = true;
}); });
} }
function submitButtonClicked(e) { function onUploadCompleted() {
e.preventDefault(); util.disableExitConfirmation();
if (!interactionEnabled) { router.navigate('#/posts');
return;
} }
$el.find('tbody input[type=checkbox]').prop('checked', false); function showUploadError(message) {
postTableCheckboxesChanged(); $el.find('.upload').show();
$el.find('.stop').hide();
interactionEnabled = false; messagePresenter.hideMessages($messages);
uploadNextPost(); messagePresenter.showError($messages, message);
interactionEnabled = true;
stopNextUpload = false;
} }
return { return {

7
public_html/templates/post-upload.tpl
View file

@ -57,8 +57,11 @@
--><li> --><li>
<button class="post-table-op move-down"><i class="fa fa-chevron-down"></i> Move down</button> <button class="post-table-op move-down"><i class="fa fa-chevron-down"></i> Move down</button>
</li><!-- </li><!--
--><li class="right"> --><li>
<button class="submit highlight" type="submit"><i class="fa fa-upload"></i> Submit</button> <button class="upload highlight" type="submit"><i class="fa fa-upload"></i> Submit</button>
</li><!--
--><li>
<button class="stop highlight-red" type="submit"><i class="fa fa-times-circle"></i> Stop</button>
</li><!-- </li><!--
--></ul> --></ul>