NDOJ/templates/chat/chat.html

{% set layout = "no_wrapper" %}
{% 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('mathjax3_config.js') }}"></script>
  <script type="text/javascript" src="{{ static('event.js') }}"></script>
  <script type="module" src="https://unpkg.com/emoji-picker-element@1"></script>
  {% compress js %}
    {% include "chat/chat_js.html" %}
  {% endcompress %}

  <script type="text/javascript">
    window.limit_time = 24;
    window.room_id = "{{room if room else ''}}";
    window.unread_message = 0;
    window.other_user_id = "{{other_user.id if other_user else ''}}";
    window.lock = false;
    window.lock_click_space = false;
    window.pushed_messages = new Set();
    let isMobile = window.matchMedia("only screen and (max-width: 799px)").matches;

    window.load_dynamic_update = function (last_msg) {
      var receiver = new EventReceiver(
        "{{ EVENT_DAEMON_LOCATION }}", "{{ EVENT_DAEMON_POLL_LOCATION }}",
        ['{{chat_lobby_channel}}', '{{chat_channel}}'], last_msg, function (message) {
          if (window.pushed_messages.has(message.message)) {
            return;
          }
          window.pushed_messages.add(message.message);
          var room = (message.type == 'lobby') ? '' : message.room;
          if (message.author_id == {{request.profile.id}}) {
            check_new_message(message.message, message.tmp_id, room);
          }
          else {
            add_new_message(message.message, room, false);
          }
        }
      );

      return receiver;
    }
    let message_template = `
{% with message=message_template %}
  {% include "chat/message.html" %}
{% endwith %}  
    `;
    $(function() {
      load_dynamic_update({{last_msg}});
    });
  </script>

{% endblock js_media %}

{% block media %}
  {% include "chat/chat_css.html" %}
{% endblock media %}

{% block body %}
  <div class="chat">
    <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>
          <i class="fa fa-users"></i>{{_('Online Users')}}
        </h3>
        <div id="chat-online-content">
          <div id="search-container">
            <center>
              <form id="search-form" name="form" action="{{ url('get_or_create_room') }}" method="post">
                {% csrf_token %}
                <input id="search-handle" type="text" name="search"
                  placeholder="{{ _('Search by handle...') }}">
              </form>
            </center>
          </div>
          <div id="chat-online-list">
            {% include "chat/online_status.html" %}
          </div>
        </div>
      </div>
      <div id="chat-area" class="chat-left-panel" style="width:100%">
        <div id="chat-info" style="height: 10%">
          {% include 'chat/user_online_status.html' %}
        </div>
        <div id="chat-box">
          <img src="{{static('loading.gif')}}" id="loader">
          <ul id="chat-log" style="display: none">
            {% 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 maxlength="5000" id="chat-input" placeholder="{{_('Enter your message')}}"></textarea>
        </div>
        <div class="tooltip" role="tooltip">
          <emoji-picker></emoji-picker>
        </div>
      </div>
    </div>
  </div>
{% endblock body %}