You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 lines
13 KiB
336 lines
13 KiB
<div class="page-chat">
|
|
<div class="row">
|
|
<div class="col-sm-4 col-md-5 col-lg-4">
|
|
<ul class="row list-unstyled" id="chat-users"></ul>
|
|
</div>
|
|
<div class="col-sm-8 col-md-7 col-lg-8">
|
|
<div id="chat-tabs">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="active">
|
|
<a href="#all" aria-controls="all" role="tab" data-toggle="tab">{{ 'All'|get_lang }}</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="all">
|
|
<div class="course-chat chat-history" id="chat-history"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="profile row">
|
|
<div class="col-xs-12">
|
|
<div class="message-form-chat">
|
|
<div class="tabbable">
|
|
<ul class="nav nav-tabs">
|
|
<li class="active">
|
|
<a href="#tab1" data-toggle="tab">{{ 'Write'|get_lang }}</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab2" id="preview" data-toggle="tab">{{ 'Preview'|get_lang }}</a>
|
|
</li>
|
|
<li>
|
|
<button id="emojis" class="btn btn-link" type="button">
|
|
<span class="sr-only">{{ 'Emoji'|get_lang }}</span>{{ emoji_smile }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="tab1">
|
|
<div class="row">
|
|
<div class="col-sm-9">
|
|
<span class="sr-only">{{ 'Message'|get_lang }}</span>
|
|
<textarea id="chat-writer" name="message"></textarea>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<button id="chat-send-message" type="button" class="btn btn-primary">{{ 'Send'|get_lang }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="tab2">
|
|
<div id="html-preview" class="emoji-wysiwyg-editor-preview"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<audio id="chat-alert">
|
|
<source src="{{ _p.web_main }}/chat/sound/notification.wav" type="audio/wav"></source>
|
|
<source src="{{ _p.web_main }}chat/sound/notification.ogg" type="audio/ogg"></source>
|
|
<source src="{{ _p.web_main }}chat/sound/notification.mp3" type="audio/mpeg"></source>
|
|
</audio>
|
|
<script>
|
|
$(document).on('ready', function () {
|
|
var ChChat = {
|
|
_ajaxUrl: '{{ _p.web_ajax }}course_chat.ajax.php?{{ _p.web_cid_query }}',
|
|
_historySize: -1,
|
|
usersOnline: 0,
|
|
currentFriend: 0,
|
|
call: false,
|
|
track: function () {
|
|
return $
|
|
.get(ChChat._ajaxUrl, {
|
|
action: 'track',
|
|
size: ChChat._historySize,
|
|
users_online: ChChat.usersOnline,
|
|
friend: ChChat.currentFriend
|
|
})
|
|
.done(function (response) {
|
|
if (response.data.history) {
|
|
ChChat._historySize = response.data.oldFileSize;
|
|
ChChat.setHistory(response.data.history);
|
|
}
|
|
|
|
if (response.data.userList) {
|
|
ChChat.usersOnline = response.data.usersOnline;
|
|
ChChat.setConnectedUsers(response.data.userList);
|
|
}
|
|
});
|
|
},
|
|
setHistory: function (messageList) {
|
|
var chatHistoryContainer = ChChat.currentFriend ? ('#chat-history-' + ChChat.currentFriend) : '#chat-history';
|
|
|
|
$(chatHistoryContainer)
|
|
.html(messageList)
|
|
.prop('scrollTop', function () {
|
|
return this.scrollHeight;
|
|
});
|
|
|
|
$('#chat-alert').get(0).play();
|
|
},
|
|
setConnectedUsers: function (userList) {
|
|
var html = '';
|
|
|
|
userList.forEach(function (user) {
|
|
var buttonStatus = user.isConnected ? 'success' : 'muted',
|
|
buttonTitle = user.isConnected ? '{{ 'StartAChat'|get_lang }}' : '{{ 'LeaveAMessage'|get_lang }}';
|
|
|
|
html += '<li class="col-xs-12 chat-user">' +
|
|
' <div>' +
|
|
' <img src="'+ user.image_url + '" alt="' + user.complete_name + '" class="img-circle user-image-chat"/>' +
|
|
' <ul class="list-unstyled">' +
|
|
' <li>' + user.complete_name;
|
|
|
|
if (user.id != {{ _u.user_id }}) {
|
|
html += ' <button type="button" class="btn btn-link btn-xs" title="' + buttonTitle + '" data-name="' + user.complete_name + '" data-user="' + user.id + '">' +
|
|
' <i class="fa fa-comments text-' + buttonStatus + '"></i><span class="sr-only">' + buttonTitle + '</span>' +
|
|
' </button>';
|
|
}
|
|
|
|
html += ' </li>' +
|
|
' <li><small>' + user.username + '</small></li>' +
|
|
' </ul>' +
|
|
' </div>' +
|
|
'</li>';
|
|
});
|
|
|
|
$('#chat-users').html(html);
|
|
},
|
|
onPreviewListener: function () {
|
|
$
|
|
.post(ChChat._ajaxUrl, {
|
|
action: 'preview',
|
|
'message': $('textarea#chat-writer').val()
|
|
})
|
|
.done(function (response) {
|
|
if (!response.status) {
|
|
return;
|
|
}
|
|
|
|
$('#html-preview').html(response.data.message);
|
|
});
|
|
},
|
|
onSendMessageListener: function (e) {
|
|
e.preventDefault();
|
|
|
|
if (!$('textarea#chat-writer').val().trim().length) {
|
|
return;
|
|
}
|
|
|
|
var self = this;
|
|
self.disabled = true;
|
|
|
|
$
|
|
.post(ChChat._ajaxUrl, {
|
|
action: 'write',
|
|
message: $('textarea#chat-writer').val(),
|
|
friend: ChChat.currentFriend
|
|
})
|
|
.done(function (response) {
|
|
self.disabled = false;
|
|
|
|
if (!response.status) {
|
|
return;
|
|
}
|
|
|
|
$('textarea#chat-writer').val('');
|
|
$(".emoji-wysiwyg-editor").html('');
|
|
});
|
|
},
|
|
onResetListener: function (e) {
|
|
if (!confirm("{{ 'ConfirmReset'|get_lang }}")) {
|
|
e.preventDefault();
|
|
|
|
return;
|
|
}
|
|
|
|
$
|
|
.get(ChChat._ajaxUrl, {
|
|
action: 'reset',
|
|
friend: ChChat.currentFriend
|
|
})
|
|
.done(function (response) {
|
|
if (!response.status) {
|
|
return;
|
|
}
|
|
|
|
ChChat.setHistory(response.data);
|
|
});
|
|
},
|
|
init: function () {
|
|
ChChat.track().done(function () {
|
|
ChChat.init();
|
|
});
|
|
}
|
|
};
|
|
|
|
hljs.initHighlightingOnLoad();
|
|
|
|
emojione.ascii = true;
|
|
emojione.imagePathPNG = '{{ _p.web_lib }}javascript/emojione/png/';
|
|
emojione.imagePathSVG = '{{ _p.web_lib }}javascript/emojione/svg/';
|
|
emojione.imagePathSVGSprites = '{{ _p.web_lib }}javascript/emojione/sprites/';
|
|
|
|
var emojiStrategy = {{ emoji_strategy|json_encode }};
|
|
|
|
$.emojiarea.path = '{{ _p.web_lib }}javascript/emojione/png/';
|
|
$.emojiarea.icons = {{ icons|json_encode }};
|
|
|
|
$('body').on('click', '#chat-reset', ChChat.onResetListener);
|
|
|
|
$('#preview').on('click', ChChat.onPreviewListener);
|
|
|
|
$('#emojis').on('click', function () {
|
|
$('[data-toggle="tab"][href="#tab1"]')
|
|
.show()
|
|
.tab('show');
|
|
});
|
|
|
|
$('textarea#chat-writer').emojiarea({
|
|
button: '#emojis'
|
|
});
|
|
|
|
$('body').delay(1500).find('.emoji-wysiwyg-editor').textcomplete([
|
|
{
|
|
match: /\B:([\-+\w]*)$/,
|
|
search: function (term, callback) {
|
|
var results = [];
|
|
var results2 = [];
|
|
var results3 = [];
|
|
$.each(emojiStrategy, function (shortname, data) {
|
|
if (shortname.indexOf(term) > -1) {
|
|
results.push(shortname);
|
|
} else {
|
|
if ((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
|
|
results2.push(shortname);
|
|
} else if ((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
|
|
results3.push(shortname);
|
|
}
|
|
}
|
|
});
|
|
|
|
if (term.length >= 3) {
|
|
results.sort(function (a, b) {
|
|
return (a.length > b.length);
|
|
});
|
|
results2.sort(function (a, b) {
|
|
return (a.length > b.length);
|
|
});
|
|
results3.sort();
|
|
}
|
|
|
|
var newResults = results.concat(results2).concat(results3);
|
|
|
|
callback(newResults);
|
|
},
|
|
template: function (shortname) {
|
|
return '<img class="emojione" src="{{ _p.web_lib }}javascript/emojione/png/'
|
|
+ emojiStrategy[shortname].unicode
|
|
+ '.png"> :' + shortname + ':';
|
|
},
|
|
replace: function (shortname) {
|
|
return ':' + shortname + ': ';
|
|
},
|
|
index: 1,
|
|
maxCount: 10
|
|
}
|
|
], {});
|
|
|
|
$('button#chat-send-message').on('click', ChChat.onSendMessageListener);
|
|
|
|
$('#chat-users').on('click', 'button.btn', function (e) {
|
|
e.preventDefault();
|
|
|
|
var jSelf = $(this),
|
|
userId = parseInt(jSelf.data('user')) || 0;
|
|
|
|
if (!userId) {
|
|
return;
|
|
}
|
|
|
|
var exists = false;
|
|
|
|
$('#chat-tabs ul.nav li').each(function (i, el) {
|
|
if ($(el).data('user') == userId) {
|
|
exists = true;
|
|
}
|
|
});
|
|
|
|
if (exists) {
|
|
$('#chat-tab-' + userId).tab('show');
|
|
|
|
return;
|
|
}
|
|
|
|
$('#chat-tabs ul.nav-tabs').append('\
|
|
<li role="presentation" data-user="' + userId + '">\
|
|
<a id="chat-tab-' + userId + '" href="#chat-' + userId + '" aria-controls="chat-' + userId + '" role="tab" data-toggle="tab">' + jSelf.data('name') + '</a>\
|
|
</li>\
|
|
');
|
|
|
|
$('#chat-tabs .tab-content').append('\
|
|
<div role="tabpanel" class="tab-pane" id="chat-' + userId + '">\
|
|
<div class="course-chat chat-history" id="chat-history-' + userId + '"></div>\
|
|
</div>\
|
|
');
|
|
|
|
$('#chat-tab-' + userId).tab('show');
|
|
});
|
|
|
|
$('#chat-tabs ul.nav-tabs').on('shown.bs.tab', 'li a', function (e) {
|
|
var jSelf = $(this);
|
|
|
|
var userId = parseInt(jSelf.parent().data('user')) || 0;
|
|
|
|
if (!userId) {
|
|
ChChat.currentFriend = 0;
|
|
|
|
return;
|
|
}
|
|
|
|
ChChat.currentFriend = userId;
|
|
|
|
$(this).tab('show');
|
|
});
|
|
|
|
$('.emoji-wysiwyg-editor').on('keyup', function (e) {
|
|
if (e.ctrlKey && e.keyCode === 13) {
|
|
$('button#chat-send-message').trigger('click');
|
|
}
|
|
});
|
|
|
|
ChChat.init();
|
|
});
|
|
</script>
|
|
|