diff --git a/public_html/css/post.css b/public_html/css/post.css index cc086798..cb0f71f0 100644 --- a/public_html/css/post.css +++ b/public_html/css/post.css @@ -144,7 +144,7 @@ font-size: 12px; } -#post-view-wrapper .post-edit-wrapper { +#post-view #post-edit-target { padding: 1em; position: absolute; background: rgba(255, 255, 255, 0.8); @@ -156,7 +156,7 @@ z-index: -1; } -#post-view-wrapper .post-edit-wrapper .file-handler { +#post-edit-target .file-handler { margin: 0.5em 0; } diff --git a/public_html/index.html b/public_html/index.html index 7d3fd308..d384fc9c 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -120,6 +120,7 @@ + diff --git a/public_html/js/Presenters/PostEditPresenter.js b/public_html/js/Presenters/PostEditPresenter.js new file mode 100644 index 00000000..3f9b8504 --- /dev/null +++ b/public_html/js/Presenters/PostEditPresenter.js @@ -0,0 +1,156 @@ +var App = App || {}; +App.Presenters = App.Presenters || {}; + +App.Presenters.PostEditPresenter = function( + util, + promise, + api, + auth) { + + var $target; + var post; + var updateCallback; + var privileges = {}; + var templates = {}; + + var tagInput; + var postContentFileDropper; + var postThumbnailFileDropper; + var postContent; + var postThumbnail; + + privileges.canChangeSafety = auth.hasPrivilege(auth.privileges.changePostSafety); + privileges.canChangeSource = auth.hasPrivilege(auth.privileges.changePostSource); + privileges.canChangeTags = auth.hasPrivilege(auth.privileges.changePostTags); + privileges.canChangeContent = auth.hasPrivilege(auth.privileges.changePostContent); + privileges.canChangeThumbnail = auth.hasPrivilege(auth.privileges.changePostThumbnail); + privileges.canChangeRelations = auth.hasPrivilege(auth.privileges.changePostRelations); + privileges.canChangeFlags = auth.hasPrivilege(auth.privileges.changePostFlags); + + function init(params, loaded) { + post = params.post; + + updateCallback = params.updateCallback; + $target = params.$target; + + promise.wait(util.promiseTemplate('post-edit')) + .then(function(postEditTemplate) { + templates.postEdit = postEditTemplate; + render(); + loaded(); + }).fail(function() { + console.log(arguments); + loaded(); + }); + } + + function render() { + $target.html(templates.postEdit({post: post, privileges: privileges})); + + postContentFileDropper = new App.Controls.FileDropper($target.find('form [name=content]')); + postContentFileDropper.onChange = postContentChanged; + postContentFileDropper.setNames = true; + postThumbnailFileDropper = new App.Controls.FileDropper($target.find('form [name=thumbnail]')); + postThumbnailFileDropper.onChange = postThumbnailChanged; + postThumbnailFileDropper.setNames = true; + + if (privileges.canChangeTags) { + tagInput = new App.Controls.TagInput($target.find('form [name=tags]')); + tagInput.inputConfirmed = editPost; + } + + $target.find('.post-edit-wrapper form').submit(editFormSubmitted); + } + + function focus() { + if (tagInput) { + tagInput.focus(); + } + } + + function editFormSubmitted(e) { + e.preventDefault(); + editPost(); + } + + function postContentChanged(files) { + postContentFileDropper.readAsDataURL(files[0], function(content) { + postContent = content; + }); + } + + function postThumbnailChanged(files) { + postThumbnailFileDropper.readAsDataURL(files[0], function(content) { + postThumbnail = content; + }); + } + + function getPrivileges() { + return privileges; + } + + function editPost() { + var $form = $target.find('form'); + var formData = {}; + formData.seenEditTime = post.lastEditTime; + formData.flags = {}; + + if (privileges.canChangeContent && postContent) { + formData.content = postContent; + } + + if (privileges.canChangeThumbnail && postThumbnail) { + formData.thumbnail = postThumbnail; + } + + if (privileges.canChangeSource) { + formData.source = $form.find('[name=source]').val(); + } + + if (privileges.canChangeSafety) { + formData.safety = $form.find('[name=safety]:checked').val(); + } + + if (privileges.canChangeTags) { + formData.tags = tagInput.getTags().join(' '); + } + + if (privileges.canChangeRelations) { + formData.relations = $form.find('[name=relations]').val(); + } + + if (privileges.canChangeFlags) { + if (post.contentType === 'video') { + formData.flags.loop = $form.find('[name=loop]').is(':checked') ? 1 : 0; + } + } + + if (post.tags.length === 0) { + showEditError('No tags set.'); + return; + } + + promise.wait(api.put('/posts/' + post.id, formData)) + .then(function(response) { + if (typeof(updateCallback) !== 'undefined') { + updateCallback(post = response.json); + } + }).fail(function(response) { + showEditError(response); + }); + } + + function showEditError(response) { + window.alert(response.json && response.json.error || response); + } + + return { + init: init, + render: render, + getPrivileges: getPrivileges, + focus: focus, + }; + +}; + +App.DI.register('postEditPresenter', ['util', 'promise', 'api', 'auth'], App.Presenters.PostEditPresenter); diff --git a/public_html/js/Presenters/PostPresenter.js b/public_html/js/Presenters/PostPresenter.js index 98b22795..e8323e30 100644 --- a/public_html/js/Presenters/PostPresenter.js +++ b/public_html/js/Presenters/PostPresenter.js @@ -12,6 +12,7 @@ App.Presenters.PostPresenter = function( keyboard, presenterManager, postsAroundCalculator, + postEditPresenter, postCommentListPresenter, topNavigationPresenter, messagePresenter) { @@ -26,13 +27,6 @@ App.Presenters.PostPresenter = function( var post; var privileges = {}; - var editPrivileges = {}; - - var tagInput; - var postContentFileDropper; - var postThumbnailFileDropper; - var postContent; - var postThumbnail; function init(params, loaded) { topNavigationPresenter.select('posts'); @@ -41,26 +35,16 @@ App.Presenters.PostPresenter = function( privileges.canDeletePosts = auth.hasPrivilege(auth.privileges.deletePosts); privileges.canFeaturePosts = auth.hasPrivilege(auth.privileges.featurePosts); privileges.canViewHistory = auth.hasPrivilege(auth.privileges.viewHistory); - 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); - editPrivileges.canChangeRelations = auth.hasPrivilege(auth.privileges.changePostRelations); - editPrivileges.canChangeFlags = auth.hasPrivilege(auth.privileges.changePostFlags); promise.wait( util.promiseTemplate('post'), - util.promiseTemplate('post-edit'), util.promiseTemplate('post-content'), util.promiseTemplate('history')) .then(function( postTemplate, - postEditTemplate, postContentTemplate, historyTemplate) { templates.post = postTemplate; - templates.postEdit = postEditTemplate; templates.postContent = postContentTemplate; templates.history = historyTemplate; @@ -83,10 +67,17 @@ App.Presenters.PostPresenter = function( topNavigationPresenter.changeTitle('@' + post.id); render(); loaded(); + + presenterManager.initPresenters([ + [postEditPresenter, {post: post, $target: $el.find('#post-edit-target'), updateCallback: postEdited}], + [postCommentListPresenter, {post: post, $target: $el.find('#post-comments-target')}]], + function() {}); + }).fail(function() { console.log(arguments); loaded(); }); + } function attachLinksToPostsAround() { @@ -138,34 +129,21 @@ App.Presenters.PostPresenter = function( $el.html(renderPostTemplate()); $messages = $el.find('.messages'); - if (editPrivileges.canChangeTags) { - tagInput = new App.Controls.TagInput($el.find('form [name=tags]')); - tagInput.inputConfirmed = editPost; - } + keyboard.keyup('e', function() { + editButtonClicked(null); + }); - postContentFileDropper = new App.Controls.FileDropper($el.find('form [name=content]')); - postContentFileDropper.onChange = postContentChanged; - postContentFileDropper.setNames = true; - postThumbnailFileDropper = new App.Controls.FileDropper($el.find('form [name=thumbnail]')); - postThumbnailFileDropper.onChange = postThumbnailChanged; - postThumbnailFileDropper.setNames = true; - - if (_.any(editPrivileges)) { - keyboard.keyup('e', function() { - editButtonClicked(null); - }); - } - - $el.find('.post-edit-wrapper form').submit(editFormSubmitted); attachSidebarEvents(); - presenterManager.initPresenters([ - [postCommentListPresenter, _.extend({post: post}, {$target: $el.find('#post-comments-target')})]], - function() { }); - attachLinksToPostsAround(); } + function postEdited(newPost) { + post = newPost; + hideEditForm(); + softRender(); + } + function softRender() { renderSidebar(); $el.find('video').prop('loop', post.flags.loop); @@ -188,13 +166,12 @@ App.Presenters.PostPresenter = function( formatFileSize: util.formatFileSize, postContentTemplate: templates.postContent, - postEditTemplate: templates.postEdit, historyTemplate: templates.history, hasFav: _.any(post.favorites, function(favUser) { return favUser.id === auth.getCurrentUser().id; }), isLoggedIn: auth.isLoggedIn(), privileges: privileges, - editPrivileges: editPrivileges, + editPrivileges: postEditPresenter.getPrivileges(), }); } @@ -244,92 +221,24 @@ App.Presenters.PostPresenter = function( e.preventDefault(); } messagePresenter.hideMessages($messages); - if ($el.find('.post-edit-wrapper').is(':visible')) { + if ($el.find('#post-edit-target').is(':visible')) { hideEditForm(); } else { showEditForm(); } } - function editFormSubmitted(e) { - e.preventDefault(); - editPost(); - } - function showEditForm() { - $el.find('.post-edit-wrapper').slideDown('fast'); + $el.find('#post-edit-target').slideDown('fast'); util.enableExitConfirmation(); - tagInput.focus(); + postEditPresenter.focus(); } function hideEditForm() { - $el.find('.post-edit-wrapper').slideUp('fast'); + $el.find('#post-edit-target').slideUp('fast'); util.disableExitConfirmation(); } - function editPost() { - var $form = $el.find('form'); - var formData = {}; - formData.seenEditTime = post.lastEditTime; - formData.flags = {}; - - 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 (editPrivileges.canChangeRelations) { - formData.relations = $form.find('[name=relations]').val(); - } - - if (editPrivileges.canChangeFlags) { - if (post.contentType === 'video') { - formData.flags.loop = $form.find('[name=loop]').is(':checked') ? 1 : 0; - } - } - - 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(); - softRender(); - }).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 historyButtonClicked(e) { e.preventDefault(); if ($el.find('.post-history-wrapper').is(':visible')) { @@ -390,10 +299,6 @@ App.Presenters.PostPresenter = function( }).fail(showGenericError); } - function showEditError(response) { - window.alert(response.json && response.json.error || response); - } - function showGenericError(response) { if ($messages === $el) { $el.empty(); @@ -420,6 +325,7 @@ App.DI.register('postPresenter', [ 'keyboard', 'presenterManager', 'postsAroundCalculator', + 'postEditPresenter', 'postCommentListPresenter', 'topNavigationPresenter', 'messagePresenter'], diff --git a/public_html/templates/post.tpl b/public_html/templates/post.tpl index ae3f347d..d838b455 100644 --- a/public_html/templates/post.tpl +++ b/public_html/templates/post.tpl @@ -252,8 +252,7 @@
-
- <%= postEditTemplate({post: post, privileges: editPrivileges}) %> +
<%= postContentTemplate({post: post}) %>