From 9b810310f97120d99c5996e2960e96d8f91c8b4b Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Sun, 27 Apr 2014 04:09:55 -0400 Subject: [PATCH] VRFS-1558 implement comment dialog --- web/app/assets/javascripts/commentDialog.js | 135 ++++++++++++++++++ web/app/assets/javascripts/feed.js | 11 +- .../assets/javascripts/feed_item_recording.js | 6 +- .../assets/javascripts/feed_item_session.js | 5 +- web/app/assets/javascripts/ui_helper.js | 27 ++-- web/app/assets/stylesheets/client/client.css | 2 +- .../views/clients/_commentDialog.html.haml | 28 ++++ 7 files changed, 192 insertions(+), 22 deletions(-) create mode 100644 web/app/assets/javascripts/commentDialog.js diff --git a/web/app/assets/javascripts/commentDialog.js b/web/app/assets/javascripts/commentDialog.js new file mode 100644 index 000000000..9f74da3fb --- /dev/null +++ b/web/app/assets/javascripts/commentDialog.js @@ -0,0 +1,135 @@ +(function(context,$) { + + "use strict"; + context.JK = context.JK || {}; + context.JK.CommentDialog = function(app, options) { + var logger = context.JK.logger; + var rest = context.JK.Rest(); + var $screen = null; + var $content = null; + var recordingId; + var entityType = options.entity_type; + var sessionId = options.session_id; + var recordingId = options.recording_id; + var claimedRecordingId = options.claimed_recording_id; + + function beforeShow() { + } + + function afterShow() { + renderComments(); + } + + function afterHide() { + } + + function renderComments() { + $(".landing-comment-scroller", $screen).empty(); + + if (entityType === 'session') { + rest.getSessionHistory(sessionId) + .done(function(response) { + if (response && response.comments) { + $("#spnCommentCount", $scope).html(response.comment_count); + $("#spnLikeCount", $scope).html(response.like_count); + $.each(response.comments, function(index, val) { + renderComment(val.comment, val.creator.id, val.creator.name, + context.JK.resolveAvatarUrl(val.creator.photo_url), $.timeago(val.created_at), val.creator.musician, true); + }); + } + }) + .fail(function(xhr) { + + }); + } + else if (entityType === 'recording') { + rest.getClaimedRecording(claimedRecordingId) + .done(function(response) { + if (response.recording && response.recording.comments) { + $("#spnPlayCount", $scope).html(response.recording.play_count); + $("#spnCommentCount", $scope).html(response.recording.comment_count); + $("#spnLikeCount", $scope).html(response.recording.like_count); + $.each(response.recording.comments, function(index, val) { + renderComment(val.comment, val.creator.id, val.creator.name, + context.JK.resolveAvatarUrl(val.creator.photo_url), $.timeago(val.created_at), val.creator.musician, true); + }); + } + }) + .fail(function(xhr) { + + }); + } + } + + function renderComment(comment, userId, userName, userAvatarUrl, timeago, musician, append) { + var options = { + type: entityType, + avatar_url: userAvatarUrl, + user_id: userId, + hoverAction: musician ? "musician" : "fan", + name: userName, + comment: comment, + timeago: timeago + }; + + var $comment = $(context._.template($('#template-comments', '#comment-dialog').html(), options, {variable: 'data'})); + if (append) { + $content.append($comment); + } + else { + $content.prepend($comment); + } + } + + function addComment() { + var comment = $("#txtComment", $screen).val(); + if ($.trim(comment).length > 0) { + if (entityType === 'session') { + rest.addSessionComment(sessionId, JK.currentUserId, comment) + .done(function(response) { + // $("#spnCommentCount").html(parseInt($("#spnCommentCount").text()) + 1); + renderComment(comment, context.JK.currentUserId, context.JK.currentUserName, + context.JK.currentUserAvatarUrl, $.timeago(Date.now()), context.JK.currentUserMusician, false); + }); + } + else if (entityType === 'recording') { + rest.addRecordingComment(recordingId, JK.currentUserId, comment) + .done(function(response) { + // $("#spnCommentCount", $scope).html(parseInt($("#spnCommentCount").text()) + 1); + renderComment(comment, context.JK.currentUserId, context.JK.currentUserName, + context.JK.currentUserAvatarUrl, $.timeago(Date.now()), context.JK.currentUserMusician, false); + }); + } + } + } + + function events() { + $('#btn-add-comment', $screen).click(addComment); + } + + function showDialog() { + app.layout.showDialog('comment-dialog'); + } + + function initialize() { + + var dialogBindings = { + 'beforeShow' : beforeShow, + 'afterShow' : afterShow, + 'afterHide': afterHide + }; + + app.bindDialog('comment-dialog', dialogBindings); + + $screen = $('[layout-id="comment-dialog"]'); + $content = $screen.find('.landing-comment-scroller'); + + events(); + } + + this.initialize = initialize; + this.showDialog = showDialog; + } + + return this; +})(window,jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/feed.js b/web/app/assets/javascripts/feed.js index df1820f3d..e6fd8030f 100644 --- a/web/app/assets/javascripts/feed.js +++ b/web/app/assets/javascripts/feed.js @@ -335,7 +335,10 @@ } $('.btn-comment', $feedItem).click(function() { - ui.launchCommentDialog(feed.id, 'session'); + ui.launchCommentDialog({ + session_id: feed.id, + entity_type: 'session' + }); }); $('.btn-like', $feedItem).click(function() { @@ -378,7 +381,11 @@ }); $('.btn-comment', $feedItem).click(function() { - ui.launchCommentDialog(feed.id, 'recording'); + ui.launchCommentDialog({ + recording_id: feed.id, + claimed_recording_id: options.candidate_claimed_recording.id, + entity_type: 'recording' + }); }); $('.btn-like', $feedItem).click(function() { diff --git a/web/app/assets/javascripts/feed_item_recording.js b/web/app/assets/javascripts/feed_item_recording.js index 65c784085..04e10d122 100644 --- a/web/app/assets/javascripts/feed_item_recording.js +++ b/web/app/assets/javascripts/feed_item_recording.js @@ -102,7 +102,11 @@ }); $('.btn-comment', $feedItem).click(function() { - ui.launchCommentDialog(recordingId, 'recording'); + ui.launchCommentDialog({ + recording_id: recordingId, + claimed_recording_id: claimedRecordingId, + entity_type: 'recording' + }); }); $('.btn-like', $feedItem).click(function() { diff --git a/web/app/assets/javascripts/feed_item_session.js b/web/app/assets/javascripts/feed_item_session.js index a955a050b..695d6aab3 100644 --- a/web/app/assets/javascripts/feed_item_session.js +++ b/web/app/assets/javascripts/feed_item_session.js @@ -89,7 +89,10 @@ }); $('.btn-comment', $feedItem).click(function() { - ui.launchCommentDialog(musicSessionId, 'session'); + ui.launchCommentDialog({ + session_id: musicSessionId, + entity_type: 'session' + }); }); $('.btn-like', $feedItem).click(function() { diff --git a/web/app/assets/javascripts/ui_helper.js b/web/app/assets/javascripts/ui_helper.js index 02348426f..1c9bd7de2 100644 --- a/web/app/assets/javascripts/ui_helper.js +++ b/web/app/assets/javascripts/ui_helper.js @@ -13,7 +13,7 @@ $likeCountSelector.html(parseInt($likeCountSelector.text()) + 1); $likeButtonSelector.unbind("click"); }); - }; + } function addRecordingLike(recordingId, claimedRecordingId, userId, $likeCountSelector, $likeButtonSelector) { rest.addRecordingLike(recordingId, claimedRecordingId, userId) @@ -23,28 +23,21 @@ }); } - function launchCommentDialog(entityId, entityType) { - console.log("launching comment dialog for %o %o", entityType, entityId); - // TODO: launch comment dialog + function loadComments() { - // var comment = $("#txtSessionComment").val(); - // if ($.trim(comment).length > 0) { - // rest.addSessionComment(sessionId, JK.currentUserId, comment) - // .done(function(response) { - // $("#spnCommentCount").html(parseInt($("#spnCommentCount").text()) + 1); - // renderComment(comment, context.JK.currentUserId, context.JK.currentUserName, - // context.JK.currentUserAvatarUrl, $.timeago(Date.now()), context.JK.currentUserMusician, false); - // }); - // } - }; + } + + function launchCommentDialog(options) { + var commentDialog = new JK.CommentDialog(JK.app, options); + commentDialog.initialize(); + commentDialog.showDialog(); + } function launchShareDialog(entityId, entityType) { - console.log("launching share dialog for %o %o", entityType, entityId); var shareDialog = new JK.ShareDialog(JK.app, entityId, entityType); shareDialog.initialize(JK.FacebookHelperInstance); - shareDialog.showDialog(); - }; + } this.addSessionLike = addSessionLike; this.addRecordingLike = addRecordingLike; diff --git a/web/app/assets/stylesheets/client/client.css b/web/app/assets/stylesheets/client/client.css index 8dfded0bf..844f9ca42 100644 --- a/web/app/assets/stylesheets/client/client.css +++ b/web/app/assets/stylesheets/client/client.css @@ -57,7 +57,7 @@ *= require ./musician *= require web/audioWidgets *= require web/recordings - #= require web/sessions + *= require web/sessions *= require jquery.Jcrop *= require icheck/minimal/minimal */ \ No newline at end of file diff --git a/web/app/views/clients/_commentDialog.html.haml b/web/app/views/clients/_commentDialog.html.haml index e69de29bb..dbe6f6fb8 100644 --- a/web/app/views/clients/_commentDialog.html.haml +++ b/web/app/views/clients/_commentDialog.html.haml @@ -0,0 +1,28 @@ +.dialog.dialog-overlay-sm{layout: 'dialog', 'layout-id' => 'comment-dialog', id: 'comment-dialog'} + .content-head + %h1 comment on this '{{data.type}}' + .dialog-inner + .right + %a.button-orange{id: 'dialog-close-button', 'layout-action' => 'close'} X CLOSE + %h2 Comments: + .avatar-small + = image_tag 'shared/avatar_generic.png', :alt => "" + .left.w80.p10 + %textarea.w100.p5.f15{id: 'txtComment', rows: '2', placeholder: 'Enter a comment...'} + %br/ + %br/ + .right + %a.button-orange{id: 'btn-add-comment'} ADD COMMENT + %br{clear: 'all'}/ + .landing-comment-scroller + +%script{type: 'text/template', id: 'template-comments'} + .avatar-small.mr10{:'user-id' => '{{data.user_id}}', :'hoveraction' => '{{data.hoverAction}}'} + %img{:'src' => '{{data.avatar_url}}', alt: ''} + .w80.left.p10.lightgrey.mt10.comment-text + %a{:'user-id' => '{{data.user_id}}', :'hoveraction' => '{{data.hoverAction}}'} {{data.name}} +  {{data.comment}} + %br/ + .f12.grey.mt5.comment-timestamp + {{data.timeago}} + %br{clear: 'all'}/ \ No newline at end of file