macro-ify chat.html
Chuck Sneed
parent
331b35a3f9
commit
cd737046ea
|
|
@ -6,132 +6,27 @@
|
|||
{% include "header.html" %}
|
||||
{% include "modals/expanded_image.html" %}
|
||||
{% include "modals/emoji.html" %}
|
||||
{% include "util/macros.html" %}
|
||||
{% set vlink = '<a href="/id/' ~ v.id ~ '">' %}
|
||||
<div class="container pb-4">
|
||||
<div class="row justify-content-around" id="main-content-row">
|
||||
<div class="col h-100 {% block customPadding %}custom-gutters{% endblock %}" id="main-content-col">
|
||||
|
||||
<div class="border-right pb-1 px-3">
|
||||
<span id="online2" data-bs-html="true" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Users Online" class="text-muted">
|
||||
<i class="far fa-user fa-sm mr-1"></i>
|
||||
<span class="board-chat-count">0</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% macro chat_group_template(id, m) %}
|
||||
<div class="chat-group">
|
||||
<a class="font-weight-bold userlink" target="_blank" {% if m %}style="color:#{{m['namecolor']}}" href="/@{{m['username']}}" {% endif %}><div class="avatar profile-pic-20-wrapper mr-1"><img loading="lazy" class="avatar-pic pp20 mr-1" {% if m %}src="/pp/{{m['user_id']}}"{% endif %}><img class="avatar-hat profile-pic-20-hat hat" loading="lazy" {% if m %}src="{{m['hat']}}"{% endif %}></div>{% if m %}{{m['username']}}{% else %}NULL{% endif %}</a>
|
||||
<span class="text-black time ml-1 mb-3 text-center">{% if m %}{{m['time'] | timestamp}}{% else %}just now{% endif %}</span>
|
||||
<input hidden class="user_id" {% if m %}value="{{m['user_id']}}"{% endif %}>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro chat_line_template(id, m) %}
|
||||
{% set quote_exists = m and m['quotes'] and messages.get(m['quotes']) %}
|
||||
{% set mentioned = m and vlink in m['text_html'] or (quote_exists and messages[m['quotes']]['user_id'] == v.id) %}
|
||||
<div class="chat-line {% if mentioned %}chat-mention{% endif %}" {% if m %}id="{{id}}"{% endif %}>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="text-muted chat-line-content">
|
||||
<div class="{% if not (m and m['quotes']) %}d-none{% endif %} quotes" style="font-size:12px">
|
||||
<a class="QuotedMessageLink" {% if m and m['quotes'] %}href="#{{m['quotes']}}"{% endif %}>
|
||||
<i class="fas fa-reply"></i>
|
||||
<span class="text-primary">@<span class="QuotedUser">
|
||||
{%- if quote_exists -%}
|
||||
{{messages[m['quotes']]['username']}}
|
||||
{%- endif -%}
|
||||
</span></span>:
|
||||
<em class="QuotedMessage text-break">
|
||||
{%- if quote_exists -%}
|
||||
{{messages[m['quotes']]['text']}}
|
||||
{%- endif -%}
|
||||
</em>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<span class="chat-message text-black text-break">
|
||||
{% if m %}
|
||||
{% if v.slurreplacer %}
|
||||
{{m['text_censored'] | safe}}
|
||||
{% else %}
|
||||
{{m['text_html'] | safe}}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="text d-none">{% if m %}{{m['text']}}{% endif %}</span>
|
||||
<i class="quote btn fas fa-reply ml-auto" data-nonce="{{g.nonce}}" data-onclick="quote(this)"></i>
|
||||
{% if v.admin_level >= PERMS['POST_COMMENT_MODERATION'] %}
|
||||
<i class="btn del delconfirm fas fa-trash-alt"></i>
|
||||
<i class="btn d-none del delmsg fas fa-trash-alt text-danger" data-nonce="{{g.nonce}}" data-onclick="del(this)"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
{{ macros.chat_users_online() }}
|
||||
|
||||
<div id="chat-group-template" class="d-none">
|
||||
{{chat_group_template()}}
|
||||
{{macros.chat_group_template()}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chat-line-template" class="d-none">
|
||||
{{chat_line_template()}}
|
||||
{{macros.chat_line_template()}}
|
||||
</div>
|
||||
|
||||
<div id="shrink">
|
||||
<div id="chat-window" class="container p-0">
|
||||
{% set messages_list = messages.items()|list %}
|
||||
{% for id, m in messages_list %}
|
||||
{% set same = loop.index > 1 and m['user_id'] == messages_list[loop.index-2][1]['user_id'] %}
|
||||
{% if not same %}
|
||||
{% if loop.index > 1 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{{chat_group_template(id, m)}}
|
||||
{% endif %}
|
||||
{{chat_line_template(id, m)}}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3"></div>
|
||||
<div id="quotes" class="mt-3 ml-3 mb-2 d-none" style="font-size:12px">
|
||||
<a id="QuotedMessageLink">
|
||||
<i class="fas fa-reply"></i> <span class="text-primary">@<span id="QuotedUser"></span></span>: <em id="QuotedMessage"></em>
|
||||
<button type="button" id="cancel" class="btn btn-secondary">Cancel</button>
|
||||
<input hidden id="quotes_id">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id='message' class="d-none position-relative form-group d-flex">
|
||||
<div class="position-absolute text-muted text-small ml-1" style="bottom: -1.5rem; line-height: 1;">
|
||||
<span id="typing-indicator"></span>
|
||||
<span id="loading-indicator" class="d-none"></span>
|
||||
</div>
|
||||
<span class="my-auto">
|
||||
<i class="btn btn-secondary fas fa-smile-beam" style="font-size:1.3rem!important" data-nonce="{{g.nonce}}" data-onclick="loadEmojis('input-text')" data-bs-toggle="modal" data-bs-target="#emojiModal"></i>
|
||||
</span>
|
||||
|
||||
<span class="my-auto ml-1">
|
||||
<label class="btn btn-secondary format mb-0">
|
||||
<div class="mr-3" style="font-size:12px"><i class="fas fa-image" style="font-size:1.3rem!important"></i></div>
|
||||
<input autocomplete="off" id="file" accept="image/*" type="file" name="file" {% if g.is_tor %}disabled{% endif %} hidden>
|
||||
</label>
|
||||
<button type="button" class="text-danger text-lg font-weight-bold ml-2 remove-files d-none" data-bs-toggle="tooltip" title="Remove Files">X</button>
|
||||
</span>
|
||||
|
||||
<textarea id="input-text" minlength="1" maxlength="{% if SITE == 'rdrama.net' %}200{% else %}1000{% endif %}" {% if g.browser in ("iphone","mac") %}style="font-size:16px!important"{% endif %} class="file-ta form-control" placeholder="Message" autocomplete="off" autofocus rows="1"></textarea>
|
||||
|
||||
<i id="chatsend" data-nonce="{{g.nonce}}" data-onclick="send()" class="btn btn-secondary fas fa-reply ml-3 my-auto" style="transform:rotateY(180deg);font-size:1.3rem!important"></i>
|
||||
</div>
|
||||
</div>
|
||||
{{macros.chat_window(vlink)}}
|
||||
</div>
|
||||
|
||||
<div class="col text-left d-none d-lg-block pt-3" style="max-width:300px">
|
||||
<h5>Users Online</h5>
|
||||
<div id="online" class="mt-3"></div>
|
||||
</div>
|
||||
{{macros.chat_users_list()}}
|
||||
</div>
|
||||
|
||||
<input id="vid" hidden value="{{v.id}}">
|
||||
|
|
|
|||
|
|
@ -222,3 +222,120 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro chat_users_online() %}
|
||||
<div class="border-right pb-1 px-3">
|
||||
<span id="online2" data-bs-html="true" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Users Online" class="text-muted">
|
||||
<i class="far fa-user fa-sm mr-1"></i>
|
||||
<span class="board-chat-count">0</span>
|
||||
</span>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro chat_group_template(id, m) %}
|
||||
<div class="chat-group">
|
||||
<a class="font-weight-bold userlink" target="_blank" {% if m %}style="color:#{{m['namecolor']}}" href="/@{{m['username']}}" {% endif %}><div class="avatar profile-pic-20-wrapper mr-1"><img loading="lazy" class="avatar-pic pp20 mr-1" {% if m %}src="/pp/{{m['user_id']}}"{% endif %}><img class="avatar-hat profile-pic-20-hat hat" loading="lazy" {% if m %}src="{{m['hat']}}"{% endif %}></div>{% if m %}{{m['username']}}{% else %}NULL{% endif %}</a>
|
||||
<span class="text-black time ml-1 mb-3 text-center">{% if m %}{{m['time'] | timestamp}}{% else %}just now{% endif %}</span>
|
||||
<input hidden class="user_id" {% if m %}value="{{m['user_id']}}"{% endif %}>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro chat_line_template(id, m, vlink) %}
|
||||
{% set quote_exists = m and m['quotes'] and messages.get(m['quotes']) %}
|
||||
{% set mentioned = m and vlink in m['text_html'] or (quote_exists and messages[m['quotes']]['user_id'] == v.id) %}
|
||||
<div class="chat-line {% if mentioned %}chat-mention{% endif %}" {% if m %}id="{{id}}"{% endif %}>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="text-muted chat-line-content">
|
||||
<div class="{% if not (m and m['quotes']) %}d-none{% endif %} quotes" style="font-size:12px">
|
||||
<a class="QuotedMessageLink" {% if m and m['quotes'] %}href="#{{m['quotes']}}"{% endif %}>
|
||||
<i class="fas fa-reply"></i>
|
||||
<span class="text-primary">@<span class="QuotedUser">
|
||||
{%- if quote_exists -%}
|
||||
{{messages[m['quotes']]['username']}}
|
||||
{%- endif -%}
|
||||
</span></span>:
|
||||
<em class="QuotedMessage text-break">
|
||||
{%- if quote_exists -%}
|
||||
{{messages[m['quotes']]['text']}}
|
||||
{%- endif -%}
|
||||
</em>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<span class="chat-message text-black text-break">
|
||||
{% if m %}
|
||||
{% if v.slurreplacer %}
|
||||
{{m['text_censored'] | safe}}
|
||||
{% else %}
|
||||
{{m['text_html'] | safe}}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="text d-none">{% if m %}{{m['text']}}{% endif %}</span>
|
||||
<i class="quote btn fas fa-reply ml-auto" data-nonce="{{g.nonce}}" data-onclick="quote(this)"></i>
|
||||
{% if v.admin_level >= PERMS['POST_COMMENT_MODERATION'] %}
|
||||
<i class="btn del delconfirm fas fa-trash-alt"></i>
|
||||
<i class="btn d-none del delmsg fas fa-trash-alt text-danger" data-nonce="{{g.nonce}}" data-onclick="del(this)"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro chat_window(vlink)%}
|
||||
<div id="shrink">
|
||||
<div id="chat-window" class="container p-0">
|
||||
{% set messages_list = messages.items()|list %}
|
||||
{% for id, m in messages_list %}
|
||||
{% set same = loop.index > 1 and m['user_id'] == messages_list[loop.index-2][1]['user_id'] %}
|
||||
{% if not same %}
|
||||
{% if loop.index > 1 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{{chat_group_template(id, m)}}
|
||||
{% endif %}
|
||||
{{chat_line_template(id, m, vlink)}}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3"></div>
|
||||
<div id="quotes" class="mt-3 ml-3 mb-2 d-none" style="font-size:12px">
|
||||
<a id="QuotedMessageLink">
|
||||
<i class="fas fa-reply"></i> <span class="text-primary">@<span id="QuotedUser"></span></span>: <em id="QuotedMessage"></em>
|
||||
<button type="button" id="cancel" class="btn btn-secondary">Cancel</button>
|
||||
<input hidden id="quotes_id">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id='message' class="d-none position-relative form-group d-flex">
|
||||
<div class="position-absolute text-muted text-small ml-1" style="bottom: -1.5rem; line-height: 1;">
|
||||
<span id="typing-indicator"></span>
|
||||
<span id="loading-indicator" class="d-none"></span>
|
||||
</div>
|
||||
<span class="my-auto">
|
||||
<i class="btn btn-secondary fas fa-smile-beam" style="font-size:1.3rem!important" data-nonce="{{g.nonce}}" data-onclick="loadEmojis('input-text')" data-bs-toggle="modal" data-bs-target="#emojiModal"></i>
|
||||
</span>
|
||||
|
||||
<span class="my-auto ml-1">
|
||||
<label class="btn btn-secondary format mb-0">
|
||||
<div class="mr-3" style="font-size:12px"><i class="fas fa-image" style="font-size:1.3rem!important"></i></div>
|
||||
<input autocomplete="off" id="file" accept="image/*" type="file" name="file" {% if g.is_tor %}disabled{% endif %} hidden>
|
||||
</label>
|
||||
<button type="button" class="text-danger text-lg font-weight-bold ml-2 remove-files d-none" data-bs-toggle="tooltip" title="Remove Files">X</button>
|
||||
</span>
|
||||
|
||||
<textarea id="input-text" minlength="1" maxlength="{% if SITE == 'rdrama.net' %}200{% else %}1000{% endif %}" {% if g.browser in ("iphone","mac") %}style="font-size:16px!important"{% endif %} class="file-ta form-control" placeholder="Message" autocomplete="off" autofocus rows="1"></textarea>
|
||||
|
||||
<i id="chatsend" data-nonce="{{g.nonce}}" data-onclick="send()" class="btn btn-secondary fas fa-reply ml-3 my-auto" style="transform:rotateY(180deg);font-size:1.3rem!important"></i>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro chat_users_list() %}
|
||||
<div class="col text-left d-none d-lg-block pt-3" style="max-width:300px">
|
||||
<h5>Users Online</h5>
|
||||
<div id="online" class="mt-3"></div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
Loading…
Reference in New Issue