vrfs-774: implementing musician search result actions like/follow/friend
This commit is contained in:
Jonathan Kolyer
parent
673507458c
commit
a8160cca5c
|
|
@ -83,6 +83,7 @@
|
|||
var ii, len;
|
||||
var mTemplate = $('#template-find-musician-row').html();
|
||||
var fTemplate = $('#template-musician-follow-info').html();
|
||||
var aTemplate = $('#template-musician-action-btns').html();
|
||||
var mVals, mm, renderings='';
|
||||
var instr_logos, instr;
|
||||
var follows, followVals, aFollow;
|
||||
|
|
@ -108,13 +109,17 @@
|
|||
follows += context.JK.fillTemplate(fTemplate, followVals);
|
||||
if (2 == jj) break;
|
||||
}
|
||||
var actionVals = {
|
||||
profile_url: "/#/profile/" + mm.id,
|
||||
button_friend: mm['is_friend'] ? '' : 'button-orance',
|
||||
button_follow: mm['is_following'] ? '' : 'button-orange',
|
||||
button_like: mm['is_liker'] ? '' : 'button-orange'
|
||||
};
|
||||
var musician_actions = context.JK.fillTemplate(aTemplate, actionVals);
|
||||
|
||||
mVals = {
|
||||
avatar_url: context.JK.resolveAvatarUrl(mm.photo_url),
|
||||
profile_url: "/#/profile/" + mm.id,
|
||||
like_url: '#',
|
||||
friend_url: '#',
|
||||
follow_url: '#',
|
||||
musician_name: mm.name,
|
||||
musician_location: mm.city + ', ' + mm.state,
|
||||
instruments: instr_logos,
|
||||
|
|
@ -123,15 +128,18 @@
|
|||
friend_count: mm['friend_count'],
|
||||
recording_count: mm['recording_count'],
|
||||
session_count: mm['session_count'],
|
||||
is_friend: mm['is_friend'],
|
||||
is_following: mm['is_following'],
|
||||
is_liker: mm['is_liker'],
|
||||
user_id: mm['id'],
|
||||
musician_follow_template: follows
|
||||
musician_id: mm['id'],
|
||||
musician_follow_template: follows,
|
||||
musician_action_template: musician_actions
|
||||
};
|
||||
renderings += context.JK.fillTemplate(mTemplate, mVals);
|
||||
var musician_row = context.JK.fillTemplate(mTemplate, mVals);
|
||||
renderings += musician_row;
|
||||
}
|
||||
$('#musician-filter-results').append(renderings);
|
||||
|
||||
$('.search-m-friend').on('click', friendMusician);
|
||||
$('.search-m-like').on('click', likeMusician);
|
||||
$('.search-m-follow').on('click', followMusician);
|
||||
}
|
||||
|
||||
function beforeShow(data) {
|
||||
|
|
@ -149,6 +157,69 @@
|
|||
page_num = 1;
|
||||
page_count = 0;
|
||||
}
|
||||
|
||||
function friendMusician(evt) {
|
||||
// if the musician is already a friend, remove the button-orange class, and prevent
|
||||
// the link from working
|
||||
if (0 == $(this).closest('.button-orange').size()) return false;
|
||||
$(this).click(function(ee) {ee.preventDefault();});
|
||||
|
||||
evt.stopPropagation();
|
||||
var uid = $(this).parent().data('musician-id');
|
||||
context.JK.sendFriendRequest(app, uid, friendRequestCallback);
|
||||
}
|
||||
function friendRequestCallback(user_id) {
|
||||
// remove the orange look to indicate it's not selectable
|
||||
$('div[data-musician-id='+user_id+'] .search-m-friend').removeClass('button-orange');
|
||||
}
|
||||
function followMusician(evt) {
|
||||
// if the musician is already followed, remove the button-orange class, and prevent
|
||||
// the link from working
|
||||
if (0 == $(this).closest('.button-orange').size()) return false;
|
||||
$(this).click(function(ee) {ee.preventDefault();});
|
||||
|
||||
evt.stopPropagation();
|
||||
var newFollowing = {};
|
||||
newFollowing.user_id = $(this).parent().data('musician-id');
|
||||
var url = "/api/users/" + context.JK.currentUserId + "/followings";
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
url: url,
|
||||
data: JSON.stringify(newFollowing),
|
||||
processData: false,
|
||||
success: function(response) {
|
||||
// remove the orange look to indicate it's not selectable
|
||||
$('div[data-musician-id='+newFollowing.user_id+'] .search-m-follow').removeClass('button-orange');
|
||||
},
|
||||
error: app.ajaxError
|
||||
});
|
||||
}
|
||||
function likeMusician(evt) {
|
||||
// if the musician is already liked, remove the button-orange class, and prevent
|
||||
// the link from working
|
||||
if (0 == $(this).closest('.button-orange').size()) return false;
|
||||
$(this).click(function(ee) {ee.preventDefault();});
|
||||
|
||||
evt.stopPropagation();
|
||||
var newLike = {};
|
||||
newLike.user_id = $(this).parent().data('musician-id');
|
||||
var url = "/api/users/" + context.JK.currentUserId + "/likes";
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
url: url,
|
||||
data: JSON.stringify(newLike),
|
||||
processData: false,
|
||||
success: function(response) {
|
||||
// remove the orange look to indicate it's not selectable
|
||||
$('div[data-musician-id='+newLike.user_id+'] .search-m-like').removeClass('button-orange');
|
||||
},
|
||||
error: app.ajaxError
|
||||
});
|
||||
}
|
||||
|
||||
function events() {
|
||||
$("#musician_query_distance").keypress(function(evt) {
|
||||
|
|
@ -161,7 +232,6 @@
|
|||
|
||||
$('#musician-filter-results').bind('scroll', function() {
|
||||
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
|
||||
// logger.debug("*** scrolling: page_num="+page_num.toString()+" page_count="+page_count.toString());
|
||||
if (page_num < page_count) {
|
||||
page_num += 1;
|
||||
search();
|
||||
|
|
@ -174,7 +244,6 @@
|
|||
* Initialize,
|
||||
*/
|
||||
function initialize() {
|
||||
|
||||
var screenBindings = {
|
||||
'beforeShow': beforeShow,
|
||||
'afterShow': afterShow
|
||||
|
|
|
|||
|
|
@ -35,10 +35,10 @@ unless @search.musicians.nil? || @search.musicians.size == 0
|
|||
attributes :instrument_id, :description, :proficiency_level, :priority
|
||||
end
|
||||
|
||||
child :user_followings => :followings do |uf|
|
||||
node :user_id do |uu| uu.following.id end
|
||||
node :photo_url do |uu| uu.following.photo_url end
|
||||
node :name do |uu| uu.following.name end
|
||||
child :top_followings => :followings do |uf|
|
||||
node :user_id do |uu| uu.id end
|
||||
node :photo_url do |uu| uu.photo_url end
|
||||
node :name do |uu| uu.name end
|
||||
end
|
||||
|
||||
node :follow_count do |musician| @search.follow_count(musician) end
|
||||
|
|
|
|||
|
|
@ -39,29 +39,31 @@
|
|||
<div style="width:220px;" class="result-name">{musician_name}<br />
|
||||
<span class="result-location">{musician_location}
|
||||
<br /><br />
|
||||
<div id="result_instruments" class="nowrap">
|
||||
{instruments}
|
||||
</div>
|
||||
<div id="result_instruments" class="nowrap">{instruments}</div>
|
||||
<br clear="all" /><br />
|
||||
{friend_count} <img src="../assets/content/icon_friend.png" width="14" height="12" align="absmiddle" /> {follow_count} <img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" /> {recording_count} <img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" /> {session_count} <img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" /></span><br /><br />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="left ml35 f11 whitespace w40"><br />
|
||||
{biography}<br />
|
||||
<br />
|
||||
<a href="{profile_url}" class="button-orange smallbutton m0">PROFILE</a><a href="{like_url}" class="button-orange smallbutton">LIKE</a><a href="{friend_url}" class="button-orange smallbutton m0 search-m-add-friend">FRIEND</a><a href="{follow_url}" class="button-orange smallbutton">FOLLOW</a></div>
|
||||
<div class="left ml10 w20" style='overflow:auto'>
|
||||
<div data-musician-id={musician_id}>
|
||||
{musician_action_template}
|
||||
</div>
|
||||
</div>
|
||||
<div class="left ml10 w20" style="overflow:auto">
|
||||
<br />
|
||||
<small><strong>FOLLOWING:</strong></small>
|
||||
<table class="musicians" cellpadding="0" cellspacing="5">
|
||||
{musician_follow_template}
|
||||
</table>
|
||||
<table class="musicians" cellpadding="0" cellspacing="5">{musician_follow_template}</table>
|
||||
</div>
|
||||
<br clear="all" />
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="template-musician-action-btns">
|
||||
<a href="{profile_url}" class="button-orange smallbutton m0">PROFILE</a><a href="#" class="{button_like} smallbutton search-m-like">LIKE</a><a href="#" class="{button_friend} smallbutton m0 search-m-friend">FRIEND</a><a href="#" class="{button_follow} smallbutton search-m-follow">FOLLOW</a>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="template-musician-follow-info">
|
||||
<tr>
|
||||
<td width="24">
|
||||
|
|
|
|||
Loading…
Reference in New Issue