VRFS-1558 widget enhancement work

web/app/assets/javascripts/application.js

@@ -36,5 +36,6 @@
 //= require AAB_message_factory
 //= require AAC_underscore
 //= require utils
+//= require ui_helper
 //= require custom_controls
 //= require_directory .

web/app/assets/javascripts/feed.js

@@ -5,7 +5,8 @@
   context.JK.FeedScreen = function(app) {
 
     var logger = context.JK.logger;
-    var rest = context.JK.Rest();
+    var rest = new context.JK.Rest();
+    var ui = new context.JK.UIHelper(JK.app);
     var currentQuery = null;
     var currentPage = 0;
     var LIMIT = 20;
@@ -323,6 +324,18 @@
           $('.musician-name', $feedItem).click(toggleUserProfile);
           $('.artist', $feedItem).click(toggleBandProfile);
 
+          $('.btn-share', $feedItem).click(function() {
+            ui.launchShareDialog(feed.id, 'session');
+          });
+
+          $('.btn-comment', $feedItem).click(function() {
+            ui.launchCommentDialog(feed.id, 'session');
+          });
+
+          $('.btn-like', $feedItem).click(function() {
+            ui.addSessionLike(feed.id, JK.currentUserId, $('.likes', $feedItem), $('.btn-like', $feedItem))
+          });
+
           // put the feed item on the page
           renderFeed($feedItem);
 
@@ -353,6 +366,18 @@
           $('.details', $feedItem).click(toggleRecordingDetails);
           $('.details-arrow', $feedItem).click(toggleRecordingDetails);
           $('.play-button', $feedItem).click(toggleRecordingPlay);
+          
+          $('.btn-share', $feedItem).click(function() {
+            ui.launchShareDialog(options.candidate_claimed_recording.id, 'recording');
+          });
+          
+          $('.btn-comment', $feedItem).click(function() {
+            ui.launchCommentDialog(feed.id, 'recording');
+          });
+          
+          $('.btn-like', $feedItem).click(function() {
+            ui.addRecordingLike(feed.id, options.candidate_claimed_recording.id, JK.currentUserId, $('.likes', $feedItem), $('.btn-like', $feedItem));
+          });
 
           // put the feed item on the page
           renderFeed($feedItem);

web/app/assets/javascripts/feed_item_recording.js

@@ -5,6 +5,8 @@
   context.JK = context.JK || {};
   context.JK.FeedItemRecording = function($parentElement, options){
 
+    var ui = new context.JK.UIHelper(JK.app);
+
     var claimedRecordingId = $parentElement.attr('data-claimed-recording-id');
     var recordingId = $parentElement.attr('id');
     var mode = $parentElement.attr('data-mode');
@@ -94,13 +96,26 @@
       $('.details', $feedItem).click(toggleDetails);
       $('.details-arrow', $feedItem).click(toggleDetails);
       $('.play-button', $feedItem).click(togglePlay);
+
+      $('.btn-share', $feedItem).click(function() {
+        ui.launchShareDialog(claimedRecordingId, 'recording');
+      });
+      
+      $('.btn-comment', $feedItem).click(function() {
+        ui.launchCommentDialog(recordingId, 'recording');
+      });
+
+      $('.btn-like', $feedItem).click(function() {
+        ui.addRecordingLike(recordingId, claimedRecordingId, JK.currentUserId, $('.likes', $feedItem), $('.btn-like', $feedItem));
+      });
+
       $controls.bind('statechange.listenRecording', stateChange);
     }
 
     function initialize() {
       $('.timeago', $feedItem).timeago();
       $('.dotdotdot', $feedItem).dotdotdot();
-        $controls.listenRecording({recordingId: recordingId, claimedRecordingId: claimedRecordingId, sliderSelector:'.recording-slider', sliderBarSelector: '.recording-playback', currentTimeSelector:'.recording-current'});
+      $controls.listenRecording({recordingId: recordingId, claimedRecordingId: claimedRecordingId, sliderSelector:'.recording-slider', sliderBarSelector: '.recording-playback', currentTimeSelector:'.recording-current'});
       context.JK.prettyPrintElements($('time.duration', $feedItem));
       context.JK.setInstrumentAssetPath($('.instrument-icon', $feedItem));
 

web/app/assets/javascripts/feed_item_session.js

@@ -6,8 +6,7 @@
   context.JK.FeedItemSessionTimer = null;
   context.JK.FeedItemSession = function($parentElement, options){
 
-    var logger = context.JK.logger;
-    var rest   = new context.JK.Rest();
+    var ui = new context.JK.UIHelper(JK.app);
 
     var $feedItem       = $parentElement;
     var $description    = $('.description', $feedItem)
@@ -84,6 +83,19 @@
       $('.details', $feedItem).click(toggleDetails);
       $('.details-arrow', $feedItem).click(toggleDetails);
       $('.play-button', $feedItem).click(togglePlay);
+
+      $('.btn-share', $feedItem).click(function() {
+        ui.launchShareDialog(musicSessionId, 'session');
+      });
+      
+      $('.btn-comment', $feedItem).click(function() {
+        ui.launchCommentDialog(musicSessionId, 'session');
+      });
+
+      $('.btn-like', $feedItem).click(function() {
+        ui.addSessionLike(musicSessionId, JK.currentUserId, $('.likes', $feedItem), $('.btn-like', $feedItem))
+      });
+
       $controls.bind('statechange.listenBroadcast', stateChange);
     }
 

web/app/assets/javascripts/landing/landing.js

@@ -5,6 +5,7 @@
 //= require globals
 //= require jamkazam
 //= require utils
+//= require ui_helper
 //= require ga
 //= require jam_rest
 //= require landing/init

web/app/assets/javascripts/ui_helper.js

@@ -0,0 +1,53 @@
+(function(context,$) {
+  "use strict";
+
+  context.JK = context.JK || {};
+
+  context.JK.UIHelper = function(app) {
+    var logger = context.JK.logger;
+    var rest = new context.JK.Rest();
+
+    function addSessionLike(sessionId, userId, $likeCountSelector, $likeButtonSelector) {
+      rest.addSessionLike(sessionId, userId)
+        .done(function(response) {
+          $likeCountSelector.html(parseInt($likeCountSelector.text()) + 1);
+          $likeButtonSelector.unbind("click");
+        });
+    };
+
+    function addRecordingLike(recordingId, claimedRecordingId, userId, $likeCountSelector, $likeButtonSelector) {
+      rest.addRecordingLike(recordingId, claimedRecordingId, userId)
+        .done(function(response) {
+          $likeCountSelector.html(parseInt($likeCountSelector.text()) + 1);
+          $likeButtonSelector.unbind("click");
+        });
+    }
+
+    function launchCommentDialog(entityId, entityType) {
+      console.log("launching comment dialog for %o %o", entityType, entityId);
+      // TODO: launch comment dialog
+
+      // 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 launchShareDialog(entityId, entityType) {
+      console.log("launching share dialog for %o %o", entityType, entityId);
+    };
+
+    this.addSessionLike = addSessionLike;
+    this.addRecordingLike = addRecordingLike;
+    this.launchCommentDialog = launchCommentDialog;
+    this.launchShareDialog = launchShareDialog;
+
+    return this;
+  };
+
+})(window,jQuery);

web/app/assets/javascripts/web/web.js

@@ -39,6 +39,7 @@
 //= require user_dropdown
 //= require jamkazam
 //= require utils
+//= require ui_helper
 //= require custom_controls
 //= require ga
 //= require jam_rest

web/app/views/users/_feed_music_session.html.haml

@@ -31,23 +31,22 @@
     .left.small
       = session_genre(feed_item)
     .right.small.feed-details
-      %a{title: 'Share', id: 'btn-share'}
+      %a{title: 'Share', class: 'btn-share'}
         = image_tag 'content/icon_share.png', :height => "12", :width => "7"
        
       %span.play-count
         %span.plays
           = feed_item.play_count
-        %a{title: 'Play', id: 'btn-play'}
-          = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
+        = image_tag 'content/icon_arrow.png', :height => "12", :width => "7", :title => 'Play'
       %span.comment-count
         %span.comments
           = feed_item.comment_count
-        %a{title: 'Comment', id: 'btn-comment'}
+        %a{title: 'Comment', class: 'btn-comment'}
           = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
       %span.like-count
         %span.likes
           = feed_item.like_count
-        %a{title: 'Like', id: 'btn-like'}
+        %a{title: 'Like', class: 'btn-like'}
           = image_tag 'content/icon_like.png', :height => "12", :width => "12"
       %a.details{:href => "#"} Details
       %a.details-arrow.arrow-down-orange{:href => "#"}

web/app/views/users/_feed_music_session_ajax.html.haml

@@ -34,23 +34,22 @@
       / genre and social
       .left.small= '{{data.feed_item.helpers.genre}}'
       .right.small.feed-details
-        %a{title: 'Share', id: 'btn-share'}
+        %a{title: 'Share', class: 'btn-share'}
           = image_tag 'content/icon_share.png', :height => "12", :width => "7"
          
         %span.play-count
           %span.plays
             = '{{data.feed_item.play_count}}'
-          %a{title: 'Play', id: 'btn-play'}
-            = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
+          = image_tag 'content/icon_arrow.png', :height => "12", :width => "7", :title => 'Play'
         %span.comment-count
           %span.comments
             = '{{data.feed_item.comment_count}}'
-          %a{title: 'Comment', id: 'btn-comment'}
+          %a{title: 'Comment', class: 'btn-comment'}
             = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
         %span.like-count
           %span.likes
             = '{{data.feed_item.like_count}}'
-          %a{title: 'Like', id: 'btn-like'}
+          %a{title: 'Like', class: 'btn-like'}
             = image_tag 'content/icon_like.png', :height => "12", :width => "12"
         %a.details{:href => "#"} Details
         %a.details-arrow.arrow-down-orange{:href => "#"}

web/app/views/users/_feed_recording.html.haml

@@ -52,23 +52,22 @@
     .left.small
       = recording_genre(feed_item)
     .right.small.feed-details
-      %a{title: 'Share', id: 'btn-share'}
+      %a{title: 'Share', class: 'btn-share'}
         = image_tag 'content/icon_share.png', :height => "12", :width => "7"
        
       %span.play-count
         %span.plays
           = feed_item.play_count
-        %a{title: 'Play', id: 'btn-play'}
-          = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
+        = image_tag 'content/icon_arrow.png', :height => "12", :width => "7", :title => 'Play'
       %span.comment-count
         %span.comments
           = feed_item.comment_count
-        %a{title: 'Comment', id: 'btn-comment'}
+        %a{title: 'Comment', class: 'btn-comment'}
           = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
       %span.like-count
         %span.likes
           = feed_item.like_count
-        %a{title: 'Like', id: 'btn-like'}
+        %a{title: 'Like', class: 'btn-like'}
           = image_tag 'content/icon_like.png', :height => "12", :width => "12"
       %a.details{:href => "#"} Details
       %a.details-arrow.arrow-down-orange{:href => "#"}

web/app/views/users/_feed_recording_ajax.html.haml

@@ -54,23 +54,22 @@
       / genre and social
       .left.small= '{{data.feed_item.helpers.genre}}'
       .right.small.feed-details
-        %a{title: 'Share', id: 'btn-share'}
+        %a{title: 'Share', class: 'btn-share'}
           = image_tag 'content/icon_share.png', :height => "12", :width => "7"
          
         %span.play-count
           %span.plays
             = '{{data.feed_item.play_count}}'
-          %a{title: 'Play', id: 'btn-play'}
-            = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
+          = image_tag 'content/icon_arrow.png', :height => "12", :width => "7", :title => 'Play'
         %span.comment-count
           %span.comments
             = '{{data.feed_item.comment_count}}'
-          %a{title: 'Comment', id: 'btn-comment'}
+          %a{title: 'Comment', class: 'btn-comment'}
             = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
         %span.like-count
           %span.likes
             = '{{data.feed_item.like_count}}'
-          %a{title: 'Like', id: 'btn-like'}
+          %a{title: 'Like', class: 'btn-like'}
             = image_tag 'content/icon_like.png', :height => "12", :width => "12"
         %a.details{:href => "#"} Details
         %a.details-arrow.arrow-down-orange{:href => "#"}