jappixmini/jappix/js/inbox.js

   1 /*
   2
   3 Jappix - An open social platform
   4 These are the inbox JS script for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 08/06/11
  11
  12 */
  13
  14 // Opens the inbox popup
  15 function openInbox() {
  16         // Popup HTML content
  17         var html =
  18         '<div class="top">' + _e("Your inbox") + '</div>' +
  19
  20         '<div class="content">' +
  21                 '<div class="head inbox-head">' +
  22                         '<div class="head-text inbox-head-text">' + _e("Available actions") + '</div>' +
  23
  24                         '<div class="head-actions inbox-head-actions">' +
  25                                 '<a href="#" class="a-delete-messages">' + _e("Clean") + '</a>' +
  26                                 '<a href="#" class="a-new-message">' + _e("New") + '</a>' +
  27                                 '<a href="#" class="a-show-messages">' + _e("Received") + '</a>' +
  28                         '</div>' +
  29                 '</div>' +
  30
  31                 '<div class="inbox-results">' +
  32                         '<p class="inbox-noresults">' + _e("Your inbox is empty.") + '</p>' +
  33
  34                         '<div class="inbox"></div>' +
  35                 '</div>' +
  36
  37                 '<div class="inbox-new">' +
  38                         '<div class="inbox-new-to inbox-new-block search">' +
  39                                 '<p class="inbox-new-text">' + _e("To") + '</p>' +
  40
  41                                 '<input name="inbox-new-to-input" class="inbox-new-input inbox-new-to-input" type="text" required="" />' +
  42                         '</div>' +
  43
  44                         '<div class="inbox-new-topic inbox-new-block">' +
  45                                 '<p class="inbox-new-text">' + _e("Subject") + '</p>' +
  46
  47                                 '<input name="inbox-new-subject-input" class="inbox-new-input inbox-new-subject-input" type="text" required="" />' +
  48                         '</div>' +
  49
  50                         '<div class="inbox-new-body inbox-new-block">' +
  51                                 '<p class="inbox-new-text">' + _e("Content") + '</p>' +
  52
  53                                 '<textarea class="inbox-new-textarea" rows="8" cols="60" required=""></textarea>' +
  54                         '</div>' +
  55
  56                         '<form class="inbox-new-file inbox-new-block" action="./php/file-share.php" method="post" enctype="multipart/form-data">' +
  57                                 '<p class="inbox-new-text">' + _e("File") + '</p>' +
  58
  59                                 generateFileShare() +
  60                         '</form>' +
  61
  62                         '<div class="inbox-new-send inbox-new-block">' +
  63                                 '<a href="#" class="send one-button talk-images">' + _e("Send message") + '</a>' +
  64                         '</div>' +
  65                 '</div>' +
  66         '</div>' +
  67
  68         '<div class="bottom">' +
  69                 '<div class="wait wait-medium"></div>' +
  70
  71                 '<a href="#" class="finish">' + _e("Close") + '</a>' +
  72         '</div>';
  73
  74         // Create the popup
  75         createPopup('inbox', html);
  76
  77         // Associate the events
  78         launchInbox();
  79
  80         // Load the messages
  81         loadInbox();
  82
  83         return false;
  84 }
  85
  86 // Closes the inbox popup
  87 function closeInbox() {
  88         // Destroy the popup
  89         destroyPopup('inbox');
  90
  91         return false;
  92 }
  93
  94 // Opens the message compose tool
  95 function composeInboxMessage(xid) {
  96         // Open things
  97         openInbox();
  98         newInboxMessage();
  99
 100         // Apply XID
 101         $('#inbox .inbox-new-to-input').val(xid);
 102
 103         // Focus to the next item
 104         $(document).oneTime(10, function() {
 105                 $('#inbox .inbox-new-subject-input').focus();
 106         });
 107
 108         return false;
 109 }
 110
 111 // Stores the inbox
 112 function storeInbox() {
 113         var iq = new JSJaCIQ();
 114         iq.setType('set');
 115         var query = iq.setQuery(NS_PRIVATE);
 116         var storage = query.appendChild(iq.buildNode('storage', {'xmlns': NS_INBOX}));
 117
 118         for(var i = 0; i < sessionStorage.length; i++) {
 119                 // Get the pointer values
 120                 var current = sessionStorage.key(i);
 121
 122                 // If the pointer is on a stored message
 123                 if(explodeThis('_', current, 0) == 'inbox') {
 124                         // Get the values
 125                         var value = $(XMLFromString(sessionStorage.getItem(current)));
 126
 127                         // Create the storage node
 128                         storage.appendChild(iq.buildNode('message', {
 129                                                                      'id': value.find('id').text().revertHtmlEnc(),
 130                                                                      'from': value.find('from').text().revertHtmlEnc(),
 131                                                                      'subject': value.find('subject').text().revertHtmlEnc(),
 132                                                                      'status': value.find('status').text().revertHtmlEnc(),
 133                                                                      'date': value.find('date').text().revertHtmlEnc(),
 134                                                                      'xmlns': NS_INBOX
 135                                                                     },
 136
 137                                                                     value.find('content').text().revertHtmlEnc()
 138                                                         ));
 139                 }
 140         }
 141
 142         con.send(iq);
 143 }
 144
 145 // Creates a new normal message
 146 function newInboxMessage() {
 147         // Init
 148         var mPath = '#inbox .';
 149
 150         // Reset the previous buddy search
 151         resetBuddySearch('#inbox .inbox-new-to');
 152
 153         // We switch the divs
 154         $(mPath + 'inbox-results, #inbox .a-new-message, #inbox .a-delete-messages').hide();
 155         $(mPath + 'inbox-new, #inbox .a-show-messages').show();
 156
 157         // We focus on the first input
 158         $(document).oneTime(10, function() {
 159                 $(mPath + 'inbox-new-to-input').focus();
 160         });
 161
 162         // We reset some stuffs
 163         cleanNewInboxMessage();
 164
 165         return false;
 166 }
 167
 168 // Cleans the inbox
 169 function cleanNewInboxMessage() {
 170         // Init
 171         var mPath = '#inbox .';
 172
 173         // We reset the forms
 174         $(mPath + 'inbox-new-block:not(form) input, ' + mPath + 'inbox-new textarea').val('').removeClass('please-complete');
 175         $(mPath + 'inbox-new-file a').remove();
 176         $(mPath + 'inbox-new-file input').show();
 177
 178         // We close an eventual opened message
 179         $(mPath + 'message-content').remove();
 180         $(mPath + 'one-message').removeClass('message-reading');
 181 }
 182
 183 // Sends a normal message
 184 function sendInboxMessage(to, subject, body) {
 185         // We send the message
 186         var mess = new JSJaCMessage();
 187
 188         // Main attributes
 189         mess.setTo(to);
 190         mess.setSubject(subject);
 191         mess.setType('normal');
 192
 193         // Any file to attach?
 194         var attached = '#inbox .inbox-new-file a.file';
 195
 196         if(exists(attached))
 197                 body += '\n' +
 198                         '\n' +
 199                         $(attached).attr('data-attachedtitle') + ' - ' + $(attached).attr('data-attachedhref');
 200
 201         // Set body
 202         mess.setBody(body);
 203
 204         con.send(mess, handleErrorReply);
 205 }
 206
 207 // Performs the normal message sender checks
 208 function checkInboxMessage() {
 209         // We get some informations
 210         var mPath = '#inbox ';
 211         var to = $(mPath + '.inbox-new-to-input').val();
 212         var body = $(mPath + '.inbox-new-textarea').val();
 213         var subject = $(mPath + '.inbox-new-subject-input').val();
 214
 215         if(to && body && subject) {
 216                 // New array of XID
 217                 var xid = new Array(to);
 218
 219                 // More than one XID
 220                 if(to.indexOf(',') != -1)
 221                         xid = to.split(',');
 222
 223                 for(i in xid) {
 224                         var current = xid[i];
 225
 226                         // No current value?
 227                         if(!current || current.match(/^(\s+)$/))
 228                                 continue;
 229
 230                         // Edit the XID if needed
 231                         current = current.replace(/ /g, '');
 232                         current = generateXID(current, 'chat');
 233
 234                         // We send the message
 235                         sendInboxMessage(current, subject, body);
 236
 237                         // We clean the inputs
 238                         cleanNewInboxMessage();
 239
 240                         logThis('Inbox message sent: ' + current, 3);
 241                 }
 242
 243                 // Close the inbox
 244                 closeInbox();
 245         }
 246
 247         else {
 248                 $(mPath + 'input[type=text], ' + mPath + 'textarea').each(function() {
 249                         var current = this;
 250
 251                         if(!$(current).val()) {
 252                                 $(document).oneTime(10, function() {
 253                                         $(current).addClass('please-complete').focus();
 254                                 });
 255                         }
 256
 257                         else
 258                                 $(current).removeClass('please-complete');
 259                 });
 260         }
 261
 262         return false;
 263 }
 264
 265 // Shows the inbox messages
 266 function showInboxMessages() {
 267         // Init
 268         var mPath = '#inbox .';
 269
 270         // We switch the divs
 271         $(mPath + 'inbox-new').hide();
 272         $(mPath + 'inbox-results').show();
 273
 274         // We show a new link in the menu
 275         $(mPath + 'a-show-messages').hide();
 276         $(mPath + 'a-delete-messages').show();
 277         $(mPath + 'a-new-message').show();
 278
 279         // We reset some stuffs
 280         cleanNewInboxMessage();
 281
 282         return false;
 283 }
 284
 285 // Displays a normal message
 286 function displayInboxMessage(from, subject, content, status, id, date) {
 287         // Generate some paths
 288         var inbox = '#inbox .';
 289         var one_message = inbox + 'one-message.' + id;
 290
 291         // Message yet displayed!
 292         if(exists(one_message))
 293                 return false;
 294
 295         // Get the nearest element
 296         var stamp = extractStamp(Date.jab2date(date));
 297         var nearest = sortElementByStamp(stamp, '#inbox .one-message');
 298
 299         // Get the buddy name
 300         var name = getBuddyName(from).htmlEnc();
 301
 302         // We generate the html code
 303         var nContent = '<div class="one-message message-' + status + ' ' + id + ' ' + hex_md5(from) + '" data-stamp="' + stamp + '">' +
 304                                 '<div class="message-head">' +
 305                                         '<div class="avatar-container">' +
 306                                                 '<img class="avatar" src="' + './img/others/default-avatar.png' + '" alt="" />' +
 307                                         '</div>' +
 308
 309                                         '<div class="message-jid">' + name + '</div>' +
 310                                         '<div class="message-subject">' + subject.htmlEnc() + '</div>' +
 311
 312                                         '<div class="message-truncated">' + truncate(noLines(content), 90).htmlEnc() + '</div>' +
 313                                 '</div>' +
 314                         '</div>';
 315
 316         // Display the message
 317         if(nearest == 0)
 318                 $(inbox + 'inbox-results .inbox').append(nContent);
 319         else
 320                 $('#inbox .one-message[data-stamp=' + nearest + ']:first').before(nContent);
 321
 322         // Click events
 323         $(one_message + ' .message-head').click(function() {
 324                 if(!exists(one_message + ' .message-content'))
 325                         revealInboxMessage(id, from, subject, content, name, date, status);
 326                 else
 327                         hideInboxMessage(id);
 328
 329                 return false;
 330         });
 331
 332         // Get the user avatar
 333         getAvatar(from, 'cache', 'true', 'forget');
 334
 335         return true;
 336 }
 337
 338 // Stores an inbox message
 339 function storeInboxMessage(from, subject, content, status, id, date) {
 340         // Initialize the XML data
 341         var xml = '<message><id>' + id.htmlEnc().htmlEnc() + '</id><date>' + date.htmlEnc().htmlEnc() + '</date><from>' + from.htmlEnc().htmlEnc() + '</from><subject>' + subject.htmlEnc().htmlEnc() + '</subject><status>' + status.htmlEnc().htmlEnc() + '</status><content>' + content.htmlEnc().htmlEnc() + '</content>';
 342
 343         // End the XML data
 344         xml += '</message>';
 345
 346         // Store this message!
 347         setDB('inbox', id, xml);
 348 }
 349
 350 // Removes a given normal message
 351 function deleteInboxMessage(id) {
 352         // Remove the message from the inbox
 353         $('#inbox .one-message.' + id).remove();
 354
 355         // Remove the message from the database
 356         removeDB('inbox', id);
 357
 358         // Check the unread messages
 359         checkInboxMessages();
 360
 361         // Store the new inbox
 362         storeInbox();
 363
 364         return false;
 365 }
 366
 367 // Removes all the inbox messages
 368 function purgeInbox() {
 369         // Remove all the messages from the database
 370         for(var i = 0; i < sessionStorage.length; i++) {
 371                 // Get the pointer values
 372                 var current = sessionStorage.key(i);
 373
 374                 // If the pointer is on a stored message
 375                 if(explodeThis('_', current, 0) == 'inbox')
 376                         removeDB('inbox', explodeThis('_', current, 1));
 377         }
 378
 379         // Prevent the database lag
 380         $(document).oneTime(100, function() {
 381                 // Store the new inbox
 382                 storeInbox();
 383
 384                 // Remove all the messages from the inbox
 385                 $('#inbox .one-message').remove();
 386
 387                 // Reload the inbox
 388                 loadInbox();
 389         });
 390
 391         return false;
 392 }
 393
 394 // Checks if there are new messages to be notified
 395 function checkInboxMessages() {
 396         // Selectors
 397         var inbox_link = '#top-content a.inbox-hidable';
 398         var no_results = '#inbox .inbox-noresults';
 399
 400         // Marker
 401         var has_messages = false;
 402
 403         // Read the number of unread messages
 404         var unread = 0;
 405
 406         // Read the local inbox database
 407         for(var i = 0; i < sessionStorage.length; i++) {
 408                 // Database pointer
 409                 var current = sessionStorage.key(i);
 410
 411                 // Check inbox messages
 412                 if(explodeThis('_', current, 0) == 'inbox') {
 413                         // Read the current status
 414                         var status = $(XMLFromString(sessionStorage.getItem(current))).find('status').text();
 415
 416                         // Found an unread message
 417                         if(status == 'unread')
 418                                 unread++;
 419
 420                         // Update the marker
 421                         has_messages = true;
 422                 }
 423         }
 424
 425         // No message?
 426         if(!has_messages)
 427                 $(no_results).show();
 428         else
 429                 $(no_results).hide();
 430
 431         // Reset notifications
 432         $(inbox_link + ' .notify').remove();
 433
 434         // Any unread message?
 435         if(unread) {
 436                 // Notify the user
 437                 $(inbox_link).prepend('<div class="notify one-counter" data-counter="' + unread + '">' + unread + '</div>');
 438
 439                 // Update the title
 440                 updateTitle();
 441
 442                 return true;
 443         }
 444
 445         // Anyway, update the title
 446         updateTitle();
 447
 448         return false;
 449 }
 450
 451 // Reveal a normal message content
 452 function revealInboxMessage(id, from, subject, content, name, date, status) {
 453         // Message path
 454         var all_message = '#inbox .one-message';
 455         var one_message = all_message + '.' + id;
 456         var one_content = one_message + ' .message-content';
 457
 458         // We reset all the other messages
 459         $(all_message + ' .message-content').remove();
 460         $(all_message).removeClass('message-reading');
 461
 462         // Message content
 463         var html =
 464                 '<div class="message-content">' +
 465                         '<div class="message-body">' + filterThisMessage(content, name, true) + '</div>' +
 466
 467                         '<div class="message-meta">' +
 468                                 '<span class="date">' + parseDate(date) + '</span>' +
 469
 470                                 '<a href="#" class="reply one-button talk-images">' + _e("Reply") + '</a>' +
 471                                 '<a href="#" class="remove one-button talk-images">' + _e("Delete") + '</a>' +
 472
 473                                 '<div class="clear">' +
 474                         '</div>' +
 475                 '</div>';
 476
 477         // Message content
 478         html += '</div>';
 479
 480         $(one_message).append(html).addClass('message-reading');
 481
 482         // Click events
 483         $(one_content + ' a.reply').click(function() {
 484                 return replyInboxMessage(id, from, subject, content);
 485         });
 486
 487         $(one_content + ' a.remove').click(function() {
 488                 return deleteInboxMessage(id);
 489         });
 490
 491         // Unread message
 492         if(status == 'unread') {
 493                 // Update our database
 494                 var xml = getDB('inbox', id).replace(/<status>unread<\/status>/i,'<status>read</status>');
 495                 setDB('inbox', id, xml);
 496
 497                 // Remove the unread class
 498                 $(one_message).removeClass('message-unread');
 499
 500                 // Send it to the server!
 501                 storeInbox();
 502         }
 503
 504         // Check the unread messages
 505         checkInboxMessages();
 506 }
 507
 508 // Hides a normal message content
 509 function hideInboxMessage(id) {
 510         // Define the paths
 511         var inbox = '#inbox .';
 512         var one_message = inbox + 'one-message.' + id;
 513
 514         // Reset this message
 515         $(one_message).removeClass('message-reading');
 516         $(one_message + ' .message-content').remove();
 517 }
 518
 519 // Replies to a given normal message
 520 function replyInboxMessage(id, from, subject, body) {
 521         // We switch to the writing div
 522         newInboxMessage();
 523
 524         // Inbox path
 525         var inbox = '#inbox .';
 526
 527         // Generate the body
 528         var body = '\n' + '____________' + '\n\n' + truncate(body, 120);
 529
 530         // We apply the generated values to the form
 531         $(inbox + 'inbox-new-to-input').val(from);
 532         $(inbox + 'inbox-new-subject-input').val(subject);
 533
 534         $(document).oneTime(10, function() {
 535                 $(inbox + 'inbox-new-textarea').val(body).focus().selectRange(1, 0);
 536         });
 537
 538         return false;
 539 }
 540
 541 // Loads the inbox messages
 542 function loadInbox() {
 543         // Read the local database
 544         for(var i = 0; i < sessionStorage.length; i++) {
 545                 // Get the pointer values
 546                 var current = sessionStorage.key(i);
 547
 548                 // If the pointer is on a stored message
 549                 if(explodeThis('_', current, 0) == 'inbox') {
 550                         // Get the current value
 551                         var value = $(XMLFromString(sessionStorage.getItem(current)));
 552
 553                         // Display the current message
 554                         displayInboxMessage(
 555                                                 value.find('from').text().revertHtmlEnc(),
 556                                                 value.find('subject').text().revertHtmlEnc(),
 557                                                 value.find('content').text().revertHtmlEnc(),
 558                                                 value.find('status').text().revertHtmlEnc(),
 559                                                 value.find('id').text().revertHtmlEnc(),
 560                                                 value.find('date').text().revertHtmlEnc()
 561                                            );
 562                 }
 563         }
 564
 565         // Check new messages
 566         checkInboxMessages();
 567 }
 568
 569 // Wait event for file attaching
 570 function waitInboxAttach() {
 571         $('#inbox .wait').show();
 572 }
 573
 574 // Success event for file attaching
 575 function handleInboxAttach(responseXML) {
 576         // Data selector
 577         var dData = $(responseXML).find('jappix');
 578
 579         // Process the returned data
 580         if(dData.find('error').size()) {
 581                 openThisError(4);
 582
 583                 logThis('Error while attaching the file: ' + dData.find('error').text(), 1);
 584         }
 585
 586         else {
 587                 // Get the file values
 588                 var fName = dData.find('title').text();
 589                 var fType = dData.find('type').text();
 590                 var fURL = dData.find('href').text();
 591
 592                 // Hide the attach link, show the unattach one
 593                 $('#inbox .inbox-new-file input').hide();
 594                 $('#inbox .inbox-new-file').append('<a class="file ' + encodeQuotes(fileCategory(explodeThis('/', fType, 1))) + ' talk-images" href="' + encodeQuotes(fURL) + '" target="_blank">' + fName.htmlEnc() + '</a><a href="#" class="remove one-button talk-images">' + _e("Remove") + '</a>');
 595
 596                 // Set values to the file link
 597                 $('#inbox .inbox-new-file a.file').attr('data-attachedtitle', fName)
 598                                                   .attr('data-attachedhref',  fURL);
 599
 600                 // Click events
 601                 $('#inbox .inbox-new-file a.remove').click(function() {
 602                         $('#inbox .inbox-new-file a').remove();
 603                         $('#inbox .inbox-new-file input').show();
 604
 605                         return false;
 606                 });
 607
 608                 logThis('File attached.', 3);
 609         }
 610
 611         // Reset the attach bubble
 612         $('#inbox .inbox-new-file input[type=file]').val('');
 613         $('#inbox .wait').hide();
 614 }
 615
 616 // Plugin launcher
 617 function launchInbox() {
 618         // Define the pats
 619         var inbox = '#inbox .';
 620
 621         // Define the buddy search vars
 622         var destination = inbox + 'inbox-new-to';
 623         var dHovered = destination + ' ul li.hovered:first';
 624
 625         // Send the message when enter pressend
 626         $(inbox + 'inbox-new input').keyup(function(e) {
 627                 if(e.keyCode == 13) {
 628                         if(exists(dHovered))
 629                                 addBuddySearch(destination, $(dHovered).attr('data-xid'));
 630                         else
 631                                 checkInboxMessage();
 632                 }
 633         });
 634
 635         // Buddy search
 636         $(inbox + 'inbox-new-to-input').keyup(function(e) {
 637                 if(e.keyCode != 13) {
 638                         // New buddy search
 639                         if((e.keyCode != 40) && (e.keyCode != 38))
 640                                 createBuddySearch(destination);
 641
 642                         // Navigating with keyboard in the results
 643                         arrowsBuddySearch(e, destination);
 644                 }
 645         })
 646
 647         // Buddy search lost focus
 648         .blur(function() {
 649                 if(!$(destination + ' ul').attr('mouse-hover'))
 650                         resetBuddySearch(destination);
 651         })
 652
 653         // Buddy search got focus
 654         .focus(function() {
 655                 var value = $(this).val();
 656
 657                 // Add a comma at the end
 658                 if(value && !value.match(/^(.+)((,)(\s)?)$/))
 659                         $(this).val(value + ', ');
 660         });
 661
 662         // Click events
 663         $(inbox + 'a-delete-messages').click(purgeInbox);
 664         $(inbox + 'a-new-message').click(newInboxMessage);
 665         $(inbox + 'a-show-messages').click(showInboxMessages);
 666         $(inbox + 'inbox-new-send a').click(checkInboxMessage);
 667
 668         $(inbox + 'bottom .finish').click(function() {
 669                 return closeInbox();
 670         });
 671
 672         // File upload
 673         var attach_options = {
 674                 dataType:       'xml',
 675                 beforeSubmit:   waitInboxAttach,
 676                 success:        handleInboxAttach
 677         };
 678
 679         // Upload form submit event
 680         $('#inbox .inbox-new-file').submit(function() {
 681                 if($('#inbox .wait').is(':hidden') && $('#inbox .inbox-new-file input[type=file]').val())
 682                         $(this).ajaxSubmit(attach_options);
 683
 684                 return false;
 685         });
 686
 687         // Upload input change event
 688         $('#inbox .inbox-new-file input[type=file]').change(function() {
 689                 if($('#inbox .wait').is(':hidden') && $(this).val())
 690                         $('#inbox .inbox-new-file').ajaxSubmit(attach_options);
 691
 692                 return false;
 693         });
 694 }