NewsBlur/media/js/newsblur/views/story_comment_view.js

NEWSBLUR.Views.StoryComment = Backbone.View.extend({
    
    className: 'NB-story-comment',
    
    events: {
        "click .NB-user-avatar": "open_social_profile_modal",
        "click .NB-story-comment-username": "open_social_profile_modal",
        "click .NB-story-comment-reply-button": "open_reply",
        "click .NB-story-comment-like": "like_comment",
        "click .NB-story-comment-share-edit-button": "toggle_feed_story_share_dialog",
        "click .NB-story-comment-reply .NB-modal-submit-button": "save_social_comment_reply"
    },
    
    initialize: function(options) {
        this.story = options.story;
        if (!this.options.on_social_page) {
            this.user = NEWSBLUR.assets.user_profiles.find(this.model.get('user_id'));
        }
        this.model.bind('change:liking_users', this.render, this);
        this.model.bind('change:liking_users', this.call_out_like, this);
    },
    
    render: function() {
        this.model.set('comments', this.model.get('comments').replace(/\n+/g, '<br><br>'));
        var reshare_class = this.model.get('source_user_id') ? 'NB-story-comment-reshare' : '';
        var has_likes = _.any(this.model.get('liking_users'));
        var liked = _.contains(this.model.get('liking_users'), NEWSBLUR.Globals.user_id);

        var $comment = $.make('div', [
            $.make('div', { className: 'NB-story-comment-author-avatar NB-user-avatar ' + reshare_class }, [
                $.make('img', { src: this.user.get('photo_url') })
            ]),
            $.make('div', { className: 'NB-story-comment-author-container' }, [
                (this.model.get('source_user_id') && $.make('div', { className: 'NB-story-comment-reshares' }, [
                    NEWSBLUR.Views.ProfileThumb.create(this.model.get('source_user_id')).render().el
                ])),
                (has_likes && $.make('div', { className: 'NB-story-comment-likes NB-right' }, [
                    $.make('div', { className: 'NB-story-comment-like ' + (liked ? 'NB-active' : '') }),
                    this.render_liking_users()
                ])),
                $.make('div', { className: 'NB-story-comment-username' }, this.user.get('username')),
                $.make('div', { className: 'NB-story-comment-date' }, this.model.get('shared_date') + ' ago'),
                (this.model.get('user_id') == NEWSBLUR.Globals.user_id && $.make('div', { className: 'NB-story-comment-edit-button NB-story-comment-share-edit-button' }, [
                    $.make('div', { className: 'NB-story-comment-edit-button-wrapper' }, 'edit')
                ])),
                $.make('div', { className: 'NB-story-comment-reply-button' }, [
                    $.make('div', { className: 'NB-story-comment-reply-button-wrapper' }, 'reply')
                ]),
                (!has_likes && this.model.get('user_id') != NEWSBLUR.Globals.user_id && $.make('div', { className: 'NB-story-comment-likes NB-left' }, [
                    $.make('div', { className: 'NB-story-comment-like' })
                ]))
            ]),
            $.make('div', { className: 'NB-story-comment-content' }, this.model.get('comments')),
            this.make_story_share_comment_replies()
        ]);
        
        this.$el.html($comment);

        return this;
    },
    
    make_story_share_comment_replies: function() {
        if (!this.model.replies || !this.model.replies.length) return;
        
        var user_id = NEWSBLUR.Globals.user_id;
        var $replies = this.model.replies.map(_.bind(function(reply) {
            if (!NEWSBLUR.assets.get_user(reply.user_id)) return;
            return new NEWSBLUR.Views.StoryCommentReply({model: reply, comment: this}).render().el;
        }, this));
        $replies = $.make('div', { className: 'NB-story-comment-replies' }, $replies);

        return $replies;
    },
    
    render_liking_users: function() {
        var $users = $.make('div', { className: 'NB-story-comment-likes-users' });

        _.each(this.model.get('liking_users'), function(user_id) { 
            if (!NEWSBLUR.assets.get_user(user_id)) return;
            var $thumb = NEWSBLUR.Views.ProfileThumb.create(user_id).render().el;
            $users.append($thumb);
        });
        
        return $users;
    },
    
    call_out_like: function() {
        var $like = this.$('.NB-story-comment-like');
        var liked = _.contains(this.model.get('liking_users'), NEWSBLUR.Globals.user_id);
        
        $like.attr({'title': liked ? 'Favorited!' : 'Unfavorited'});
        $like.tipsy({
            gravity: 'sw',
            fade: true,
            trigger: 'manual',
            offsetOpposite: -1
        });
        var tipsy = $like.data('tipsy');
        _.defer(function() {
            tipsy.enable();
            tipsy.show();
        });

        $like.animate({
            'opacity': 1
        }, {
            'duration': 850,
            'queue': false,
            'complete': function() {
                if (tipsy.enabled) {
                    tipsy.hide();
                    tipsy.disable();
                }
            }
        });
    },
    
    // ==========
    // = Events =
    // ==========
    
    open_social_profile_modal: function() {
        NEWSBLUR.reader.open_social_profile_modal(this.model.get("user_id"));
    },
    
    toggle_feed_story_share_dialog: function() {
        this.story.story_share_view.toggle_feed_story_share_dialog();
    },
    
    open_reply: function(options) {
        options = options || {};
        var current_user = NEWSBLUR.assets.user_profile;
        
        var $form = $.make('div', { className: 'NB-story-comment-reply NB-story-comment-reply-form' }, [
            $.make('img', { className: 'NB-story-comment-reply-photo', src: current_user.get('photo_url') }),
            $.make('div', { className: 'NB-story-comment-username NB-story-comment-reply-username' }, current_user.get('username')),
            $.make('input', { type: 'text', className: 'NB-input NB-story-comment-reply-comments', value: options.reply && options.reply.get("comments") }),
            $.make('div', { className: 'NB-modal-submit-button NB-modal-submit-green' }, options.is_editing ? 'Save' : 'Post')
        ]);
        this.remove_social_comment_reply_form();
        
        if (options.is_editing && options.$reply) {
            $form.data('reply_id', options.reply.get("reply_id"));
            options.$reply.hide().addClass('NB-story-comment-reply-hidden');
            options.$reply.after($form);
        } else {
            this.$el.append($form);
        }
        
        $('.NB-story-comment-reply-comments', $form).bind('keydown', 'enter', 
            _.bind(this.save_social_comment_reply, this));
        $('.NB-story-comment-reply-comments', $form).bind('keydown', 'return', 
            _.bind(this.save_social_comment_reply, this));
        $('.NB-story-comment-reply-comments', $form).bind('keydown', 'esc', _.bind(function(e) {
            e.preventDefault();
            this.remove_social_comment_reply_form();
        }, this));
        $('input', $form).focus();
        
        if (NEWSBLUR.app.story_list) {
            NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
        }
    },
    
    remove_social_comment_reply_form: function() {
        this.$('.NB-story-comment-reply-form').remove();
        this.$('.NB-story-comment-reply-hidden').show();
    },
    
    save_social_comment_reply: function() {
        var $form = this.$('.NB-story-comment-reply-form');
        var $submit = $(".NB-modal-submit-button", $form);
        var comment_user_id = this.model.get('user_id');
        var comment_reply = $('.NB-story-comment-reply-comments', $form).val();
        var reply_id = $form.data('reply_id');
        
        if (!comment_reply || comment_reply.length <= 1) {
            this.remove_social_comment_reply_form();
            if (NEWSBLUR.app.story_list) {
                NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
            }
            return;
        }
        
        if ($submit.hasClass('NB-disabled')) {
            return;
        }
        
        $submit.addClass('NB-disabled').text('Posting...');
        NEWSBLUR.assets.save_comment_reply(this.options.story.id, this.options.story.get('story_feed_id'), 
                                      comment_user_id, comment_reply, 
                                      reply_id,
                                      _.bind(function(data) {
            if (this.options.on_social_page) {
                this.options.story_comments_view.replace_comment(this.model.get('user_id'), data);
            } else {
                this.model.set(data.comment);
                this.render();
                NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
            }
        }, this), _.bind(function(data) {
            var message = data && data.message || "Sorry, this reply could not be posted. Probably a bug.";
            if (!NEWSBLUR.Globals.is_authenticated) {
                message = "You need to be logged in to reply to a comment.";
            }
            var $error = $.make('div', { className: 'NB-error' }, message);
            $submit.removeClass('NB-disabled').text('Post');
            $form.find('.NB-error').remove();
            $form.append($error);
            if (NEWSBLUR.app.story_list) {
                NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
            }
        }, this));
    },
    
    like_comment: function() {
        var liking_user_ids = this.model.get('liking_users') || [];
        var comment_user_id = this.model.get('user_id');
        var liked = _.contains(liking_user_ids, NEWSBLUR.Globals.user_id);
        
        if (!liked) {
            this.model.set('liking_users', _.union(liking_user_ids, NEWSBLUR.Globals.user_id));
            NEWSBLUR.assets.like_comment(this.options.story.id, 
                                         this.options.story.get('story_feed_id'),
                                         comment_user_id);
        } else {
            this.model.set('liking_users', _.without(liking_user_ids, NEWSBLUR.Globals.user_id));
            NEWSBLUR.assets.remove_like_comment(this.options.story.id, 
                                                this.options.story.get('story_feed_id'),
                                                comment_user_id);
        }
    }
    
});