Upload form acts with more grace
This commit is contained in:
Marcin Kurczewski
parent
7c4bd0136d
commit
d019351fd9
7 changed files with 128 additions and 49 deletions
|
|
@ -93,3 +93,8 @@ nav li.search input {
|
|||
#inner-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p:first-child,
|
||||
h1:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
18
public_html/media/js/core.js
Normal file
18
public_html/media/js/core.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'];
|
||||
|
||||
|
|
|
|||
|
|
@ -25,42 +25,49 @@
|
|||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div id="upload-step2">
|
||||
<form action="<?php echo \Chibi\UrlHelper::route('post', 'upload') ?>" method="post">
|
||||
<div class="posts">
|
||||
</div>
|
||||
<div id="upload-step2" data-redirect-url="<?php echo \Chibi\UrlHelper::route('post', 'list') ?>">
|
||||
<div class="posts">
|
||||
</div>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<input type="submit" value="Submit" class="submit btn"/>
|
||||
</div>
|
||||
</form>
|
||||
<div class="submit-wrapper">
|
||||
<input id="the-submit" type="submit" value="Submit" class="submit btn"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="post-template" class="post">
|
||||
<a class="remove-trigger">
|
||||
remove <span>×</span>
|
||||
</a>
|
||||
<form action="<?php echo \Chibi\UrlHelper::route('post', 'upload') ?>" method="post">
|
||||
<p class="alert alert-error">Some kind of error</p>
|
||||
|
||||
<img class="thumbnail" src="<?php echo \Chibi\UrlHelper::absoluteUrl('/media/img/pixel.gif') ?>" alt="Thumbnail"/>
|
||||
<div>
|
||||
<div class="file-name">
|
||||
<label class="left">File:</label>
|
||||
<strong>filename.jpg</strong>
|
||||
</div>
|
||||
<a class="remove-trigger">
|
||||
remove <span>×</span>
|
||||
</a>
|
||||
|
||||
<div class="safety">
|
||||
<label class="left">Safety:</label>
|
||||
<label><input type="radio" name="safety" value="<?php echo PostSafety::Safe ?>" checked="checked"/> Safe for work</label>
|
||||
<label><input type="radio" name="safety" value="<?php echo PostSafety::Sketchy ?>"/> Sketchy</label>
|
||||
<label><input type="radio" name="safety" value="<?php echo PostSafety::Unsafe ?>"/> Not safe for work</label>
|
||||
</div>
|
||||
<img class="thumbnail" src="<?php echo \Chibi\UrlHelper::absoluteUrl('/media/img/pixel.gif') ?>" alt="Thumbnail"/>
|
||||
<div>
|
||||
<div class="file-name">
|
||||
<label class="left">File:</label>
|
||||
<strong>filename.jpg</strong>
|
||||
</div>
|
||||
|
||||
<div class="tags">
|
||||
<label class="left">Tags:</label>
|
||||
<input type="text" name="tags" placeholder="enter some tags…"/>
|
||||
<div class="safety">
|
||||
<label class="left">Safety:</label>
|
||||
<label><input type="radio" name="safety" value="<?php echo PostSafety::Safe ?>" checked="checked"/> Safe for work</label>
|
||||
<label><input type="radio" name="safety" value="<?php echo PostSafety::Sketchy ?>"/> Sketchy</label>
|
||||
<label><input type="radio" name="safety" value="<?php echo PostSafety::Unsafe ?>"/> Not safe for work</label>
|
||||
</div>
|
||||
|
||||
<div class="tags">
|
||||
<label class="left">Tags:</label>
|
||||
<input type="text" name="tags" placeholder="enter some tags…"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="clear"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="upload-no-posts">
|
||||
<p class="alert alert-warning">Well, that’s disappointing…</p>
|
||||
<p><a href="<?php echo \Chibi\UrlHelper::route('post', 'list') ?>">Back to post list</a> or <a href="<?php echo \Chibi\UrlHelper::route('post', 'upload') ?>">try uploading again</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue