Changed post upload form
This commit is contained in:
Marcin Kurczewski
parent
6eac6afbeb
commit
a2c8ceecc4
3 changed files with 817 additions and 346 deletions
|
|
@ -10,7 +10,8 @@
|
|||
|
||||
#upload-step1 {
|
||||
display: table;
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#file-handler-wrapper {
|
||||
display: table;
|
||||
|
|
@ -44,77 +45,85 @@
|
|||
width: 8em;
|
||||
}
|
||||
|
||||
.post .thumbnail {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
#hybrid-view {
|
||||
text-align: center;
|
||||
}
|
||||
.thumbnail img {
|
||||
background-image: url('../img/thumb.jpg');
|
||||
background-size: 150px 150px;
|
||||
border: 1px solid black;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#posts-wrapper {
|
||||
width: 40%;
|
||||
margin-right: 1em;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.post .alert,
|
||||
#upload-step2,
|
||||
#post-template {
|
||||
display: none;
|
||||
#posts {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin: 2em 0;
|
||||
#posts td,
|
||||
#posts th {
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
|
||||
.post .ops {
|
||||
float: right;
|
||||
#posts th {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.post .ops a {
|
||||
cursor: pointer;
|
||||
margin-left: 1.5em;
|
||||
vertical-align: middle;
|
||||
#posts tr.selected {
|
||||
background: lemonchiffon;
|
||||
}
|
||||
.post a span {
|
||||
margin-left: 0.25em;
|
||||
vertical-align: middle;
|
||||
#posts .tags {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.post .move-up-trigger,
|
||||
.post .move-down-trigger {
|
||||
color: rgba(0, 64, 128, 0.5);
|
||||
#posts .safety {
|
||||
text-align: center;
|
||||
}
|
||||
.post .move-up-trigger:hover,
|
||||
.post .move-down-trigger:hover {
|
||||
color: #00f;
|
||||
#posts .safety [class^=safety-] {
|
||||
box-shadow: inset 0 0 0 3px rgba(0,0,0,0.1);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.post .move-up-trigger span,
|
||||
.post .move-down-trigger span {
|
||||
color: rgba(0, 64, 128, 1);
|
||||
#posts .safety-safe { background: #b2efa2; }
|
||||
#posts .safety-sketchy { background: #f0e4a8; }
|
||||
#posts .safety-unsafe { background: #fbc6b6; }
|
||||
#posts .thumbnail img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-size: 30px 30px;
|
||||
}
|
||||
|
||||
.post:first-child .move-up-trigger {
|
||||
display: none;
|
||||
#post-ops {
|
||||
list-style-type: none;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.post:last-child .move-down-trigger {
|
||||
display: none;
|
||||
#post-ops li {
|
||||
display: inline-block;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
|
||||
.post .remove-trigger {
|
||||
color: rgba(128, 0, 0, 0.5);
|
||||
#post-edit-form-wrapper {
|
||||
display: inline-block;
|
||||
width: 57.5%;
|
||||
}
|
||||
.post .remove-trigger:hover {
|
||||
color: #f00;
|
||||
#post-edit-form-wrapper p {
|
||||
margin-top: 0;
|
||||
}
|
||||
.post .remove-trigger span {
|
||||
color: rgba(128, 0, 0, 1);
|
||||
font-size: 130%;
|
||||
#post-edit-form {
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.post .file-name strong {
|
||||
#post-edit-form .thumbnail img {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
margin: 0 auto 1em auto;
|
||||
}
|
||||
#post-edit-form .file-name strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
|
|
@ -124,14 +133,13 @@
|
|||
line-height: 30px;
|
||||
}
|
||||
|
||||
.safety-safe {
|
||||
color: #43aa43;
|
||||
}
|
||||
.safety-sketchy {
|
||||
color: #d4a627;
|
||||
}
|
||||
.safety-unsafe {
|
||||
color: #df4b0d;
|
||||
|
||||
#post-edit-form,
|
||||
#upload-step2,
|
||||
#posts-wrapper,
|
||||
.alert,
|
||||
.template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.tagit {
|
||||
|
|
@ -141,33 +149,48 @@ ul.tagit {
|
|||
font-size: 1em;
|
||||
}
|
||||
|
||||
.submit-wrapper {
|
||||
#the-submit-wrapper {
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
#the-submit {
|
||||
margin: 0 auto;
|
||||
margin: 1em auto;
|
||||
font-size: 14.5pt;
|
||||
padding: 0.35em 2em;
|
||||
height: auto;
|
||||
line-height: auto;
|
||||
}
|
||||
|
||||
.post .form-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
.post form {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#lightbox {
|
||||
display: none;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#lightbox img {
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
margin-top: -50%;
|
||||
margin-left: -50%;
|
||||
background: white;
|
||||
border: 0.5em solid white;
|
||||
box-shadow: 0 0 0 3px #eee;
|
||||
box-shadow: 0 0 0 1px #eee;
|
||||
position: relative;
|
||||
}
|
||||
#lightbox:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: white;
|
||||
border-left: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#uploading-alert {
|
||||
display: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,21 @@
|
|||
$(function()
|
||||
{
|
||||
$('.tabs a').click(function(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
var className = $(this).parents('li').attr('class').replace('selected', '').replace(/^\s+|\s+$/, '');
|
||||
$('.tabs li').removeClass('selected');
|
||||
$(this).parents('li').addClass('selected');
|
||||
$('.tab-content').hide();
|
||||
$('.tab-content.' + className).show();
|
||||
});
|
||||
var localPostId = 0;
|
||||
|
||||
function Post()
|
||||
{
|
||||
var post = this;
|
||||
this.id = ++localPostId;
|
||||
this.url = '';
|
||||
this.file = null;
|
||||
this.fileName = '';
|
||||
this.safety = 1;
|
||||
this.source = '';
|
||||
this.tags = [];
|
||||
this.anonymous = false;
|
||||
this.thumbnail = null;
|
||||
}
|
||||
|
||||
function bindFileHandlerEvents()
|
||||
{
|
||||
$('#file-handler').on('dragenter', function(e)
|
||||
{
|
||||
$(this).addClass('active');
|
||||
|
|
@ -22,7 +28,7 @@ $(function()
|
|||
}).on('drop', function(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
handleFiles(e.originalEvent.dataTransfer.files);
|
||||
addFiles(e.originalEvent.dataTransfer.files);
|
||||
$(this).trigger('dragleave');
|
||||
}).on('click', function(e)
|
||||
{
|
||||
|
|
@ -31,11 +37,12 @@ $(function()
|
|||
|
||||
$(':file').change(function(e)
|
||||
{
|
||||
handleFiles(this.files);
|
||||
addFiles(this.files);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function bindUrlHandlerEvents()
|
||||
{
|
||||
$('#url-handler-wrapper input').keydown(function(e)
|
||||
{
|
||||
if (e.which == 13)
|
||||
|
|
@ -51,105 +58,606 @@ $(function()
|
|||
if (url == '')
|
||||
return;
|
||||
$('#url-handler-wrapper input').val('');
|
||||
handleURLs([url]);
|
||||
addURLs([url]);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
$('.post .move-down-trigger, .post .move-up-trigger').on('click', function()
|
||||
function bindPostTableOperations()
|
||||
{
|
||||
$('#upload-step2').find('.remove').click(function(e)
|
||||
{
|
||||
if ($('#the-submit').hasClass('inactive'))
|
||||
return;
|
||||
var dir = $(this).hasClass('move-down-trigger') ? 'd' : 'u';
|
||||
var post = $(this).parents('.post');
|
||||
if (dir == 'u')
|
||||
post.insertBefore(post.prev('.post'));
|
||||
else
|
||||
post.insertAfter(post.next('.post'));
|
||||
e.preventDefault();
|
||||
removePosts(getSelectedPosts());
|
||||
});
|
||||
$('.post .remove-trigger').on('click', function()
|
||||
$('#upload-step2').find('.move-up').click(function(e)
|
||||
{
|
||||
if ($('#the-submit').hasClass('inactive'))
|
||||
e.preventDefault();
|
||||
movePostsUp(getSelectedPosts());
|
||||
});
|
||||
$('#upload-step2').find('.move-down').click(function(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
movePostsDown(getSelectedPosts());
|
||||
});
|
||||
}
|
||||
|
||||
function bindPostTableRowLightboxEvents(postTableRow)
|
||||
{
|
||||
var img = $(postTableRow).find('img');
|
||||
img.unbind('mouseenter').bind('mouseenter', function(e)
|
||||
{
|
||||
if (!img.attr('src'))
|
||||
return;
|
||||
$(this).parents('.post').slideUp(function()
|
||||
|
||||
$('#lightbox img').attr('src', $(this).attr('src'));
|
||||
$('#lightbox')
|
||||
.show()
|
||||
.position({
|
||||
of: $(this),
|
||||
my: 'left+10 center',
|
||||
at: 'right center',
|
||||
});
|
||||
});
|
||||
img.bind('mouseleave', function(e)
|
||||
{
|
||||
$('#lightbox').hide();
|
||||
});
|
||||
}
|
||||
|
||||
function bindPostTableRowSelectEvent(tableRow)
|
||||
{
|
||||
tableRow.find('td.checkbox').click(function(e)
|
||||
{
|
||||
if (e.target.nodeName == 'TD')
|
||||
{
|
||||
$(this).remove();
|
||||
handleInputs([]);
|
||||
});
|
||||
var checkbox = $(this).find('input[type=checkbox]');
|
||||
checkbox.prop('checked', !checkbox.prop('checked'));
|
||||
}
|
||||
postTableCheckboxesChangedEventHandler();
|
||||
});
|
||||
}
|
||||
|
||||
function bindSelectAllEvent()
|
||||
{
|
||||
$('#posts thead th.checkbox').click(function(e)
|
||||
{
|
||||
var checkbox = $(this).find('input[type=checkbox]');
|
||||
if (e.target.nodeName == 'TH')
|
||||
checkbox.prop('checked', !checkbox.prop('checked'));
|
||||
$('#posts tbody input[type=checkbox]').prop('checked', checkbox.prop('checked'));
|
||||
postTableCheckboxesChangedEventHandler();
|
||||
});
|
||||
}
|
||||
|
||||
function bindPostTagChangeEvents(form, posts)
|
||||
{
|
||||
form.find('[name=tags]').tagit(
|
||||
{
|
||||
beforeTagAdded: function(e, ui) { addTagToPosts(posts, ui.tagLabel); },
|
||||
beforeTagRemoved: function(e, ui) { removeTagFromPosts(posts, ui.tagLabel); }
|
||||
});
|
||||
}
|
||||
|
||||
function bindPostAnonymityChangeEvent(form, posts)
|
||||
{
|
||||
form.find('[name=anonymous]').unbind('change').bind('change', function(e)
|
||||
{
|
||||
setPostsAnonymity(posts, $(e.target).is(':checked'));
|
||||
});
|
||||
}
|
||||
|
||||
function bindPostSafetyChangeEvent(form, posts)
|
||||
{
|
||||
form.find('[name=safety]').unbind('change').bind('change', function(e)
|
||||
{
|
||||
changePostsSafety(posts, $(this).val());
|
||||
});
|
||||
}
|
||||
|
||||
function bindPostSourceChangeEvent(form, posts)
|
||||
{
|
||||
form.find('[name=source]').unbind('change').bind('change', function(e)
|
||||
{
|
||||
changePostsSource(posts, $(this).val());
|
||||
});
|
||||
}
|
||||
|
||||
function addFiles(files)
|
||||
{
|
||||
var posts = [];
|
||||
$.each(files, function(i, file)
|
||||
{
|
||||
var post = new Post();
|
||||
post.file = file;
|
||||
post.fileName = file.name;
|
||||
|
||||
if (file.type.match('image.*'))
|
||||
{
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e)
|
||||
{
|
||||
post.thumbnail = e.target.result;
|
||||
updateThumbInForm(post);
|
||||
updatePostTableRow(post);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
posts.push(post);
|
||||
});
|
||||
|
||||
createTableRowsForPosts(posts);
|
||||
}
|
||||
|
||||
function updateThumbInForm(post)
|
||||
{
|
||||
var selectedPosts = getSelectedPosts();
|
||||
if (selectedPosts.length == 1 && selectedPosts[0] == post && post.thumbnail != null)
|
||||
$('#post-edit-form img')[0].setAttribute('src', post.thumbnail);
|
||||
}
|
||||
|
||||
function sendNextPost()
|
||||
function addURLs(urls)
|
||||
{
|
||||
var posts = [];
|
||||
$.each(urls, function(i, url)
|
||||
{
|
||||
var posts = $('#upload-step2 .post');
|
||||
if (posts.length == 0)
|
||||
post = new Post();
|
||||
post.url = url;
|
||||
post.fileName = url;
|
||||
post.source = url;
|
||||
|
||||
if (matches = url.match(/watch.*?=([a-zA-Z0-9_-]+)/))
|
||||
{
|
||||
uploadFinished();
|
||||
return;
|
||||
var realUrl = 'http://img.youtube.com/vi/' + matches[1] + '/mqdefault.jpg';
|
||||
post.thumbnail = realUrl;
|
||||
}
|
||||
else
|
||||
{
|
||||
post.thumbnail = '/posts/upload/thumb/' + btoa(url);
|
||||
}
|
||||
|
||||
var postDom = posts.first();
|
||||
var url = postDom.find('form').attr('action');
|
||||
var fd = new FormData(postDom.find('form').get(0));
|
||||
posts.push(post);
|
||||
});
|
||||
|
||||
fd.append('file', postDom.data('file'));
|
||||
fd.append('url', postDom.data('url'));
|
||||
createTableRowsForPosts(posts);
|
||||
}
|
||||
|
||||
function createTableRowsForPosts(posts)
|
||||
{
|
||||
$.each(posts, function(i, post)
|
||||
{
|
||||
var tableRow = $('#posts .template').clone(true);
|
||||
tableRow.removeClass('template');
|
||||
tableRow.find('td:not(.checkbox)').click(postTableRowClickEventHandler);
|
||||
bindPostTableRowSelectEvent(tableRow);
|
||||
bindPostTableRowLightboxEvents(tableRow);
|
||||
tableRow.data('post', post);
|
||||
tableRow.data('post-id', post.id);
|
||||
$('#posts tbody').append(tableRow);
|
||||
updatePostTableRow(post);
|
||||
});
|
||||
|
||||
var ajaxData =
|
||||
{
|
||||
url: url,
|
||||
data: fd,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
dataType: 'json',
|
||||
success: function(data)
|
||||
{
|
||||
postDom.slideUp(function()
|
||||
{
|
||||
postDom.remove();
|
||||
sendNextPost();
|
||||
});
|
||||
},
|
||||
error: function(xhr)
|
||||
{
|
||||
postDom
|
||||
.find('.alert')
|
||||
.html(xhr.responseJSON
|
||||
? xhr.responseJSON.messageHtml
|
||||
: 'Fatal error')
|
||||
.slideDown();
|
||||
enableUpload();
|
||||
}
|
||||
};
|
||||
selectPostTableRow(posts[0]);
|
||||
updateSelectAllState();
|
||||
showOrHidePostsTable();
|
||||
}
|
||||
|
||||
postJSON(ajaxData);
|
||||
}
|
||||
|
||||
function uploadFinished()
|
||||
function showOrHidePostsTable()
|
||||
{
|
||||
var numberOfPosts = $('#posts tbody tr').length;
|
||||
if (numberOfPosts == 0)
|
||||
{
|
||||
disableExitConfirmation();
|
||||
window.location.href = $('#upload-step2').attr('data-redirect-url');
|
||||
$('#upload-step2').fadeOut();
|
||||
}
|
||||
else
|
||||
{
|
||||
enableExitConfirmation();
|
||||
$('#upload-step2').fadeIn();
|
||||
$('#posts-wrapper').show();
|
||||
/*if (numberOfPosts == 1)
|
||||
{
|
||||
$('#hybrid-view').append($('#the-submit-wrapper'));
|
||||
$('#posts-wrapper').hide('slide', {direction: 'left'});
|
||||
selectPostTableRow($('#posts tbody tr').eq(0).data('post'));
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#posts-wrapper').append($('#the-submit-wrapper'));
|
||||
$('#posts-wrapper').show('slide', {direction: 'right'});
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
function removePosts(posts)
|
||||
{
|
||||
var postTableRows = getPostTableRows(posts);
|
||||
$.each(postTableRows, function(i, postTableRow)
|
||||
{
|
||||
postTableRow.remove();
|
||||
});
|
||||
showOrHidePostsTable();
|
||||
postTableCheckboxesChangedEventHandler();
|
||||
}
|
||||
|
||||
function movePostsUp(posts)
|
||||
{
|
||||
var postTableRows = getPostTableRows(posts);
|
||||
$.each(postTableRows, function(i, postTableRow)
|
||||
{
|
||||
var postTableRow = $(postTableRow);
|
||||
postTableRow.insertBefore(postTableRow.prev('tr:not(.selected)'));
|
||||
});
|
||||
}
|
||||
|
||||
function movePostsDown(posts)
|
||||
{
|
||||
var postTableRows = getPostTableRows(posts).reverse();
|
||||
$.each(postTableRows, function(i, postTableRow)
|
||||
{
|
||||
var postTableRow = $(postTableRow);
|
||||
postTableRow.insertAfter(postTableRow.next('tr:not(.selected)'));
|
||||
});
|
||||
}
|
||||
|
||||
function selectPostTableRow(post)
|
||||
{
|
||||
$('#posts tbody input[type=checkbox]').prop('checked', false);
|
||||
$('#posts tbody tr').each(function(i, postTableRow)
|
||||
{
|
||||
if (post == $(postTableRow).data('post'))
|
||||
{
|
||||
$(this).find('input[type=checkbox]').prop('checked', true);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
postTableCheckboxesChangedEventHandler();
|
||||
}
|
||||
|
||||
function postTableRowClickEventHandler(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
|
||||
var allCheckboxes = $(this).parents('table').find('tbody input[type=checkbox]');
|
||||
var myCheckbox = $(this).parents('tr').find('input[type=checkbox]');
|
||||
allCheckboxes.prop('checked', false);
|
||||
myCheckbox.prop('checked', true);
|
||||
postTableCheckboxesChangedEventHandler();
|
||||
}
|
||||
|
||||
function updateSelectAllState()
|
||||
{
|
||||
var numberOfAllPosts = $('#posts tbody tr').length;
|
||||
var numberOfSelectedPosts = $('#posts tbody tr.selected').length;
|
||||
$('#posts [name=select-all]').prop('checked', numberOfSelectedPosts == numberOfAllPosts);
|
||||
}
|
||||
|
||||
function postTableCheckboxesChangedEventHandler(e)
|
||||
{
|
||||
if ($('#posts').hasClass('disabled'))
|
||||
{
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
function disableUpload()
|
||||
$('#posts tbody tr').each(function(i, postRow)
|
||||
{
|
||||
var theSubmit = $('#the-submit');
|
||||
theSubmit.addClass('inactive');
|
||||
var posts = $('#upload-step2 .post');
|
||||
posts.find(':input').attr('readonly', true);
|
||||
posts.addClass('inactive');
|
||||
var checked = $(this).find('input[type=checkbox]').prop('checked');
|
||||
$(postRow).toggleClass('selected', checked);
|
||||
});
|
||||
|
||||
var allPosts = getAllPendingPosts();
|
||||
var selectedPosts = getSelectedPosts();
|
||||
updateSelectAllState();
|
||||
|
||||
if (selectedPosts.length == 0)
|
||||
hideForm();
|
||||
else
|
||||
showFormForPosts(selectedPosts);
|
||||
}
|
||||
|
||||
function getPostIds(posts)
|
||||
{
|
||||
var postIds = [];
|
||||
for (var i = 0; i < posts.length; i ++)
|
||||
postIds.push(posts[i].id);
|
||||
return postIds;
|
||||
}
|
||||
|
||||
function getPostTableRows(posts)
|
||||
{
|
||||
var postTableRows = [];
|
||||
var postIds = getPostIds(posts);
|
||||
$('#posts tbody tr').each(function(i, postTableRow)
|
||||
{
|
||||
var postId = $(postTableRow).data('post-id');
|
||||
if (postIds.indexOf(postId) != -1)
|
||||
postTableRows.push(postTableRow);
|
||||
});
|
||||
return postTableRows;
|
||||
}
|
||||
|
||||
function getAllPendingPosts()
|
||||
{
|
||||
var posts = [];
|
||||
$('#posts tbody tr').each(function(i, postTableRow)
|
||||
{
|
||||
posts.push($(postTableRow).data('post'));
|
||||
});
|
||||
return posts;
|
||||
}
|
||||
|
||||
function getSelectedPosts()
|
||||
{
|
||||
var posts = [];
|
||||
$('#posts tbody tr.selected').each(function(i, postTableRow)
|
||||
{
|
||||
posts.push($(postTableRow).data('post'));
|
||||
});
|
||||
return posts;
|
||||
}
|
||||
|
||||
function updatePostTableRow(post)
|
||||
{
|
||||
var safetyDescriptions =
|
||||
{
|
||||
1: 'safe',
|
||||
2: 'sketchy',
|
||||
3: 'unsafe'
|
||||
};
|
||||
var postTableRow = $(getPostTableRows([post])[0]);
|
||||
postTableRow.find('.tags').text(post.tags.join(', ') || '-');
|
||||
postTableRow.find('.safety div').attr('class', 'safety-' + safetyDescriptions[post.safety]);
|
||||
postTableRow.find('img').css('background-image', 'none')
|
||||
if (postTableRow.find('img').attr('src') != post.thumbnail && post.thumbnail != null) //huge speedup
|
||||
postTableRow.find('img')[0].setAttribute('src', post.thumbnail);
|
||||
}
|
||||
|
||||
function hideForm()
|
||||
{
|
||||
$('#post-edit-form').slideUp(function()
|
||||
{
|
||||
$('#post-edit-form .thumbnail').hide();
|
||||
$('#post-edit-form .source').hide();
|
||||
});
|
||||
}
|
||||
|
||||
function showFormForPosts(posts)
|
||||
{
|
||||
var form = $('#post-edit-form');
|
||||
|
||||
form.slideDown();
|
||||
if (posts.length != 1)
|
||||
{
|
||||
form.find('.source').slideUp();
|
||||
form.find('.file-name strong').text('Multiple posts selected');
|
||||
form.find('.thumbnail').slideUp();
|
||||
}
|
||||
else
|
||||
{
|
||||
var post = posts[0];
|
||||
form.find('.source').slideDown();
|
||||
form.find('[name=source]').val(post.source);
|
||||
form.find('.file-name strong').text(post.fileName);
|
||||
form.find('.thumbnail').slideDown();
|
||||
if (post.thumbnail != null)
|
||||
{
|
||||
form.find('img').css('background-mage', 'none');
|
||||
form.find('img')[0].setAttribute('src', post.thumbnail);
|
||||
}
|
||||
}
|
||||
|
||||
function enableUpload()
|
||||
var commonAnonymity = getCommonPostAnonymity(posts);
|
||||
form.find('[name=anonymous]').prop('checked', commonAnonymity);
|
||||
|
||||
var commonSafety = getCommonPostSafety(posts);
|
||||
form.find('[name=safety]').prop('checked', false);
|
||||
if (commonSafety != 0)
|
||||
form.find('[name=safety][value=' + commonSafety + ']').prop('checked', true);
|
||||
|
||||
form.find('.related-tags').slideUp();
|
||||
form.find('[name=tags]').tagit(
|
||||
{
|
||||
var theSubmit = $('#the-submit');
|
||||
theSubmit.removeClass('inactive');
|
||||
var posts = $('#upload-step2 .post');
|
||||
posts.removeClass('inactive');
|
||||
posts.find(':input').attr('readonly', false);
|
||||
beforeTagAdded: function(e, ui) { },
|
||||
beforeTagRemoved: function(e, ui) { }
|
||||
});
|
||||
var commonTags = getCommonPostTags(posts);
|
||||
form.find('[name=tags]').tagit('removeAll');
|
||||
$.each(commonTags, function(i, tag)
|
||||
{
|
||||
form.find('[name=tags]').tagit('createTag', tag);
|
||||
});
|
||||
|
||||
bindPostSafetyChangeEvent(form, posts);
|
||||
bindPostSourceChangeEvent(form, posts);
|
||||
bindPostAnonymityChangeEvent(form, posts);
|
||||
bindPostTagChangeEvents(form, posts);
|
||||
}
|
||||
|
||||
function getCommonPostAnonymity(posts)
|
||||
{
|
||||
for (var i = 1; i < posts.length; i ++)
|
||||
if (posts[i].anonymous != posts[0].anonymous)
|
||||
return false;
|
||||
return posts[0].anonymous;
|
||||
}
|
||||
|
||||
function getCommonPostSafety(posts)
|
||||
{
|
||||
for (var i = 1; i < posts.length; i ++)
|
||||
if (posts[i].safety != posts[0].safety)
|
||||
return 0;
|
||||
return posts[0].safety;
|
||||
}
|
||||
|
||||
function getCommonPostTags(posts)
|
||||
{
|
||||
var commonTags = posts[0].tags;
|
||||
for (var i = 1; i < posts.length; i ++)
|
||||
{
|
||||
commonTags = commonTags.filter(function(tag)
|
||||
{
|
||||
return posts[i].tags.indexOf(tag) != -1;
|
||||
});
|
||||
}
|
||||
return commonTags;
|
||||
}
|
||||
|
||||
function changePostsSource(posts, newSource)
|
||||
{
|
||||
var maxLength = $('#post-edit-form input[name=source]').attr('maxlength');
|
||||
$.each(posts, function(i, post)
|
||||
{
|
||||
post.source = maxLength
|
||||
? newSource.substring(0, maxLength)
|
||||
: newSource;
|
||||
});
|
||||
}
|
||||
|
||||
function changePostsSafety(posts, newSafety)
|
||||
{
|
||||
$.each(posts, function(i, post)
|
||||
{
|
||||
post.safety = newSafety;
|
||||
updatePostTableRow(post);
|
||||
});
|
||||
}
|
||||
|
||||
function setPostsAnonymity(posts, newAnonymity)
|
||||
{
|
||||
$.each(posts, function(i, post)
|
||||
{
|
||||
post.anonymous = newAnonymity;
|
||||
updatePostTableRow(post);
|
||||
});
|
||||
}
|
||||
|
||||
function addTagToPosts(posts, tag)
|
||||
{
|
||||
$.each(posts, function(i, post)
|
||||
{
|
||||
var index = post.tags.indexOf(tag);
|
||||
if (index == -1)
|
||||
post.tags.push(tag);
|
||||
});
|
||||
$.each(posts, function(i, post)
|
||||
{
|
||||
updatePostTableRow(post);
|
||||
});
|
||||
}
|
||||
|
||||
function removeTagFromPosts(posts, tag)
|
||||
{
|
||||
$.each(posts, function(i, post)
|
||||
{
|
||||
var index = post.tags.indexOf(tag);
|
||||
if (index != -1)
|
||||
post.tags.splice(index, 1);
|
||||
});
|
||||
$.each(posts, function(i, post)
|
||||
{
|
||||
updatePostTableRow(post);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function enableOrDisableEditing(enabled)
|
||||
{
|
||||
var theSubmit = $('#the-submit');
|
||||
theSubmit.toggleClass('inactive', !enabled);
|
||||
var posts = $('#upload-step2 #posts');
|
||||
posts.toggleClass('inactive', !enabled);
|
||||
$('#post-edit-form input').prop('readonly', !enabled);
|
||||
}
|
||||
|
||||
function enableEditing()
|
||||
{
|
||||
enableOrDisableEditing(true);
|
||||
}
|
||||
|
||||
function disableEditing()
|
||||
{
|
||||
enableOrDisableEditing(false);
|
||||
}
|
||||
|
||||
function uploadFinished()
|
||||
{
|
||||
disableExitConfirmation();
|
||||
window.location.href = $('#upload-step2').attr('data-redirect-url');
|
||||
}
|
||||
|
||||
function stopUploadAndShowError(message)
|
||||
{
|
||||
$('#uploading-alert').slideUp();
|
||||
$('#upload-error-alert')
|
||||
.html(message)
|
||||
.slideDown();
|
||||
enableEditing();
|
||||
}
|
||||
|
||||
function sendNextPost()
|
||||
{
|
||||
$('#upload-error-alert').slideUp();
|
||||
|
||||
var posts = getAllPendingPosts();
|
||||
if (posts.length == 0)
|
||||
{
|
||||
uploadFinished();
|
||||
return;
|
||||
}
|
||||
|
||||
var post = posts[0];
|
||||
var postTableRow = $('#posts tbody tr:first-child');
|
||||
var url = $('#the-submit-wrapper').find('form').attr('action');
|
||||
var fd = new FormData();
|
||||
|
||||
fd.append('file', post.file);
|
||||
fd.append('url', post.url);
|
||||
fd.append('source', post.source);
|
||||
fd.append('safety', post.safety);
|
||||
fd.append('anonymous', post.anonymous);
|
||||
fd.append('tags', post.tags.join(', '));
|
||||
|
||||
if (post.tags.length == 0)
|
||||
{
|
||||
stopUploadAndShowError('No tags set.');
|
||||
return;
|
||||
}
|
||||
|
||||
var ajaxData =
|
||||
{
|
||||
url: url,
|
||||
data: fd,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
dataType: 'json',
|
||||
success: function(data)
|
||||
{
|
||||
postTableRow.slideUp(function()
|
||||
{
|
||||
postTableRow.remove();
|
||||
sendNextPost();
|
||||
});
|
||||
},
|
||||
error: function(xhr)
|
||||
{
|
||||
stopUploadAndShowError(
|
||||
xhr.responseJSON
|
||||
? xhr.responseJSON.messageHtml
|
||||
: 'Fatal error');
|
||||
}
|
||||
};
|
||||
|
||||
postJSON(ajaxData);
|
||||
}
|
||||
|
||||
$(function()
|
||||
{
|
||||
bindFileHandlerEvents();
|
||||
bindUrlHandlerEvents();
|
||||
bindSelectAllEvent();
|
||||
bindPostTableOperations();
|
||||
attachTagIt($('input[name=tags]'));
|
||||
|
||||
$('#the-submit').click(function(e)
|
||||
{
|
||||
|
|
@ -157,113 +665,12 @@ $(function()
|
|||
var theSubmit = $(this);
|
||||
if (theSubmit.hasClass('inactive'))
|
||||
return;
|
||||
disableUpload();
|
||||
disableEditing();
|
||||
|
||||
$('#posts input[type=checkbox]').prop('checked', false);
|
||||
postTableCheckboxesChangedEventHandler();
|
||||
$('#uploading-alert').slideDown();
|
||||
|
||||
sendNextPost();
|
||||
});
|
||||
|
||||
function handleFiles(files)
|
||||
{
|
||||
handleInputs(files, function(postDom, file)
|
||||
{
|
||||
postDom.data('url', '');
|
||||
postDom.data('file', file);
|
||||
$('.file-name strong', postDom).text(file.name);
|
||||
|
||||
if (file.type.match('image.*'))
|
||||
{
|
||||
var img = postDom.find('img')
|
||||
var reader = new FileReader();
|
||||
reader.onload = (function(theFile, img)
|
||||
{
|
||||
return function(e)
|
||||
{
|
||||
changeThumb(img, e.target.result);
|
||||
};
|
||||
})(file, img);
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function changeThumb(img, url)
|
||||
{
|
||||
$(img)
|
||||
.css('background-image', 'none')
|
||||
.attr('src', url)
|
||||
.data('custom-thumb', true);
|
||||
}
|
||||
|
||||
function handleURLs(urls)
|
||||
{
|
||||
handleInputs(urls, function(postDom, url)
|
||||
{
|
||||
postDom.data('url', url);
|
||||
postDom.data('file', '');
|
||||
|
||||
var sourceInput = postDom.find('[name=source]');
|
||||
sourceInput.val(url);
|
||||
if (sourceInput.attr('maxlength'))
|
||||
sourceInput.val(sourceInput.val().substring(0, sourceInput.attr('maxlength')));
|
||||
|
||||
if (matches = url.match(/watch.*?=([a-zA-Z0-9_-]+)/))
|
||||
{
|
||||
postDom.find('.file-name strong').text(url);
|
||||
var realUrl = 'http://img.youtube.com/vi/' + matches[1] + '/mqdefault.jpg';
|
||||
changeThumb(postDom.find('img'), realUrl);
|
||||
}
|
||||
else
|
||||
{
|
||||
postDom.find('.file-name strong').text(url);
|
||||
changeThumb(postDom.find('img'), '/posts/upload/thumb/' + btoa(url));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleInputs(inputs, callback)
|
||||
{
|
||||
for (var i = 0; i < inputs.length; i ++)
|
||||
{
|
||||
var input = inputs[i];
|
||||
var postDom = $('#post-template').clone(true);
|
||||
postDom.find('form').submit(false);
|
||||
postDom.removeAttr('id');
|
||||
|
||||
$('.posts').append(postDom);
|
||||
|
||||
postDom.show();
|
||||
attachTagIt($('.tags input', postDom));
|
||||
|
||||
callback(postDom, input);
|
||||
}
|
||||
if ($('.posts .post').length == 0)
|
||||
{
|
||||
disableExitConfirmation();
|
||||
$('#upload-step2').fadeOut();
|
||||
}
|
||||
else
|
||||
{
|
||||
enableExitConfirmation();
|
||||
$('#upload-step2').fadeIn();
|
||||
}
|
||||
}
|
||||
|
||||
$('.post img').mouseenter(function(e)
|
||||
{
|
||||
if ($(this).data('custom-thumb') != true)
|
||||
return;
|
||||
|
||||
$('#lightbox')
|
||||
.attr('src', $(this).attr('src'))
|
||||
.show()
|
||||
.position({
|
||||
of: $(this),
|
||||
my: 'center center',
|
||||
at: 'center center',
|
||||
})
|
||||
.show();
|
||||
});
|
||||
$('.post img').mouseleave(function(e)
|
||||
{
|
||||
$('#lightbox').hide();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,24 +6,17 @@ $this->assets->addStylesheet('../lib/tagit/jquery.tagit.css');
|
|||
$this->assets->addScript('../lib/tagit/jquery.tagit.js');
|
||||
?>
|
||||
|
||||
<div id="sidebar">
|
||||
<div class="unit">
|
||||
<h1>file upload</h1>
|
||||
|
||||
<p>Use tags to describe uploaded images. Try to specify characters, their look and shows they are from.</p>
|
||||
<p>Set proper visibility setting if the image isn’t safe for work or you’re not sure it’s 100% <span class="safety-safe">safe</span>.</p>
|
||||
<p>Only registered users can view <span class="safety-sketchy">sketchy</span> or <span class="safety-unsafe">NSFW</span> content.</p>
|
||||
<p>Click submit when you’re done.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inner-content">
|
||||
<div id="upload-step1">
|
||||
<div id="file-handler-wrapper">
|
||||
<input type=file multiple style="display: none"/>
|
||||
<div id="file-handler">
|
||||
Drop files here!<br>
|
||||
Drop files here!<br/>
|
||||
Or just click on this box.
|
||||
<noscript>
|
||||
<br/>
|
||||
Note: this form needs Javascript to work.
|
||||
</noscript>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -40,90 +33,138 @@ $this->assets->addScript('../lib/tagit/jquery.tagit.js');
|
|||
<div id="upload-step2" data-redirect-url="<?= Core::getRouter()->linkTo(['PostController', 'listView']) ?>">
|
||||
<hr>
|
||||
|
||||
<div class="posts">
|
||||
</div>
|
||||
<div id="hybrid-view">
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<button id="the-submit" class="submit" type="submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="posts-wrapper">
|
||||
<table id="posts">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="checkbox">
|
||||
<input type="checkbox" name="select-all"/>
|
||||
</th>
|
||||
<th class="thumbnail"></th>
|
||||
<th class="tags">Tags</th>
|
||||
<th class="safety">Safety</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<div id="post-template" class="post">
|
||||
<p class="alert alert-error">Some kind of error</p>
|
||||
<tbody>
|
||||
</tbody>
|
||||
|
||||
<img class="thumbnail" src="<?= \Chibi\Util\Url::makeAbsolute('/media/img/pixel.gif') ?>" alt="Thumbnail"/>
|
||||
<tfoot>
|
||||
<tr class="template">
|
||||
<td class="checkbox">
|
||||
<input type="checkbox"/>
|
||||
</td>
|
||||
<td class="thumbnail">
|
||||
<img src="<?= \Chibi\Util\Url::makeAbsolute('/media/img/pixel.gif') ?>" alt="Thumbnail"/>
|
||||
</td>
|
||||
<td class="tags">
|
||||
</td>
|
||||
<td class="safety">
|
||||
<div class="safety-template"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<div class="form-wrapper">
|
||||
<div class="ops">
|
||||
<a class="move-up-trigger">
|
||||
move up <span>↑</span>
|
||||
</a>
|
||||
<ul id="post-ops">
|
||||
<li>
|
||||
<a href="#" class="btn move-up">Move selection up</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="btn move-down">Move selection down</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="btn remove">Remove selection</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="move-down-trigger">
|
||||
move down <span>↓</span>
|
||||
</a>
|
||||
|
||||
<a class="remove-trigger">
|
||||
remove <span>×</span>
|
||||
</a>
|
||||
<div id="the-submit-wrapper">
|
||||
<form action="<?= Core::getRouter()->linkTo(['PostController', 'uploadAction']) ?>" method="post">
|
||||
<button id="the-submit" class="submit" type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="<?= Core::getRouter()->linkTo(['PostController', 'uploadAction']) ?>" method="post">
|
||||
<div class="form-row file-name">
|
||||
<label>File:</label>
|
||||
<div class="input-wrapper">
|
||||
<strong>filename.jpg</strong>
|
||||
</div>
|
||||
<div id="post-edit-form-wrapper">
|
||||
|
||||
<p id="upload-error-alert" class="alert alert-error">
|
||||
Some kind of error
|
||||
</p>
|
||||
|
||||
<p id="uploading-alert" class="alert alert-warning">
|
||||
Uploading in progress…
|
||||
</p>
|
||||
|
||||
<div id="post-edit-form">
|
||||
<div class="thumbnail">
|
||||
<img src="<?= \Chibi\Util\Url::makeAbsolute('/media/img/pixel.gif') ?>" alt="Thumbnail"/>
|
||||
</div>
|
||||
|
||||
<div class="form-row safety">
|
||||
<label>Safety:</label>
|
||||
<div class="input-wrapper">
|
||||
<?php $checked = false ?>
|
||||
<?php foreach (PostSafety::getAll() as $safety): ?>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="safety"
|
||||
<?php if (!$checked): ?>
|
||||
checked="checked"
|
||||
<?php endif ?>
|
||||
value="<?= $safety->toInteger() ?>" />
|
||||
<div class="form-wrapper">
|
||||
<form>
|
||||
<div class="form-row file-name">
|
||||
<label>File:</label>
|
||||
<div class="input-wrapper">
|
||||
<strong>filename.jpg</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?= ucfirst($safety->toDisplayString()) ?>
|
||||
<div class="form-row safety">
|
||||
<label>Safety:</label>
|
||||
<div class="input-wrapper">
|
||||
<?php $checked = false ?>
|
||||
<?php foreach (PostSafety::getAll() as $safety): ?>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="safety"
|
||||
<?php if (!$checked): ?>
|
||||
checked="checked"
|
||||
<?php endif ?>
|
||||
value="<?= $safety->toInteger() ?>" />
|
||||
|
||||
<?php $checked = true ?>
|
||||
</label>
|
||||
<?php endforeach ?>
|
||||
<?php if (Core::getConfig()->uploads->allowAnonymousUploads): ?>
|
||||
<input type="hidden" name="anonymous" value="0"/>
|
||||
<label>
|
||||
<input type="checkbox" name="anonymous" value="1"/>
|
||||
Upload anonymously
|
||||
</label>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<?= ucfirst($safety->toDisplayString()) ?>
|
||||
|
||||
<?php $checked = true ?>
|
||||
</label>
|
||||
<?php endforeach ?>
|
||||
<?php if (Core::getConfig()->uploads->allowAnonymousUploads): ?>
|
||||
<input type="hidden" name="anonymous" value="0"/>
|
||||
<label>
|
||||
<input type="checkbox" name="anonymous" value="1"/>
|
||||
Upload anonymously
|
||||
</label>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row tags">
|
||||
<label>Tags:</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" name="tags" placeholder="enter some tags…"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row source">
|
||||
<label>Source:</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text"
|
||||
maxlength="<?= Core::getConfig()->posts->maxSourceLength ?>"
|
||||
name="source"
|
||||
placeholder="where did you get this from? (optional)"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row tags">
|
||||
<label>Tags:</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" name="tags" placeholder="enter some tags…"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row source">
|
||||
<label>Source:</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text"
|
||||
maxlength="<?= Core::getConfig()->posts->maxSourceLength ?>"
|
||||
name="source"
|
||||
placeholder="where did you get this from? (optional)"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="lightbox">
|
||||
<img src="<?= \Chibi\Util\Url::makeAbsolute('/media/img/pixel.gif') ?>" alt="Preview">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img id="lightbox" src="<?= \Chibi\Util\Url::makeAbsolute('/media/img/pixel.gif') ?>" alt="Preview"/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue