NDOJ/templates/chat/chat.html

{% extends "base.html" %}
{% block title_row %}{% endblock %}
{% block title_ruler %}{% endblock %}
{% block title %} {{_('Chat Box')}} {% endblock %}
{% block js_media %}

<script type="text/javascript" src="{{ static('mathjax_config.js') }}"></script>
<script type="text/javascript" src="{{ static('event.js') }}"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script type="module" src="https://unpkg.com/emoji-picker-element@1"></script>
<script type="text/javascript">
    window.currentPage = 1;
    window.limit_time = 0;
    window.messages_per_page = 50;

    function load_page(page) {
        $.get('?page=' + page)
            .fail(function() {
                console.log("Fail to load page " + page);
            })
            .done(function(data) {
                setTimeout(function() {
                    let container = $('#chat-box');
                    let lastMsgPos = scrollTopOfBottom(container)
                    
                    $('#loader').hide();

                    $('#chat-log').prepend(data);

                    $('.body-block').slice(0, window.messages_per_page).each(function() {
                        resize_emoji($(this));
                    });

                    register_time($('.time-with-rel'));
                    merge_authors();

                    container.scrollTop(scrollTopOfBottom(container) - lastMsgPos);
                }, 500);
            })
    }

    function scrollTopOfBottom(container) {
        return container[0].scrollHeight - container.innerHeight()
    }

    function scrollContainer(container, loader) {
        container.scroll(function() {
        if (container.scrollTop() == 0) {
            if (currentPage < {{paginator.num_pages}}) {
                currentPage++;
                loader.show();
                load_page(currentPage);
            }
        }
    })}

    window.load_dynamic_update = function (last_msg) {
        return new EventReceiver(
            "{{ EVENT_DAEMON_LOCATION }}", "{{ EVENT_DAEMON_POLL_LOCATION }}",
            ['chat'], last_msg, function (message) {
                switch (message.type) {
                    case 'new_message':
                        add_new_message(message.message);
                        break;
                }
            }
        );
    }

    function add_new_message(message) {
        $.get({
            url: "{{ url('chat_message_ajax') }}",
            data: {
                message: message,
            },
            success: function (data) {
                var $data = $(data);
                resize_emoji($data.find('.body-block'));

                $('#chat-log').append($data);
                $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
                MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
                register_time($('.time-with-rel'));
                merge_authors();
            },
            error: function (data) {
                if (data.status === 403)
                    console.log('No right to see: ' + message);
                else {
                    console.log('Could not load chat message:');
                    console.log(data.responseText);
                }
            }
        });
    }

    function merge_authors() {
        var time_limit = 5; // minutes
        var last = {
            username: null,
            time: null,
            $content: null
        };
        $('.body-message').each(function() {
            var username = $(this).find(".username a").text().trim();
            var $body = $(this).find(".content-message .body-block");
            var time = moment($(this).find(".time-with-rel").attr('data-iso'));
            var $content = $(this).children('.content-message');

            if (username == last.username && time.diff(last.time, 'minutes') <= time_limit) {
                last.$content.append($body);
                $(this).parent().remove();
            }
            else {
                last.username = username;
                last.time = time;
                last.$content = $content;
            }
        });
    }

    function submit_chat() {
        if ($("#chat-input").val().trim()) {
            var body = $('#chat-input').val().trim();
            body = body.split('\n').join('\n\n');
            
            var message = {
                body: body,
            };

            $('#chat-input').val('');

            $.post("{{ url('post_chat_message') }}", message)
                .fail(function(res) {
                    console.log('Fail to send message');
                })
                .done(function(res, status) {
                    $('#chat-input').focus();
                })
        }
    }

    function resize_emoji(element) {
        var html = element.html();
        html = html.replace(/(\p{Extended_Pictographic})/ug, `<span class="big-emoji">$1</span>`);
        element.html(html);
    }

    function insert_char_after_cursor(elem, char) {
        var val = elem.value;
        if (typeof elem.selectionStart == "number" && typeof elem.selectionEnd == "number") {
            var start = elem.selectionStart;
            var prefix = elem.value.slice(0, start);
            var prefix_added = prefix + char;
            var chars = [...val];
            chars.splice([...prefix].length, 0, char);
            elem.value = chars.join('');
            elem.selectionStart = elem.selectionEnd = prefix_added.length;
        } else if (document.selection && document.selection.createRange) {
            var range = document.selection.createRange();
            elem.focus();
            range.text = char;
            range.collapse(false);
            range.select();
        }
    }

    $(function() {
        $('#loader').hide();
        merge_authors();

        scrollContainer($('#chat-box'), $('#loader'))

        {% if request.user.is_staff %}
        $(document).on("click", ".chatbtn_remove_mess", function() {
            var elt = $(this);
            $.ajax({
                url: "{{ url('delete_chat_message') }}",
                type: 'post',
                data: {
                    message: elt.attr('value'),
                },
                dataType: 'json',
                success: function(data){
                    var $block = elt.parent();
                    if ($block.parent().find('.body-block').length > 1) {
                        $block.remove();
                    }
                    else {
                        elt.closest('li').remove();
                    }
                },
                fail: function(data) {
                    alert('Fail to delete');
                },
            });
        });
        {% endif %}
        
        $('.body-block').each(function() {
            resize_emoji($(this));
        });

        $("#chat-log").change(function() {
            $('#chat-log').scrollTop($('#chat-log')[0].scrollHeight);
        });
        
        $('#chat-input').focus();

        $('#chat-input').keydown(function(e) {
            if (e.keyCode === 13) {
                if (e.ctrlKey || e.shiftKey) {
                    insert_char_after_cursor(this, "\n");
                }
                else {
                    e.preventDefault();
                    submit_chat();
                }
                return false
            }
            return true
        });

        $('.chat-right-panel').hide();
        $('#chat-tab').find('a').click(function (e) {
            e.preventDefault();
            $('#chat-tab').addClass('active');
            $('#online-tab').removeClass('active');
            $('.chat-left-panel').show();
            $('.chat-right-panel').hide();
        });
        $('#online-tab').find('a').click(function (e) {
            e.preventDefault();
            $('#online-tab').addClass('active');
            $('#chat-tab').removeClass('active');
            $('.chat-left-panel').hide();
            $('.chat-right-panel').show();
        });

        $('#refresh-button').on('click', function() {
            $.get("{{url('online_status_ajax')}}")
                .fail(function() {
                    console.log("Fail to get online status");
                })
                .done(function(data) {
                    if (data.status == 403) {
                        console.log("Fail to retrieve data");
                    }
                    else {
                        $('#chat-online-content').html(data).find('.toggle').each(function () {
                            register_toggle($(this));
                        });;
                    }
                })
        })

        setInterval(function() {
            $('#refresh-button').click();
        }, 5 * 60 * 1000);

        $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
        load_dynamic_update({{last_msg}});

        const button = document.querySelector('#emoji-button')
        const tooltip = document.querySelector('.tooltip')
        Popper.createPopper(button, tooltip)

        function toggleEmoji() {
            tooltip.classList.toggle('shown')
        }
        $('#emoji-button').on('click', function(e) {
            e.preventDefault();
            toggleEmoji();
        });

        $('emoji-picker').on('emoji-click', function(e) {
            var $chat = $('#chat-input').get(0);
            insert_char_after_cursor($chat, e.detail.unicode);
            $chat.focus();
        })

        document.addEventListener('keydown', function(e) {
            if (e.keyCode === 27 && $('.tooltip').hasClass('shown')) {
                toggleEmoji();
            }
        })
    });
</script>

{% endblock js_media %}

{% block media %}
    {% include "chat/chat_css.html" %}
{% endblock media %}
{% block footer %}{% endblock %}
{% block body %}
    <div id="mobile" class="tabs">
        <ul>
            <li id="chat-tab" class="tab active"><a href="#">
                <i class="tab-icon fa fa-comments"></i> {{ _('Chat') }}
            </a></li>
            <li id="online-tab" class="tab"><a href="#"><i class="tab-icon fa fa-wifi"></i> {{ _('Online Users') }}</a></li>
        </ul>
    </div>
    
    <div id="chat-container">
        <div id="chat-online" class="chat-right-panel sidebox">
            <h3 style="display:flex">
                {{_('Online Users')}}
                <button id="refresh-button" title="{{_('Refresh')}}">
                    <img src="/reload.png"
                         width="100%"
                    >
                </button> 
            </h3>
            <div id="chat-online-content">
                {% include "chat/online_status.html" %}
            </div>
        </div>
        <div id="chat-area" class="chat-left-panel" style="width:100%">
            <div id="chat-box">
                <img src="http://opengraphicdesign.com/wp-content/uploads/2009/01/loader64.gif" id="loader">
                <ul id="chat-log">
                    {% include 'chat/message_list.html' %}
                </ul>
            </div>
            <div style="height: 15%">
                <a id="emoji-button" href="#" title="{{_('Emoji')}}"><i class="icofont-slightly-smile"></i></a>
                <textarea id="chat-input" placeholder="{{_('Enter your message')}}"></textarea>
            </div>
            <div class="tooltip" role="tooltip">
                <emoji-picker></emoji-picker>
            </div>
        </div>
    </div>
{% endblock body %}