Club Drupal

/**

 * @file

 * Provides JavaScript additions to the media field widget.

 *

 * This file provides support for launching the media browser to select existing

 * files and disabling of other media fields during Ajax uploads (which prevents

 * separate media fields from accidentally attaching files).

 */

(function ($) {

/**

 * Attach behaviors to media element browse fields.

 */

Drupal.behaviors.mediaElement = {

  attach: function (context, settings) {

    if (settings.media && settings.media.elements) {

      $.each(settings.media.elements, function(selector) {

        $(selector, context).once('media-browser-launch', function () {

          var configuration = settings.media.elements[selector];

          // The user has JavaScript enabled, so display the browse field and hide

          // the upload and attach fields which are only used as a fallback in

          // case the user is unable to use the media browser.

          $(selector, context).children('.browse').show();

          $(selector, context).children('.upload').hide();

          $(selector, context).children('.attach').hide();

          $(selector, context).children('.browse').bind('click', {configuration: configuration}, Drupal.media.openBrowser);

        });

      });

    }

  }

};

/**

 * Attach behaviors to the media attach and remove buttons.

 */

Drupal.behaviors.mediaButtons = {

  attach: function (context) {

    $('input.form-submit', context).bind('mousedown', Drupal.media.disableFields);

  },

  detach: function (context) {

    $('input.form-submit', context).unbind('mousedown', Drupal.media.disableFields);

  }

};

/**

 * Media attach utility functions.

 */

Drupal.media = Drupal.media || {};

/**

 * Opens the media browser with the element's configuration settings.

 */

Drupal.media.openBrowser = function (event) {

  var clickedButton = this;

  var configuration = event.data.configuration.global;

  // Find the file ID, preview and upload fields.

  var fidField = $(this).siblings('.fid');

  var previewField = $(this).siblings('.preview');

  var uploadField = $(this).siblings('.upload');

  // Find the edit and remove buttons.

  var editButton = $(this).siblings('.edit');

  var removeButton = $(this).siblings('.remove');

  // Launch the media browser.

  Drupal.media.popups.mediaBrowser(function (mediaFiles) {

    // Ensure that there was at least one media file selected.

    if (mediaFiles.length < 0) {

      return;

    }

    // Grab the first of the selected media files.

    var mediaFile = mediaFiles[0];

    // Set the value of the hidden file ID field and trigger a change.

    uploadField.val(mediaFile.fid);

    uploadField.trigger('change');

    // Find the attach button and automatically trigger it.

    var attachButton = uploadField.siblings('.attach');

    attachButton.trigger('mousedown');

    // Display a preview of the file using the selected media file's display.

    previewField.html(mediaFile.preview);

  }, configuration);

  return false;

};

/**

 * Prevent media browsing when using buttons not intended to browse.

 */

Drupal.media.disableFields = function (event) {

  var clickedButton = this;

  // Only disable browse fields for Ajax buttons.

  if (!$(clickedButton).hasClass('ajax-processed')) {

    return;

  }

  // Check if we're working with an "Attach" button.

  var $enabledFields = [];

  if ($(this).closest('div.media-widget').length > 0) {

    $enabledFields = $(this).closest('div.media-widget').find('input.attach');

  }

  // Temporarily disable attach fields other than the one we're currently

  // working with. Filter out fields that are already disabled so that they

  // do not get enabled when we re-enable these fields at the end of behavior

  // processing. Re-enable in a setTimeout set to a relatively short amount

  // of time (1 second). All the other mousedown handlers (like Drupal's Ajax

  // behaviors) are excuted before any timeout functions are called, so we

  // don't have to worry about the fields being re-enabled too soon.

  // @todo If the previous sentence is true, why not set the timeout to 0?

  var $fieldsToTemporarilyDisable = $('div.media-widget input.attach').not($enabledFields).not(':disabled');

  $fieldsToTemporarilyDisable.attr('disabled', 'disabled');

  setTimeout(function (){

    $fieldsToTemporarilyDisable.attr('disabled', false);

  }, 1000);

};

})(jQuery);