From d019351fd97f74ab92c4f36c639d9d175f5f095d Mon Sep 17 00:00:00 2001 From: Marcin Kurczewski Date: Wed, 9 Oct 2013 00:58:49 +0200 Subject: [PATCH] Upload form acts with more grace --- public_html/media/css/core.css | 5 ++ public_html/media/css/upload.css | 7 +++ public_html/media/js/core.js | 18 +++++++ public_html/media/js/upload.js | 80 ++++++++++++++++++++++-------- src/Bootstrap.php | 2 +- src/Controllers/PostController.php | 2 + src/Views/post-upload.phtml | 63 ++++++++++++----------- 7 files changed, 128 insertions(+), 49 deletions(-) create mode 100644 public_html/media/js/core.js diff --git a/public_html/media/css/core.css b/public_html/media/css/core.css index c77dc2be..d3ed16d8 100644 --- a/public_html/media/css/core.css +++ b/public_html/media/css/core.css @@ -93,3 +93,8 @@ nav li.search input { #inner-content { overflow: hidden; } + +p:first-child, +h1:first-child { + margin-top: 0; +} diff --git a/public_html/media/css/upload.css b/public_html/media/css/upload.css index 1629206c..49c04ea0 100644 --- a/public_html/media/css/upload.css +++ b/public_html/media/css/upload.css @@ -40,10 +40,17 @@ margin-right: 1em; } +.post .alert, +#upload-step2, +#upload-no-posts, #post-template { display: none; } +.inactive { + opacity: .5; +} + .post { margin-bottom: 4em; } diff --git a/public_html/media/js/core.js b/public_html/media/js/core.js new file mode 100644 index 00000000..fd38680b --- /dev/null +++ b/public_html/media/js/core.js @@ -0,0 +1,18 @@ +if ($.when.all === undefined) +{ + $.when.all = function(deferreds) + { + var deferred = new $.Deferred(); + $.when.apply($, deferreds).then(function() + { + console.log(arguments); + deferred.resolve(Array.prototype.slice.call(arguments, 0)); + }, function() + { + console.log(arguments); + deferred.fail(Array.prototype.slice.call(arguments, 0)); + }); + + return deferred; + } +} diff --git a/public_html/media/js/upload.js b/public_html/media/js/upload.js index a3200483..23643cb7 100644 --- a/public_html/media/js/upload.js +++ b/public_html/media/js/upload.js @@ -3,8 +3,6 @@ $(function() var handler = $('#file-handler'); var tags = []; //todo: retrieve tags - $('#upload-step2').hide(); - handler.on('dragenter', function(e) { $(this).addClass('active'); @@ -43,24 +41,33 @@ $(function() { $(this).remove(); }); + if ($('#upload-step2 .post').length == 1) + { + $('#upload-step2').slideUp(); + $('#upload-no-posts').slideDown(); + } }); - $('#upload-step2 form').submit(function(e) + $('#the-submit').click(function(e) { - var url = $(this).attr('action') + '?json'; e.preventDefault(); - var posts = $('.post', $(this)); + var theSubmit = $(this); + theSubmit.addClass('inactive'); + var posts = $('#upload-step2 .post'); if (posts.length == 0) { + //shouldn't happen alert('No posts to upload!'); return; } + var ajaxCalls = []; posts.each(function() { var postDom = $(this); + var url = postDom.find('form').attr('action') + '?json'; var file = postDom.data('file'); var tags = postDom.find('[name=tags]').val(); var safety = postDom.find('[name=safety]:checked').val(); @@ -69,29 +76,61 @@ $(function() fd.append('tags', tags); fd.append('safety', safety); - var ajax = + postDom.find(':input').attr('readonly', true); + postDom.addClass('inactive'); + + var ajaxData = { url: url, data: fd, processData: false, contentType: false, type: 'POST', - success: function(data) - { - //todo: do this nice - if (data['success']) - { - postDom.slideUp(); - //alert(file.name + ': success!'); - } - else - { - alert(data['errorMessage']); - } - } + context: postDom }; - $.ajax(ajax); + var defer = $.ajax(ajaxData) + .then(function(data) + { + data.postDom = $(this); + return data; + }).promise(); + + ajaxCalls.push(defer); + }); + + + $.when.all(ajaxCalls).then(function(allData) + { + var errors = false; + for (var i in allData) + { + var data = allData[i]; + var postDom = data.postDom; + if (data['success']) + { + postDom.slideUp(function() + { + $(this).remove(); + }); + } + else + { + postDom.removeClass('inactive'); + postDom.find(':input').attr('readonly', false); + postDom.find('.alert').text(data['errorMessage']).slideDown(); + errors = true; + } + } + + if (errors) + { + theSubmit.removeClass('inactive'); + } + else + { + window.location.href = $('#upload-step2').attr('data-redirect-url'); + } }); }); @@ -103,6 +142,7 @@ $(function() { var file = files[i]; var postDom = $('#post-template').clone(true); + postDom.find('form').submit(false); postDom.removeAttr('id'); postDom.data('file', file); $('.file-name strong', postDom).text(file.name); diff --git a/src/Bootstrap.php b/src/Bootstrap.php index 707f1f2a..ca36db35 100644 --- a/src/Bootstrap.php +++ b/src/Bootstrap.php @@ -29,7 +29,7 @@ class Bootstrap $this->context->title = $this->config->main->title; $this->context->stylesheets = ['core.css']; - $this->context->scripts = []; + $this->context->scripts = ['core.js']; $this->context->layoutName = isset($_GET['json']) ? 'layout-json' diff --git a/src/Controllers/PostController.php b/src/Controllers/PostController.php index adc0752b..b11a9001 100644 --- a/src/Controllers/PostController.php +++ b/src/Controllers/PostController.php @@ -83,6 +83,8 @@ class PostController foreach ($suppliedTags as $tag) if (!preg_match('/^[a-zA-Z0-9_-]+$/i', $tag)) throw new SimpleException('Invalid tag "' . $tag . '"'); + if (empty($suppliedTags)) + throw new SimpleException('No tags set'); $suppliedFile = $_FILES['file']; diff --git a/src/Views/post-upload.phtml b/src/Views/post-upload.phtml index 73f40a9f..dd0dd49b 100644 --- a/src/Views/post-upload.phtml +++ b/src/Views/post-upload.phtml @@ -25,42 +25,49 @@
-
-
-
-
+
+
+
-
- -
- +
+ +
- - remove × - +
+

Some kind of error

- Thumbnail -
-
- - filename.jpg -
+ + remove × + -
- - - - -
+ Thumbnail +
+
+ + filename.jpg +
-
- - +
+ + + + +
+ +
+ + +
-
-
+
+ +
+ +
+

Well, that’s disappointing…

+

Back to post list or try uploading again.