defectivebydesign.org/20130322/files-new-min/modules/file/file.js

   1
   2 /**
   3  * @file
   4  * Provides JavaScript additions to the managed file field type.
   5  *
   6  * This file provides progress bar support (if available), popup windows for
   7  * file previews, and disabling of other file fields during Ajax uploads (which
   8  * prevents separate file fields from accidentally uploading files).
   9  */
  10
  11 (function ($) {
  12
  13 /**
  14  * Attach behaviors to managed file element upload fields.
  15  */
  16 Drupal.behaviors.fileValidateAutoAttach = {
  17   attach: function (context, settings) {
  18     if (settings.file && settings.file.elements) {
  19       $.each(settings.file.elements, function(selector) {
  20         var extensions = settings.file.elements[selector];
  21         $(selector, context).bind('change', {extensions: extensions}, Drupal.file.validateExtension);
  22       });
  23     }
  24   },
  25   detach: function (context, settings) {
  26     if (settings.file && settings.file.elements) {
  27       $.each(settings.file.elements, function(selector) {
  28         $(selector, context).unbind('change', Drupal.file.validateExtension);
  29       });
  30     }
  31   }
  32 };
  33
  34 /**
  35  * Attach behaviors to the file upload and remove buttons.
  36  */
  37 Drupal.behaviors.fileButtons = {
  38   attach: function (context) {
  39     $('input.form-submit', context).bind('mousedown', Drupal.file.disableFields);
  40     $('div.form-managed-file input.form-submit', context).bind('mousedown', Drupal.file.progressBar);
  41   },
  42   detach: function (context) {
  43     $('input.form-submit', context).unbind('mousedown', Drupal.file.disableFields);
  44     $('div.form-managed-file input.form-submit', context).unbind('mousedown', Drupal.file.progressBar);
  45   }
  46 };
  47
  48 /**
  49  * Attach behaviors to links within managed file elements.
  50  */
  51 Drupal.behaviors.filePreviewLinks = {
  52   attach: function (context) {
  53     $('div.form-managed-file .file a, .file-widget .file a', context).bind('click',Drupal.file.openInNewWindow);
  54   },
  55   detach: function (context){
  56     $('div.form-managed-file .file a, .file-widget .file a', context).unbind('click', Drupal.file.openInNewWindow);
  57   }
  58 };
  59
  60 /**
  61  * File upload utility functions.
  62  */
  63 Drupal.file = Drupal.file || {
  64   /**
  65    * Client-side file input validation of file extensions.
  66    */
  67   validateExtension: function (event) {
  68     // Remove any previous errors.
  69     $('.file-upload-js-error').remove();
  70
  71     // Add client side validation for the input[type=file].
  72     var extensionPattern = event.data.extensions.replace(/,\s*/g, '|');
  73     if (extensionPattern.length > 1 && this.value.length > 0) {
  74       var acceptableMatch = new RegExp('\\.(' + extensionPattern + ')$', 'gi');
  75       if (!acceptableMatch.test(this.value)) {
  76         var error = Drupal.t("The selected file %filename cannot be uploaded. Only files with the following extensions are allowed: %extensions.", {
  77           '%filename': this.value,
  78           '%extensions': extensionPattern.replace(/\|/g, ', ')
  79         });
  80         $(this).parents('div.form-managed-file').prepend('<div class="messages error file-upload-js-error">' + error + '</div>');
  81         this.value = '';
  82         return false;
  83       }
  84     }
  85   },
  86   /**
  87    * Prevent file uploads when using buttons not intended to upload.
  88    */
  89   disableFields: function (event){
  90     var clickedButton = this;
  91
  92     // Only disable upload fields for Ajax buttons.
  93     if (!$(clickedButton).hasClass('ajax-processed')) {
  94       return;
  95     }
  96
  97     // Check if we're working with an "Upload" button.
  98     var $enabledFields = [];
  99     if ($(this).parents('div.form-managed-file').size() > 0) {
 100       $enabledFields = $(this).parents('div.form-managed-file').find('input.form-file');
 101     }
 102
 103     // Temporarily disable upload fields other than the one we're currently
 104     // working with. Filter out fields that are already disabled so that they
 105     // do not get enabled when we re-enable these fields at the end of behavior
 106     // processing. Re-enable in a setTimeout set to a relatively short amount
 107     // of time (1 second). All the other mousedown handlers (like Drupal's Ajax
 108     // behaviors) are excuted before any timeout functions are called, so we
 109     // don't have to worry about the fields being re-enabled too soon.
 110     // @todo If the previous sentence is true, why not set the timeout to 0?
 111     var $fieldsToTemporarilyDisable = $('div.form-managed-file input.form-file').not($enabledFields).not(':disabled');
 112     $fieldsToTemporarilyDisable.attr('disabled', 'disabled');
 113     setTimeout(function (){
 114       $fieldsToTemporarilyDisable.attr('disabled', '');
 115     }, 1000);
 116   },
 117   /**
 118    * Add progress bar support if possible.
 119    */
 120   progressBar: function (event) {
 121     var clickedButton = this;
 122     var $progressId = $(clickedButton).parents('div.form-managed-file').find('input.file-progress');
 123     if ($progressId.size()) {
 124       var originalName = $progressId.attr('name');
 125
 126       // Replace the name with the required identifier.
 127       $progressId.attr('name', originalName.match(/APC_UPLOAD_PROGRESS|UPLOAD_IDENTIFIER/)[0]);
 128
 129       // Restore the original name after the upload begins.
 130       setTimeout(function () {
 131         $progressId.attr('name', originalName);
 132       }, 1000);
 133     }
 134     // Show the progress bar if the upload takes longer than half a second.
 135     setTimeout(function () {
 136       $(clickedButton).parents('div.form-managed-file').find('div.ajax-progress-bar').slideDown();
 137     }, 500);
 138   },
 139   /**
 140    * Open links to files within forms in a new window.
 141    */
 142   openInNewWindow: function (event) {
 143     $(this).attr('target', '_blank');
 144     window.open(this.href, 'filePreview', 'toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=1,width=500,height=550');
 145     return false;
 146   }
 147 };
 148
 149 })(jQuery);