335 lines
10 KiB
HTML
335 lines
10 KiB
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 %}
|