NDOJ/templates/chat/chat.html

{% extends "base.html" %}
{% block js_media %}
<script src="{{ static('libs/jquery.waypoints.min.js')}}"></script>
<script src="{{ static('libs/infinite.min.js') }}"></script>
<script type="text/javascript">
    var chatSocket = new WebSocket(
        'ws://' + window.location.host +
        '/ws/chat/');
</script>
<script type="text/javascript">
    $(function() {
        chatSocket.onmessage = function(e) {
            let data = JSON.parse(e.data)
            data = data['message']
            loadMessage(data['body'],
                        data['author'],
                        data['time'],
                        data['image'])
        };

        function loadMessage(content, user, time, image) {
            li = `<li class="infinite-item"> 
                    <img src="${image}" class="profile-pic">
                    <div class="body-message">
                        <div class="user-time">
                            <a href="#" class="user">
                                ${user}
                            </a>
                            <span class="time">${time}</span>
                        </div>
                        <span class="message">
                            <span>${content}</span>
                        </span>
                    </div>
                    <div class="clear"></div>
                </li>`
            ul = $('#chat-log')
            ul.append(li)
            $('#chat-log').scrollTop($('#chat-log')[0].scrollHeight);
        }

        (function init_chatlog() {
            ul = $('#chat-log')
            {% for msg in message|reverse %}
                loadMessage('{{msg.body}}', '{{msg.author}}', '12:00:00', '{{gravatar(msg.author, 32)}}')
            {% endfor %}
        })()

        var infinite = new Waypoint.Infinite({
            element: $('.infinite-container')[0],
            onBeforePageLoad: function () {
                $('.loading').show();
            },
            onAfterPageLoad: function ($items) {
                $('.loading').hide();
            }
        });

        $("#chat-submit").click(function() {
            if ($("#chat-input").val().trim()) {
                let body = $('#chat-input').val().trim();
                let img = '{{ gravatar(request.user, 32) }}'
                
                message = {
                    'body': body,
                    'image': img,
                    'author': '{{request.profile}}',
                    'author_id': {{request.profile.id}},
                }

                // $.post("send/", message)
                chatSocket.send(JSON.stringify({
                    'message': message
                }));

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

        chatSocket.onclose = function(e) {
            console.error('Chat socket closed unexpectedly');
        };

        $("#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
        });

    });
</script>
{% endblock js_media %}

{% block body %}
    <div id="chat-area">
        <ul id="chat-log" class="infinite-container">
        </ul>    
        {{_('Your message')}}
    
        <textarea rows="6" id="chat-input"></textarea>
    </div>
    <button id="chat-submit"> Send </button>
    {% if page_obj.has_next %}
        <a href="{{ request.path }}?page={{ message.next_page_number }}">next</a>
    {% endif %}
{% endblock body %}