citrus-cms/assets/admin/_es6/pages/be_comp_chat.js

/*
 *  Document   : be_comp_chat.js
 *  Author     : pixelcave
 *  Description: Custom JS code used in Chat Page
 */

// Helper variables
let lWindow, lHeader, lFooter, cContainer, cHeight, cHead, cTalk, cPeople, cform, cTimeout;

// Message Classes
let classesMsgBase      = 'rounded font-w600 p-10 mb-10 animated fadeIn',
    classesMsgSelf      = 'ml-50 bg-primary-lighter text-primary-darker',
    classesMsgOther     = 'mr-50 bg-body-light',
    classesMsgHeader    = 'font-size-sm font-italic text-muted text-center mt-20 mb-10';

class BeCompChat {
    /*
     * Init chat
     *
     */
    static initChat() {
        let self = this;

        // Set variables
        lWindow    = jQuery(window);
        lHeader    = jQuery('#page-header');
        lFooter    = jQuery('#page-footer');
        cContainer = jQuery('.js-chat-container');
        cHeight    = cContainer.data('chat-height');
        cHead      = jQuery('.js-chat-head');
        cTalk      = jQuery('.js-chat-talk');
        cPeople    = jQuery('.js-chat-people');
        cform      = jQuery('.js-chat-form');

        // Chat height mode ('auto' for full height, number for specific height in pixels)
        switch (cHeight) {
            case 'auto':
                // Init chat windows' height to full available (also on browser resize or orientation change)
                jQuery(window).on('resize.cb.chat orientationchange.cb.chat', e => {
                    clearTimeout(cTimeout);

                    cTimeout = setTimeout(e => {
                        self.initChatWindows();
                    }, 150);
                }).triggerHandler('resize.cb.chat');
                break;
            default:
                // Init chat windows' height with a specific height
                self.initChatWindows(cHeight);
        }

        // Enable scroll lock to chat talk and people window
        cTalk.scrollLock('enable');

        if (cPeople.length) {
            cPeople.scrollLock('enable');
        }

        // Init form submission
        jQuery('form', cform).on('submit', e => {
            // Stop form submission
            e.preventDefault();

            // Get chat input
            let chatInput = jQuery('.js-chat-input', jQuery(e.currentTarget));

            // Add message
            self.chatAddMessage(chatInput.data('target-chat-id'), chatInput.val(), 'self', chatInput);
        });
    }

    /*
     * Init chat windows' height
     *
     */
    static initChatWindows(customHeight) {
        let cHeightFinal;

        // If height is specified
        if (customHeight) {
            cHeightFinal = parseInt(customHeight);
        } else {
            // Calculate height
            cHeightFinal = lWindow.height() -
                (lHeader.length ? lHeader.outerHeight() : 0) -
                (lFooter.length ? lFooter.outerHeight() : 0) -
                (parseInt(cContainer.css('padding-top')) + parseInt(cContainer.css('padding-bottom'))) -
                cHead.outerHeight();
        }

        // Add a minimum height
        if (cHeightFinal < 200) {
            cHeightFinal = 200;
        }

        // Set height to chat windows (+ people window if exists)
        cTalk.css('height', cHeightFinal - cform.outerHeight());

        if (cPeople.length) {
            cPeople.css('height', cHeightFinal);
        }
    }

    /*
     * Add a header message to a chat window
     *
     */
    static chatAddHeader(chatId, chatMsg) {
        // Get chat window
        let chatWindow = jQuery('.js-chat-talk[data-chat-id="' + chatId + '"]');

        // If time header and chat window exists
        if (chatMsg && chatWindow.length) {
            chatWindow.append('<div class="' + classesMsgHeader + '">'
                    + jQuery('<div />').text(chatMsg).html()
                    + '</div>');

            // Scroll the message list to the bottom
            chatWindow.animate({ scrollTop: chatWindow[0].scrollHeight }, 150);
        }
    }

    /*
     * Add a message to a chat window
     *
     */
    static chatAddMessage(chatId, chatMsg, chatMsgLevel, chatInput) {
        // Get chat window
        let chatWindow = jQuery('.js-chat-talk[data-chat-id="' + chatId + '"]');

        // If message and chat window exists
        if (chatMsg && chatWindow.length) {
            // Post it to its related window (if message level is 'self', make it stand out)
            chatWindow.append('<div class="' + classesMsgBase + ' ' + ((chatMsgLevel === 'self') ? classesMsgSelf : classesMsgOther) + '">'
                    + jQuery('<div />').text(chatMsg).html()
                    + '</div>');

            // Scroll the message list to the bottom
            chatWindow.animate({ scrollTop: chatWindow[0].scrollHeight }, 150);

            // If input is set, reset it
            if (chatInput) {
                chatInput.val('');
            }
        }
    }

    /*
     * Init functionality
     *
     */
    static init() {
        this.initChat();
    }

    /*
     * Add time header
     *
     */
    static addHeader(chatId, chatMsg) {
        this.chatAddHeader(chatId, chatMsg);
    }

    /*
     * Add message
     *
     */
    static addMessage(chatId, chatMsg, chatMsgLevel) {
        this.chatAddMessage(chatId, chatMsg, chatMsgLevel, false);
    }
}

// Initialize when page loads
jQuery(() => {
    BeCompChat.init();
    window.BeCompChat = BeCompChat;
});