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 upload fields.

 */

Drupal.behaviors.mediaElement = {

  attach: function (context, settings) {

    var $context = $(context);

    var elements;

    function initMediaBrowser(selector) {

      $context.find(selector)

        .once('media-browser-launch')

        .siblings('.browse').show()

        .siblings('.upload').hide()

        .siblings('.attach').hide()

        .siblings('.browse').bind('click', {configuration: settings.media.elements[selector]}, Drupal.media.openBrowser);

    }

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

      elements = settings.media.elements;

      Object.keys(elements).forEach(initMediaBrowser);

    }

  },

  detach: function (context, settings, trigger) {

    var $context = $(context);

    var elements;

    function removeMediaBrowser(selector) {

      $context.find(selector)

        .removeOnce('media-browser-launch')

        .siblings('.browse').hide()

        .siblings('.upload').show()

        .siblings('.attach').show()

        .siblings('.browse').unbind('click', Drupal.media.openBrowser);

    }

    if (trigger === 'unload' && settings.media && settings.media.elements) {

      elements = settings.media.elements;

      Object.keys(elements).forEach(removeMediaBrowser);

    }

  }

};

/**

 * 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;

    }

    var mediaFileValue;

    // Process the value based on multiselect.

    if (mediaFiles.length > 1) {

      // Reverse array to have files in correct order

      mediaFiles.reverse();

      // Concatenate the array into a comma separated string.

      mediaFileValue = mediaFiles.map(function(file) {

        return file.fid;

      }).join(',');

    }

    else {

      // Grab the first of the selected media files.

      mediaFileValue = mediaFiles[0].fid;

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

      previewField.html(mediaFileValue.preview);

    }

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

    uploadField.val(mediaFileValue);

    uploadField.trigger('change');

    // Find the attach button and automatically trigger it.

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

    attachButton.trigger('mousedown');

  }, 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);