kaiwa/clientapp/helpers/chatHelpers.js

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

var _ = require('underscore');
var raf = require('raf-component');


module.exports = {
    initializeScroll: function () {
        var check = _.bind(this.handleScroll, this);
        var self = this;

        function animate() {
            self.rafID = raf(animate);
            check();
        }
        animate();

        this.pinnedToBottom = true;
        this.lastScrollTop = 0;
    },
    scrollPageLoad: function () {
        if (typeof this.lastScrollPosition === 'number') {
            this.scrollTo(this.lastScrollPosition);
        } else {
            this.scrollToBottom();
        }
    },
    scrollPageUnload: function () {
        this.savePosition();
        this.trimOldChats();
        raf.cancel(this.rafID);
    },
    savePosition: function () {
        this.lastScrollPosition = this.pinnedToBottom ? '' : this.$scrollContainer.scrollTop();
    },
    trimOldChats: function () {
        var self = this;
        var removedIds;
        if (this.pinnedToBottom) {
            _.delay(function () {
                removedIds = [];//self.collection.trimOlderChats();
                removedIds.forEach(function (id) {
                    self.$('#chat' + id).remove();
                });
            }, 500);
        }
    },
    handleScroll: function (e) {
        var scrollTop = this.$scrollContainer[0].scrollTop;
        var direction = scrollTop >= this.lastScrollTop ? 'down' : 'up';
        if (direction === 'up' && !this.isBottom()) {
            this.pinnedToBottom = false;
        } else if (this.isBottom()) {
            this.handleAtBottom();
        }
        this.lastScrollTop = scrollTop;
    },
    scrollIfPinned: function (animate) {
        if (this.pinnedToBottom) this.scrollToBottom(animate);
    },
    handleAtBottom: function () {
        if (this.isVisible()) {
            this.pinnedToBottom = true;
        }
    },
    isBottom: function () {
        var scrollTop = this.$scrollContainer[0].scrollTop;
        var scrollHeight = this.$scrollContainer[0].scrollHeight;
        var height = this.$scrollContainer.height();
        var fromBottom = scrollHeight - (scrollTop + height);
        return fromBottom < 80;
    },
    resizeInput: function () {
        var height;
        var scrollHeight;
        var newHeight;
        var newPadding;
        var paddingDelta;
        var maxHeight = 102;

        this.$chatInput.removeAttr('style');
        height = this.$chatInput.height() + 10,
        scrollHeight = this.$chatInput.get(0).scrollHeight,
        newHeight = scrollHeight + 2;

        if (newHeight > maxHeight) newHeight = maxHeight;
        if (newHeight > height) {
            this.$chatInput.css('height', newHeight);
            newPadding = newHeight + 21;
            paddingDelta = newPadding - parseInt(this.$messageList.css('paddingBottom'), 10);
            if (!!paddingDelta) {
                this.$messageList.css('paddingBottom', newPadding);
            }
        }
    },
    scrollTo: function (height, animate) {
        if (animate) {
            this.$scrollContainer.animate({
                scrollTop: height
            }, {
                duration: 500,
                queue: false
            });
        } else {
            this.$scrollContainer[0].scrollTop = height;
        }
    },
    scrollToBottom: function (animate) {
        if (!this.isVisible()) return;
        var height = this.$scrollContainer[0].scrollHeight;
        this.scrollTo(height, animate);
    },
    isVisible: function () {
        return app.currentPage === this;
    }
};