VRFS-1558 implement comment dialog

2014-04-27 04:09:55 -04:00 · 2014-04-27 04:09:55 -04:00 · 9b810310f9
parent 37c23d4ee2
commit 9b810310f9
7 changed files with 192 additions and 22 deletions
--- a/web/app/assets/javascripts/commentDialog.js
+++ 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);
--- 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() {
--- 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() {
--- 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() {
--- 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;
--- 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
 */
--- 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}}
+    &nbsp;{{data.comment}}
+    %br/
+    .f12.grey.mt5.comment-timestamp
+      {{data.timeago}}
+  %br{clear: 'all'}/