chat.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960
  1. /*
  2. Copyright (c) 2009 Anant Garg (anantgarg.com | inscripts.com)
  3. This script may be used for non-commercial purposes only. For any
  4. commercial purposes, please contact the author at
  5. anant.garg@inscripts.com
  6. Changes and Chamilo Integration: Julio Montoya <gugli100@gmail.com>
  7. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  8. EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
  9. OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  10. NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
  11. HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  12. WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  13. FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  14. OTHER DEALINGS IN THE SOFTWARE.
  15. */
  16. var windowFocus = true;
  17. var username;
  18. var currentUserId;
  19. var chatHeartbeatCount = 0;
  20. var minChatHeartbeat = 4000;
  21. var maxChatHeartbeat = 33000;
  22. var chatHeartbeatTime = minChatHeartbeat;
  23. var originalTitle;
  24. var blinkOrder = 0;
  25. var chatboxFocus = new Array();
  26. var newMessages = new Array();
  27. var newMessagesWin = new Array();
  28. var chatBoxes = new Array();
  29. var intervals = new Array();
  30. var timer;
  31. var user_status = 0;
  32. var widthBox = 320; // see css class .chatbox
  33. //var ajax_url = 'chat.php'; // This variable is loaded in the template/layout/head.tpl file
  34. var doubleCheck = '<span class="chatbox_checked"><i class="fa fa-check"></i><i class="fa fa-check"></i></span>';
  35. function set_user_status(status)
  36. {
  37. if (status == 1) {
  38. stopChatHeartBeat();
  39. startChatHeartBeat();
  40. $('.user_status_main').html(online_button);
  41. $('#chatboxtitlemain').html(connect_lang);
  42. } else {
  43. stopChatHeartBeat();
  44. $('.user_status_main').html(offline_button);
  45. $('#chatboxtitlemain').html(disconnect_lang);
  46. }
  47. $.ajax({
  48. url: ajax_url+"?action=set_status",
  49. data: "status="+status,
  50. cache: false,
  51. success: function(data) {
  52. }
  53. });
  54. user_status = status;
  55. }
  56. $(function() {
  57. originalTitle = document.title;
  58. startChatSession();
  59. $([window, document]).blur(function() {
  60. windowFocus = false;
  61. }).focus(function(){
  62. windowFocus = true;
  63. document.title = originalTitle;
  64. });
  65. /* "On" conditions, divs are created dynamically */
  66. // User name header toggle
  67. $('body').on('click', '#chatboxtitlemain', function() {
  68. createMyContactsWindow();
  69. set_user_status(1);
  70. });
  71. // User name header toogle
  72. $('body').on('click', '.chatboxtitle', function(){
  73. chatbox = $(this).parents(".chatbox");
  74. var chat_id = chatbox.attr('id');
  75. chat_id = chat_id.split('_')[1];
  76. toggleChatBoxGrowth(chat_id);
  77. });
  78. // Minimize button
  79. $('body').on('click', '.chatboxhead .togglelink', function(){
  80. var chat_id = $(this).attr('rel');
  81. toggleChatBoxGrowth(chat_id);
  82. });
  83. // Close button
  84. $('body').on('click', '.chatboxhead .closelink', function(){
  85. var chat_id = $(this).attr('rel');
  86. closeWindow(chat_id);
  87. });
  88. // Close main chat
  89. $('body').on('click', '.chatboxhead .close_chat', function(){
  90. closeChat();
  91. });
  92. });
  93. function showChatConnect()
  94. {
  95. if (user_status == 1) {
  96. button = online_button;
  97. label = connect_lang;
  98. } else {
  99. button = offline_button;
  100. label = disconnect_lang;
  101. }
  102. $("<div />").attr("id","chatmain")
  103. .addClass("chatboxmain")
  104. .html('<div class="chatboxheadmain"><div class="user_status_main">'+button+'</div><div id="chatboxtitlemain">'+label+'</div><div class="chatboxoptions"></div></div>')
  105. .appendTo($( "body" ));
  106. }
  107. /**
  108. * Start chat session
  109. */
  110. function startChatSession()
  111. {
  112. /* fix bug BT#5728 whereby users cannot move to the next question in IE9 */
  113. if (typeof ajax_url != 'undefined') {
  114. $.ajax({
  115. url: ajax_url+"?action=startchatsession",
  116. cache: false,
  117. dataType: "json",
  118. success: function(data) {
  119. if (data) {
  120. username = data.me;
  121. currentUserId = data.user_id;
  122. user_status = data.user_status;
  123. showChatConnect();
  124. if (user_status == 1) {
  125. startChatHeartBeat();
  126. } else {
  127. stopChatHeartBeat();
  128. }
  129. $.each(data.items, function(my_user_id, user_items) {
  130. if (currentUserId == my_user_id) {
  131. // show contact list
  132. createMyContactsWindow();
  133. return true;
  134. }
  135. my_items = user_items['items'];
  136. window_user_info = user_items['window_user_info'];
  137. $.each(my_items, function(i, item) {
  138. if (item) {
  139. // fix strange ie bug
  140. if ($("#chatbox_"+my_user_id).length <= 0) {
  141. createChatBox(
  142. my_user_id,
  143. window_user_info.complete_name,
  144. 1,
  145. window_user_info.online,
  146. window_user_info.avatar_small
  147. );
  148. }
  149. createChatBubble(my_user_id, item);
  150. }
  151. });
  152. });
  153. for (i = 0; i < chatBoxes.length; i++) {
  154. my_user_id = chatBoxes[i];
  155. $("#chatbox_"+my_user_id+" .chatboxcontent").scrollTop(
  156. $("#chatbox_"+my_user_id+" .chatboxcontent")[0].scrollHeight
  157. );
  158. }
  159. }
  160. }
  161. });
  162. }
  163. }
  164. function stopChatHeartBeat()
  165. {
  166. clearInterval(timer);
  167. timer = null;
  168. }
  169. function startChatHeartBeat()
  170. {
  171. timer = setInterval(chatHeartbeat, chatHeartbeatTime);
  172. }
  173. /*
  174. * Shows the user messages in all windows
  175. *
  176. * Item array structure :
  177. *
  178. * item.s = type of message: 1 = message, 2 = "sent at" string
  179. * item.f = from_user
  180. *
  181. **/
  182. function chatHeartbeat()
  183. {
  184. var itemsfound = 0;
  185. if (windowFocus == false) {
  186. var blinkNumber = 0;
  187. var titleChanged = 0;
  188. for (x in newMessagesWin) {
  189. if (newMessagesWin[x].status == true) {
  190. ++blinkNumber;
  191. if (blinkNumber >= blinkOrder) {
  192. //document.title = newMessagesWin[x].username+' says...';
  193. //titleChanged = 1;
  194. break;
  195. }
  196. }
  197. }
  198. if (titleChanged == 0) {
  199. document.title = originalTitle;
  200. blinkOrder = 0;
  201. } else {
  202. ++blinkOrder;
  203. }
  204. } else {
  205. for (x in newMessagesWin) {
  206. newMessagesWin[x].status = false;
  207. }
  208. }
  209. for (x in newMessages) {
  210. if (newMessages[x] == true) {
  211. if (chatboxFocus[x] == false) {
  212. //FIXME: add toggle all or none policy, otherwise it looks funny
  213. $('#chatbox_'+x+' .chatboxhead').toggleClass('chatboxblink');
  214. }
  215. }
  216. }
  217. $.ajax({
  218. url: ajax_url+"?action=chatheartbeat",
  219. cache: false,
  220. dataType: "json",
  221. success: function(data) {
  222. $.each(data.items, function(my_user_id, user_items) {
  223. // Each window
  224. my_items = user_items['items'];
  225. userInfo = user_items['window_user_info'];
  226. update_online_user(
  227. my_user_id,
  228. userInfo.user_is_online
  229. );
  230. $.each(my_items, function(i, item) {
  231. if (item) {
  232. // fix strange ie bug
  233. if ($("#chatbox_"+my_user_id).length <= 0) {
  234. createChatBox(
  235. my_user_id,
  236. userInfo.complete_name,
  237. 0,
  238. userInfo.online,
  239. userInfo.avatar_small
  240. );
  241. }
  242. if ($("#chatbox_"+my_user_id).css('display') == 'none') {
  243. $("#chatbox_"+my_user_id).css('display','block');
  244. restructureChatBoxes();
  245. }
  246. newMessages[my_user_id] = {'status':true, 'username':item.username};
  247. newMessagesWin[my_user_id]= {'status':true, 'username':item.username};
  248. var chatBubble = createChatBubble(my_user_id, item);
  249. //$("#chatbox_"+my_user_id+" .chatboxcontent").append(chatBubble);
  250. $("#chatbox_"+my_user_id+" .chatboxcontent").scrollTop(
  251. $("#chatbox_"+my_user_id+" .chatboxcontent")[0].scrollHeight
  252. );
  253. if ($('#chatbox_'+my_user_id+' .chatboxcontent').css('display') == 'none') {
  254. $('#chatbox_'+my_user_id+' .chatboxhead').toggleClass('chatboxblink');
  255. }
  256. itemsfound += 1;
  257. }
  258. });
  259. });
  260. chatHeartbeatCount++;
  261. if (itemsfound > 0) {
  262. chatHeartbeatTime = minChatHeartbeat;
  263. chatHeartbeatCount = 1;
  264. } else if (chatHeartbeatCount >= 10) {
  265. chatHeartbeatTime *= 2;
  266. chatHeartbeatCount = 1;
  267. if (chatHeartbeatTime > maxChatHeartbeat) {
  268. chatHeartbeatTime = maxChatHeartbeat;
  269. }
  270. }
  271. }
  272. }); //ajax
  273. }
  274. /**
  275. * Draws a message bubble
  276. * @param my_user_id
  277. * @param item
  278. * @returns {string}
  279. */
  280. function createChatBubble(my_user_id, item, appendType = 'append')
  281. {
  282. var myDiv = 'chatboxmessage_me';
  283. if (my_user_id == item.from_user_info.id) {
  284. myDiv = 'chatboxmessage';
  285. }
  286. var sentDate = '';
  287. if (moment.unix(item.date).isValid()) {
  288. sentDate = moment.unix(item.date).format('LLL');
  289. }
  290. var check = '';
  291. var unCheckClass = ' check_status';
  292. if (my_user_id != item.from_user_info.id) {
  293. check = '<i class="fa fa-check"></i><i class="fa fa-check"></i>';
  294. if (item.recd == 1) {
  295. unCheckClass = '';
  296. check = doubleCheck;
  297. }
  298. }
  299. var messageObject = $("#chatbox_"+my_user_id+" .chatboxcontent").find('#message_id_' + item.id);
  300. var exists = messageObject.length !== 0;
  301. var messageHeader = '<div id="message_id_'+item.id+'" class="chatbox-common boot-tooltip well '+myDiv+'" title="'+sentDate+'" >';
  302. var messageEnd = '</div>';
  303. var message = '';
  304. if (my_user_id == item.from_user_info.id) {
  305. message += '<span class="chatboxmessagefrom">'+item.from_user_info.complete_name+':&nbsp;&nbsp;</span>';
  306. }
  307. message += '<div class="chatboxmessagecontent">'+item.message+'</div>';
  308. message += '<div class="chatbox_checks' + unCheckClass + '">'+check+'</div>';
  309. if (exists) {
  310. messageObject.html(message);
  311. } else {
  312. message = messageHeader + message + messageEnd;
  313. if (appendType == 'append') {
  314. $("#chatbox_"+my_user_id+" .chatboxcontent").append(message);
  315. } else {
  316. $("#chatbox_"+my_user_id+" .chatboxcontent").prepend(message);
  317. }
  318. }
  319. return message;
  320. }
  321. /**
  322. * Disconnect user from chat
  323. */
  324. function closeChat()
  325. {
  326. $.post(
  327. ajax_url + "?action=close",
  328. {
  329. },
  330. function (data) {
  331. // Disconnects from chat
  332. set_user_status(0);
  333. // Clean cookies
  334. Cookies.set('chatbox_minimized', new Array());
  335. // Delete all windows
  336. $('.chatbox ').remove();
  337. // Reset variables
  338. chatBoxes = new Array();
  339. intervals = new Array();
  340. }
  341. );
  342. }
  343. function closeWindow(user_id)
  344. {
  345. $('#chatbox_'+user_id).css('display','none');
  346. restructureChatBoxes();
  347. $.post(
  348. ajax_url + "?action=close_window",
  349. {
  350. chatbox: user_id
  351. },
  352. function (data) {
  353. }
  354. );
  355. }
  356. function restructureChatBoxes()
  357. {
  358. var align = 0;
  359. for (x in chatBoxes) {
  360. user_id = chatBoxes[x];
  361. if ($("#chatbox_"+user_id).css('display') != 'none') {
  362. if (align == 0) {
  363. $("#chatbox_"+user_id).css('right', '10px');
  364. } else {
  365. width = (align)*(widthBox+7) + 5 + 5;
  366. $("#chatbox_"+user_id).css('right', width+'px');
  367. }
  368. align++;
  369. }
  370. }
  371. }
  372. /**
  373. * Function that fires the chat with an user (creates a chat bloclk)
  374. * @param int user id
  375. * @param string user's firstname + lastname
  376. * @param status
  377. *
  378. **/
  379. function chatWith(user_id, user_name, status, userImage)
  380. {
  381. set_user_status(1);
  382. createChatBox(user_id, user_name, 0, status, userImage);
  383. $("#chatbox_"+user_id+" .chatboxtextarea").focus();
  384. getMoreItems(user_id, 'last');
  385. }
  386. /**
  387. * Creates a div
  388. */
  389. function createMyContactsWindow()
  390. {
  391. var user_id = 'contacts';
  392. var oldChatBox = $("#chatbox_"+user_id);
  393. if (oldChatBox.length > 0) {
  394. // reload contact list
  395. if (oldChatBox.css('display') == 'none') {
  396. oldChatBox.css('display','block');
  397. restructureChatBoxes();
  398. }
  399. chatboxContent = oldChatBox.find('.chatboxcontent');
  400. $.post(ajax_url + "?action=get_contacts", {
  401. to: 'user_id'
  402. }, function (data) {
  403. chatboxContent.html(data);
  404. });
  405. $("#chatbox_"+user_id+" .chatboxtextarea").focus();
  406. return;
  407. }
  408. var chatbox = $('<div>')
  409. .attr({
  410. id: 'chatbox_' + user_id
  411. })
  412. .addClass('chatbox')
  413. .css('bottom', 0);
  414. var chatboxHead = $('<div>')
  415. .addClass('chatboxhead')
  416. .append('');
  417. $('<div>')
  418. .addClass('chatboxtitle')
  419. .append(chatLang)
  420. .appendTo(chatboxHead);
  421. var chatboxoptions = $('<div>')
  422. .addClass('chatboxoptions')
  423. .appendTo(chatboxHead);
  424. $('<a>')
  425. .addClass('btn btn-xs togglelink')
  426. .attr({
  427. href: 'javascript:void(0)',
  428. rel: user_id
  429. })
  430. .html('<em class="fa fa-toggle-down"></em>')
  431. .appendTo(chatboxoptions);
  432. $('<a>')
  433. .addClass('btn btn-xs close_chat')
  434. .attr({
  435. href: 'javascript:void(0)',
  436. rel: user_id
  437. })
  438. .html('<em class="fa fa-close"></em>')
  439. .appendTo(chatboxoptions);
  440. $('<br>')
  441. .attr('clear', 'all')
  442. .appendTo(chatboxHead);
  443. var chatboxContent = $('<div>').addClass('chatboxcontent');
  444. var chatboxInput = $('<div>').addClass('chatboxinput');
  445. $.post(ajax_url + "?action=get_contacts", {
  446. to: 'user_id'
  447. }, function (data) {
  448. $('<div>').html(data).appendTo(chatboxContent);
  449. });
  450. chatbox
  451. .append(chatboxHead)
  452. .append(chatboxContent)
  453. .append(chatboxInput)
  454. .appendTo('body');
  455. var chatBoxeslength = 0;
  456. for (x in chatBoxes) {
  457. if ($("#chatbox_"+chatBoxes[x]).css('display') != 'none') {
  458. chatBoxeslength++;
  459. }
  460. }
  461. if (chatBoxeslength == 0) {
  462. $("#chatbox_"+user_id).css('right', '10px');
  463. } else {
  464. width = (chatBoxeslength)*(widthBox+7) + 5 + 5;
  465. $("#chatbox_"+user_id).css('right', width+'px');
  466. }
  467. chatBoxes.push(user_id);
  468. chatboxFocus[user_id] = false;
  469. $("#chatbox_"+user_id+" .chatboxtextarea").blur(function(){
  470. chatboxFocus[user_id] = false;
  471. $("#chatbox_"+user_id+" .chatboxtextarea").removeClass('chatboxtextareaselected');
  472. }).focus(function(){
  473. chatboxFocus[user_id] = true;
  474. newMessages[user_id] = false;
  475. $('#chatbox_'+user_id+' .chatboxhead').removeClass('chatboxblink');
  476. $("#chatbox_"+user_id+" .chatboxtextarea").addClass('chatboxtextareaselected');
  477. });
  478. $("#chatbox_"+user_id).click(function() {
  479. if ($('#chatbox_'+user_id+' .chatboxcontent').css('display') != 'none') {
  480. $("#chatbox_"+user_id+" .chatboxtextarea").focus();
  481. }
  482. });
  483. $("#chatbox_"+user_id).show();
  484. $("#chatbox_"+user_id+" .chatboxcontent").scroll(function () {
  485. var iCurScrollPos = $(this).scrollTop();
  486. if (iCurScrollPos == 0) {
  487. getMoreItems(user_id);
  488. return false;
  489. }
  490. });
  491. minimizedChatBoxes = new Array();
  492. if (Cookies.get('chatbox_minimized')) {
  493. minimizedChatBoxes = Cookies.getJSON('chatbox_minimized');
  494. minimize = 0;
  495. for (j = 0; j < minimizedChatBoxes.length; j++) {
  496. if (minimizedChatBoxes[j] == user_id) {
  497. minimize = 1;
  498. }
  499. }
  500. if (minimize == 1) {
  501. $('.togglelink').html('<em class="fa fa-toggle-up"></em>');
  502. $('#chatbox_'+user_id+' .chatboxcontent').css('display','none');
  503. $('#chatbox_'+user_id+' .chatboxinput').css('display','none');
  504. }
  505. }
  506. }
  507. /**
  508. * Creates a div
  509. */
  510. function createChatBox(user_id, chatboxtitle, minimizeChatBox, online, userImage)
  511. {
  512. var oldChatBox = $("#chatbox_"+user_id);
  513. if (oldChatBox.length > 0) {
  514. if (oldChatBox.css('display') == 'none') {
  515. oldChatBox.css('display','block');
  516. restructureChatBoxes();
  517. }
  518. $("#chatbox_"+user_id+" .chatboxtextarea").focus();
  519. return;
  520. }
  521. var user_is_online = return_online_user(user_id, online, userImage);
  522. var chatbox = $('<div>')
  523. .attr({
  524. id: 'chatbox_' + user_id
  525. })
  526. .addClass('chatbox')
  527. .css('bottom', 0);
  528. var chatboxHead = $('<div>')
  529. .addClass('chatboxhead')
  530. .append(user_is_online);
  531. $('<div>')
  532. .addClass('chatimage')
  533. .append('<img src="'+userImage+'"/>')
  534. .appendTo(chatboxHead);
  535. $('<div>')
  536. .addClass('chatboxtitle')
  537. .append(chatboxtitle)
  538. .appendTo(chatboxHead);
  539. var chatboxoptions = $('<div>')
  540. .addClass('chatboxoptions')
  541. .appendTo(chatboxHead);
  542. if (!hide_chat_video) {
  543. if (!!Modernizr.prefixed('RTCPeerConnection', window) &&
  544. (online === '1' || online === 1)
  545. ) {
  546. /*$('<a>')
  547. .addClass('btn btn-xs ajax')
  548. .attr({
  549. href: ajax_url + '?action=create_room&to=' + user_id
  550. })
  551. .data({
  552. title: '<em class="fa fa-video-camera"></em>',
  553. size: 'sm'
  554. })
  555. .on('click', function () {
  556. $(this).data('title', $('.chatboxtitle').text());
  557. })
  558. .html('<em class="fa fa-video-camera"></em>')
  559. .appendTo(chatboxoptions);*/
  560. }
  561. }
  562. $('<a>')
  563. .addClass('btn btn-xs togglelink')
  564. .attr({
  565. href: 'javascript:void(0)',
  566. rel: user_id
  567. })
  568. .html('<em class="fa fa-toggle-down"></em>')
  569. .appendTo(chatboxoptions);
  570. $('<a>')
  571. .addClass('btn btn-xs closelink')
  572. .attr({
  573. href: 'javascript:void(0)',
  574. rel: user_id
  575. })
  576. .html('<em class="fa fa-close"></em>')
  577. .appendTo(chatboxoptions);
  578. $('<br>')
  579. .attr('clear', 'all')
  580. .appendTo(chatboxHead);
  581. var chatboxContent = $('<div>').addClass('chatboxcontent');
  582. var chatboxInput = $('<div>').addClass('chatboxinput');
  583. $('<textarea>')
  584. .addClass('chatboxtextarea')
  585. .on('keydown', function(e) {
  586. return checkChatBoxInputKey(e.originalEvent, this, user_id);
  587. })
  588. .appendTo(chatboxInput);
  589. chatbox
  590. .append(chatboxHead)
  591. .append(chatboxContent)
  592. .append(chatboxInput)
  593. .appendTo('body');
  594. var chatBoxeslength = 0;
  595. for (x in chatBoxes) {
  596. if ($("#chatbox_"+chatBoxes[x]).css('display') != 'none') {
  597. chatBoxeslength++;
  598. }
  599. }
  600. if (chatBoxeslength == 0) {
  601. $("#chatbox_"+user_id).css('right', '10px');
  602. } else {
  603. width = (chatBoxeslength)*(widthBox+7) + 5 + 5;
  604. $("#chatbox_"+user_id).css('right', width+'px');
  605. }
  606. chatBoxes.push(user_id);
  607. if (minimizeChatBox == 1) {
  608. minimizedChatBoxes = new Array();
  609. if (Cookies.get('chatbox_minimized')) {
  610. minimizedChatBoxes = Cookies.getJSON('chatbox_minimized');
  611. }
  612. minimize = 0;
  613. for (j = 0; j < minimizedChatBoxes.length; j++) {
  614. if (minimizedChatBoxes[j] == user_id) {
  615. minimize = 1;
  616. }
  617. }
  618. if (minimize == 1) {
  619. $('.togglelink').html('<em class="fa fa-toggle-up"></em>');
  620. $('#chatbox_'+user_id+' .chatboxcontent').css('display','none');
  621. $('#chatbox_'+user_id+' .chatboxinput').css('display','none');
  622. }
  623. }
  624. chatboxFocus[user_id] = false;
  625. $("#chatbox_"+user_id+" .chatboxtextarea").blur(function(){
  626. chatboxFocus[user_id] = false;
  627. $("#chatbox_"+user_id+" .chatboxtextarea").removeClass('chatboxtextareaselected');
  628. }).focus(function(){
  629. chatboxFocus[user_id] = true;
  630. newMessages[user_id] = false;
  631. $('#chatbox_'+user_id+' .chatboxhead').removeClass('chatboxblink');
  632. $("#chatbox_"+user_id+" .chatboxtextarea").addClass('chatboxtextareaselected');
  633. });
  634. $("#chatbox_"+user_id).click(function() {
  635. if ($('#chatbox_'+user_id+' .chatboxcontent').css('display') != 'none') {
  636. $("#chatbox_"+user_id+" .chatboxtextarea").focus();
  637. }
  638. });
  639. $("#chatbox_"+user_id).show();
  640. $("#chatbox_"+user_id+" .chatboxcontent").scroll(function () {
  641. var iCurScrollPos = $(this).scrollTop();
  642. if (iCurScrollPos == 0) {
  643. getMoreItems(user_id);
  644. return false;
  645. }
  646. });
  647. }
  648. /**
  649. * @param int userId
  650. * @param string scrollType
  651. */
  652. function getMoreItems(userId, scrollType)
  653. {
  654. var visibleMessages = $("#chatbox_"+userId+" .chatboxcontent").find('.chatbox-common').length;
  655. $.ajax({
  656. url: ajax_url+"?action=get_previous_messages&user_id="+userId+"&visible_messages="+visibleMessages,
  657. cache: false,
  658. dataType: "json",
  659. success: function(items) {
  660. console.log(items);
  661. items = items.reverse();
  662. $.each(items, function(i, item) {
  663. console.log(i);
  664. if (item) {
  665. if ($("#chatbox_"+userId).css('display') == 'none') {
  666. $("#chatbox_"+userId).css('display','block');
  667. restructureChatBoxes();
  668. }
  669. var chatBubble = createChatBubble(userId, item, 'prepend');
  670. //$("#chatbox_"+userId+" .chatboxcontent").prepend(chatBubble);
  671. if ($('#chatbox_'+userId+' .chatboxcontent').css('display') == 'none') {
  672. $('#chatbox_'+userId+' .chatboxhead').toggleClass('chatboxblink');
  673. }
  674. // When using scroll set the scroll window to the first
  675. var scrollValue = 10;
  676. if (scrollType === 'last') {
  677. // When loading for the first time show the last msg
  678. //scrollValue = $("#chatbox_"+userId+" .chatboxcontent").height();
  679. }
  680. /*$("#chatbox_"+userId+" .chatboxcontent").scrollTop(
  681. scrollValue
  682. );*/
  683. }
  684. });
  685. }
  686. }); //ajax
  687. }
  688. /**
  689. * Creates the div user status (green/gray button next to the user name)
  690. * @param int user id
  691. * @param int status 1 or 0
  692. */
  693. function return_online_user(user_id, status, userImage)
  694. {
  695. var div_wrapper = $("<div />" );
  696. var new_div = $("<div />" );
  697. new_div.attr("id","online_"+user_id);
  698. new_div.attr("class","user_status");
  699. if (status == '1' || status == 1) {
  700. new_div.html(online_button);
  701. } else {
  702. new_div.html(offline_button);
  703. }
  704. div_wrapper.append(new_div);
  705. return div_wrapper.html();
  706. }
  707. /**
  708. * Updates the user status (green/gray button next to the user name)
  709. */
  710. function update_online_user(user_id, status)
  711. {
  712. if ($("#online_" +user_id).length > 0) {
  713. if (status == 1) {
  714. $("#online_" +user_id).html(online_button);
  715. } else {
  716. $("#online_" +user_id).html(offline_button);
  717. }
  718. }
  719. }
  720. /**
  721. * @param user_id
  722. */
  723. function toggleChatBoxGrowth(user_id)
  724. {
  725. if ($('#chatbox_'+user_id+' .chatboxcontent').css('display') == 'none') {
  726. // Show box
  727. var minimizedChatBoxes = new Array();
  728. if (Cookies.get('chatbox_minimized')) {
  729. minimizedChatBoxes = Cookies.getJSON('chatbox_minimized');
  730. }
  731. var newCookie = new Array();
  732. for (var i = 0; i < minimizedChatBoxes.length; i++) {
  733. if (minimizedChatBoxes[i] != user_id) {
  734. newCookie.push(minimizedChatBoxes[i]);
  735. }
  736. }
  737. Cookies.set('chatbox_minimized', newCookie);
  738. $('#chatbox_'+user_id+' .chatboxcontent').css('display','block');
  739. $('#chatbox_'+user_id+' .chatboxinput').css('display','block');
  740. //$("#chatbox_"+user_id+" .chatboxcontent").scrollTop($("#chatbox_"+user_id+" .chatboxcontent")[0].scrollHeight);
  741. $('.togglelink').html('<em class="fa fa-toggle-down"></em>');
  742. } else {
  743. // hide box
  744. if (Cookies.get('chatbox_minimized')) {
  745. newCookie = Cookies.getJSON('chatbox_minimized');
  746. if ($.isArray(newCookie)) {
  747. for (i = 0; i < newCookie.length; i++) {
  748. if (newCookie[i] == user_id) {
  749. newCookie.splice(i, 1);
  750. }
  751. }
  752. newCookie.push(user_id);
  753. } else {
  754. newCookie = new Array();
  755. newCookie.push(user_id);
  756. }
  757. Cookies.set('chatbox_minimized', newCookie);
  758. }
  759. $('#chatbox_'+user_id+' .chatboxcontent').css('display','none');
  760. $('#chatbox_'+user_id+' .chatboxinput').css('display','none');
  761. $('.togglelink').html('<em class="fa fa-toggle-up"></em>');
  762. }
  763. }
  764. function checkMessageStatus(messageId, chatBox)
  765. {
  766. $.ajax({
  767. type: 'GET',
  768. dataType: 'json',
  769. url: ajax_url + "?action=get_message_status",
  770. data: {
  771. message_id: messageId
  772. },
  773. success: function (messageInfo) {
  774. if (messageInfo) {
  775. if (messageInfo.recd == 1) {
  776. $('#message_id_' + messageId + ' .chatbox_checks ').html(doubleCheck);
  777. clearInterval(intervals[messageId]);
  778. }
  779. }
  780. }
  781. });
  782. }
  783. /**
  784. * Sending message
  785. * @param event
  786. * @param chatboxtextarea
  787. * @param user_id
  788. * @returns {boolean}
  789. */
  790. function checkChatBoxInputKey(event, chatboxtextarea, user_id)
  791. {
  792. if(event.keyCode == 13 && event.shiftKey == 0) {
  793. message = $(chatboxtextarea).val();
  794. message = message.replace(/^\s+|\s+$/g,"");
  795. $(chatboxtextarea).val('');
  796. $(chatboxtextarea).focus();
  797. $(chatboxtextarea).css('height','44px');
  798. if (message != '') {
  799. $.post(ajax_url + "?action=sendchat", {
  800. to: user_id,
  801. message: message
  802. }, function (messageId) {
  803. if (messageId > 0) {
  804. message = message.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;");
  805. var item = {
  806. from_user_info : {id: currentUserId, complete_name: 'me'},
  807. username: username,
  808. date: moment().unix(),
  809. f: currentUserId,
  810. message: message,
  811. id: messageId
  812. };
  813. var bubble = createChatBubble(user_id, item);
  814. //$("#chatbox_" + user_id + " .chatboxcontent").append(bubble);
  815. $("#chatbox_" + user_id + " .chatboxcontent").scrollTop(
  816. $("#chatbox_" + user_id + " .chatboxcontent")[0].scrollHeight
  817. );
  818. intervals[messageId] = setInterval(checkMessageStatus, chatHeartbeatTime, messageId);
  819. } else {
  820. $("#chatbox_" + user_id + " .chatboxcontent").
  821. append('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i><br />');
  822. }
  823. });
  824. }
  825. chatHeartbeatTime = minChatHeartbeat;
  826. chatHeartbeatCount = 1;
  827. return false;
  828. }
  829. var adjustedHeight = chatboxtextarea.clientHeight;
  830. var maxHeight = 94;
  831. if (maxHeight > adjustedHeight) {
  832. adjustedHeight = Math.max(chatboxtextarea.scrollHeight, adjustedHeight);
  833. if (maxHeight)
  834. adjustedHeight = Math.min(maxHeight, adjustedHeight);
  835. if (adjustedHeight > chatboxtextarea.clientHeight)
  836. $(chatboxtextarea).css('height',adjustedHeight+8 +'px');
  837. } else {
  838. $(chatboxtextarea).css('overflow','auto');
  839. }
  840. }