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 type="text/javascript">
    window.currentPage = 1;

    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);
                    remove_day_if_today();

                    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);
            }
        }
    })}

    function remove_day_if_today() {
        $('.message_date').each(function() {
            sent_date = $(this).html()
            if (sent_date === "{{today}}") {
                $(this).hide();
            }
        })
    }
    
    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) {
        // console.log(message);
        $.get({
            url: "{{ url('chat_message_ajax') }}",
            data: {
                message: message,
            },
            success: function (data) {
                $('#chat-log').append($(data));
                $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight)
                MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
            },
            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() {
        $('#loader').hide();
        
        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){
                    elt.closest('li').hide();        
                },
                fail: function(data) {
                    alert('Fail to delete');
                },
            });
        });
        {% endif %}
        
        $("#chat-submit").click(function() {
            if ($("#chat-input").val().trim()) {
                let body = $('#chat-input').val().trim();
                let img = '{{ gravatar(request.user, 32) }}';
                
                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();
                    })
            }
        });

        $("#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) {
                    var val = this.value;
                    if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
                        var start = this.selectionStart;
                        this.value = val.slice(0, start) + "\n" + val.slice(this.selectionEnd);
                        this.selectionStart = this.selectionEnd = start + 1;
                    } else if (document.selection && document.selection.createRange) {
                        this.focus();
                        var range = document.selection.createRange();
                        range.text = "\r\n";
                        range.collapse(false);
                        range.select();
                    }
                }
                else {
                    e.preventDefault();
                    $('#chat-submit').click();
                }
                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);
        remove_day_if_today();
        load_dynamic_update({{last_msg}});
    });
</script>

{% endblock js_media %}

{% block media %}
    <style>
        #content {
            margin-top: -0.5em;
        }
        #refresh-button {
            padding: 0;
            margin-left: auto;
            margin-right: 0.3em;
            background: transparent;
            border: none;
            height: 1.5em;
            width: 1.5em;
        }
        #refresh-button:hover {
            background: lightgreen;
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
            transition: 1.5s ease-in-out;
        }
        .status-pic {
            height: 1.3em;
            width: 1.3em;
            border-radius: 0.3em;
        }
        .status-container {
            position: relative;
            display: inline-flex;
        }
        .status-circle {
            position: absolute; 
            bottom: 0; 
            right: 0;
            cx: 18;
            cy: 18;
            r: 4.5;
            stroke: white;
            stroke-width: 1;
        }
        .status-row {
            display: flex;
            margin-bottom: 0.5em;
            font-size: 15px;
        }
        .status-list {
            padding: 0;
        }
        .status-section-title {
            cursor: pointer;
            margin-top: 0.5em;
        }
        ::-webkit-scrollbar {
            width: 20px;
        }

        ::-webkit-scrollbar-track {
            background-color: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #d6dee1;
            border-radius: 20px;
            border: 6px solid transparent;
            background-clip: content-box;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #a8bbbf;
        }

        @media (min-width: 800px) {
            #page-container {
                position:fixed;
                overflow:hidden;
            }
        }

        #page-container {
            width: 100%;
        }
    </style>
{% endblock media %}

{% block body %}
    {% csrf_token %}
    {% block before_posts %}{% endblock %}
    <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-area" class="chat-left-panel">
            <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>
            <textarea id="chat-input" placeholder="{{_('Enter your message')}}"></textarea>
        </div>
        <button id="chat-submit" style="display:none;"> Send </button>
        <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>

{% endblock body %}