One Hat Cyber Team

View File Name : code.js

/**
 *-------------------------------------------------------------
 * Global variables
 *-------------------------------------------------------------
 */
var messenger,
    auth_id = $('meta[name=url]').attr('data-user'),
    route = $('meta[name=route]').attr('content'),
    url = $('meta[name=url]').attr('content'),
    access_token = $('meta[name="csrf-token"]').attr('content'),
    typingTimeout,
    typingNow = 0,
    temporaryMsgId = 0,
    defaultAvatarInSettings = null,
    messengerColor,
    dark_mode;
const messagesContainer = $('.messenger-messagingView .m-body'),
    messengerTitleDefault = $('.messenger-headTitle').text(),
    messageInput = $('#message-form .m-send');

// console.log(auth_id);

/**
 *-------------------------------------------------------------
 * Global Templates
 *-------------------------------------------------------------
 */
// Loading svg
function loadingSVG(w_h = '25px', className = null) {
    return `
 <svg class="loadingSVG ` + className + `" xmlns="http://www.w3.org/2000/svg" width="` + w_h + `" height="` + w_h + `" viewBox="0 0 40 40" stroke="#2196f3">
   <g fill="none" fill-rule="evenodd">
     <g transform="translate(2 2)" stroke-width="3">
       <circle stroke-opacity=".1" cx="18" cy="18" r="18"></circle>
       <path d="M36 18c0-9.94-8.06-18-18-18" transform="rotate(349.311 18 18)">
           <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur=".8s" repeatCount="indefinite"></animateTransform>
       </path>
     </g>
   </g>
 </svg>
 `;
}

// loading placeholder for users list item
function listItemLoading(items) {
    let template = '';
    for (let i = 0; i < items; i++) {
        template += `
     <div class="loadingPlaceholder">
       <div class="loadingPlaceholder-wrapper">
         <div class="loadingPlaceholder-body">
         <table class="loadingPlaceholder-header">
           <tr>
             <td style="width: 45px;"><div class="loadingPlaceholder-avatar"></div></td>
             <td>
               <div class="loadingPlaceholder-name"></div>
                   <div class="loadingPlaceholder-date"></div>
             </td>
           </tr>
         </table>
         </div>
       </div>
   </div>
     `;
    }
    return template;
}


// loading placeholder for avatars
function avatarLoading(items) {
    let template = '';
    for (let i = 0; i < items; i++) {
        template += `
     <div class="loadingPlaceholder">
     <div class="loadingPlaceholder-wrapper">
         <div class="loadingPlaceholder-body">
             <table class="loadingPlaceholder-header">
                 <tr>
                     <td style="width: 45px;">
                         <div class="loadingPlaceholder-avatar" style="margin: 2px;"></div>
                     </td>
                 </tr>
             </table>
         </div>
     </div>
     </div>
     `;
    }
    return template;
}

// While sending a message, show this temporary message card.
function sendigCard(message, id) {
    return `
 <div class="message-card mc-sender" data-id="` + id + `">
     <p>` + message + `<sub><span class="far fa-clock"></span></sub></p>
 </div>
 `;
}

// upload image preview card.
function attachmentTemplate(fileType, fileName, imgURL = null) {
    if (fileType != 'image') {
        return `
     <div class="attachment-preview">
         <span class="fas fa-times cancel"></span>
         <p style="padding:0px 30px;"><span class="fas fa-file"></span> ` + fileName + `</p>
     </div>
     `;
    } else {
        return `
     <div class="attachment-preview">
         <span class="fas fa-times cancel"></span>
         <div class="image-file chat-image" style="background-image: url('` + imgURL + `');"></div>
         <p><span class="fas fa-file-image"></span> ` + fileName + `</p>
     </div>
     `;
    }
}

// Active Status Circle
function activeStatusCircle() {
    return `<span class="activeStatus"></span>`;
}

/**
 *-------------------------------------------------------------
 * Css Media Queries [For responsive design]
 *-------------------------------------------------------------
 */
$(window).resize(function() {
    cssMediaQueries();
});

function cssMediaQueries() {
    if (window.matchMedia('(min-width: 980px)').matches) {
        $('.messenger-listView').removeAttr('style');
    }
    if (window.matchMedia('(max-width: 980px)').matches) {
        $('body').find('.messenger-list-item').find('tr[data-action]').attr('data-action', '1');
        $('body').find('.favorite-list-item').find('div').attr('data-action', '1');
    } else {
        $('body').find('.messenger-list-item').find('tr[data-action]').attr('data-action', '0');
        $('body').find('.favorite-list-item').find('div').attr('data-action', '0');
    }
}


/**
 *-------------------------------------------------------------
 * App Modal
 *-------------------------------------------------------------
 */
let app_modal = function({
    show = true,
    name,
    data = 0,
    buttons = true,
    header = null,
    body = null,
}) {
    const modal = $('.app-modal[data-name=' + name + ']');
    // header
    header ? modal.find('.app-modal-header').html(header) : '';

    // body
    body ? modal.find('.app-modal-body').html(body) : '';

    // buttons
    buttons == true ?
        modal.find('.app-modal-footer').show() :
        modal.find('.app-modal-footer').hide();

    // show / hide
    if (show == true) {
        modal.show();
        $('.app-modal-card[data-name=' + name + ']').addClass('app-show-modal');
        $('.app-modal-card[data-name=' + name + ']').attr('data-modal', data);
    } else {
        modal.hide();
        $('.app-modal-card[data-name=' + name + ']').removeClass('app-show-modal');
        $('.app-modal-card[data-name=' + name + ']').attr('data-modal', data);
    }

};


/**
 *-------------------------------------------------------------
 * Slide to bottom on [action] - e.g. [message received, sent, loaded]
 *-------------------------------------------------------------
 */
function scrollBottom(container) {
    if ($(container)[0] != "" && $(container)[0] && null && $(container)[0] != "undefined") {
        $(container).stop().animate({
            scrollTop: $(container)[0].scrollHeight
        });
    }
}

/**
 *-------------------------------------------------------------
 * click and drag to scroll - function
 *-------------------------------------------------------------
 */
function hScroller(scroller) {
    const slider = document.querySelector(scroller);
    let isDown = false;
    let startX;
    let scrollLeft;

    if (slider != null && slider != "") {
        slider.addEventListener('mousedown', (e) => {
            isDown = true;
            startX = e.pageX - slider.offsetLeft;
            scrollLeft = slider.scrollLeft;
        });
        slider.addEventListener('mouseleave', () => {
            isDown = false;
        });
        slider.addEventListener('mouseup', () => {
            isDown = false;
        });
        slider.addEventListener('mousemove', (e) => {
            if (!isDown) return;
            e.preventDefault();
            const x = e.pageX - slider.offsetLeft;
            const walk = (x - startX) * 1;
            slider.scrollLeft = scrollLeft - walk;
        });
    }
}

/**
 *-------------------------------------------------------------
 * Disable/enable message form fields, messaging container...
 * on load info or if needed elsewhere.
 *
 * Default : true
 *-------------------------------------------------------------
 */
function disableOnLoad(action = true) {
    if (action == true) {
        // hide star button
        $('.add-to-favorite').hide();
        // hide send card
        $('.messenger-sendCard').hide();
        // add loading opacity to messages container
        messagesContainer.css('opacity', '.5');
        // disable message form fields
        messageInput.attr('readonly', 'readonly');
        $('#message-form button').attr('disabled', 'disabled');
        $('.upload-attachment').attr('disabled', 'disabled');
    } else {
        // show star button
        if (messenger.split('_')[1] != auth_id) {
            $('.add-to-favorite').show();
        }
        // show send card
        $('.messenger-sendCard').show();
        // remove loading opacity to messages container
        messagesContainer.css('opacity', '1');
        // enable message form fields
        messageInput.removeAttr('readonly');
        $('#message-form button').removeAttr('disabled');
        $('.upload-attachment').removeAttr('disabled');
    }
}

/**
 *-------------------------------------------------------------
 * Error message card
 *-------------------------------------------------------------
 */
function errorMessageCard(id) {
    messagesContainer.find('.message-card[data-id=' + id + ']').addClass('mc-error');
    messagesContainer.find('.message-card[data-id=' + id + ']').find('svg.loadingSVG').remove();
    messagesContainer.find('.message-card[data-id=' + id + '] p').prepend('<span class="fas fa-exclamation-triangle"></span>');
}

/**
 *-------------------------------------------------------------
 * Fetch id data (user/group) and update the view
 *-------------------------------------------------------------
 */
function IDinfo(id, type) {
    // clear temporary message id
    temporaryMsgId = 0;
    // clear typing now
    typingNow = 0;
    // show loading bar
    NProgress.start();
    // disable message form
    disableOnLoad();
    if (messenger != 0) {
        // get shared photos
        getSharedPhotos(id);
        // Get info
        $.ajax({
            url: url + '/idInfo',
            method: 'POST',
            data: { '_token': access_token, 'id': id, 'type': type },
            dataType: 'JSON',
            success: (data) => {
                // avatar photo
                $('.messenger-infoView').find('.avatar').css('background-image', 'url("' + data.user_avatar + '")');
                $('.header-avatar').css('background-image', 'url("' + data.user_avatar + '")');
                // Show shared and actions
                $('.messenger-infoView-btns .delete-conversation').show();
                $('.messenger-infoView-shared').show();
                // fetch messages
                fetchMessages(id, type);
                // focus on messaging input
                messageInput.focus();
                // update info in view
                $('.messenger-infoView .info-name').html(data.fetch.name);
                $('.m-header-messaging .user-name').html(data.fetch.name);
                // Star status
                data.favorite > 0 ?
                    $('.add-to-favorite').addClass('favorite') :
                    $('.add-to-favorite').removeClass('favorite');
                // form reset and focus
                $("#message-form").trigger("reset");
                cancelAttachment();
                messageInput.focus();
            },
            error: () => {
                console.error('Error, check server response!');
                // remove loading bar
                NProgress.done();
                NProgress.remove();
            }
        });
    } else {
        // remove loading bar
        NProgress.done();
        NProgress.remove();
    }
}

/**
 *-------------------------------------------------------------
 * Send message function
 *-------------------------------------------------------------
 */
function sendMessage() {
    temporaryMsgId += 1;
    let tempID = 'temp_' + temporaryMsgId;
    let hasFile = $('.upload-attachment').val() ? true : false;
    if ($.trim(messageInput.val()).length > 0 || hasFile) {
        const formData = new FormData($("#message-form")[0]);
        formData.append('id', messenger.split('_')[1]);
        formData.append('type', messenger.split('_')[0]);
        formData.append('temporaryMsgId', tempID);
        formData.append('_token', access_token);
        $.ajax({
            url: $("#message-form").attr('action'),
            method: 'POST',
            data: formData,
            dataType: 'JSON',
            processData: false,
            contentType: false,
            beforeSend: () => {
                // remove message hint
                $(".message-hint").remove();
                // append message
                hasFile
                    ?
                    messagesContainer.find('.messages').append(sendigCard(messageInput.val() + '\n' + loadingSVG('28px'), tempID)) :
                    messagesContainer.find('.messages').append(sendigCard(messageInput.val(), tempID));
                // scroll to bottom
                scrollBottom(messagesContainer);
                messageInput.css({ 'height': '42px' });
                // form reset and focus
                $("#message-form").trigger("reset");
                cancelAttachment();
                messageInput.focus();
            },
            success: (data) => {
                // console.log(data.tempID);
                if (data.error > 0) {
                    // message card error status
                    errorMessageCard(tempID);
                    // console.error(data.error_msg);
                } else {
                    // update contact item
                    updateContatctItem(messenger.split('_')[1]);
                    messagesContainer.find('.mc-sender[data-id="sending"]').remove();
                    // get message before the sending one [temporary]
                    messagesContainer.find('.message-card[data-id=' + data.tempID + ']').before(data.message);
                    // delete the temporary one
                    messagesContainer.find('.message-card[data-id=' + data.tempID + ']').remove();
                    // scroll to bottom
                    scrollBottom(messagesContainer);
                    // send contact item updates
                    sendContactItemUpdates(true);
                }
            },
            error: () => {
                // message card error status
                errorMessageCard(tempID);
                // error log
                // console.error('Failed sending the message! Please, check your server response');
            }
        });
    }
    return false;
}

/**
 *-------------------------------------------------------------
 * Fetch messages from database
 *-------------------------------------------------------------
 */
function fetchMessages(id, type) {
    if (messenger != 0) {
        $.ajax({
            url: url + '/fetchMessages',
            method: 'POST',
            data: { '_token': access_token, 'id': id, 'type': type },
            dataType: 'JSON',
            success: (data) => {
                // Enable message form if messenger not = 0; means if data is valid
                if (messenger != 0) {
                    disableOnLoad(false);
                }
                messagesContainer.find('.messages').html(data.messages);
                // scroll to bottom
                scrollBottom(messagesContainer);
                // remove loading bar
                NProgress.done();
                NProgress.remove();

                // trigger seen event
                makeSeen(true);
            },
            error: () => {
                // remove loading bar
                NProgress.done();
                NProgress.remove();
                console.error('Failed to fetch messages! check your server response.');
            }
        });
    }
}

/**
 *-------------------------------------------------------------
 * Cancel file attached in the message.
 *-------------------------------------------------------------
 */
function cancelAttachment() {
    $('.messenger-sendCard').find('.attachment-preview').remove();
    $('.upload-attachment').replaceWith($('.upload-attachment').val('').clone(true));
}

/**
 *-------------------------------------------------------------
 * Cancel updating avatar in settings
 *-------------------------------------------------------------
 */
function cancelUpdatingAvatar() {
    $('.upload-avatar-preview').css('background-image', defaultAvatarInSettings);
    $('.upload-avatar').replaceWith($('.upload-avatar').val('').clone(true));
}


/**
 *-------------------------------------------------------------
 * Pusher channels and event listening..
 *-------------------------------------------------------------
 */

// subscribe to the channel
var channel = pusher.subscribe('private-chatify');

// Listen to messages, and append if data received
channel.bind('messaging', function(data) {
    // console.info(data.from_id+' - '+data.to_id+'\n'+auth_id+' - '+messenger);
    if (data.from_id == messenger.split('_')[1] && data.to_id == auth_id) {
        // remove message hint
        $(".message-hint").remove();
        // append message
        messagesContainer.find('.messages').append(data.message);
        // scroll to bottom
        scrollBottom(messagesContainer);
        // trigger seen event
        makeSeen(true);
        // remove unseen counter for the user from the contacts list
        $('.messenger-list-item[data-contact=' + messenger.split('_')[1] + ']').find('tr>td>b').remove();
    }
});

// listen to typing indicator
channel.bind('client-typing', function(data) {
    if (data.from_id == messenger.split('_')[1] && data.to_id == auth_id) {
        data.typing == true ? messagesContainer.find('.typing-indicator').show() :
            messagesContainer.find('.typing-indicator').hide();
    }
    // scroll to bottom
    scrollBottom(messagesContainer);
});

// listen to seen event
channel.bind('client-seen', function(data) {
    if (data.from_id == messenger.split('_')[1] && data.to_id == auth_id) {
        if (data.seen == true) {
            $('.message-time').find('.fa-check').before('<span class="fas fa-check-double seen"></span> ');
            $('.message-time').find('.fa-check').remove();
            // console.info('[seen] triggered!');
        } else {
            // console.error('[seen] event not triggered!');
        }
    }
});

// listen to contact item updates event
channel.bind('client-contactItem', function(data) {
    if (data.update_for == auth_id) {
        data.updating == true ? updateContatctItem(data.update_to) :
            /*console.error('[Contact Item updates] Updating failed!')*/
            '';
    }
});

// -------------------------------------
// presence channel [User Active Status]
var activeStatusChannel = pusher.subscribe('presence-activeStatus');

// Joined
activeStatusChannel.bind('pusher:member_added', function(member) {
    setActiveStatus(1, member.id);
    $('.messenger-list-item[data-contact=' + member.id + ']').find('.activeStatus').remove();
    $('.messenger-list-item[data-contact=' + member.id + ']').find('.avatar').before(activeStatusCircle());
});

// Leaved
activeStatusChannel.bind('pusher:member_removed', function(member) {
    setActiveStatus(0, member.id);
    $('.messenger-list-item[data-contact=' + member.id + ']').find('.activeStatus').remove();
});

/**
 *-------------------------------------------------------------
 * Trigger typing event
 *-------------------------------------------------------------
 */
function isTyping(status) {
    return channel.trigger('client-typing', {
        from_id: auth_id, // Me
        to_id: messenger.split('_')[1], // Messenger
        typing: status,
    });
}

/**
 *-------------------------------------------------------------
 * Trigger seen event
 *-------------------------------------------------------------
 */
function makeSeen(status) {
    // remove unseen counter for the user from the contacts list
    $('.messenger-list-item[data-contact=' + messenger.split('_')[1] + ']').find('tr>td>b').remove();
    // seen
    $.ajax({
        url: url + '/makeSeen',
        method: 'POST',
        data: { '_token': access_token, 'id': messenger.split('_')[1] },
        dataType: 'JSON',
        success: (data) => {
            $('.custom_messanger_counter').text(data.messengerCount);
            // console.log('[seen] Messages seen - ' + messenger.split('_')[1]);
        }
    });
    return channel.trigger('client-seen', {
        from_id: auth_id, // Me
        to_id: messenger.split('_')[1], // Messenger
        seen: status,
    });
}

/**
 *-------------------------------------------------------------
 * Trigger contact item updates
 *-------------------------------------------------------------
 */
function sendContactItemUpdates(status) {
    return channel.trigger('client-contactItem', {
        update_for: messenger.split('_')[1], // Messenger
        update_to: auth_id, // Me
        updating: status,
    });
}

/**
 *-------------------------------------------------------------
 * Check internet connection using pusher states
 *-------------------------------------------------------------
 */
function checkInternet(state, selector) {
    let net_errs = 0;
    const messengerTitle = $('.messenger-headTitle');
    switch (state) {
        case 'connected':
            if (net_errs < 1) {
                messengerTitle.text(messengerTitleDefault);
                selector.addClass('successBG-rgba');
                selector.find('span').hide();
                selector.slideDown('fast', function() {
                    selector.find('.ic-connected').show();
                });
                setTimeout(function() {
                    $('.internet-connection').slideUp('fast');
                }, 3000);
            }
            break;
        case 'connecting':
            messengerTitle.text($('.ic-connecting').text());
            selector.removeClass('successBG-rgba');
            selector.find('span').hide();
            selector.slideDown('fast', function() {
                selector.find('.ic-connecting').show();
            });
            net_errs = 1;
            break;
            // Not connected
        default:
            messengerTitle.text($('.ic-noInternet').text());
            selector.removeClass('successBG-rgba');
            selector.find('span').hide();
            selector.slideDown('fast', function() {
                selector.find('.ic-noInternet').show();
            });
            net_errs = 1;
            break;
    }
}

/**
 *-------------------------------------------------------------
 * Get contacts
 *-------------------------------------------------------------
 */
function getContacts() {
    $('.listOfContacts').html(listItemLoading(4));
    $.ajax({
        url: url + '/getContacts',
        method: 'GET',
        data: { '_token': access_token, 'messenger_id': messenger.split('_')[1] },
        dataType: 'JSON',
        success: (data) => {
            $('.listOfContacts').html('');
            $('.listOfContacts').html(data.contacts);

            $('.all_members').html('');
            $('.all_members').html(data.allUsers);
            // update data-action required with [responsive design]
            cssMediaQueries();
        },
        error: () => {
            console.error('Server error, check your response');
        }
    });
}

/**
 *-------------------------------------------------------------
 * Update contact item
 *-------------------------------------------------------------
 */
function updateContatctItem(user_id) {
    if (user_id != auth_id) {
        let listItem = $('body').find('.listOfContacts').find('.messenger-list-item[data-contact=' + user_id + ']');
        $.ajax({
            url: url + '/updateContacts',
            method: 'POST',
            data: { '_token': access_token, 'user_id': user_id, 'messenger_id': messenger.split('_')[1] },
            dataType: 'JSON',
            success: (data) => {
                listItem.remove();
                $('.listOfContacts').prepend(data.contactItem);
                $('.custom_messanger_counter').text(data.messengerCount);
                // update data-action required with [responsive design]
                cssMediaQueries();
            },
            error: () => {
                console.error('Server error, check your response');
            }
        });
    }
}

/**
 *-------------------------------------------------------------
 * Star
 *-------------------------------------------------------------
 */

function star(user_id) {
    // console.log(messenger);
    if (messenger.split('_')[1] != auth_id) {
        $.ajax({
            url: url + '/star',
            method: 'POST',
            data: { '_token': access_token, 'user_id': user_id },
            dataType: 'JSON',
            success: (data) => {
                data.status > 0 ?
                    $('.add-to-favorite').addClass('favorite') :
                    $('.add-to-favorite').removeClass('favorite');

            },
            error: () => {
                console.error('Server error, check your response');
            }
        });
    }
}

/**
 *-------------------------------------------------------------
 * Get favorite list
 *-------------------------------------------------------------
 */
function getFavoritesList() {
    $('.messenger-favorites').html(avatarLoading(4));
    $.ajax({
        url: url + '/favorites',
        method: 'POST',
        data: { '_token': access_token },
        dataType: 'JSON',
        success: (data) => {
            $('.messenger-favorites').html('');
            $('.messenger-favorites').html(data.favorites);
            // update data-action required with [responsive design]
            cssMediaQueries();
        },
        error: () => {
            console.error('Server error, check your response');
        }
    });
}

/**
 *-------------------------------------------------------------
 * Get shared photos
 *-------------------------------------------------------------
 */
function getSharedPhotos(user_id) {
    $.ajax({
        url: url + '/shared',
        method: 'POST',
        data: { '_token': access_token, 'user_id': user_id },
        dataType: 'JSON',
        success: (data) => {
            $('.shared-photos-list').html(data.shared);
        },
        error: () => {
            console.error('Server error, check your response');
        }
    });
}

/**
 *-------------------------------------------------------------
 * Search in messenger
 *-------------------------------------------------------------
 */
function messengerSearch(input) {
    $.ajax({
        url: url + '/search',
        method: 'GET',
        data: { '_token': access_token, 'input': input },
        dataType: 'JSON',
        beforeSend: () => {
            $('.search-records').html(listItemLoading(4));
        },
        success: (data) => {
            $('.search-records').find('svg').remove();
            data.addData == 'append' ?
                $('.search-records').append(data.records) :
                $('.search-records').html(data.records);
            // update data-action required with [responsive design]
            cssMediaQueries();
        },
        error: () => {
            console.error('Server error, check your response');
        }
    });
}

/**
 *-------------------------------------------------------------
 * Delete Conversation
 *-------------------------------------------------------------
 */
function deleteConversation(id) {
    $.ajax({
        url: url + '/deleteConversation',
        method: 'POST',
        data: { '_token': access_token, 'id': id },
        dataType: 'JSON',
        beforeSend: () => {
            // hide delete modal
            app_modal({
                show: false,
                name: 'delete',
            });
            // Show waiting alert modal
            app_modal({
                show: true,
                name: 'alert',
                buttons: false,
                body: loadingSVG('32px'),
            });
        },
        success: (data) => {
            // delete contact from the list
            $('.listOfContacts').find('.messenger-list-item[data-contact=' + id + ']').remove();
            // refresh info
            IDinfo(id, messenger.split('_')[0]);

            data.deleted ? '' : console.error('Error occured!');

            // Hide waiting alert modal
            app_modal({
                show: false,
                name: 'alert',
                buttons: true,
                body: '',
            });
        },
        error: () => {
            console.error('Server error, check your response');
        }
    });
}


function updateSettings() {
    const formData = new FormData($("#updateAvatar")[0]);
    if (messengerColor) {
        formData.append('messengerColor', messengerColor);
    }
    if (dark_mode) {
        formData.append('dark_mode', dark_mode);
    }
    $.ajax({
        url: url + '/updateSettings',
        method: 'POST',
        data: formData,
        dataType: 'JSON',
        processData: false,
        contentType: false,
        beforeSend: () => {
            // close settings modal
            app_modal({
                show: false,
                name: 'settings',
            });
            // Show waiting alert modal
            app_modal({
                show: true,
                name: 'alert',
                buttons: false,
                body: loadingSVG('32px'),
            });
        },
        success: (data) => {
            if (data.error) {
                // Show error message in alert modal
                app_modal({
                    show: true,
                    name: 'alert',
                    buttons: true,
                    body: data.msg,
                });
            } else {
                // Hide alert modal
                app_modal({
                    show: false,
                    name: 'alert',
                    buttons: true,
                    body: '',
                });

                // reload the page
                location.reload(true);
            }
        },
        error: () => {
            console.error('Server error, check your response');
        }
    });
}

/**
 *-------------------------------------------------------------
 * Set Active status
 *-------------------------------------------------------------
 */
function setActiveStatus(status, user_id) {
    $.ajax({
        url: url + '/setActiveStatus',
        method: 'POST',
        data: { '_token': access_token, 'user_id': user_id, 'status': status },
        dataType: 'JSON',
        success: (data) => {
            // Nothing to do
        },
        error: () => {
            console.error('Server error, check your response');
        }
    });
}


/**
 *-------------------------------------------------------------
 * On DOM ready
 *-------------------------------------------------------------
 */
$(document).ready(function() {
    $('.messenger-tab[data-view=users]').show();
    // get contacts list
    getContacts();

    // get contacts list
    getFavoritesList();

    // Clear typing timeout
    clearTimeout(typingTimeout);

    // NProgress configurations
    NProgress.configure({ showSpinner: false, minimum: 0.7, speed: 500 });

    // make message input autosize.
    autosize($('.m-send'));

    // check if pusher has access to the channel [Internet status]
    pusher.connection.bind('state_change', function(states) {
        let selector = $('.internet-connection');
        checkInternet(states.current, selector);
        // listening for pusher:subscription_succeeded
        channel.bind('pusher:subscription_succeeded', function() {
            // On connection state change [Updating] and get [info & msgs]
            IDinfo(messenger.split('_')[1], messenger.split('_')[0]);
        });
    });

    // tabs on click, show/hide...
    $('.messenger-listView-tabs a').on('click', function() {
        var dataView = $(this).attr('data-view');
        $('.messenger-listView-tabs a').removeClass('active-tab');
        $(this).addClass('active-tab');
        $('.messenger-tab').hide();
        $('.messenger-tab[data-view=' + dataView + ']').show();
    });

    // set item active on click
    $('body').on('click', '.messenger-list-item', function() {
        $('.messenger-list-item').removeClass('m-list-active');
        $(this).addClass('m-list-active');
    });

    // show info side button
    $('.messenger-infoView nav a , .show-infoSide').on('click', function() {
        $('.messenger-infoView').toggle();
    });

    // x button for info section to show the main button.
    $('.messenger-infoView nav a').on('click', function() {
        $('.show-infoSide').show();
    });

    // hide showing button for info section.
    $('.show-infoSide').on('click', function() {
        $(this).hide();
    });

    // make favorites card dragable on click to slide.
    hScroller('.messenger-favorites');

    // click action for list item [user/group]
    $('body').on('click', '.messenger-list-item', function() {
        if ($(this).find('tr[data-action]').attr('data-action') == "1") {
            $('.messenger-listView').hide();
        }
        messenger = $(this).find('p[data-id]').attr('data-id');
        IDinfo(messenger.split('_')[1], messenger.split('_')[0]);
    });

    // click action for favorite button
    $('body').on('click', '.favorite-list-item', function() {
        if ($(this).find('div').attr('data-action') == "1") {
            $('.messenger-listView').hide();
        }
        messenger = 'user_' + $(this).find('div.avatar').attr('data-id');
        IDinfo(messenger.split('_')[1], messenger.split('_')[0]);
    });

    // list view buttons
    $('.listView-x').on('click', function() {
        $('.messenger-listView').hide();
    });
    $('.show-listView').on('click', function() {
        $('.messenger-listView').show();
    });

    // click action for [add to favorite] button.
    $('.add-to-favorite').on('click', function() {
        star(messenger.split('_')[1]);
    });

    // calling Css Media Queries
    cssMediaQueries();

    // message form on submit.
    $('#message-form').on('submit', (e) => {
        e.preventDefault();
        sendMessage();
    });

    // message input on keyup [Enter to send, Enter+Shift for new line]
    $('#message-form .m-send').on('keyup', (e) => {
        // if enter key pressed.
        if (e.which == 13 || e.keyCode == 13) {
            // if shift + enter key pressed, do nothing (new line).
            // if only enter key pressed, send message.
            if (!e.shiftKey) {
                triggered = isTyping(false);
                sendMessage();
            }
        }
    });

    // On [upload attachment] input change, show a preview of the image/file.
    $('body').on('change', ".upload-attachment", (e) => {
        let file = e.target.files[0];
        let reader = new FileReader();
        let sendCard = $('.messenger-sendCard');
        reader.readAsDataURL(file);
        reader.addEventListener('loadstart', (e) => {
            $('#message-form').before(loadingSVG());
        });
        reader.addEventListener('load', (e) => {
            $('.messenger-sendCard').find('.loadingSVG').remove();
            if (!file.type.match("image.*")) {
                // if the file not image
                sendCard.find('.attachment-preview').remove(); // older one
                sendCard.prepend(attachmentTemplate('file', file.name));
            } else {
                // if the file is an image
                sendCard.find('.attachment-preview').remove(); // older one
                sendCard.prepend(attachmentTemplate('image', file.name, e.target.result));
            }
        });
    });

    // Attachment preview cancel button.
    $('body').on('click', ".attachment-preview .cancel", (e) => {
        cancelAttachment();
    });

    // typing indicator on [input] keyDown
    $('#message-form .m-send').on('keydown', () => {
        if (typingNow < 1) {
            // Trigger typing
            let triggered = isTyping(true);
            /*triggered ? console.info('[+] Triggered')
                : console.error('[+] Not triggered');*/
            // Typing now
            typingNow = 1;
        }
        // Clear typing timeout
        clearTimeout(typingTimeout);
        // Typing timeout
        typingTimeout = setTimeout(function() {
            triggered = isTyping(false);
            /*triggered ? console.info('[-] Triggered')
                : console.error('[-] Not triggered');*/
            // Clear typing now
            typingNow = 0;
        }, 1000);
    });

    // Image modal
    $('body').on('click', ".chat-image", function() {
        let src = $(this).css("background-image").split(/"/)[1];
        $("#imageModalBox").show();
        $("#imageModalBoxSrc").attr('src', src);
    });
    $('.imageModal-close').on('click', function() {
        $("#imageModalBox").hide();
    });

    // Search input on focus
    $('.messenger-search').on('focus', function() {
        $('.messenger-tab').hide();
        $('.messenger-tab[data-view="search"]').show();
    });
    // Search action on keyup
    $('.messenger-search').on('keyup', function(e) {
        $.trim($(this).val()).length > 0 ?
            $('.messenger-search').trigger('focus') + messengerSearch($(this).val()) :
            $('.messenger-tab').hide() +
            $('.messenger-listView-tabs a[data-view="users"]').trigger('click');
    });

    // Delete Conversation button
    $('.messenger-infoView-btns .delete-conversation').on('click', function() {
        app_modal({
            name: 'delete',
        });
    });
    // delete modal [delete button]
    $('.app-modal[data-name=delete]').find('.app-modal-footer .delete').on('click', function() {
        deleteConversation(messenger.split('_')[1]);
        app_modal({
            show: false,
            name: 'delete',
        });
    });
    // delete modal [cancel button]
    $('.app-modal[data-name=delete]').find('.app-modal-footer .cancel').on('click', function() {
        app_modal({
            show: false,
            name: 'delete',
        });
    });

    // Settings button action to show settings modal
    $('.settings-btn').on('click', function() {
        app_modal({
            name: 'settings',
        });
    });

    // on submit settings' form
    $('#updateAvatar').on('submit', (e) => {
        e.preventDefault();
        updateSettings();
    });
    // Settings modal [cancel button]
    $('.app-modal[data-name=settings]').find('.app-modal-footer .cancel').on('click', function() {
        app_modal({
            show: false,
            name: 'settings',
        });
        cancelUpdatingAvatar();
    });
    // upload avatar on change
    $('body').on('change', ".upload-avatar", (e) => {
        // store the original avatar
        if (defaultAvatarInSettings == null) {
            defaultAvatarInSettings = $('.upload-avatar-preview').css('background-image');
        }
        let file = e.target.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.addEventListener('loadstart', (e) => {
            $('.upload-avatar-preview').append(loadingSVG('42px', 'upload-avatar-loading'));
        });
        reader.addEventListener('load', (e) => {
            $('.upload-avatar-preview').find('.loadingSVG').remove();
            if (!file.type.match("image.*")) {
                // if the file is not an image
                // console.error('File you selected is not an image!');
            } else {
                // if the file is an image
                $('.upload-avatar-preview').css('background-image', 'url("' + e.target.result + '")');
            }
        });
    });
    // change messenger color button
    $('body').on('click', '.update-messengerColor a', function() {
        messengerColor = $(this).attr('class').split(' ')[0];
        $('.update-messengerColor a').removeClass('m-color-active');
        $(this).addClass('m-color-active');
    });
    // Switch to Dark/Light mode
    $('body').on('click', '.dark-mode-switch', function() {
        if ($(this).attr('data-mode') == '0') {
            $(this).attr('data-mode', '1');
            $(this).removeClass('far');
            $(this).addClass('fas');
            dark_mode = 'dark';
        } else {
            $(this).attr('data-mode', '0');
            $(this).removeClass('fas');
            $(this).addClass('far');
            dark_mode = 'light';
        }
    });
});