From a2c8ceecc40908367e18f497a5571937b3ed1858 Mon Sep 17 00:00:00 2001 From: Marcin Kurczewski Date: Sun, 27 Jul 2014 14:55:08 +0200 Subject: [PATCH] Changed post upload form --- public_html/media/css/post-upload.css | 165 +++--- public_html/media/js/post-upload.js | 793 +++++++++++++++++++------- src/Views/post/post-upload.phtml | 205 ++++--- 3 files changed, 817 insertions(+), 346 deletions(-) diff --git a/public_html/media/css/post-upload.css b/public_html/media/css/post-upload.css index 64446bd7..8e5d06b7 100644 --- a/public_html/media/css/post-upload.css +++ b/public_html/media/css/post-upload.css @@ -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; } diff --git a/public_html/media/js/post-upload.js b/public_html/media/js/post-upload.js index ca97e7b2..767d0977 100644 --- a/public_html/media/js/post-upload.js +++ b/public_html/media/js/post-upload.js @@ -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(); - }); }); diff --git a/src/Views/post/post-upload.phtml b/src/Views/post/post-upload.phtml index 8ca9e53a..e3c15daf 100644 --- a/src/Views/post/post-upload.phtml +++ b/src/Views/post/post-upload.phtml @@ -6,24 +6,17 @@ $this->assets->addStylesheet('../lib/tagit/jquery.tagit.css'); $this->assets->addScript('../lib/tagit/jquery.tagit.js'); ?> - -
- Drop files here!
+ Drop files here!
Or just click on this box. +
@@ -40,90 +33,138 @@ $this->assets->addScript('../lib/tagit/jquery.tagit.js');
-
-
+
-
- -
-
+
+ + + + + + + + + -
-

Some kind of error

+
+ - Thumbnail + + + + + + + + +
+ + TagsSafety
+ + + Thumbnail + + +
+
-
-
- - move up ↑ - + - - move down ↓ - - - - remove × - +
+
+ +
+
-
-
- -
- filename.jpg -
+
+ +

+ Some kind of error +

+ +

+ Uploading in progress… +

+ +
+
+ Thumbnail
-
- -
- - -
+
+
-
- -
- -
-
+
-
- -
- -
-
- +
- -Preview