From 5fa2319daafe8a68acbf55307a65e97d7f8c62ef Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Wed, 23 Apr 2014 02:07:46 -0400 Subject: [PATCH 01/12] VRFS-1558 make play/comment/like icons clickable in feed and add share icon --- .../stylesheets/web/audioWidgets.css.scss | 2 +- .../views/users/_feed_music_session.html.haml | 14 ++++++++++---- .../users/_feed_music_session_ajax.html.haml | 18 ++++++++++++------ web/app/views/users/_feed_recording.html.haml | 14 ++++++++++---- .../views/users/_feed_recording_ajax.html.haml | 16 +++++++++++----- 5 files changed, 44 insertions(+), 20 deletions(-) diff --git a/web/app/assets/stylesheets/web/audioWidgets.css.scss b/web/app/assets/stylesheets/web/audioWidgets.css.scss index 9803796b5..da7a933f1 100644 --- a/web/app/assets/stylesheets/web/audioWidgets.css.scss +++ b/web/app/assets/stylesheets/web/audioWidgets.css.scss @@ -238,7 +238,7 @@ font-size:12px; font-weight:bold; color:#ccc; - margin-bottom:10px; + margin-bottom:5px; overflow: hidden; white-space: nowrap; text-decoration: none; diff --git a/web/app/views/users/_feed_music_session.html.haml b/web/app/views/users/_feed_music_session.html.haml index ff40d20d6..6aea05689 100644 --- a/web/app/views/users/_feed_music_session.html.haml +++ b/web/app/views/users/_feed_music_session.html.haml @@ -4,7 +4,7 @@ = session_avatar(feed_item) / type and artist .left.ml20.w15 - .title{hoveraction: 'session', :'session-id' => feed_item.id } SESSION + .title{:'session-id' => feed_item.id } SESSION .artist = session_artist_name(feed_item) = timeago(feed_item.created_at, class: 'small created_at') @@ -31,18 +31,24 @@ .left.small = session_genre(feed_item) .right.small.feed-details + %a{title: 'Share', id: 'btn-share'} + = image_tag 'content/icon_share.png', :height => "12", :width => "7" +   %span.play-count %span.plays = feed_item.play_count - = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" + %a{title: 'Play', id: 'btn-play'} + = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" %span.comment-count %span.comments = feed_item.comment_count - = image_tag 'content/icon_comment.png', :height => "12", :width => "13" + %a{title: 'Comment', id: 'btn-comment'} + = image_tag 'content/icon_comment.png', :height => "12", :width => "13" %span.like-count %span.likes = feed_item.like_count - = image_tag 'content/icon_like.png', :height => "12", :width => "12" + %a{title: 'Like', id: 'btn-like'} + = image_tag 'content/icon_like.png', :height => "12", :width => "12" %a.details{:href => "#"} Details %a.details-arrow.arrow-down-orange{:href => "#"} %br/ diff --git a/web/app/views/users/_feed_music_session_ajax.html.haml b/web/app/views/users/_feed_music_session_ajax.html.haml index 51f461f2c..8e349820b 100644 --- a/web/app/views/users/_feed_music_session_ajax.html.haml +++ b/web/app/views/users/_feed_music_session_ajax.html.haml @@ -5,10 +5,10 @@ %img{ src: '{{data.feed_item.helpers.avatar}}' } / type and artist .left.ml20.w15 - .title{hoveraction: 'session', :'session-id' => '{{data.feed_item.id}}' } SESSION + .title{:'session-id' => '{{data.feed_item.id}}' } SESSION .artist %a.artist{href: "#", :hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} - = '{{data.feed_item.helpers.artist_name}}' + = '{{data.feed_item.helpers.artist_name}}' %time.small.created_at.timeago{datetime: '{{data.feed_item.helpers.utc_created_at}}'}= '{{data.feed_item.created_at}}' / name and description .left.ml20.w30 @@ -34,18 +34,24 @@ / genre and social .left.small= '{{data.feed_item.helpers.genre}}' .right.small.feed-details + %a{title: 'Share', id: 'btn-share'} + = image_tag 'content/icon_share.png', :height => "12", :width => "7" +   %span.play-count %span.plays = '{{data.feed_item.play_count}}' - = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" + %a{title: 'Play', id: 'btn-play'} + = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" %span.comment-count %span.comments = '{{data.feed_item.comment_count}}' - = image_tag 'content/icon_comment.png', :height => "12", :width => "13" + %a{title: 'Comment', id: 'btn-comment'} + = image_tag 'content/icon_comment.png', :height => "12", :width => "13" %span.like-count %span.likes - = '{{data.feed_item.comment_count}}' - = image_tag 'content/icon_like.png', :height => "12", :width => "12" + = '{{data.feed_item.like_count}}' + %a{title: 'Like', id: 'btn-like'} + = image_tag 'content/icon_like.png', :height => "12", :width => "12" %a.details{:href => "#"} Details %a.details-arrow.arrow-down-orange{:href => "#"} %br/ diff --git a/web/app/views/users/_feed_recording.html.haml b/web/app/views/users/_feed_recording.html.haml index dc4051602..b208c2f03 100644 --- a/web/app/views/users/_feed_recording.html.haml +++ b/web/app/views/users/_feed_recording.html.haml @@ -7,7 +7,7 @@ = recording_avatar(feed_item) / type and artist .left.ml20.w15.feed-type-title - .title{hoveraction: 'recording', :'recording-id' => feed_item.candidate_claimed_recording.id } RECORDING + .title{:'recording-id' => feed_item.candidate_claimed_recording.id } RECORDING .artist = recording_artist_name(feed_item) = timeago(feed_item.created_at, class: 'small created_at') @@ -52,18 +52,24 @@ .left.small = recording_genre(feed_item) .right.small.feed-details + %a{title: 'Share', id: 'btn-share'} + = image_tag 'content/icon_share.png', :height => "12", :width => "7" +   %span.play-count %span.plays = feed_item.play_count - = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" + %a{title: 'Play', id: 'btn-play'} + = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" %span.comment-count %span.comments = feed_item.comment_count - = image_tag 'content/icon_comment.png', :height => "12", :width => "13" + %a{title: 'Comment', id: 'btn-comment'} + = image_tag 'content/icon_comment.png', :height => "12", :width => "13" %span.like-count %span.likes = feed_item.like_count - = image_tag 'content/icon_like.png', :height => "12", :width => "12" + %a{title: 'Like', id: 'btn-like'} + = image_tag 'content/icon_like.png', :height => "12", :width => "12" %a.details{:href => "#"} Details %a.details-arrow.arrow-down-orange{:href => "#"} %br/ diff --git a/web/app/views/users/_feed_recording_ajax.html.haml b/web/app/views/users/_feed_recording_ajax.html.haml index ffe584099..aac52b1cb 100644 --- a/web/app/views/users/_feed_recording_ajax.html.haml +++ b/web/app/views/users/_feed_recording_ajax.html.haml @@ -5,10 +5,10 @@ %img{ src: '{{data.feed_item.helpers.avatar}}' } / type and artist .left.ml20.w15 - .title{hoveraction: 'recording', :'recording-id' => '{{data.candidate_claimed_recording.id}}' } RECORDING + .title{:'recording-id' => '{{data.candidate_claimed_recording.id}}' } RECORDING .artist %a.artist{href: "#", :hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} - = '{{data.feed_item.helpers.artist_name}}' + = '{{data.feed_item.helpers.artist_name}}' %time.small.created_at.timeago{datetime: '{{data.feed_item.helpers.utc_created_at}}'} = '{{data.feed_item.created_at}}' / name and description @@ -54,18 +54,24 @@ / genre and social .left.small= '{{data.feed_item.helpers.genre}}' .right.small.feed-details + %a{title: 'Share', id: 'btn-share'} + = image_tag 'content/icon_share.png', :height => "12", :width => "7" +   %span.play-count %span.plays = '{{data.feed_item.play_count}}' - = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" + %a{title: 'Play', id: 'btn-play'} + = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" %span.comment-count %span.comments = '{{data.feed_item.comment_count}}' - = image_tag 'content/icon_comment.png', :height => "12", :width => "13" + %a{title: 'Comment', id: 'btn-comment'} + = image_tag 'content/icon_comment.png', :height => "12", :width => "13" %span.like-count %span.likes = '{{data.feed_item.like_count}}' - = image_tag 'content/icon_like.png', :height => "12", :width => "12" + %a{title: 'Like', id: 'btn-like'} + = image_tag 'content/icon_like.png', :height => "12", :width => "12" %a.details{:href => "#"} Details %a.details-arrow.arrow-down-orange{:href => "#"} %br/ From 23137ec4238d818caf7c829275e3149340125238 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Fri, 25 Apr 2014 01:56:24 -0400 Subject: [PATCH 02/12] VRFS-1558 widget enhancement work --- web/app/assets/javascripts/application.js | 1 + web/app/assets/javascripts/feed.js | 27 +++++++++- .../assets/javascripts/feed_item_recording.js | 17 +++++- .../assets/javascripts/feed_item_session.js | 16 +++++- web/app/assets/javascripts/landing/landing.js | 1 + web/app/assets/javascripts/ui_helper.js | 53 +++++++++++++++++++ web/app/assets/javascripts/web/web.js | 1 + .../views/clients/_commentDialog.html.haml | 0 .../views/users/_feed_music_session.html.haml | 9 ++-- .../users/_feed_music_session_ajax.html.haml | 9 ++-- web/app/views/users/_feed_recording.html.haml | 9 ++-- .../users/_feed_recording_ajax.html.haml | 9 ++-- 12 files changed, 128 insertions(+), 24 deletions(-) create mode 100644 web/app/assets/javascripts/ui_helper.js create mode 100644 web/app/views/clients/_commentDialog.html.haml diff --git a/web/app/assets/javascripts/application.js b/web/app/assets/javascripts/application.js index ec1dee5c6..eaa5c92fc 100644 --- a/web/app/assets/javascripts/application.js +++ b/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 . diff --git a/web/app/assets/javascripts/feed.js b/web/app/assets/javascripts/feed.js index cc176e06a..0280a24eb 100644 --- a/web/app/assets/javascripts/feed.js +++ b/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); diff --git a/web/app/assets/javascripts/feed_item_recording.js b/web/app/assets/javascripts/feed_item_recording.js index 834aedae5..65c784085 100644 --- a/web/app/assets/javascripts/feed_item_recording.js +++ b/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)); diff --git a/web/app/assets/javascripts/feed_item_session.js b/web/app/assets/javascripts/feed_item_session.js index 95e996b34..a955a050b 100644 --- a/web/app/assets/javascripts/feed_item_session.js +++ b/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); } diff --git a/web/app/assets/javascripts/landing/landing.js b/web/app/assets/javascripts/landing/landing.js index 52cd0cc83..3a9e9f7d0 100644 --- a/web/app/assets/javascripts/landing/landing.js +++ b/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 diff --git a/web/app/assets/javascripts/ui_helper.js b/web/app/assets/javascripts/ui_helper.js new file mode 100644 index 000000000..01c172991 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/web/app/assets/javascripts/web/web.js b/web/app/assets/javascripts/web/web.js index e5230fbf0..78df2ad4c 100644 --- a/web/app/assets/javascripts/web/web.js +++ b/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 diff --git a/web/app/views/clients/_commentDialog.html.haml b/web/app/views/clients/_commentDialog.html.haml new file mode 100644 index 000000000..e69de29bb diff --git a/web/app/views/users/_feed_music_session.html.haml b/web/app/views/users/_feed_music_session.html.haml index 6aea05689..7f49a92e9 100644 --- a/web/app/views/users/_feed_music_session.html.haml +++ b/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 => "#"} diff --git a/web/app/views/users/_feed_music_session_ajax.html.haml b/web/app/views/users/_feed_music_session_ajax.html.haml index 8e349820b..a7c1cccc5 100644 --- a/web/app/views/users/_feed_music_session_ajax.html.haml +++ b/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 => "#"} diff --git a/web/app/views/users/_feed_recording.html.haml b/web/app/views/users/_feed_recording.html.haml index b208c2f03..ad9e42d0a 100644 --- a/web/app/views/users/_feed_recording.html.haml +++ b/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 => "#"} diff --git a/web/app/views/users/_feed_recording_ajax.html.haml b/web/app/views/users/_feed_recording_ajax.html.haml index aac52b1cb..ce3a3a74e 100644 --- a/web/app/views/users/_feed_recording_ajax.html.haml +++ b/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 => "#"} From ce80b1a09b361350519762e890998fdcee06fda8 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Fri, 25 Apr 2014 02:11:46 -0400 Subject: [PATCH 03/12] VRFS-1558 convert SESSION and RECORDING text into clickable links --- web/app/views/users/_feed_music_session.html.haml | 3 ++- web/app/views/users/_feed_music_session_ajax.html.haml | 3 ++- web/app/views/users/_feed_recording.html.haml | 3 ++- web/app/views/users/_feed_recording_ajax.html.haml | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/web/app/views/users/_feed_music_session.html.haml b/web/app/views/users/_feed_music_session.html.haml index 7f49a92e9..6b0ee7294 100644 --- a/web/app/views/users/_feed_music_session.html.haml +++ b/web/app/views/users/_feed_music_session.html.haml @@ -4,7 +4,8 @@ = session_avatar(feed_item) / type and artist .left.ml20.w15 - .title{:'session-id' => feed_item.id } SESSION + .title{:'session-id' => feed_item.id } + %a{:href => "/sessions/#{feed_item.id}", :target => "_blank"} SESSION .artist = session_artist_name(feed_item) = timeago(feed_item.created_at, class: 'small created_at') diff --git a/web/app/views/users/_feed_music_session_ajax.html.haml b/web/app/views/users/_feed_music_session_ajax.html.haml index a7c1cccc5..5cb7c5d4f 100644 --- a/web/app/views/users/_feed_music_session_ajax.html.haml +++ b/web/app/views/users/_feed_music_session_ajax.html.haml @@ -5,7 +5,8 @@ %img{ src: '{{data.feed_item.helpers.avatar}}' } / type and artist .left.ml20.w15 - .title{:'session-id' => '{{data.feed_item.id}}' } SESSION + .title{:'session-id' => '{{data.feed_item.id}}' } + %a{:href => "/sessions/{{data.feed_item.id}}", :rel => "external"} SESSION .artist %a.artist{href: "#", :hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} = '{{data.feed_item.helpers.artist_name}}' diff --git a/web/app/views/users/_feed_recording.html.haml b/web/app/views/users/_feed_recording.html.haml index ad9e42d0a..82b45d7c1 100644 --- a/web/app/views/users/_feed_recording.html.haml +++ b/web/app/views/users/_feed_recording.html.haml @@ -7,7 +7,8 @@ = recording_avatar(feed_item) / type and artist .left.ml20.w15.feed-type-title - .title{:'recording-id' => feed_item.candidate_claimed_recording.id } RECORDING + .title{:'recording-id' => feed_item.candidate_claimed_recording.id } + %a{:href => "/recordings/#{feed_item.candidate_claimed_recording.id}", :target => "_blank"} RECORDING .artist = recording_artist_name(feed_item) = timeago(feed_item.created_at, class: 'small created_at') diff --git a/web/app/views/users/_feed_recording_ajax.html.haml b/web/app/views/users/_feed_recording_ajax.html.haml index ce3a3a74e..1b5ddd703 100644 --- a/web/app/views/users/_feed_recording_ajax.html.haml +++ b/web/app/views/users/_feed_recording_ajax.html.haml @@ -5,7 +5,8 @@ %img{ src: '{{data.feed_item.helpers.avatar}}' } / type and artist .left.ml20.w15 - .title{:'recording-id' => '{{data.candidate_claimed_recording.id}}' } RECORDING + .title{:'recording-id' => '{{data.candidate_claimed_recording.id}}' } + %a{:href => "/recordings/{{data.candidate_claimed_recording.id}}", :rel => "external"} RECORDING .artist %a.artist{href: "#", :hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} = '{{data.feed_item.helpers.artist_name}}' From c06458550c448586788b4f186b68fb2b3df24ad0 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Sat, 26 Apr 2014 14:21:17 -0400 Subject: [PATCH 04/12] VRFS-1436 allow unauthenticated uses to share recordings and sessions from landing pages --- web/app/assets/javascripts/ui_helper.js | 4 ++++ web/app/assets/javascripts/web/recordings.js | 14 ++++++-------- web/app/assets/javascripts/web/sessions.js | 14 ++++++-------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/web/app/assets/javascripts/ui_helper.js b/web/app/assets/javascripts/ui_helper.js index 01c172991..02348426f 100644 --- a/web/app/assets/javascripts/ui_helper.js +++ b/web/app/assets/javascripts/ui_helper.js @@ -40,6 +40,10 @@ 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; diff --git a/web/app/assets/javascripts/web/recordings.js b/web/app/assets/javascripts/web/recordings.js index 5a901a81e..1fecac65b 100644 --- a/web/app/assets/javascripts/web/recordings.js +++ b/web/app/assets/javascripts/web/recordings.js @@ -2,7 +2,8 @@ context.JK.ShowRecording = function(app) { var logger = context.JK.logger; - var rest = new JK.Rest(); + var rest = JK.Rest(); + var ui = context.JK.UIHelper(); var recordingId = null; var claimedRecordingId = null; var $scope = $(".landing-details"); @@ -105,14 +106,11 @@ $controls.bind('statechange.listenRecording', stateChange); $controls.listenRecording({recordingId: recordingId, claimedRecordingId: claimedRecordingId, sliderSelector:'.recording-slider', sliderBarSelector: '.recording-playback', currentTimeSelector:'.recording-current'}); + $("#btnShare", $scope).click(function(e) { + ui.launchShareDialog(claimedRecordingId, "recording"); + }); + if (JK.currentUserId) { - var shareDialog = new JK.ShareDialog(JK.app, claimedRecordingId, "recording"); - shareDialog.initialize(JK.FacebookHelperInstance); - - $("#btnShare", $scope).click(function(e) { - shareDialog.showDialog(); - }); - $("#btnPostComment").click(function(e) { if ($.trim($("#txtRecordingComment").val()).length > 0) { addComment(); diff --git a/web/app/assets/javascripts/web/sessions.js b/web/app/assets/javascripts/web/sessions.js index 55a569142..c31bd62c7 100644 --- a/web/app/assets/javascripts/web/sessions.js +++ b/web/app/assets/javascripts/web/sessions.js @@ -2,7 +2,8 @@ context.JK.ShowMusicSession = function(app) { var logger = context.JK.logger; - var rest = new JK.Rest(); + var rest = JK.Rest(); + var ui = context.JK.UIHelper(); var sessionId = null; var $scope = $(".landing-details"); var $controls = null; @@ -107,14 +108,11 @@ sessionId = musicSessionId; + $("#btnShare").click(function(e) { + ui.launchShareDialog(sessionId, "session"); + }); + if (JK.currentUserId) { - var shareDialog = new JK.ShareDialog(context.JK.app, sessionId, "session"); - shareDialog.initialize(JK.FacebookHelperInstance); - - $("#btnShare").click(function(e) { - shareDialog.showDialog(); - }); - $("#btnPostComment").click(function(e) { if ($.trim($("#txtSessionComment").val()).length > 0) { addComment(); From 7e2d37bac5e65e046df0b3a0fb5a4e1e11582305 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Sat, 26 Apr 2014 16:31:51 -0400 Subject: [PATCH 05/12] VRFS-1555 VRFS-1556 do not show private sessions and recordings --- .../api_music_sessions/history_show.rabl | 2 +- web/app/views/clients/index.html.erb | 2 + web/app/views/layouts/web.html.erb | 1 + web/app/views/music_sessions/show.html.erb | 177 +++++++++--------- web/app/views/recordings/show.html.erb | 59 +++--- 5 files changed, 130 insertions(+), 111 deletions(-) diff --git a/web/app/views/api_music_sessions/history_show.rabl b/web/app/views/api_music_sessions/history_show.rabl index d29de5af3..9d22fd4ab 100644 --- a/web/app/views/api_music_sessions/history_show.rabl +++ b/web/app/views/api_music_sessions/history_show.rabl @@ -1,6 +1,6 @@ object @history -attributes :id, :music_session_id, :description, :genres, :like_count, :comment_count, :created_at +attributes :id, :music_session_id, :description, :fan_access, :genres, :like_count, :comment_count, :created_at node :share_url do |history| unless history.share_token.nil? diff --git a/web/app/views/clients/index.html.erb b/web/app/views/clients/index.html.erb index bd37726f2..f34fc162a 100644 --- a/web/app/views/clients/index.html.erb +++ b/web/app/views/clients/index.html.erb @@ -62,6 +62,8 @@ <%= render "clients/banners/disconnected" %> <%= render "overlay_small" %> <%= render "help" %> +<%= render "commentDialog" %> +
-<% end %> + <% content_for :extra_js do %> + + <% end %> + <% end %> \ No newline at end of file diff --git a/web/app/views/recordings/show.html.erb b/web/app/views/recordings/show.html.erb index 970cc0ad4..52839832d 100644 --- a/web/app/views/recordings/show.html.erb +++ b/web/app/views/recordings/show.html.erb @@ -18,6 +18,7 @@ <% end %>
+<% if @claimed_recording.is_public %>
<% unless @claimed_recording.recording.band.blank? %>
@@ -90,32 +91,40 @@ <%= render :partial => "shared/track_details", :locals => {:tracks => @claimed_recording.recording.grouped_tracks} %>

-
-<% if signed_in? %> - <% unless @claimed_recording.recording.band.nil? %> - <%= render :partial => "shared/landing_sidebar", :locals => {:user => @claimed_recording.recording.band, :recent_history => @claimed_recording.recording.band.recent_history} %> + <% else %> - <%= render :partial => "shared/landing_sidebar", :locals => {:user => @claimed_recording.recording.owner, :recent_history => @claimed_recording.recording.owner.recent_history} %> +
RECORDING NOT FOUND
+ <% end %> +
+ +<% if @claimed_recording.is_public %> + <% if signed_in? %> + <% unless @claimed_recording.recording.band.nil? %> + <%= render :partial => "shared/landing_sidebar", :locals => {:user => @claimed_recording.recording.band, :recent_history => @claimed_recording.recording.band.recent_history} %> + <% else %> + <%= render :partial => "shared/landing_sidebar", :locals => {:user => @claimed_recording.recording.owner, :recent_history => @claimed_recording.recording.owner.recent_history} %> + <% end %> + <% else %> + <%= render :partial => "shared/cta_sidebar" %> + <% end %> + + <% content_for :after_black_bar do %> +
+ <%= render :partial => "shared/comments", :locals => {:comments => @claimed_recording.recording.comments, :id => "txtRecordingComment"} %> + <% end %> + + + <% content_for :extra_dialogs do %> + <%= render :partial => "clients/shareDialog" %> + <% end %> + + <% content_for :extra_js do %> + <% end %> -<% else %> - <%= render :partial => "shared/cta_sidebar" %> -<% end %> - -<% content_for :after_black_bar do %> -
- <%= render :partial => "shared/comments", :locals => {:comments => @claimed_recording.recording.comments, :id => "txtRecordingComment"} %> -<% end %> - -<% content_for :extra_dialogs do %> - <%= render :partial => "clients/shareDialog" %> -<% end %> - -<% content_for :extra_js do %> - <% end %> From 37c23d4ee2ba98099fd61d64de6339196ece1cac Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Sat, 26 Apr 2014 23:59:38 -0400 Subject: [PATCH 06/12] VRFS-1558 wire up share button dialog / hide new share icon if session has ended --- web/app/assets/javascripts/application.js | 1 - web/app/assets/javascripts/feed.js | 12 +++++++++--- web/app/assets/javascripts/landing/landing.js | 3 ++- web/app/assets/javascripts/shareDialog.js | 2 +- web/app/views/users/_feed_music_session.html.haml | 7 ++++--- web/app/views/users/welcome.html.haml | 4 ++++ 6 files changed, 20 insertions(+), 9 deletions(-) diff --git a/web/app/assets/javascripts/application.js b/web/app/assets/javascripts/application.js index eaa5c92fc..ec1dee5c6 100644 --- a/web/app/assets/javascripts/application.js +++ b/web/app/assets/javascripts/application.js @@ -36,6 +36,5 @@ //= require AAB_message_factory //= require AAC_underscore //= require utils -//= require ui_helper //= require custom_controls //= require_directory . diff --git a/web/app/assets/javascripts/feed.js b/web/app/assets/javascripts/feed.js index 0280a24eb..df1820f3d 100644 --- a/web/app/assets/javascripts/feed.js +++ b/web/app/assets/javascripts/feed.js @@ -324,9 +324,15 @@ $('.musician-name', $feedItem).click(toggleUserProfile); $('.artist', $feedItem).click(toggleBandProfile); - $('.btn-share', $feedItem).click(function() { - ui.launchShareDialog(feed.id, 'session'); - }); + if (!feed.session_removed_at) + { + $('.btn-share', $feedItem).click(function() { + ui.launchShareDialog(feed.id, 'session'); + }); + } + else { + $('.btn-share', $feedItem).hide(); + } $('.btn-comment', $feedItem).click(function() { ui.launchCommentDialog(feed.id, 'session'); diff --git a/web/app/assets/javascripts/landing/landing.js b/web/app/assets/javascripts/landing/landing.js index 3a9e9f7d0..fbdb167c0 100644 --- a/web/app/assets/javascripts/landing/landing.js +++ b/web/app/assets/javascripts/landing/landing.js @@ -9,4 +9,5 @@ //= require ga //= require jam_rest //= require landing/init -//= require landing/signup \ No newline at end of file +//= require landing/signup +//= require shareDialog \ No newline at end of file diff --git a/web/app/assets/javascripts/shareDialog.js b/web/app/assets/javascripts/shareDialog.js index c5dceb65b..dc3bca311 100644 --- a/web/app/assets/javascripts/shareDialog.js +++ b/web/app/assets/javascripts/shareDialog.js @@ -413,7 +413,7 @@ $(dialogId + ' .link-contents').text(entity.share_url) }) .fail(function(jqXHR) { - app.notifyServerError(jqXHR, "Unable to Fetch Session Data"); + app.notifyServerError(jqXHR, "Unable to Fetch Recording Data"); }) } else { diff --git a/web/app/views/users/_feed_music_session.html.haml b/web/app/views/users/_feed_music_session.html.haml index 6b0ee7294..d903ec43f 100644 --- a/web/app/views/users/_feed_music_session.html.haml +++ b/web/app/views/users/_feed_music_session.html.haml @@ -32,9 +32,10 @@ .left.small = session_genre(feed_item) .right.small.feed-details - %a{title: 'Share', class: 'btn-share'} - = image_tag 'content/icon_share.png', :height => "12", :width => "7" -   + - if !feed_item.session_removed_at + %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 diff --git a/web/app/views/users/welcome.html.haml b/web/app/views/users/welcome.html.haml index 6624039b7..dcad67dd0 100644 --- a/web/app/views/users/welcome.html.haml +++ b/web/app/views/users/welcome.html.haml @@ -25,3 +25,7 @@ $(function () { window.JK.WelcomePage(); }) + +- content_for :extra_dialogs do + = render :partial => "clients/shareDialog" + = render :partial => "clients/commentDialog" From 9b810310f97120d99c5996e2960e96d8f91c8b4b Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Sun, 27 Apr 2014 04:09:55 -0400 Subject: [PATCH 07/12] 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 From 15e8ddb706032f66614c80d825d9428264da10b3 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Sun, 27 Apr 2014 10:06:01 -0400 Subject: [PATCH 08/12] VRFS-1558 comment dialog work --- web/app/assets/javascripts/commentDialog.js | 19 ++++++++----------- web/app/assets/javascripts/ui_helper.js | 4 ---- .../assets/stylesheets/client/dialog.css.scss | 5 +++++ .../views/clients/_commentDialog.html.haml | 8 ++++---- 4 files changed, 17 insertions(+), 19 deletions(-) diff --git a/web/app/assets/javascripts/commentDialog.js b/web/app/assets/javascripts/commentDialog.js index 9f74da3fb..cdb8e2167 100644 --- a/web/app/assets/javascripts/commentDialog.js +++ b/web/app/assets/javascripts/commentDialog.js @@ -13,10 +13,10 @@ var recordingId = options.recording_id; var claimedRecordingId = options.claimed_recording_id; - function beforeShow() { + function beforeShow(data) { } - function afterShow() { + function afterShow(data) { renderComments(); } @@ -24,14 +24,14 @@ } function renderComments() { - $(".landing-comment-scroller", $screen).empty(); + $content.empty(); + + var h1Text = $('h1', $screen).html('comment on this ' + entityType); 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); @@ -46,9 +46,6 @@ 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); @@ -62,8 +59,8 @@ } function renderComment(comment, userId, userName, userAvatarUrl, timeago, musician, append) { + var options = { - type: entityType, avatar_url: userAvatarUrl, user_id: userId, hoverAction: musician ? "musician" : "fan", @@ -72,7 +69,7 @@ timeago: timeago }; - var $comment = $(context._.template($('#template-comments', '#comment-dialog').html(), options, {variable: 'data'})); + var $comment = $(context._.template($('#template-comments').html(), options, {variable: 'data'})); if (append) { $content.append($comment); } @@ -122,7 +119,7 @@ app.bindDialog('comment-dialog', dialogBindings); $screen = $('[layout-id="comment-dialog"]'); - $content = $screen.find('.landing-comment-scroller'); + $content = $screen.find('.dialog-comment-scroller'); events(); } diff --git a/web/app/assets/javascripts/ui_helper.js b/web/app/assets/javascripts/ui_helper.js index 1c9bd7de2..97eacab17 100644 --- a/web/app/assets/javascripts/ui_helper.js +++ b/web/app/assets/javascripts/ui_helper.js @@ -23,10 +23,6 @@ }); } - function loadComments() { - - } - function launchCommentDialog(options) { var commentDialog = new JK.CommentDialog(JK.app, options); commentDialog.initialize(); diff --git a/web/app/assets/stylesheets/client/dialog.css.scss b/web/app/assets/stylesheets/client/dialog.css.scss index 06e8ca2ba..c7882be42 100644 --- a/web/app/assets/stylesheets/client/dialog.css.scss +++ b/web/app/assets/stylesheets/client/dialog.css.scss @@ -78,5 +78,10 @@ color:#aaa; } +.dialog-comment-scroller { + height:210px; + overflow:auto; +} + diff --git a/web/app/views/clients/_commentDialog.html.haml b/web/app/views/clients/_commentDialog.html.haml index dbe6f6fb8..084a550f7 100644 --- a/web/app/views/clients/_commentDialog.html.haml +++ b/web/app/views/clients/_commentDialog.html.haml @@ -1,6 +1,6 @@ .dialog.dialog-overlay-sm{layout: 'dialog', 'layout-id' => 'comment-dialog', id: 'comment-dialog'} .content-head - %h1 comment on this '{{data.type}}' + %h1 .dialog-inner .right %a.button-orange{id: 'dialog-close-button', 'layout-action' => 'close'} X CLOSE @@ -14,13 +14,13 @@ .right %a.button-orange{id: 'btn-add-comment'} ADD COMMENT %br{clear: 'all'}/ - .landing-comment-scroller + .dialog-comment-scroller %script{type: 'text/template', id: 'template-comments'} - .avatar-small.mr10{:'user-id' => '{{data.user_id}}', :'hoveraction' => '{{data.hoverAction}}'} + .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}} + %a{'user-id' => '{{data.user_id}}', 'hoveraction' => '{{data.hoverAction}}'} {{data.name}}  {{data.comment}} %br/ .f12.grey.mt5.comment-timestamp From 2b7ef1df5570d53ac1e24d9eeecd745733378d5f Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Sun, 27 Apr 2014 19:00:18 -0400 Subject: [PATCH 09/12] VRFS-1350 hover bubble style improvements --- web/app/assets/javascripts/hoverBand.js | 5 ++--- web/app/assets/javascripts/hoverFan.js | 5 ++--- web/app/assets/javascripts/hoverMusician.js | 5 ++--- web/app/assets/javascripts/hoverRecording.js | 4 ++-- web/app/assets/javascripts/hoverSession.js | 4 ++-- web/app/assets/stylesheets/client/hoverBubble.css.scss | 8 ++++---- web/app/views/clients/_hoverRecording.html.erb | 1 + web/app/views/clients/_hoverSession.html.erb | 1 + 8 files changed, 16 insertions(+), 17 deletions(-) diff --git a/web/app/assets/javascripts/hoverBand.js b/web/app/assets/javascripts/hoverBand.js index d6498f91a..7f85e0dbc 100644 --- a/web/app/assets/javascripts/hoverBand.js +++ b/web/app/assets/javascripts/hoverBand.js @@ -3,7 +3,6 @@ "use strict"; context.JK = context.JK || {}; context.JK.BandHoverBubble = function(bandId, x, y) { - var logger = context.JK.logger; var rest = context.JK.Rest(); var hoverSelector = "#band-hover"; @@ -13,9 +12,9 @@ var mouseTop = y < (document.body.clientHeight / 2); var css = {}; if (mouseLeft) - css.left = x + 10 + 'px'; + css.left = x + 20 + 'px'; else - css.left = x - (7 + $(hoverSelector).width()) + 'px'; + css.left = x - (25 + $(hoverSelector).width()) + 'px'; if (mouseTop) css.top = y + 10 + 'px'; else diff --git a/web/app/assets/javascripts/hoverFan.js b/web/app/assets/javascripts/hoverFan.js index f5b9926d0..a68f65204 100644 --- a/web/app/assets/javascripts/hoverFan.js +++ b/web/app/assets/javascripts/hoverFan.js @@ -6,7 +6,6 @@ var logger = context.JK.logger; var rest = context.JK.Rest(); - var instrumentLogoMap = context.JK.getInstrumentIconMap24(); var hoverSelector = "#fan-hover"; this.showBubble = function() { @@ -14,9 +13,9 @@ var mouseTop = y < (document.body.clientHeight / 2); var css = {}; if (mouseLeft) - css.left = x + 10 + 'px'; + css.left = x + 20 + 'px'; else - css.left = x - (7 + $(hoverSelector).width()) + 'px'; + css.left = x - (25 + $(hoverSelector).width()) + 'px'; if (mouseTop) css.top = y + 10 + 'px'; else diff --git a/web/app/assets/javascripts/hoverMusician.js b/web/app/assets/javascripts/hoverMusician.js index 6ce0368a6..360bc664d 100644 --- a/web/app/assets/javascripts/hoverMusician.js +++ b/web/app/assets/javascripts/hoverMusician.js @@ -9,14 +9,13 @@ var hoverSelector = "#musician-hover"; this.showBubble = function() { - var mouseLeft = x < (document.body.clientWidth / 2); var mouseTop = y < (document.body.clientHeight / 2); var css = {}; if (mouseLeft) - css.left = x + 10 + 'px'; + css.left = x + 20 + 'px'; else - css.left = x - (7 + $(hoverSelector).width()) + 'px'; + css.left = x - (25 + $(hoverSelector).width()) + 'px'; if (mouseTop) css.top = y + 10 + 'px'; else diff --git a/web/app/assets/javascripts/hoverRecording.js b/web/app/assets/javascripts/hoverRecording.js index 3555b626e..02092717b 100644 --- a/web/app/assets/javascripts/hoverRecording.js +++ b/web/app/assets/javascripts/hoverRecording.js @@ -42,9 +42,9 @@ var mouseTop = y < (document.body.clientHeight / 2); var css = {}; if (mouseLeft) - css.left = x + 10 + 'px'; + css.left = x + 20 + 'px'; else - css.left = x - (7 + $(hoverSelector).width()) + 'px'; + css.left = x - (25 + $(hoverSelector).width()) + 'px'; if (mouseTop) css.top = y + 10 + 'px'; else diff --git a/web/app/assets/javascripts/hoverSession.js b/web/app/assets/javascripts/hoverSession.js index f6a9843c5..5bedf9249 100644 --- a/web/app/assets/javascripts/hoverSession.js +++ b/web/app/assets/javascripts/hoverSession.js @@ -13,9 +13,9 @@ var mouseTop = y < (document.body.clientHeight / 2); var css = {}; if (mouseLeft) - css.left = x + 10 + 'px'; + css.left = x + 20 + 'px'; else - css.left = x - (7 + $(hoverSelector).width()) + 'px'; + css.left = x - (25 + $(hoverSelector).width()) + 'px'; if (mouseTop) css.top = y + 10 + 'px'; else diff --git a/web/app/assets/stylesheets/client/hoverBubble.css.scss b/web/app/assets/stylesheets/client/hoverBubble.css.scss index 3d2efd754..a53fff3b8 100644 --- a/web/app/assets/stylesheets/client/hoverBubble.css.scss +++ b/web/app/assets/stylesheets/client/hoverBubble.css.scss @@ -14,15 +14,15 @@ h2 { padding:6px 0px; text-align:center; - font-size:15px; - font-weight:200; + font-size:15px !important; + font-weight:200 !important; width:100%; background-color:#ed3618; } h3 { - font-weight:400; - font-size:16px; + font-weight:400 !important; + font-size:16px !important; color:#fff; } diff --git a/web/app/views/clients/_hoverRecording.html.erb b/web/app/views/clients/_hoverRecording.html.erb index 50d75445e..214cf3df6 100644 --- a/web/app/views/clients/_hoverRecording.html.erb +++ b/web/app/views/clients/_hoverRecording.html.erb @@ -41,6 +41,7 @@
LIKE
SHARE
+
WEB PAGE


diff --git a/web/app/views/clients/_hoverSession.html.erb b/web/app/views/clients/_hoverSession.html.erb index 23ad5ae06..24af6b69a 100644 --- a/web/app/views/clients/_hoverSession.html.erb +++ b/web/app/views/clients/_hoverSession.html.erb @@ -35,6 +35,7 @@
LIKE
SHARE
+
WEB PAGE


From 4e188d74b71eb3ddde2ca80177868d8934fd8b0d Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Sun, 27 Apr 2014 20:28:25 -0400 Subject: [PATCH 10/12] VRFS-1562 make avatars clickable links (this commit addresses Feed and comment dialog only) --- web/app/assets/javascripts/commentDialog.js | 12 ++++- web/app/assets/javascripts/feed.js | 2 + .../assets/javascripts/feed_item_recording.js | 3 ++ .../assets/javascripts/feed_item_session.js | 3 ++ web/app/assets/javascripts/utils.js | 45 ++++++++++++++++--- .../views/clients/_commentDialog.html.haml | 7 +-- .../users/_feed_music_session_ajax.html.haml | 5 ++- .../users/_feed_recording_ajax.html.haml | 5 ++- 8 files changed, 68 insertions(+), 14 deletions(-) diff --git a/web/app/assets/javascripts/commentDialog.js b/web/app/assets/javascripts/commentDialog.js index cdb8e2167..702f52c80 100644 --- a/web/app/assets/javascripts/commentDialog.js +++ b/web/app/assets/javascripts/commentDialog.js @@ -17,6 +17,7 @@ } function afterShow(data) { + $("#txtComment", $screen).val(''); renderComments(); } @@ -25,7 +26,7 @@ function renderComments() { $content.empty(); - + var h1Text = $('h1', $screen).html('comment on this ' + entityType); if (entityType === 'session') { @@ -36,6 +37,8 @@ renderComment(val.comment, val.creator.id, val.creator.name, context.JK.resolveAvatarUrl(val.creator.photo_url), $.timeago(val.created_at), val.creator.musician, true); }); + context.JK.bindHoverEvents($content); + context.JK.bindProfileClickEvents($content, ['comment-dialog']); } }) .fail(function(xhr) { @@ -50,6 +53,9 @@ renderComment(val.comment, val.creator.id, val.creator.name, context.JK.resolveAvatarUrl(val.creator.photo_url), $.timeago(val.created_at), val.creator.musician, true); }); + + context.JK.bindHoverEvents($content); + context.JK.bindProfileClickEvents($content, ['comment-dialog']); } }) .fail(function(xhr) { @@ -101,7 +107,9 @@ } function events() { - $('#btn-add-comment', $screen).click(addComment); + var $btnSelector = $('#btn-add-comment', $screen); + $btnSelector.unbind('click'); + $btnSelector.click(addComment); } function showDialog() { diff --git a/web/app/assets/javascripts/feed.js b/web/app/assets/javascripts/feed.js index e6fd8030f..368bc81fb 100644 --- a/web/app/assets/javascripts/feed.js +++ b/web/app/assets/javascripts/feed.js @@ -354,6 +354,7 @@ $('.dotdotdot', $feedItem).dotdotdot(); $feedItem.data('original-max-height', $feedItem.css('height')); context.JK.bindHoverEvents($feedItem); + context.JK.bindProfileClickEvents($feedItem); } else if(feed.type == 'recording') { if(feed.claimed_recordings.length == 0) { @@ -401,6 +402,7 @@ $('.dotdotdot', $feedItem).dotdotdot(); $feedItem.data('original-max-height', $feedItem.css('height')); context.JK.bindHoverEvents($feedItem); + context.JK.bindProfileClickEvents($feedItem); } else { logger.warn("skipping feed type: " + feed.type); diff --git a/web/app/assets/javascripts/feed_item_recording.js b/web/app/assets/javascripts/feed_item_recording.js index 04e10d122..e9c138479 100644 --- a/web/app/assets/javascripts/feed_item_recording.js +++ b/web/app/assets/javascripts/feed_item_recording.js @@ -126,6 +126,9 @@ $feedItem.data('original-max-height', $feedItem.css('height')); events(); + + context.JK.bindHoverEvents($feedItem); + //context.JK.bindProfileClickEvents($feedItem); } initialize(); diff --git a/web/app/assets/javascripts/feed_item_session.js b/web/app/assets/javascripts/feed_item_session.js index 695d6aab3..c5a39246e 100644 --- a/web/app/assets/javascripts/feed_item_session.js +++ b/web/app/assets/javascripts/feed_item_session.js @@ -112,6 +112,9 @@ $feedItem.data('original-max-height', $feedItem.css('height')); events(); + + context.JK.bindHoverEvents($feedItem); + //context.JK.bindProfileClickEvents($feedItem); } initialize(); diff --git a/web/app/assets/javascripts/utils.js b/web/app/assets/javascripts/utils.js index dd5de4c3b..f7957024f 100644 --- a/web/app/assets/javascripts/utils.js +++ b/web/app/assets/javascripts/utils.js @@ -153,9 +153,39 @@ $element.bt(text, options); } + context.JK.bindProfileClickEvents = function($parent, dialogsToClose) { + if (!$parent) { + $parent = $('body'); + } + + function closeDialogs() { + if (dialogsToClose) { + $.each(dialogsToClose, function(index, val) { + JK.app.layout.closeDialog(val); + }); + } + } + + $("[profileaction='band']", $parent).unbind('click'); + $("[profileaction='band']", $parent).click(function(evt) { + closeDialogs(); + console.log("navigating to band profile %o", $(this).attr('band-id')); + context.location = "/client#/bandProfile/" + $(this).attr('band-id'); + }); + + $("[profileaction='musician']", $parent).unbind('click'); + $("[profileaction='musician']", $parent).click(function(evt) { + closeDialogs(); + console.log("navigating to musician profile %o", $(this).attr('user-id')); + context.location = "/client#/profile/" + $(this).attr('user-id'); + }); + } + context.JK.bindHoverEvents = function ($parent) { var timeout = 300; var fadeoutValue = 100; + var sensitivity = 3; + var interval = 500; if (!$parent) { $parent = $('body'); @@ -194,7 +224,8 @@ out: function () { // this registers for leaving the hoverable element hideBubble($(this)); }, - sensitivity: 1, + sensitivity: sensitivity, + interval: interval, timeout: timeout }); @@ -207,7 +238,8 @@ out: function () { // this registers for leaving the hoverable element hideBubble($(this)); }, - sensitivity: 1, + sensitivity: sensitivity, + interval: interval, timeout: timeout }); @@ -220,7 +252,8 @@ out: function () { // this registers for leaving the hoverable element hideBubble($(this)); }, - sensitivity: 1, + sensitivity: sensitivity, + interval: interval, timeout: timeout }); @@ -233,7 +266,8 @@ out: function () { // this registers for leaving the hoverable element hideBubble($(this)); }, - sensitivity: 1, + sensitivity: sensitivity, + interval: interval, timeout: timeout }); @@ -246,7 +280,8 @@ out: function () { // this registers for leaving the hoverable element hideBubble($(this)); }, - sensitivity: 1, + sensitivity: sensitivity, + interval: interval, timeout: timeout }); } diff --git a/web/app/views/clients/_commentDialog.html.haml b/web/app/views/clients/_commentDialog.html.haml index 084a550f7..065ba4cc4 100644 --- a/web/app/views/clients/_commentDialog.html.haml +++ b/web/app/views/clients/_commentDialog.html.haml @@ -17,10 +17,11 @@ .dialog-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: ''} + .avatar-small.mr10{'user-id' => '{{data.user_id}}', 'hoveraction' => '{{data.hoverAction}}', 'profileaction' => '{{data.hoverAction}}'} + %a{'href' => '/client#/profile/{{data.user_id}}'} + %img{:'src' => '{{data.avatar_url}}', alt: ''} .w80.left.p10.lightgrey.mt10.comment-text - %a{'user-id' => '{{data.user_id}}', 'hoveraction' => '{{data.hoverAction}}'} {{data.name}} + %a{'user-id' => '{{data.user_id}}', 'hoveraction' => '{{data.hoverAction}}', 'profileaction' => '{{data.hoverAction}}'} {{data.name}}  {{data.comment}} %br/ .f12.grey.mt5.comment-timestamp diff --git a/web/app/views/users/_feed_music_session_ajax.html.haml b/web/app/views/users/_feed_music_session_ajax.html.haml index 5cb7c5d4f..bc2b8ef04 100644 --- a/web/app/views/users/_feed_music_session_ajax.html.haml +++ b/web/app/views/users/_feed_music_session_ajax.html.haml @@ -2,13 +2,14 @@ .feed-entry.music-session-history-entry{'data-music-session' => '{{data.feed_item.id}}' } / avatar .avatar-small.ib - %img{ src: '{{data.feed_item.helpers.avatar}}' } + %a{:hoveraction => "{{data.feed_item.helpers.artist_hoveraction}}", :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :"{{data.feed_item.helpers.artist_datakey}}" => "{{data.feed_item.helpers.artist_id}}"} + %img{ src: '{{data.feed_item.helpers.avatar}}' } / type and artist .left.ml20.w15 .title{:'session-id' => '{{data.feed_item.id}}' } %a{:href => "/sessions/{{data.feed_item.id}}", :rel => "external"} SESSION .artist - %a.artist{href: "#", :hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} + %a.artist{:hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} = '{{data.feed_item.helpers.artist_name}}' %time.small.created_at.timeago{datetime: '{{data.feed_item.helpers.utc_created_at}}'}= '{{data.feed_item.created_at}}' / name and description diff --git a/web/app/views/users/_feed_recording_ajax.html.haml b/web/app/views/users/_feed_recording_ajax.html.haml index 1b5ddd703..b72758500 100644 --- a/web/app/views/users/_feed_recording_ajax.html.haml +++ b/web/app/views/users/_feed_recording_ajax.html.haml @@ -2,13 +2,14 @@ .feed-entry.recording-entry{:'data-claimed-recording-id' => '{{data.candidate_claimed_recording.id}}' } / avatar .avatar-small.ib - %img{ src: '{{data.feed_item.helpers.avatar}}' } + %a{:hoveraction => "{{data.feed_item.helpers.artist_hoveraction}}", :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :"{{data.feed_item.helpers.artist_datakey}}" => "{{data.feed_item.helpers.artist_id}}"} + %img{ src: '{{data.feed_item.helpers.avatar}}' } / type and artist .left.ml20.w15 .title{:'recording-id' => '{{data.candidate_claimed_recording.id}}' } %a{:href => "/recordings/{{data.candidate_claimed_recording.id}}", :rel => "external"} RECORDING .artist - %a.artist{href: "#", :hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} + %a.artist{:hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} = '{{data.feed_item.helpers.artist_name}}' %time.small.created_at.timeago{datetime: '{{data.feed_item.helpers.utc_created_at}}'} = '{{data.feed_item.created_at}}' From 8b43e63800339a786a738c4134468ffbe6a39e42 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Tue, 29 Apr 2014 03:33:37 -0400 Subject: [PATCH 11/12] VRFS-1558 added tests --- web/app/assets/javascripts/commentDialog.js | 15 ++- web/app/assets/javascripts/feed.js | 25 +---- web/app/assets/javascripts/utils.js | 4 +- web/app/assets/javascripts/web/web.js | 1 + .../clients/_recordingFinishedDialog.html.erb | 2 +- web/app/views/layouts/web.html.erb | 1 - .../views/users/_feed_music_session.html.haml | 2 +- .../users/_feed_music_session_ajax.html.haml | 6 +- web/app/views/users/_feed_recording.html.haml | 2 +- .../users/_feed_recording_ajax.html.haml | 6 +- web/spec/features/feed_spec.rb | 101 +++++++++++++++++- web/spec/features/home_spec.rb | 2 +- web/spec/support/utilities.rb | 2 +- 13 files changed, 126 insertions(+), 43 deletions(-) diff --git a/web/app/assets/javascripts/commentDialog.js b/web/app/assets/javascripts/commentDialog.js index 702f52c80..f734c98fd 100644 --- a/web/app/assets/javascripts/commentDialog.js +++ b/web/app/assets/javascripts/commentDialog.js @@ -108,8 +108,19 @@ function events() { var $btnSelector = $('#btn-add-comment', $screen); - $btnSelector.unbind('click'); - $btnSelector.click(addComment); + var $txtComment = $('#txtComment', $screen); + + if (!context.JK.currentUserId) { + console.log('here1'); + $txtComment.attr('placeholder', 'You must be logged in to add a comment.'); + $btnSelector.removeClass('button-orange'); + $btnSelector.addClass('button-grey'); + } + else { + console.log('here2'); + $btnSelector.unbind('click'); + $btnSelector.click(addComment); + } } function showDialog() { diff --git a/web/app/assets/javascripts/feed.js b/web/app/assets/javascripts/feed.js index 368bc81fb..c32871db9 100644 --- a/web/app/assets/javascripts/feed.js +++ b/web/app/assets/javascripts/feed.js @@ -283,24 +283,6 @@ return false; } - function toggleUserProfile() { - var userId = $(this).attr('user-id'); - window.location = '/client#/profile/' + userId; - return false; - } - - function toggleBandProfile() { - var bandId = $(this).attr('band-id'); - if (bandId == null) { - var userId = $(this).attr('user-id'); - window.location = '/client#/profile/' + userId; - } - else { - window.location = '/client#/bandProfile/' + bandId; - } - return false; - } - function renderFeeds(feeds) { $.each(feeds.entries, function(i, feed) { @@ -320,9 +302,6 @@ $('.details', $feedItem).click(toggleSessionDetails); $('.details-arrow', $feedItem).click(toggleSessionDetails); $('.play-button', $feedItem).click(toggleSessionPlay); - $('.avatar-tiny', $feedItem).click(toggleUserProfile); - $('.musician-name', $feedItem).click(toggleUserProfile); - $('.artist', $feedItem).click(toggleBandProfile); if (!feed.session_removed_at) { @@ -407,7 +386,9 @@ else { logger.warn("skipping feed type: " + feed.type); } - }) + + context.JK.bindProfileClickEvents(); + }); } function renderFeed(feed) { diff --git a/web/app/assets/javascripts/utils.js b/web/app/assets/javascripts/utils.js index f7957024f..0140c1b9f 100644 --- a/web/app/assets/javascripts/utils.js +++ b/web/app/assets/javascripts/utils.js @@ -170,14 +170,14 @@ $("[profileaction='band']", $parent).click(function(evt) { closeDialogs(); console.log("navigating to band profile %o", $(this).attr('band-id')); - context.location = "/client#/bandProfile/" + $(this).attr('band-id'); + window.location = "/client#/bandProfile/" + $(this).attr('band-id'); }); $("[profileaction='musician']", $parent).unbind('click'); $("[profileaction='musician']", $parent).click(function(evt) { closeDialogs(); console.log("navigating to musician profile %o", $(this).attr('user-id')); - context.location = "/client#/profile/" + $(this).attr('user-id'); + window.location = "/client#/profile/" + $(this).attr('user-id'); }); } diff --git a/web/app/assets/javascripts/web/web.js b/web/app/assets/javascripts/web/web.js index 78df2ad4c..ffcbebaa6 100644 --- a/web/app/assets/javascripts/web/web.js +++ b/web/app/assets/javascripts/web/web.js @@ -35,6 +35,7 @@ //= require hoverSession //= require hoverRecording //= require shareDialog +//= require commentDialog //= require layout //= require user_dropdown //= require jamkazam diff --git a/web/app/views/clients/_recordingFinishedDialog.html.erb b/web/app/views/clients/_recordingFinishedDialog.html.erb index 8714ae77f..13fd40181 100644 --- a/web/app/views/clients/_recordingFinishedDialog.html.erb +++ b/web/app/views/clients/_recordingFinishedDialog.html.erb @@ -16,7 +16,7 @@

- +
diff --git a/web/app/views/layouts/web.html.erb b/web/app/views/layouts/web.html.erb index 6615d4fc5..2515ae9da 100644 --- a/web/app/views/layouts/web.html.erb +++ b/web/app/views/layouts/web.html.erb @@ -80,7 +80,6 @@ <%= render "clients/hoverBand" %> <%= render "clients/hoverSession" %> <%= render "clients/hoverRecording" %> - <%= render "clients/commentDialog" %> <%= yield(:extra_dialogs) %> diff --git a/web/app/views/users/_feed_music_session.html.haml b/web/app/views/users/_feed_music_session.html.haml index d903ec43f..c1ea1ee33 100644 --- a/web/app/views/users/_feed_music_session.html.haml +++ b/web/app/views/users/_feed_music_session.html.haml @@ -4,7 +4,7 @@ = session_avatar(feed_item) / type and artist .left.ml20.w15 - .title{:'session-id' => feed_item.id } + .title{hoveraction: 'session', :'session-id' => feed_item.id } %a{:href => "/sessions/#{feed_item.id}", :target => "_blank"} SESSION .artist = session_artist_name(feed_item) diff --git a/web/app/views/users/_feed_music_session_ajax.html.haml b/web/app/views/users/_feed_music_session_ajax.html.haml index bc2b8ef04..15f5cc6c5 100644 --- a/web/app/views/users/_feed_music_session_ajax.html.haml +++ b/web/app/views/users/_feed_music_session_ajax.html.haml @@ -6,7 +6,7 @@ %img{ src: '{{data.feed_item.helpers.avatar}}' } / type and artist .left.ml20.w15 - .title{:'session-id' => '{{data.feed_item.id}}' } + .title{hoveraction: 'session', :'session-id' => '{{data.feed_item.id}}' } %a{:href => "/sessions/{{data.feed_item.id}}", :rel => "external"} SESSION .artist %a.artist{:hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} @@ -63,10 +63,10 @@ = '{% _.each(data.feed_item.participants, function(user) { %}' %tr %td{:width => "24"} - %a.avatar-tiny{:href => "#", :hoveraction => "musician", :'user-id' => '{{user.id}}'} + %a.avatar-tiny{:hoveraction => "musician", :profileaction => "musician", :'user-id' => '{{user.id}}'} %img{src: '{{user.helpers.avatar}}'} %td - %a.musician-name{:href => "#", :hoveraction => "musician", :'user-id' => '{{user.id}}'} + %a.musician-name{:hoveraction => "musician", :profileaction => "musician", :'user-id' => '{{user.id}}'} = '{{user.first_name}} {{user.last_name}}' %td .nowrap diff --git a/web/app/views/users/_feed_recording.html.haml b/web/app/views/users/_feed_recording.html.haml index 82b45d7c1..d487821c2 100644 --- a/web/app/views/users/_feed_recording.html.haml +++ b/web/app/views/users/_feed_recording.html.haml @@ -7,7 +7,7 @@ = recording_avatar(feed_item) / type and artist .left.ml20.w15.feed-type-title - .title{:'recording-id' => feed_item.candidate_claimed_recording.id } + .title{hoveraction: 'recording', :'recording-id' => feed_item.candidate_claimed_recording.id } %a{:href => "/recordings/#{feed_item.candidate_claimed_recording.id}", :target => "_blank"} RECORDING .artist = recording_artist_name(feed_item) diff --git a/web/app/views/users/_feed_recording_ajax.html.haml b/web/app/views/users/_feed_recording_ajax.html.haml index b72758500..25198edeb 100644 --- a/web/app/views/users/_feed_recording_ajax.html.haml +++ b/web/app/views/users/_feed_recording_ajax.html.haml @@ -6,7 +6,7 @@ %img{ src: '{{data.feed_item.helpers.avatar}}' } / type and artist .left.ml20.w15 - .title{:'recording-id' => '{{data.candidate_claimed_recording.id}}' } + .title{hoveraction: 'recording', :'recording-id' => '{{data.candidate_claimed_recording.id}}' } %a{:href => "/recordings/{{data.candidate_claimed_recording.id}}", :rel => "external"} RECORDING .artist %a.artist{:hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} @@ -83,10 +83,10 @@ = '{% _.each(data.feed_item.grouped_tracks, function(track) { %}' %tr %td{:width => "24"} - %a.avatar-tiny{:href => "#", :hoveraction => "musician", :"user-id" => '{{track.musician.id}}'} + %a.avatar-tiny{:hoveraction => "musician", :profileaction => "musician", :"user-id" => '{{track.musician.id}}'} %img{src: '{{track.musician.helpers.avatar}}'} %td - %a.musician-name{:href => "#", :hoveraction => "musician", :"user-id" => '{{track.musician.id}}'} + %a.musician-name{:hoveraction => "musician", :profileaction => "musician", :"user-id" => '{{track.musician.id}}'} = '{{track.musician.first_name}} {{track.musician.last_name}}' %td .nowrap diff --git a/web/spec/features/feed_spec.rb b/web/spec/features/feed_spec.rb index d0005db7a..85620ae4f 100644 --- a/web/spec/features/feed_spec.rb +++ b/web/spec/features/feed_spec.rb @@ -13,19 +13,58 @@ describe "Feed", :js => true, :type => :feature, :capybara_feature => true do describe "sessions" do before(:each) do + MusicSessionHistory.delete_all create_session(creator: user) formal_leave_by(user) end # it "should render avatar" do + # it " and link to profile" do + # end + + # it " and render artist hover bubble" do + # end # end # it "should render description" do + # it " and link to session landing" do + # end + + # it " and render session hover bubble" do + # end # end - # it "should render stats" do + # it "should render artist name" do + # it " and link to profile" do + # end + + # it " and render artist hover bubble" # end + it "should render stats" do + visit "/client#/feed" + + # initial stats + find('span.plays').should have_content('0') + find('span.comments').should have_content('0') + find('span.likes').should have_content('0') + + # Comments + find('a.btn-comment').trigger(:click) + comment = 'this sounds great' + fill_in "txtComment", with: comment + find('#btn-add-comment').trigger(:click) + find('div.comment-text', text: comment) + find('#dialog-close-button', '[layout-id="comment-dialog"]').trigger(:click) + + find('#btn-refresh-feed').trigger(:click) + find('span.comments').should have_content('1') + + # Likes + find('a.btn-like').trigger(:click) + find('span.likes').should have_content('1') + end + it "should render details" do visit "/client#/feed" find('.feed-details a.details').trigger(:click) @@ -56,26 +95,78 @@ describe "Feed", :js => true, :type => :feature, :capybara_feature => true do before(:each) do MusicSessionHistory.delete_all + Recording.delete_all start_recording_with(user) stop_recording formal_leave_by(user) end # it "should render avatar" do + # it " and link to profile" do + # end + + # it " and render artist hover bubble" do + # end # end # it "should render description" do + # it " and link to recording landing" do + # end + + # it " and render recording hover bubble" do + # end # end - # it "should render stats" do + # it "should render artist name" do + # it " and link to profile" do + # end + + # it " and render artist hover bubble" # end + it "should render stats" do + visit "/client#/feed" + + # close recording finished dialog + claim_recording("my recording", "my recording description") + + MusicSessionHistory.delete_all + + find('#btn-refresh-feed').trigger(:click) + + # initial stats + find('span.plays').should have_content('0') + find('span.comments').should have_content('0') + find('span.likes').should have_content('0') + + # ensure Share icon exists + find('a.btn-share') + + # Comments + find('a.btn-comment').trigger(:click) + comment = 'this sounds great' + fill_in "txtComment", with: comment + find('#btn-add-comment').trigger(:click) + find('div.comment-text', text: comment) + find('#dialog-close-button', '[layout-id="comment-dialog"]').trigger(:click) + + find('#btn-refresh-feed').trigger(:click) + find('span.comments').should have_content('1') + + # Likes + find('a.btn-like').trigger(:click) + find('span.likes').should have_content('1') + end + it "should render details" do visit "/client#/feed" # close recording finished dialog - find('#recording-finished-dialog h1') - find('#discard-session-recording').trigger(:click) + claim_recording("my recording", "my recording description") + + MusicSessionHistory.delete_all + + find('#btn-refresh-feed').trigger(:click) find('.feed-details a.details').trigger(:click) @@ -94,7 +185,7 @@ describe "Feed", :js => true, :type => :feature, :capybara_feature => true do # confirm navigate to user profile page find(".avatar-tiny[user-id=\"#{user.id}\"][hoveraction=\"musician\"]").trigger(:click) - find("#user-profile h2[id=profile-username]", text: user.name) + find("#user-profile h2[id=profile-username]", text: user.name) end # it "should render play widget" do diff --git a/web/spec/features/home_spec.rb b/web/spec/features/home_spec.rb index 31abb2387..42cb8604c 100644 --- a/web/spec/features/home_spec.rb +++ b/web/spec/features/home_spec.rb @@ -14,7 +14,7 @@ describe "Home Screen", :js => true, :type => :feature, :capybara_feature => tru let(:user) { FactoryGirl.create(:user) } - share_examples_for :has_footer do + shared_examples_for :has_footer do it "should have footer elements" do should have_selector('#footer-links') find('#footer-links').should have_content('about') diff --git a/web/spec/support/utilities.rb b/web/spec/support/utilities.rb index 3040a535f..bfd7e150d 100644 --- a/web/spec/support/utilities.rb +++ b/web/spec/support/utilities.rb @@ -322,7 +322,7 @@ def claim_recording(name, description) fill_in "claim-recording-name", with: name fill_in "claim-recording-description", with: description find('#keep-session-recording').trigger(:click) - should have_no_selector('h1', text: 'recording finished') + page.should have_no_selector('h1', text: 'recording finished') end def set_session_as_private() From 4b98350f48b079b8725cf98a0ba05bfbdcc9bbb7 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Tue, 29 Apr 2014 03:36:09 -0400 Subject: [PATCH 12/12] remove debug logs --- web/app/assets/javascripts/commentDialog.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/web/app/assets/javascripts/commentDialog.js b/web/app/assets/javascripts/commentDialog.js index f734c98fd..ea2f64b5e 100644 --- a/web/app/assets/javascripts/commentDialog.js +++ b/web/app/assets/javascripts/commentDialog.js @@ -111,13 +111,11 @@ var $txtComment = $('#txtComment', $screen); if (!context.JK.currentUserId) { - console.log('here1'); $txtComment.attr('placeholder', 'You must be logged in to add a comment.'); $btnSelector.removeClass('button-orange'); $btnSelector.addClass('button-grey'); } else { - console.log('here2'); $btnSelector.unbind('click'); $btnSelector.click(addComment); }