chat.tpl 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. <div class="page-chat">
  2. <div class="row">
  3. <div class="col-sm-4 col-md-5 col-lg-4">
  4. <ul class="row list-unstyled" id="chat-users"></ul>
  5. </div>
  6. <div class="col-sm-8 col-md-7 col-lg-8">
  7. <div id="chat-tabs">
  8. <ul class="nav nav-tabs" role="tablist">
  9. <li role="presentation" class="active">
  10. <a href="#all" aria-controls="all" role="tab" data-toggle="tab">{{ 'All'|get_lang }}</a>
  11. </li>
  12. </ul>
  13. <div class="tab-content">
  14. <div role="tabpanel" class="tab-pane active" id="all">
  15. <div class="course-chat chat-history" id="chat-history"></div>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="profile row">
  20. <div class="col-xs-12">
  21. <div class="message-form-chat">
  22. <div class="tabbable">
  23. <ul class="nav nav-tabs">
  24. <li class="active">
  25. <a href="#tab1" data-toggle="tab">{{ 'Write'|get_lang }}</a>
  26. </li>
  27. <li>
  28. <a href="#tab2" id="preview" data-toggle="tab">{{ 'Preview'|get_lang }}</a>
  29. </li>
  30. <li>
  31. <button id="emojis" class="btn btn-link" type="button">
  32. <span class="sr-only">{{ 'Emoji'|get_lang }}</span>{{ emoji_smile }}
  33. </button>
  34. </li>
  35. </ul>
  36. <div class="tab-content">
  37. <div class="tab-pane active" id="tab1">
  38. <div class="row">
  39. <div class="col-sm-9">
  40. <span class="sr-only">{{ 'Message'|get_lang }}</span>
  41. <textarea id="chat-writer" name="message"></textarea>
  42. </div>
  43. <div class="col-sm-3">
  44. <button id="chat-send-message" type="button" class="btn btn-primary">{{ 'Send'|get_lang }}</button>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="tab-pane" id="tab2">
  49. <div id="html-preview" class="emoji-wysiwyg-editor-preview"></div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. <audio id="chat-alert">
  60. <source src="{{ _p.web_main }}/chat/sound/notification.wav" type="audio/wav"></source>
  61. <source src="{{ _p.web_main }}chat/sound/notification.ogg" type="audio/ogg"></source>
  62. <source src="{{ _p.web_main }}chat/sound/notification.mp3" type="audio/mpeg"></source>
  63. </audio>
  64. <script>
  65. $(document).on('ready', function () {
  66. var ChChat = {
  67. _ajaxUrl: '{{ _p.web_ajax }}course_chat.ajax.php?{{ _p.web_cid_query }}',
  68. _historySize: -1,
  69. usersOnline: 0,
  70. currentFriend: 0,
  71. call: false,
  72. track: function () {
  73. return $
  74. .get(ChChat._ajaxUrl, {
  75. action: 'track',
  76. size: ChChat._historySize,
  77. users_online: ChChat.usersOnline,
  78. friend: ChChat.currentFriend
  79. })
  80. .done(function (response) {
  81. if (!response.data) {
  82. return;
  83. }
  84. if (response.data.history) {
  85. ChChat._historySize = response.data.oldFileSize;
  86. ChChat.setHistory(response.data.history);
  87. }
  88. if (response.data.userList) {
  89. ChChat.usersOnline = response.data.usersOnline;
  90. ChChat.setConnectedUsers(response.data.userList);
  91. }
  92. });
  93. },
  94. setHistory: function (messageList) {
  95. var chatHistoryContainer = ChChat.currentFriend ? ('#chat-history-' + ChChat.currentFriend) : '#chat-history';
  96. $(chatHistoryContainer)
  97. .html(messageList)
  98. .prop('scrollTop', function () {
  99. return this.scrollHeight;
  100. });
  101. $('#chat-alert').get(0).play();
  102. },
  103. setConnectedUsers: function (userList) {
  104. var html = '';
  105. userList.forEach(function (user) {
  106. var buttonStatus = user.isConnected ? 'success' : 'muted',
  107. buttonTitle = user.isConnected ? '{{ 'StartAChat'|get_lang }}' : '{{ 'LeaveAMessage'|get_lang }}';
  108. html += '<li class="col-xs-12 chat-user">' +
  109. ' <div>' +
  110. ' <img src="'+ user.image_url + '" alt="' + user.complete_name + '" class="img-circle user-image-chat"/>' +
  111. ' <ul class="list-unstyled">' +
  112. ' <li>' + user.complete_name;
  113. if (user.id != {{ _u.user_id }}) {
  114. html += ' <button type="button" class="btn btn-link btn-xs" title="' + buttonTitle + '" data-name="' + user.complete_name + '" data-user="' + user.id + '">' +
  115. ' <i class="fa fa-comments text-' + buttonStatus + '"></i><span class="sr-only">' + buttonTitle + '</span>' +
  116. ' </button>';
  117. }
  118. html += ' </li>' +
  119. ' <li><small>' + user.username + '</small></li>' +
  120. ' </ul>' +
  121. ' </div>' +
  122. '</li>';
  123. });
  124. $('#chat-users').html(html);
  125. },
  126. onPreviewListener: function () {
  127. $
  128. .post(ChChat._ajaxUrl, {
  129. action: 'preview',
  130. 'message': $('textarea#chat-writer').val()
  131. })
  132. .done(function (response) {
  133. if (!response.status) {
  134. return;
  135. }
  136. $('#html-preview').html(response.data.message);
  137. });
  138. },
  139. onSendMessageListener: function (e) {
  140. e.preventDefault();
  141. if (!$('textarea#chat-writer').val().trim().length) {
  142. return;
  143. }
  144. var self = this;
  145. self.disabled = true;
  146. $
  147. .post(ChChat._ajaxUrl, {
  148. action: 'write',
  149. message: $('textarea#chat-writer').val(),
  150. friend: ChChat.currentFriend
  151. })
  152. .done(function (response) {
  153. self.disabled = false;
  154. if (!response.status) {
  155. return;
  156. }
  157. $('textarea#chat-writer').val('');
  158. $(".emoji-wysiwyg-editor").html('');
  159. });
  160. },
  161. onResetListener: function (e) {
  162. if (!confirm("{{ 'ConfirmReset'|get_lang }}")) {
  163. e.preventDefault();
  164. return;
  165. }
  166. $
  167. .get(ChChat._ajaxUrl, {
  168. action: 'reset',
  169. friend: ChChat.currentFriend
  170. })
  171. .done(function (response) {
  172. if (!response.status) {
  173. return;
  174. }
  175. ChChat.setHistory(response.data);
  176. });
  177. },
  178. init: function () {
  179. ChChat.track().done(function () {
  180. ChChat.init();
  181. });
  182. }
  183. };
  184. hljs.initHighlightingOnLoad();
  185. emojione.ascii = true;
  186. emojione.imagePathPNG = '{{ _p.web_lib }}javascript/emojione/png/';
  187. emojione.imagePathSVG = '{{ _p.web_lib }}javascript/emojione/svg/';
  188. emojione.imagePathSVGSprites = '{{ _p.web_lib }}javascript/emojione/sprites/';
  189. var emojiStrategy = {{ emoji_strategy|json_encode }};
  190. $.emojiarea.path = '{{ _p.web_lib }}javascript/emojione/png/';
  191. $.emojiarea.icons = {{ icons|json_encode }};
  192. $('body').on('click', '#chat-reset', ChChat.onResetListener);
  193. $('#preview').on('click', ChChat.onPreviewListener);
  194. $('#emojis').on('click', function () {
  195. $('[data-toggle="tab"][href="#tab1"]')
  196. .show()
  197. .tab('show');
  198. });
  199. $('textarea#chat-writer').emojiarea({
  200. button: '#emojis'
  201. });
  202. $('body').delay(1500).find('.emoji-wysiwyg-editor').textcomplete([
  203. {
  204. match: /\B:([\-+\w]*)$/,
  205. search: function (term, callback) {
  206. var results = [];
  207. var results2 = [];
  208. var results3 = [];
  209. $.each(emojiStrategy, function (shortname, data) {
  210. if (shortname.indexOf(term) > -1) {
  211. results.push(shortname);
  212. } else {
  213. if ((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
  214. results2.push(shortname);
  215. } else if ((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
  216. results3.push(shortname);
  217. }
  218. }
  219. });
  220. if (term.length >= 3) {
  221. results.sort(function (a, b) {
  222. return (a.length > b.length);
  223. });
  224. results2.sort(function (a, b) {
  225. return (a.length > b.length);
  226. });
  227. results3.sort();
  228. }
  229. var newResults = results.concat(results2).concat(results3);
  230. callback(newResults);
  231. },
  232. template: function (shortname) {
  233. return '<img class="emojione" src="{{ _p.web_lib }}javascript/emojione/png/'
  234. + emojiStrategy[shortname].unicode
  235. + '.png"> :' + shortname + ':';
  236. },
  237. replace: function (shortname) {
  238. return ':' + shortname + ': ';
  239. },
  240. index: 1,
  241. maxCount: 10
  242. }
  243. ], {});
  244. $('button#chat-send-message').on('click', ChChat.onSendMessageListener);
  245. $('#chat-users').on('click', 'button.btn', function (e) {
  246. e.preventDefault();
  247. var jSelf = $(this),
  248. userId = parseInt(jSelf.data('user')) || 0;
  249. if (!userId) {
  250. return;
  251. }
  252. var exists = false;
  253. $('#chat-tabs ul.nav li').each(function (i, el) {
  254. if ($(el).data('user') == userId) {
  255. exists = true;
  256. }
  257. });
  258. if (exists) {
  259. $('#chat-tab-' + userId).tab('show');
  260. return;
  261. }
  262. $('#chat-tabs ul.nav-tabs').append('\
  263. <li role="presentation" data-user="' + userId + '">\
  264. <a id="chat-tab-' + userId + '" href="#chat-' + userId + '" aria-controls="chat-' + userId + '" role="tab" data-toggle="tab">' + jSelf.data('name') + '</a>\
  265. </li>\
  266. ');
  267. $('#chat-tabs .tab-content').append('\
  268. <div role="tabpanel" class="tab-pane" id="chat-' + userId + '">\
  269. <div class="course-chat chat-history" id="chat-history-' + userId + '"></div>\
  270. </div>\
  271. ');
  272. $('#chat-tab-' + userId).tab('show');
  273. });
  274. $('#chat-tabs ul.nav-tabs').on('shown.bs.tab', 'li a', function (e) {
  275. var jSelf = $(this);
  276. var userId = parseInt(jSelf.parent().data('user')) || 0;
  277. if (!userId) {
  278. ChChat.currentFriend = 0;
  279. return;
  280. }
  281. ChChat.currentFriend = userId;
  282. $(this).tab('show');
  283. });
  284. $('.emoji-wysiwyg-editor').on('keyup', function (e) {
  285. if (e.ctrlKey && e.keyCode === 13) {
  286. $('button#chat-send-message').trigger('click');
  287. }
  288. });
  289. ChChat.init();
  290. });
  291. </script>