kaiwa/clientapp/pages/groupchat.js

/*global $, app, me, client*/
"use strict";

var _ = require('underscore');
var StayDown = require('staydown');
var BasePage = require('./base');
var templates = require('../templates');
var MUCRosterItem = require('../views/mucRosterItem');
var Message = require('../views/mucMessage');
var MessageModel = require('../models/message');
var embedIt = require('../helpers/embedIt');
var htmlify = require('../helpers/htmlify');
var tempSubject = '';

module.exports = BasePage.extend({
    template: templates.pages.groupchat,
    initialize: function (spec) {
        var self = this;
        this.editMode = false;

        this.listenTo(this, 'pageloaded', this.handlePageLoaded);
        this.listenTo(this, 'pageunloaded', this.handlePageUnloaded);

        this.listenTo(this.model.messages, 'change', this.refreshModel);
        this.listenTo(this.model.messages, 'reset', this.renderMessages);
        this.listenTo(this.model, 'refresh', this.renderMessages);

        app.state.bind('change:connected', this.connectionChange, this);

        this.render();
    },
    events: {
        'keydown textarea': 'handleKeyDown',
        'keyup textarea': 'handleKeyUp',
        'click .status': 'clickStatusChange',
        'blur .status': 'blurStatusChange',
        'keydown .status': 'keyDownStatusChange',
        'click #members_toggle': 'clickMembersToggle'
    },
    classBindings: {
        joined: '.controls'
    },
    textBindings: {
        displayName: 'header .name',
        subject: 'header .status',
        membersCount: '#members_toggle_count'
    },
    show: function (animation) {
        BasePage.prototype.show.apply(this, [animation]);
        client.sendMessage({
            type: 'groupchat',
            to: this.model.jid,
            chatState: 'active'
        });

        this.firstChanged = true;
        var self = this;
        $('.messages').scroll(function() {
            if (self.firstChanged && $(".messages li:first-child").offset().top > 0) {
                self.firstChanged = false;
                self.model.fetchHistory();
            }
        });

        this.$chatInput.focus();
    },
    hide: function () {
        BasePage.prototype.hide.apply(this);
        client.sendMessage({
            type: 'groupchat',
            to: this.model.jid,
            chatState: 'inactive'
        });
    },
    render: function () {
        if (this.rendered) return this;
        this.rendered = true;

        this.renderAndBind();
        this.$chatInput = this.$('.chatBox textarea');
        this.$chatInput.val(app.composing[this.model.jid] || '');
        this.$chatBox = this.$('.chatBox');
        this.$messageList = this.$('.messages');
        this.$autoComplete = this.$('.autoComplete');

        this.staydown = new StayDown(this.$messageList[0], 500);

        this.renderMessages();

        this.renderCollection(this.model.resources, MUCRosterItem, this.$('.groupRoster'));

        this.listenTo(this, 'rosterItemClicked', this.rosterItemSelected);
        this.listenTo(this.model.messages, 'add', this.handleChatAdded);
        this.listenTo(this.model.resources, 'add', this.handleResourceAdded);

        $(window).on('resize', _.bind(this.resizeInput, this));

        this.registerBindings();

        return this;
    },
    renderMessages: function () {
        var self = this;

        this.$messageList.empty();
        delete this.firstModel;
        delete this.firstDate;
        delete this.lastModel;
        delete this.lastDate;

        this.model.messages.each(function (model, i) {
            self.appendModel(model);
        });
        this.staydown.checkdown();
    },
    handleChatAdded: function (model) {
        this.appendModel(model, true);
    },
    handleResourceAdded: function (model) {
        var xmppContact = me.getContact(model.id.split('/')[1]);
        if (xmppContact) {
            xmppContact.bind('change:avatar', this.handleAvatarChanged, this);
        }
    },
    handleAvatarChanged: function(contact, uri) {
        if (!me.isMe(contact.jid)) {
            $('.' + contact.jid.substr(0, contact.jid.indexOf('@')) + ' .messageAvatar img').attr('src', uri);
        }
    },
    handlePageLoaded: function () {
        this.staydown.checkdown();
        this.resizeInput();
    },
    handleKeyDown: function (e) {
        if ((e.which === 13 || e.which === 9) && !e.shiftKey) { // Enter or Tab
            if (this.$autoComplete.css('display') != 'none') {
                var nickname = this.$autoComplete.find(">:nth-child(" + this.autoCompletePos + ")>:first-child").text();
                this.rosterItemSelected(nickname);
            } else if (e.which === 13){
                app.composing[this.model.jid] = '';
                this.sendChat();
            }
            e.preventDefault();
            return false;
        } else if (e.which === 38) { // Up arrow

            if (this.$autoComplete.css('display') != 'none') {
                var count = this.$autoComplete.find(">li").length;
                var oldPos = this.autoCompletePos;
                this.autoCompletePos = (oldPos - 1) < 1 ? count : oldPos - 1;

                this.$autoComplete.find(">:nth-child(" + oldPos + ")").removeClass('selected');
                this.$autoComplete.find(">:nth-child(" + this.autoCompletePos + ")").addClass('selected');

            }
            else if (this.$chatInput.val() === '' && this.model.lastSentMessage) {
                this.editMode = true;
                this.$chatInput.addClass('editing');
                this.$chatInput.val(this.model.lastSentMessage.body);
            }
            e.preventDefault();
            return false;
        } else if (e.which === 40) { // Down arrow

            if (this.$autoComplete.css('display') != 'none') {
                var count = this.$autoComplete.find(">li").length;
                var oldPos = this.autoCompletePos;
                this.autoCompletePos = (oldPos + 1) > count ? 1 : oldPos + 1;

                this.$autoComplete.find(">:nth-child(" + oldPos + ")").removeClass('selected');
                this.$autoComplete.find(">:nth-child(" + this.autoCompletePos + ")").addClass('selected');
            }
            else if (this.editMode) {
                this.editMode = false;
                this.$chatInput.removeClass('editing');
            }
            e.preventDefault();
            return false;
        } else if (!e.ctrlKey && !e.metaKey) {
            if (!this.typing || this.paused) {
                this.typing = true;
                this.paused = false;
                client.sendMessage({
                    type: 'groupchat',
                    to: this.model.jid,
                    chatState: 'composing'
                });
            }
        }
    },
    handleKeyUp: function (e) {
        this.resizeInput();
        app.composing[this.model.jid] = this.$chatInput.val();
        if (this.typing && this.$chatInput.val().length === 0) {
            this.typing = false;
            this.paused = false;
            client.sendMessage({
                type: 'groupchat',
                to: this.model.jid,
                chatState: 'active'
            });
        } else if (this.typing) {
            this.pausedTyping();
        }

        if (([38, 40, 13]).indexOf(e.which) === -1) {
            var lastWord = this.$chatInput.val().split(' ').pop();
            if (lastWord.charAt(0) === '@') {
              var models = this.model.resources.search(lastWord.substr(1) || '', true, true);
              if (models.length) {
                this.renderCollection(models, MUCRosterItem, this.$autoComplete);
                this.autoCompletePos = 1;
                this.$autoComplete.find(">:nth-child(" + this.autoCompletePos + ")").addClass('selected');
                this.$autoComplete.show();
              }
              else
                this.$autoComplete.hide();
            }

            if (this.$autoComplete.css('display') != 'none') {
                if( lastWord ===  '') {
                    this.$autoComplete.hide();
                    return;
                }
            }
        }
    },
    rosterItemSelected: function (nickName) {
        if (nickName == me.nick)
            nickName = 'me';
        var val = this.$chatInput.val();
        var splited = val.split(' ');
        var length = splited.length-1;
        var lastWord = splited.pop();
        if (('@' + nickName).indexOf(lastWord) > -1)
            splited[length] = '@' + nickName + ' ';
        else
            splited.push('@' + nickName + ' ');
        this.$chatInput.val(splited.join(' '));
        this.$autoComplete.hide();
        this.$chatInput.focus();
    },
    resizeInput: _.throttle(function () {
        var height;
        var scrollHeight;
        var heightDiff;
        var newHeight;
        var newMargin;
        var marginDelta;
        var maxHeight = parseInt(this.$chatInput.css('max-height'), 10);

        this.$chatInput.removeAttr('style');
        height = this.$chatInput.outerHeight(),
        scrollHeight = this.$chatInput.get(0).scrollHeight,
        newHeight = Math.max(height, scrollHeight);
        heightDiff = height - this.$chatInput.innerHeight();

        if (newHeight > maxHeight) newHeight = maxHeight;
        if (newHeight > height) {
            this.$chatInput.css('height', newHeight+heightDiff);
            this.$chatInput.scrollTop(this.$chatInput[0].scrollHeight - this.$chatInput.height());
            newMargin = newHeight - height + heightDiff;
            marginDelta = newMargin - parseInt(this.$messageList.css('marginBottom'), 10);
            if (!!marginDelta) {
                this.$messageList.css('marginBottom', newMargin);
            }
        } else {
            this.$messageList.css('marginBottom', 0);
        }
    }, 300),
    pausedTyping: _.debounce(function () {
        if (this.typing && !this.paused) {
            this.paused = true;
            client.sendMessage({
                type: 'groupchat',
                to: this.model.jid,
                chatState: 'paused'
            });
        }
    }, 3000),
    sendChat: function () {
        var message;
        var val = this.$chatInput.val();

        if (val) {
            this.staydown.intend_down = true;

            var links = _.map(htmlify.collectLinks(val), function (link) {
                return {url: link};
            });

            message = {
                to: this.model.jid,
                type: 'groupchat',
                body: val,
                chatState: 'active',
                oobURIs: links
            };
            if (this.editMode) {
                message.replace = this.model.lastSentMessage.mid || this.model.lastSentMessage.cid;
            }

            var id = client.sendMessage(message);
            message.mid = id;
            message.from = new app.JID(this.model.jid.bare + '/' + this.model.nick);

            if (this.editMode) {
                this.model.lastSentMessage.correct(message);
            } else {
                var msgModel = new MessageModel(message);
                this.model.addMessage(msgModel, false);
                this.model.lastSentMessage = msgModel;
            }
        }
        this.editMode = false;
        this.typing = false;
        this.paused = false;
        this.$chatInput.removeClass('editing');
        this.$chatInput.val('');
    },
    clickStatusChange: function (e) {
        tempSubject = e.target.textContent;
    },
    blurStatusChange: function (e) {
        var subject = e.target.textContent;
        if (subject === '')
            subject = true;
        client.setSubject(this.model.jid, subject);
        e.target.textContent = tempSubject;
    },
    keyDownStatusChange: function (e) {
        if (e.which === 13 && !e.shiftKey) {
            e.target.blur();
            return false;
        }
    },
    clickMembersToggle: function (e) {
        var roster = $('.groupRoster');
        if (roster.css('visibility') == 'hidden')
            roster.css('visibility', 'visible');
        else
            roster.css('visibility', 'hidden');
    },
    appendModel: function (model, preload) {
        var newEl, first, last;
        var msgDate = Date.create(model.timestamp);
        var messageDay = msgDate.format('{month} {ord}, {yyyy}');

        if (this.firstModel === undefined || msgDate > Date.create(this.firstModel.timestamp)) {
            if (this.firstModel === undefined) {
                this.firstModel = model;
                this.firstDate = messageDay;
            }

            if (messageDay !== this.lastDate) {
                var dayDivider = $(templates.includes.dayDivider({day_name: messageDay}));
                this.staydown.append(dayDivider[0]);
                this.lastDate = messageDay;
            }

            var isGrouped = model.shouldGroupWith(this.lastModel);
            if (isGrouped) {
                newEl = $(model.partialTemplateHtml);
                last = this.$messageList.find('li').last();
                last.find('.messageWrapper').append(newEl);
                last.addClass('chatGroup');
                this.staydown.checkdown();
            } else {
                newEl = $(model.templateHtml);
                newEl.addClass(model.sender.getNickname(model.from.full));
                this.staydown.append(newEl[0]);
                this.lastModel = model;
            }
            if (!model.pending) embedIt(newEl);
        }
        else {
            var scrollDown = this.$messageList.prop('scrollHeight') - this.$messageList.scrollTop();
            var firstEl = this.$messageList.find('li').first();

            if (messageDay !== this.firstDate) {
                var dayDivider = $(templates.includes.dayDivider({day_name: messageDay}));
                firstEl.before(dayDivider[0]);
                var firstEl = this.$messageList.find('li').first();
                this.firstDate = messageDay;
            }

            var isGrouped = model.shouldGroupWith(this.firstModel);
            if (isGrouped) {
                newEl = $(model.partialTemplateHtml);
                first = this.$messageList.find('li').first().next();
                first.find('.messageWrapper div:first').after(newEl);
                first.addClass('chatGroup');
            } else {
                newEl = $(model.templateHtml);
                newEl.addClass(model.sender.getNickname(model.from.full));
                firstEl.after(newEl[0]);
                this.firstModel = model;
            }
            if (!model.pending) embedIt(newEl);

            this.$messageList.scrollTop(this.$messageList.prop('scrollHeight') - scrollDown);
            this.firstChanged = true;
        }
    },
    refreshModel: function (model) {
        var existing = this.$('#chat' + model.cid);
        existing.replaceWith(model.bareMessageTemplate(existing.prev().hasClass('message_header')));
    },
    connectionChange: function () {
        if (app.state.connected) {
            this.$chatInput.attr("disabled", false);
        } else {
            this.$chatInput.attr("disabled", "disabled");
        }
    }
});