(function(context,$) { "use strict"; context.JK = context.JK || {}; context.JK.Sidebar = function(app) { var logger = context.JK.logger; function populateFriendsPanel() { $('#sidebar-search-header').hide(); // TODO: cache the response for this call somewhere var url = "/api/users/" + context.JK.currentUserId + "/friends" $.ajax({ type: "GET", dataType: "json", contentType: 'application/json', url: url, processData: false, success: function(response) { // show online friends first (sort by first name within online/offline groups) response.sort(function(a, b) { var a_online = a.online; var b_online = b.online; var a_firstname = a.first_name.toLowerCase(); var b_firstname = b.first_name.toLowerCase(); if (b_online != a_online) { if (b_online < a_online) return -1; if (b_online > a_online) return 1; return 0; } if (a_firstname < b_firstname) return -1; if (a_firstname > b_firstname) return 1; return 0; }); $.each(response, function(index, val) { var css = val.online ? '' : 'offline'; // fill in template for Connect pre-click var template = $('#template-friend-panel').html(); var searchResultHtml = context.JK.fillTemplate(template, { userId: val.id, cssClass: css, avatar_url: context.JK.resolveAvatarUrl(val.photo_url), userName: val.name, status: val.online ? 'Available' : 'Offline', extra_info: '', info_image_url: '' }); $('#sidebar-friend-list').append(searchResultHtml); }); // set friend count $('#sidebar-friend-count').html(response.length); }, error: app.ajaxError }); hidePanels(); return false; } // TODO: same code is in searchResults.js - REFACTOR function search(query) { logger.debug('query=' + query); if (query !== '') { var url = "/api/search?query=" + query; $.ajax({ type: "GET", dataType: "json", contentType: 'application/json', url: url, processData: false, success: function(response) { $.each(response.musicians, function(index, val) { // fill in template for Connect pre-click var template = $('#template-sidebar-search-result').html(); var searchResultHtml = context.JK.fillTemplate(template, { userId: val.id, avatar_url: context.JK.resolveAvatarUrl(val.photo_url), userName: val.name, location: val.location }); $('#sidebar-search-results').append(searchResultHtml); // fill in template for Connect post-click template = $('#template-sidebar-invitation-sent').html(); var invitationSentHtml = context.JK.fillTemplate(template, { userId: val.id, first_name: val.first_name, profile_url: "/users/" + val.id }); $('#sidebar-search-results').append(invitationSentHtml); // initialize visibility of the divs $('div[layout=sidebar] div[user-id=' + val.id + '].sidebar-search-connected').hide(); $('div[layout=sidebar] div[user-id=' + val.id + '].result').show(); // wire up button click handler $('div[layout=sidebar] div[user-id=' + val.id + ']').find('#btn-connect-friend').click(sendFriendRequest); $('#sidebar-search-header').show(); }); }, error: app.ajaxError }); } } function hidePanels() { //$('[layout-panel="expanded"]').hide(); $('[layout-panel="contents"]').hide(); $('[layout-panel="contents"]').css({"height": "1px"}); } // TODO: same code is in searchResults.js - REFACTOR function sendFriendRequest(evt) { evt.stopPropagation(); var userId = $(this).parent().attr('user-id'); var url = "/api/users/" + context.JK.currentUserId + "/friend_requests"; $.ajax({ type: "POST", dataType: "json", contentType: 'application/json', url: url, data: '{"friend_id":"' + userId + '"}', processData: false, success: function(response) { // toggle the pre-click and post-click divs $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-connected').show(); $('div[layout=sidebar] div[user-id=' + userId + '].result').hide(); }, error: app.ajaxError }); } function hideSearchResults() { emptySearchResults(); $('#search-input').val(''); $('#sidebar-search-header').hide(); } function emptySearchResults() { $('#sidebar-search-results').empty(); } // TODO // (1) optimize so we're not hitting server on each keyup once > 2 characters are entered // (2) hide any expanded panels once search starts function events() { $('#search-input').keyup(function(evt) { // ENTER KEY if (evt.which === 13) { return hideSearchResults(); } // ESCAPE KEY if (evt.which === 27) { return hideSearchResults(); } var query = $(this).val(); if (query === '') { return hideSearchResults(); } if (query !== '' && query.length > 2) { emptySearchResults(); search(query); } }); $('#sidebar-search-expand').click(function(evt) { $('#searchForm').submit(); hideSearchResults(); }); } this.initialize = function() { events(); populateFriendsPanel(); }; }; })(window,jQuery);