jam-cloud/app/assets/javascripts/sidebar.js

(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);