Added basic post editing

This commit is contained in:
Marcin Kurczewski
2014-09-25 19:11:41 +02:00
parent 80b7aaf7d1
commit d2447045dd
16 changed files with 364 additions and 20 deletions

View File

@ -25,6 +25,11 @@ App.Auth = function(_, jQuery, util, api, appState, promise) {
uploadPostsAnonymously: 'uploadPostsAnonymously',
deletePosts: 'deletePosts',
featurePosts: 'featurePosts',
changePostSafety: 'changePostSafety',
changePostSource: 'changePostSource',
changePostTags: 'changePostTags',
changePostContent: 'changePostContent',
changePostThumbnail: 'changePostThumbnail',
listTags: 'listTags',
};

View File

@ -12,11 +12,13 @@ App.Controls.TagInput = function(
var KEY_SPACE = 32;
var KEY_BACKSPACE = 8;
var tagConfirmKeys = [KEY_RETURN, KEY_SPACE];
var inputConfirmKeys = [KEY_RETURN];
var tags = [];
var options = {
beforeTagAdded: null,
beforeTagRemoved: null,
inputConfirmed: null,
};
if ($underlyingInput.length !== 1) {
@ -40,6 +42,9 @@ App.Controls.TagInput = function(
});
$input.attr('placeholder', $underlyingInput.attr('placeholder'));
pasteText($underlyingInput.val());
$underlyingInput.val('');
$input.unbind('focus').bind('focus', function(e) {
$wrapper.addClass('focused');
});
@ -58,16 +63,25 @@ App.Controls.TagInput = function(
} else {
pastedText = (e.originalEvent || e).clipboardData.getData('text/plain');
}
var patedTags = pastedText.split(/\s+/);
_.each(patedTags, function(tag) {
addTag(tag);
});
pasteText(pastedText);
});
function pasteText(pastedText) {
var pastedTags = pastedText.split(/\s+/);
_.each(pastedTags, function(tag) {
addTag(tag);
});
}
$input.unbind('keydown').bind('keydown', function(e) {
if (_.contains(tagConfirmKeys, e.which)) {
if (_.contains(inputConfirmKeys, e.which) && !$input.val()) {
e.preventDefault();
if (typeof(options.inputConfirmed) !== 'undefined') {
options.inputConfirmed();
}
} else if (_.contains(tagConfirmKeys, e.which)) {
var tag = $input.val();
e.preventDefault();
addTag(tag);
$input.val('');
} else if (e.which === KEY_BACKSPACE && jQuery(this).val().length === 0) {

View File

@ -9,16 +9,24 @@ App.Presenters.PostPresenter = function(
api,
auth,
router,
keyboard,
topNavigationPresenter,
messagePresenter) {
var $el = jQuery('#content');
var $messages = $el;
var postTemplate;
var postEditTemplate;
var postContentTemplate;
var post;
var postNameOrId;
var privileges = {};
var editPrivileges = {};
var tagInput;
var postContentFileDropper;
var postThumbnailFileDropper;
var postContent;
var postThumbnail;
function init(args, loaded) {
postNameOrId = args.postNameOrId;
@ -26,16 +34,24 @@ App.Presenters.PostPresenter = function(
privileges.canDeletePosts = auth.hasPrivilege(auth.privileges.deletePosts);
privileges.canFeaturePosts = auth.hasPrivilege(auth.privileges.featurePosts);
editPrivileges.canChangeSafety = auth.hasPrivilege(auth.privileges.changePostSafety);
editPrivileges.canChangeSource = auth.hasPrivilege(auth.privileges.changePostSource);
editPrivileges.canChangeTags = auth.hasPrivilege(auth.privileges.changePostTags);
editPrivileges.canChangeContent = auth.hasPrivilege(auth.privileges.changePostContent);
editPrivileges.canChangeThumbnail = auth.hasPrivilege(auth.privileges.changePostThumbnail);
promise.waitAll(
util.promiseTemplate('post'),
util.promiseTemplate('post-edit'),
util.promiseTemplate('post-content'),
api.get('/posts/' + postNameOrId))
.then(function(
postTemplateHtml,
postEditTemplateHtml,
postContentTemplateHtml,
response) {
postTemplate = _.template(postTemplateHtml);
postEditTemplate = _.template(postEditTemplateHtml);
postContentTemplate = _.template(postContentTemplateHtml);
post = response.json;
@ -50,17 +66,44 @@ App.Presenters.PostPresenter = function(
}
function render() {
$el.html(postTemplate({
$el.html(renderPostTemplate());
$messages = $el.find('.messages');
tagInput = App.Controls.TagInput($el.find('form [name=tags]'), _, jQuery);
tagInput.inputConfirmed = editPost;
postContentFileDropper = new App.Controls.FileDropper($el.find('form [name=content]'), _, jQuery);
postContentFileDropper.onChange = postContentChanged;
postContentFileDropper.setNames = true;
postThumbnailFileDropper = new App.Controls.FileDropper($el.find('form [name=thumbnail]'), _, jQuery);
postThumbnailFileDropper.onChange = postThumbnailChanged;
postThumbnailFileDropper.setNames = true;
keyboard.keyup('e', function() {
editButtonClicked(null);
});
$el.find('.post-edit-wrapper form').submit(editFormSubmitted);
$el.find('.delete').click(deleteButtonClicked);
$el.find('.feature').click(featureButtonClicked);
$el.find('.edit').click(editButtonClicked);
}
function renderSidebar() {
$el.find('#sidebar').html(jQuery(renderPostTemplate()).find('#sidebar').html());
}
function renderPostTemplate() {
return postTemplate({
post: post,
formatRelativeTime: util.formatRelativeTime,
formatFileSize: util.formatFileSize,
postContentTemplate: postContentTemplate,
postEditTemplate: postEditTemplate,
privileges: privileges,
}));
$messages = $el.find('.messages');
$el.find('.delete').click(deleteButtonClicked);
$el.find('.feature').click(featureButtonClicked);
editPrivileges: editPrivileges,
});
}
function deleteButtonClicked(e) {
@ -94,6 +137,89 @@ App.Presenters.PostPresenter = function(
.fail(showGenericError);
}
function editButtonClicked(e) {
if (e) {
e.preventDefault();
}
messagePresenter.hideMessages($messages);
if ($el.find('.post-edit-wrapper').is(':visible')) {
hideEditForm();
} else {
showEditForm();
}
}
function editFormSubmitted(e) {
e.preventDefault();
editPost();
}
function showEditForm() {
$el.find('.post-edit-wrapper').slideDown('fast');
util.enableExitConfirmation();
tagInput.focus();
}
function hideEditForm() {
$el.find('.post-edit-wrapper').slideUp('fast');
util.disableExitConfirmation();
}
function editPost() {
var $form = $el.find('form');
var formData = {};
if (editPrivileges.canChangeContent && postContent) {
formData.content = postContent;
}
if (editPrivileges.canChangeThumbnail && postThumbnail) {
formData.thumbnail = postThumbnail;
}
if (editPrivileges.canChangeSource) {
formData.source = $form.find('[name=source]').val();
}
if (editPrivileges.canChangeSafety) {
formData.safety = $form.find('[name=safety]:checked').val();
}
if (editPrivileges.canChangeTags) {
formData.tags = tagInput.getTags().join(' ');
}
if (post.tags.length === 0) {
showEditError('No tags set.');
return;
}
promise.wait(api.put('/posts/' + post.id, formData))
.then(function(response) {
post = response.json;
hideEditForm();
renderSidebar();
}).fail(function(response) {
showEditError(response);
});
}
function postContentChanged(files) {
postContentFileDropper.readAsDataURL(files[0], function(content) {
postContent = content;
});
}
function postThumbnailChanged(files) {
postThumbnailFileDropper.readAsDataURL(files[0], function(content) {
postThumbnail = content;
});
}
function showEditError(response) {
window.alert(response.json && response.json.error || response);
}
function showGenericError(response) {
messagePresenter.showError($messages, response.json && response.json.error || response);
}
@ -105,4 +231,4 @@ App.Presenters.PostPresenter = function(
};
App.DI.register('postPresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'auth', 'router', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.PostPresenter);
App.DI.register('postPresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'auth', 'router', 'keyboard', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.PostPresenter);