[Summary view] [Print] [Text view]

   1  /* global phpbb, plupload, attachInline */
   2  
   3  plupload.addI18n(phpbb.plupload.i18n);
   4  phpbb.plupload.ids = [];
   5  
   6  (function($) {  // Avoid conflicts with other libraries
   7  
   8  'use strict';
   9  
  10  /**
  11   * Set up the uploader.
  12   */
  13  phpbb.plupload.initialize = function() {
  14      // Initialize the Plupload uploader.
  15      phpbb.plupload.uploader.init();
  16  
  17      // Set attachment data.
  18      phpbb.plupload.setData(phpbb.plupload.data);
  19      phpbb.plupload.updateMultipartParams(phpbb.plupload.getSerializedData());
  20  
  21      // Only execute if Plupload initialized successfully.
  22      phpbb.plupload.uploader.bind('Init', function() {
  23          phpbb.plupload.form = $(phpbb.plupload.config.form_hook)[0];
  24          phpbb.plupload.rowTpl = $('#attach-row-tpl')[0].outerHTML;
  25  
  26          // Hide the basic upload panel and remove the attach row template.
  27          $('#attach-row-tpl, #attach-panel-basic').remove();
  28          // Show multi-file upload options.
  29          $('#attach-panel-multi').show();
  30      });
  31  
  32      phpbb.plupload.uploader.bind('PostInit', function() {
  33          // Point out the drag-and-drop zone if it's supported.
  34          if (phpbb.plupload.uploader.features.dragdrop) {
  35              $('#drag-n-drop-message').show();
  36          }
  37  
  38          // Ensure "Add files" button position is correctly calculated.
  39          if ($('#attach-panel-multi').is(':visible')) {
  40              phpbb.plupload.uploader.refresh();
  41          }
  42          $('[data-subpanel="attach-panel"]').one('click', function() {
  43              phpbb.plupload.uploader.refresh();
  44          });
  45      });
  46  };
  47  
  48  /**
  49   * Unsets all elements in the object uploader.settings.multipart_params whose keys
  50   * begin with 'attachment_data['
  51   */
  52  phpbb.plupload.clearParams = function() {
  53      var obj = phpbb.plupload.uploader.settings.multipart_params;
  54      for (var key in obj) {
  55          if (!obj.hasOwnProperty(key) || key.indexOf('attachment_data[') !== 0) {
  56              continue;
  57          }
  58  
  59          delete phpbb.plupload.uploader.settings.multipart_params[key];
  60      }
  61  };
  62  
  63  /**
  64   * Update uploader.settings.multipart_params object with new data.
  65   *
  66   * @param {object} obj
  67   */
  68  phpbb.plupload.updateMultipartParams = function(obj) {
  69      var settings = phpbb.plupload.uploader.settings;
  70      settings.multipart_params = $.extend(settings.multipart_params, obj);
  71  };
  72  
  73  /**
  74   * Convert the array of attachment objects into an object that PHP would expect as POST data.
  75   *
  76   * @returns {object} An object in the form 'attachment_data[i][key]': value as
  77   *     expected by the server
  78   */
  79  phpbb.plupload.getSerializedData = function() {
  80      var obj = {};
  81      for (var i = 0; i < phpbb.plupload.data.length; i++) {
  82          var datum = phpbb.plupload.data[i];
  83          for (var key in datum) {
  84              if (!datum.hasOwnProperty(key)) {
  85                  continue;
  86              }
  87  
  88              obj['attachment_data[' + i + '][' + key + ']'] = datum[key];
  89          }
  90      }
  91      return obj;
  92  };
  93  
  94  /**
  95   * Get the index from the phpbb.plupload.data array where the given
  96   * attachment id appears.
  97   *
  98   * @param {int} attachId The attachment id of the file.
  99   * @returns {bool|int} Index of the file if exists, otherwise false.
 100   */
 101  phpbb.plupload.getIndex = function(attachId) {
 102      var index = $.inArray(Number(attachId), phpbb.plupload.ids);
 103      return (index !== -1) ? index : false;
 104  };
 105  
 106  /**
 107   * Set the data in phpbb.plupload.data and phpbb.plupload.ids arrays.
 108   *
 109   * @param {Array} data    Array containing the new data to use. In the form of
 110   * array(index => object(property: value). Requires attach_id to be one of the object properties.
 111   */
 112  phpbb.plupload.setData = function(data) {
 113      // Make sure that the array keys are reset.
 114      phpbb.plupload.ids = phpbb.plupload.data = [];
 115      phpbb.plupload.data = data;
 116  
 117      for (var i = 0; i < data.length; i++) {
 118          phpbb.plupload.ids.push(Number(data[i].attach_id));
 119      }
 120  };
 121  
 122  /**
 123   * Update the attachment data in the HTML and the phpbb & phpbb.plupload objects.
 124   *
 125   * @param {Array} data            Array containing the new data to use.
 126   * @param {string} action        The action that required the update. Used to update the inline attachment bbcodes.
 127   * @param {int} index            The index from phpbb.plupload_ids that was affected by the action.
 128   * @param {Array} downloadUrl    Optional array of download urls to update.
 129   */
 130  phpbb.plupload.update = function(data, action, index, downloadUrl) {
 131  
 132      phpbb.plupload.updateBbcode(action, index);
 133      phpbb.plupload.setData(data);
 134      phpbb.plupload.updateRows(downloadUrl);
 135      phpbb.plupload.clearParams();
 136      phpbb.plupload.updateMultipartParams(phpbb.plupload.getSerializedData());
 137  };
 138  
 139  /**
 140   * Update the relevant elements and hidden data for all attachments.
 141   *
 142   * @param {Array} downloadUrl Optional array of download urls to update.
 143   */
 144  phpbb.plupload.updateRows = function(downloadUrl) {
 145      for (var i = 0; i < phpbb.plupload.ids.length; i++) {
 146          phpbb.plupload.updateRow(i, downloadUrl);
 147      }
 148  };
 149  
 150  /**
 151   * Insert a row for a new attachment. This expects an HTML snippet in the HTML
 152   * using the id "attach-row-tpl" to be present. This snippet is cloned and the
 153   * data for the file inserted into it. The row is then appended or prepended to
 154   * #file-list based on the attach_order setting.
 155   *
 156   * @param {object} file Plupload file object for the new attachment.
 157   */
 158  phpbb.plupload.insertRow = function(file) {
 159      var row = $(phpbb.plupload.rowTpl);
 160  
 161      row.attr('id', file.id);
 162      row.find('.file-name').html(plupload.xmlEncode(file.name));
 163      row.find('.file-size').html(plupload.formatSize(file.size));
 164  
 165      if (phpbb.plupload.order === 'desc') {
 166          $('#file-list').prepend(row);
 167      } else {
 168          $('#file-list').append(row);
 169      }
 170  };
 171  
 172  /**
 173   * Update the relevant elements and hidden data for an attachment.
 174   *
 175   * @param {int} index The index from phpbb.plupload.ids of the attachment to edit.
 176   * @param {Array} downloadUrl Optional array of download urls to update.
 177   */
 178  phpbb.plupload.updateRow = function(index, downloadUrl) {
 179      var attach = phpbb.plupload.data[index],
 180          row = $('[data-attach-id="' + attach.attach_id + '"]');
 181  
 182      // Add the link to the file
 183      if (typeof downloadUrl !== 'undefined' && typeof downloadUrl[index] !== 'undefined') {
 184          var url = downloadUrl[index].replace('&amp;', '&'),
 185              link = $('<a></a>');
 186  
 187          link.attr('href', url).html(attach.real_filename);
 188          row.find('.file-name').html(link);
 189      }
 190  
 191      row.find('textarea').attr('name', 'comment_list[' + index + ']');
 192      phpbb.plupload.updateHiddenData(row, attach, index);
 193  };
 194  
 195  /**
 196   * Update hidden input data for an attachment.
 197   *
 198   * @param {object} row        jQuery object for the attachment row.
 199   * @param {object} attach    Attachment data object from phpbb.plupload.data
 200   * @param {int} index        Attachment index from phpbb.plupload.ids
 201   */
 202  phpbb.plupload.updateHiddenData = function(row, attach, index) {
 203      row.find('input[type="hidden"]').remove();
 204  
 205      for (var key in attach) {
 206          if (!attach.hasOwnProperty(key)) {
 207              return;
 208          }
 209  
 210          var input = $('<input />')
 211              .attr('type', 'hidden')
 212              .attr('name', 'attachment_data[' + index + '][' + key + ']')
 213              .attr('value', attach[key]);
 214          $('textarea', row).after(input);
 215      }
 216  };
 217  
 218  /**
 219   * Deleting a file removes it from the queue and fires an AJAX event to the
 220   * server to tell it to remove the temporary attachment. The server
 221   * responds with the updated attachment data list so that any future
 222   * uploads can maintain state with the server
 223   *
 224   * @param {object} row        jQuery object for the attachment row.
 225   * @param {int} attachId    Attachment id of the file to be removed.
 226   */
 227  phpbb.plupload.deleteFile = function(row, attachId) {
 228      // If there's no attach id, then the file hasn't been uploaded. Simply delete the row.
 229      if (typeof attachId === 'undefined') {
 230          var file = phpbb.plupload.uploader.getFile(row.attr('id'));
 231          phpbb.plupload.uploader.removeFile(file);
 232  
 233          row.slideUp(100, function() {
 234              row.remove();
 235              phpbb.plupload.hideEmptyList();
 236          });
 237      }
 238  
 239      var index = phpbb.plupload.getIndex(attachId);
 240      row.find('.file-status').toggleClass('file-uploaded file-working');
 241  
 242      if (index === false) {
 243          return;
 244      }
 245      var fields = {};
 246      fields['delete_file[' + index + ']'] = 1;
 247  
 248      var always = function() {
 249          row.find('.file-status').removeClass('file-working');
 250      };
 251  
 252      var done = function(response) {
 253          if (typeof response !== 'object') {
 254              return;
 255          }
 256  
 257          // trigger_error() was called which likely means a permission error was encountered.
 258          if (typeof response.title !== 'undefined') {
 259              phpbb.plupload.uploader.trigger('Error', { message: response.message });
 260              // We will have to assume that the deletion failed. So leave the file status as uploaded.
 261              row.find('.file-status').toggleClass('file-uploaded');
 262  
 263              return;
 264          }
 265          phpbb.plupload.update(response, 'removal', index);
 266          // Check if the user can upload files now if he had reached the max files limit.
 267          phpbb.plupload.handleMaxFilesReached();
 268  
 269          if (row.attr('id')) {
 270              var file = phpbb.plupload.uploader.getFile(row.attr('id'));
 271              phpbb.plupload.uploader.removeFile(file);
 272          }
 273          row.slideUp(100, function() {
 274              row.remove();
 275              // Hide the file list if it's empty now.
 276              phpbb.plupload.hideEmptyList();
 277          });
 278          phpbb.plupload.uploader.trigger('FilesRemoved');
 279      };
 280  
 281      $.ajax(phpbb.plupload.config.url, {
 282          type: 'POST',
 283          data: $.extend(fields, phpbb.plupload.getSerializedData()),
 284          headers: phpbb.plupload.config.headers
 285      })
 286      .always(always)
 287      .done(done);
 288  };
 289  
 290  /**
 291   * Check the attachment list and hide its container if it's empty.
 292   */
 293  phpbb.plupload.hideEmptyList = function() {
 294      if (!$('#file-list').children().length) {
 295          $('#file-list-container').slideUp(100);
 296      }
 297  };
 298  
 299  /**
 300   * Update the indices used in inline attachment bbcodes. This ensures that the
 301   * bbcodes correspond to the correct file after a file is added or removed.
 302   * This should be called before the phpbb.plupload,data and phpbb.plupload.ids
 303   * arrays are updated, otherwise it will not work correctly.
 304   *
 305   * @param {string} action    The action that occurred -- either "addition" or "removal"
 306   * @param {int} index        The index of the attachment from phpbb.plupload.ids that was affected.
 307   */
 308  phpbb.plupload.updateBbcode = function(action, index) {
 309      var    textarea = $('#message', phpbb.plupload.form),
 310          text = textarea.val(),
 311          removal = (action === 'removal');
 312  
 313      // Return if the bbcode isn't used at all.
 314      if (text.indexOf('[attachment=') === -1) {
 315          return;
 316      }
 317  
 318  	function runUpdate(i) {
 319          var regex = new RegExp('\\[attachment=' + i + '\\](.*?)\\[\\/attachment\\]', 'g');
 320          text = text.replace(regex, function updateBbcode(_, fileName) {
 321              // Remove the bbcode if the file was removed.
 322              if (removal && index === i) {
 323                  return '';
 324              }
 325              var newIndex = i + ((removal) ? -1 : 1);
 326              return '[attachment=' + newIndex + ']' + fileName + '[/attachment]';
 327          });
 328      }
 329  
 330      // Loop forwards when removing and backwards when adding ensures we don't
 331      // corrupt the bbcode index.
 332      var i;
 333      if (removal) {
 334          for (i = index; i < phpbb.plupload.ids.length; i++) {
 335              runUpdate(i);
 336          }
 337      } else {
 338          for (i = phpbb.plupload.ids.length - 1; i >= index; i--) {
 339              runUpdate(i);
 340          }
 341      }
 342  
 343      textarea.val(text);
 344  };
 345  
 346  /**
 347   * Get Plupload file objects based on their upload status.
 348   *
 349   * @param {int} status Plupload status - plupload.DONE, plupload.FAILED,
 350   * plupload.QUEUED, plupload.STARTED, plupload.STOPPED
 351   *
 352   * @returns {Array} The Plupload file objects matching the status.
 353   */
 354  phpbb.plupload.getFilesByStatus = function(status) {
 355      var files = [];
 356  
 357      $.each(phpbb.plupload.uploader.files, function(i, file) {
 358          if (file.status === status) {
 359              files.push(file);
 360          }
 361      });
 362      return files;
 363  };
 364  
 365  /**
 366   * Check whether the user has reached the maximun number of files that he's allowed
 367   * to upload. If so, disables the uploader and marks the queued files as failed. Otherwise
 368   * makes sure that the uploader is enabled.
 369   *
 370   * @returns {bool} True if the limit has been reached. False if otherwise.
 371   */
 372  phpbb.plupload.handleMaxFilesReached = function() {
 373      // If there is no limit, the user is an admin or moderator.
 374      if (!phpbb.plupload.maxFiles) {
 375          return false;
 376      }
 377  
 378      if (phpbb.plupload.maxFiles <= phpbb.plupload.ids.length) {
 379          // Fail the rest of the queue.
 380          phpbb.plupload.markQueuedFailed(phpbb.plupload.lang.TOO_MANY_ATTACHMENTS);
 381          // Disable the uploader.
 382          phpbb.plupload.disableUploader();
 383          phpbb.plupload.uploader.trigger('Error', { message: phpbb.plupload.lang.TOO_MANY_ATTACHMENTS });
 384  
 385          return true;
 386      } else if (phpbb.plupload.maxFiles > phpbb.plupload.ids.length) {
 387          // Enable the uploader if the user is under the limit
 388          phpbb.plupload.enableUploader();
 389      }
 390      return false;
 391  };
 392  
 393  /**
 394   * Disable the uploader
 395   */
 396  phpbb.plupload.disableUploader = function() {
 397      $('#add_files').addClass('disabled');
 398      phpbb.plupload.uploader.disableBrowse();
 399  };
 400  
 401  /**
 402   * Enable the uploader
 403   */
 404  phpbb.plupload.enableUploader = function() {
 405      $('#add_files').removeClass('disabled');
 406      phpbb.plupload.uploader.disableBrowse(false);
 407  };
 408  
 409  /**
 410   * Mark all queued files as failed.
 411   *
 412   * @param {string} error Error message to present to the user.
 413   */
 414  phpbb.plupload.markQueuedFailed = function(error) {
 415      var files = phpbb.plupload.getFilesByStatus(plupload.QUEUED);
 416  
 417      $.each(files, function(i, file) {
 418          $('#' + file.id).find('.file-progress').hide();
 419          phpbb.plupload.fileError(file, error);
 420      });
 421  };
 422  
 423  /**
 424   * Marks a file as failed and sets the error message for it.
 425   *
 426   * @param {object} file        Plupload file object that failed.
 427   * @param {string} error    Error message to present to the user.
 428   */
 429  phpbb.plupload.fileError = function(file, error) {
 430      file.status = plupload.FAILED;
 431      file.error = error;
 432      $('#' + file.id).find('.file-status')
 433          .addClass('file-error')
 434          .attr({
 435              'data-error-title': phpbb.plupload.lang.ERROR,
 436              'data-error-message': error
 437          });
 438  };
 439  
 440  
 441  /**
 442   * Set up the Plupload object and get some basic data.
 443   */
 444  phpbb.plupload.uploader = new plupload.Uploader(phpbb.plupload.config);
 445  phpbb.plupload.initialize();
 446  
 447  var $fileList = $('#file-list');
 448  
 449  /**
 450   * Insert inline attachment bbcode.
 451   */
 452  $fileList.on('click', '.file-inline-bbcode', function(e) {
 453      var attachId = $(this).parents('.attach-row').attr('data-attach-id'),
 454          index = phpbb.plupload.getIndex(attachId);
 455  
 456      attachInline(index, phpbb.plupload.data[index].real_filename);
 457      e.preventDefault();
 458  });
 459  
 460  /**
 461   * Delete a file.
 462   */
 463  $fileList.on('click', '.file-delete', function(e) {
 464      var row = $(this).parents('.attach-row'),
 465          attachId = row.attr('data-attach-id');
 466  
 467      phpbb.plupload.deleteFile(row, attachId);
 468      e.preventDefault();
 469  });
 470  
 471  /**
 472   * Display the error message for a particular file when the error icon is clicked.
 473   */
 474  $fileList.on('click', '.file-error', function(e) {
 475      phpbb.alert($(this).attr('data-error-title'), $(this).attr('data-error-message'));
 476      e.preventDefault();
 477  });
 478  
 479  /**
 480   * Fires when an error occurs.
 481   */
 482  phpbb.plupload.uploader.bind('Error', function(up, error) {
 483      error.file.name = plupload.xmlEncode(error.file.name);
 484  
 485      // The error message that Plupload provides for these is vague, so we'll be more specific.
 486      if (error.code === plupload.FILE_EXTENSION_ERROR) {
 487          error.message = plupload.translate('Invalid file extension:') + ' ' + error.file.name;
 488      } else if (error.code === plupload.FILE_SIZE_ERROR) {
 489          error.message = plupload.translate('File too large:') + ' ' + error.file.name;
 490      }
 491      phpbb.alert(phpbb.plupload.lang.ERROR, error.message);
 492  });
 493  
 494  /**
 495   * Fires before a given file is about to be uploaded. This allows us to
 496   * send the real filename along with the chunk. This is necessary because
 497   * for some reason the filename is set to 'blob' whenever a file is chunked
 498   *
 499   * @param {object} up    The plupload.Uploader object
 500   * @param {object} file    The plupload.File object that is about to be uploaded
 501   */
 502  phpbb.plupload.uploader.bind('BeforeUpload', function(up, file) {
 503      if (phpbb.plupload.handleMaxFilesReached()) {
 504          return;
 505      }
 506  
 507      phpbb.plupload.updateMultipartParams({ real_filename: file.name });
 508  });
 509  
 510  /**
 511   * Fired when a single chunk of any given file is uploaded. This parses the
 512   * response from the server and checks for an error. If an error occurs it
 513   * is reported to the user and the upload of this particular file is halted
 514   *
 515   * @param {object} up        The plupload.Uploader object
 516   * @param {object} file        The plupload.File object whose chunk has just
 517   *     been uploaded
 518   * @param {object} response    The response object from the server
 519   */
 520  phpbb.plupload.uploader.bind('ChunkUploaded', function(up, file, response) {
 521      if (response.chunk >= response.chunks - 1) {
 522          return;
 523      }
 524  
 525      var json = {};
 526      try {
 527          json = $.parseJSON(response.response);
 528      } catch (e) {
 529          file.status = plupload.FAILED;
 530          up.trigger('FileUploaded', file, {
 531              response: JSON.stringify({
 532                  error: {
 533                      message: 'Error parsing server response.'
 534                  }
 535              })
 536          });
 537      }
 538  
 539      // If trigger_error() was called, then a permission error likely occurred.
 540      if (typeof json.title !== 'undefined') {
 541          json.error = { message: json.message };
 542      }
 543  
 544      if (json.error) {
 545          file.status = plupload.FAILED;
 546          up.trigger('FileUploaded', file, {
 547              response: JSON.stringify({
 548                  error: {
 549                      message: json.error.message
 550                  }
 551              })
 552          });
 553      }
 554  });
 555  
 556  /**
 557   * Fires when files are added to the queue.
 558   */
 559  phpbb.plupload.uploader.bind('FilesAdded', function(up, files) {
 560      // Prevent unnecessary requests to the server if the user already uploaded
 561      // the maximum number of files allowed.
 562      if (phpbb.plupload.handleMaxFilesReached()) {
 563          return;
 564      }
 565  
 566      // Switch the active tab if the style supports it
 567      if (typeof activateSubPanel === 'function') {
 568          activateSubPanel('attach-panel'); // jshint ignore: line
 569      }
 570  
 571      // Show the file list if there aren't any files currently.
 572      var $fileListContainer = $('#file-list-container');
 573      if (!$fileListContainer.is(':visible')) {
 574          $fileListContainer.show(100);
 575      }
 576  
 577      $.each(files, function(i, file) {
 578          phpbb.plupload.insertRow(file);
 579      });
 580  
 581      up.bind('UploadProgress', function(up, file) {
 582          $('.file-progress-bar', '#' + file.id).css('width', file.percent + '%');
 583          $('#file-total-progress-bar').css('width', up.total.percent + '%');
 584      });
 585  
 586      // Do not allow more files to be added to the running queue.
 587      phpbb.plupload.disableUploader();
 588  
 589      // Start uploading the files once the user has selected them.
 590      up.start();
 591  });
 592  
 593  
 594  /**
 595   * Fires when an entire file has been uploaded. It checks for errors
 596   * returned by the server otherwise parses the list of attachment data and
 597   * appends it to the next file upload so that the server can maintain state
 598   * with regards to the attachments in a given post
 599   *
 600   * @param {object} up        The plupload.Uploader object
 601   * @param {object} file        The plupload.File object that has just been
 602   *     uploaded
 603   * @param {string} response    The response string from the server
 604   */
 605  phpbb.plupload.uploader.bind('FileUploaded', function(up, file, response) {
 606      var json = {},
 607          row = $('#' + file.id),
 608          error;
 609  
 610      // Hide the progress indicator.
 611      row.find('.file-progress').hide();
 612  
 613      try {
 614          json = JSON.parse(response.response);
 615      } catch (e) {
 616          error = 'Error parsing server response.';
 617      }
 618  
 619      // If trigger_error() was called, then a permission error likely occurred.
 620      if (typeof json.title !== 'undefined') {
 621          error = json.message;
 622          up.trigger('Error', { message: error });
 623  
 624          // The rest of the queue will fail.
 625          phpbb.plupload.markQueuedFailed(error);
 626      } else if (json.error) {
 627          error = json.error.message;
 628      }
 629  
 630      if (typeof error !== 'undefined') {
 631          phpbb.plupload.fileError(file, error);
 632      } else if (file.status === plupload.DONE) {
 633          file.attachment_data = json.data[0];
 634  
 635          row.attr('data-attach-id', file.attachment_data.attach_id);
 636          row.find('.file-inline-bbcode').show();
 637          row.find('.file-status').addClass('file-uploaded');
 638          phpbb.plupload.update(json.data, 'addition', 0, [json.download_url]);
 639      }
 640  });
 641  
 642  /**
 643   * Fires when the entire queue of files have been uploaded.
 644   */
 645  phpbb.plupload.uploader.bind('UploadComplete', function() {
 646      // Hide the progress bar
 647      setTimeout(function() {
 648          $('#file-total-progress-bar').fadeOut(500, function() {
 649              $(this).css('width', 0).show();
 650          });
 651      }, 2000);
 652  
 653      // Re-enable the uploader
 654      phpbb.plupload.enableUploader();
 655  });
 656  
 657  })(jQuery); // Avoid conflicts with other libraries