Club Drupal

/**

 * @file: Popup dialog interfaces for the media project.

 *

 * Drupal.media.popups.mediaBrowser

 *   Launches the media browser which allows users to pick a piece of media.

 *

 * Drupal.media.popups.mediaStyleSelector

 *  Launches the style selection form where the user can choose

 *  what format / style they want their media in.

 *

 */

(function ($) {

namespace('Drupal.media.popups');

/**

 * Media browser popup. Creates a media browser dialog.

 *

 * @param {function}

 *          onSelect Callback for when dialog is closed, received (Array

 *          media, Object extra);

 * @param {Object}

 *          globalOptions Global options that will get passed upon initialization of the browser.

 *          @see Drupal.media.popups.mediaBrowser.getDefaults();

 *

 * @param {Object}

 *          pluginOptions Options for specific plugins. These are passed

 *          to the plugin upon initialization.  If a function is passed here as

 *          a callback, it is obviously not passed, but is accessible to the plugin

 *          in Drupal.settings.variables.

 *

 *          Example

 *          pluginOptions = {library: {url_include_patterns:'/foo/bar'}};

 *

 * @param {Object}

 *          widgetOptions Options controlling the appearance and behavior of the

 *          modal dialog.

 *          @see Drupal.media.popups.mediaBrowser.getDefaults();

 */

Drupal.media.popups.mediaBrowser = function (onSelect, globalOptions, pluginOptions, widgetOptions) {

  var options = Drupal.media.popups.mediaBrowser.getDefaults();

  options.global = $.extend({}, options.global, globalOptions);

  options.plugins = pluginOptions;

  options.widget = $.extend({}, options.widget, widgetOptions);

  // Create it as a modal window.

  var browserSrc = options.widget.src;

  if ($.isArray(browserSrc) && browserSrc.length) {

    browserSrc = browserSrc[browserSrc.length - 1];

  }

  // Params to send along to the iframe.  WIP.

  var params = {};

  $.extend(params, options.global);

  params.plugins = options.plugins;

  browserSrc += '&' + $.param(params);

  var mediaIframe = Drupal.media.popups.getPopupIframe(browserSrc, 'mediaBrowser');

  // Attach the onLoad event

  mediaIframe.bind('load', options, options.widget.onLoad);

  /**

   * Setting up the modal dialog

   */

  var ok = 'OK';

  var cancel = 'Cancel';

  var notSelected = 'You have not selected anything!';

  if (Drupal && Drupal.t) {

    ok = Drupal.t(ok);

    cancel = Drupal.t(cancel);

    notSelected = Drupal.t(notSelected);

  }

  // @todo: let some options come through here. Currently can't be changed.

  var dialogOptions = options.dialog;

  dialogOptions.buttons[ok] = function () {

    var selected = this.contentWindow.Drupal.media.browser.selectedMedia;

    if (selected.length < 1) {

      alert(notSelected);

      return;

    }

    onSelect(selected);

    $(this).dialog("close");

  };

  dialogOptions.buttons[cancel] = function () {

    $(this).dialog("close");

  };

  Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));

  // Remove the title bar.

  mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();

  Drupal.media.popups.overlayDisplace(mediaIframe.parents(".ui-dialog"));

  return mediaIframe;

};

Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad = function (e) {

  var options = e.data;

  if (this.contentWindow.Drupal.media == undefined) return;

  if (this.contentWindow.Drupal.media.browser.selectedMedia.length > 0) {

    var ok = (Drupal && Drupal.t) ? Drupal.t('OK') : 'OK';

    var ok_func = $(this).dialog('option', 'buttons')[ok];

    ok_func.call(this);

    return;

  }

};

Drupal.media.popups.mediaBrowser.getDefaults = function () {

  return {

    global: {

      types: [], // Types to allow, defaults to all.

      activePlugins: [] // If provided, a list of plugins which should be enabled.

    },

    widget: { // Settings for the actual iFrame which is launched.

      src: Drupal.settings.media.browserUrl, // Src of the media browser (if you want to totally override it)

      onLoad: Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad // Onload function when iFrame loads.

    },

    dialog: Drupal.media.popups.getDialogOptions()

  };

};

Drupal.media.popups.mediaBrowser.finalizeSelection = function () {

  var selected = this.contentWindow.Drupal.media.browser.selectedMedia;

  if (selected.length < 1) {

    alert(notSelected);

    return;

  }

  onSelect(selected);

  $(this).dialog("close");

}

/**

 * Style chooser Popup. Creates a dialog for a user to choose a media style.

 *

 * @param mediaFile

 *          The mediaFile you are requesting this formatting form for.

 *          @todo: should this be fid?  That's actually all we need now.

 *

 * @param Function

 *          onSubmit Function to be called when the user chooses a media

 *          style. Takes one parameter (Object formattedMedia).

 *

 * @param Object

 *          options Options for the mediaStyleChooser dialog.

 */

Drupal.media.popups.mediaStyleSelector = function (mediaFile, onSelect, options) {

  var defaults = Drupal.media.popups.mediaStyleSelector.getDefaults();

  // @todo: remove this awful hack :(

  defaults.src = defaults.src.replace('-media_id-', mediaFile.fid) + '&fields=' + JSON.stringify(mediaFile.fields);

  options = $.extend({}, defaults, options);

  // Create it as a modal window.

  var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaStyleSelector');

  // Attach the onLoad event

  mediaIframe.bind('load', options, options.onLoad);

  /**

   * Set up the button text

   */

  var ok = 'OK';

  var cancel = 'Cancel';

  var notSelected = 'Very sorry, there was an unknown error embedding media.';

  if (Drupal && Drupal.t) {

    ok = Drupal.t(ok);

    cancel = Drupal.t(cancel);

    notSelected = Drupal.t(notSelected);

  }

  // @todo: let some options come through here. Currently can't be changed.

  var dialogOptions = Drupal.media.popups.getDialogOptions();

  dialogOptions.buttons[ok] = function () {

    var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia();

    if (!formattedMedia) {

      alert(notSelected);

      return;

    }

    onSelect(formattedMedia);

    $(this).dialog("close");

  };

  dialogOptions.buttons[cancel] = function () {

    $(this).dialog("close");

  };

  Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));

  // Remove the title bar.

  mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();

  Drupal.media.popups.overlayDisplace(mediaIframe.parents(".ui-dialog"));

  return mediaIframe;

};

Drupal.media.popups.mediaStyleSelector.mediaBrowserOnLoad = function (e) {

};

Drupal.media.popups.mediaStyleSelector.getDefaults = function () {

  return {

    src: Drupal.settings.media.styleSelectorUrl,

    onLoad: Drupal.media.popups.mediaStyleSelector.mediaBrowserOnLoad

  };

};

/**

 * Style chooser Popup. Creates a dialog for a user to choose a media style.

 *

 * @param mediaFile

 *          The mediaFile you are requesting this formatting form for.

 *          @todo: should this be fid?  That's actually all we need now.

 *

 * @param Function

 *          onSubmit Function to be called when the user chooses a media

 *          style. Takes one parameter (Object formattedMedia).

 *

 * @param Object

 *          options Options for the mediaStyleChooser dialog.

 */

Drupal.media.popups.mediaFieldEditor = function (fid, onSelect, options) {

  var defaults = Drupal.media.popups.mediaFieldEditor.getDefaults();

  // @todo: remove this awful hack :(

  defaults.src = defaults.src.replace('-media_id-', fid);

  options = $.extend({}, defaults, options);

  // Create it as a modal window.

  var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaFieldEditor');

  // Attach the onLoad event

  // @TODO - This event is firing too early in IE on Windows 7,

  // - so the height being calculated is too short for the content.

  mediaIframe.bind('load', options, options.onLoad);

  /**

   * Set up the button text

   */

  var ok = 'OK';

  var cancel = 'Cancel';

  var notSelected = 'Very sorry, there was an unknown error embedding media.';

  if (Drupal && Drupal.t) {

    ok = Drupal.t(ok);

    cancel = Drupal.t(cancel);

    notSelected = Drupal.t(notSelected);

  }

  // @todo: let some options come through here. Currently can't be changed.

  var dialogOptions = Drupal.media.popups.getDialogOptions();

  dialogOptions.buttons[ok] = function () {

    var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia();

    if (!formattedMedia) {

      alert(notSelected);

      return;

    }

    onSelect(formattedMedia);

    $(this).dialog("close");

  };

  dialogOptions.buttons[cancel] = function () {

    $(this).dialog("close");

  };

  Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));

  // Remove the title bar.

  mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();

  Drupal.media.popups.overlayDisplace(mediaIframe.parents(".ui-dialog"));

  return mediaIframe;

};

Drupal.media.popups.mediaFieldEditor.mediaBrowserOnLoad = function (e) {

};

Drupal.media.popups.mediaFieldEditor.getDefaults = function () {

  return {

    // @todo: do this for real

    src: '/media/-media_id-/edit?render=media-popup',

    onLoad: Drupal.media.popups.mediaFieldEditor.mediaBrowserOnLoad

  };

};

/**

 * Generic functions to both the media-browser and style selector

 */

/**

 * Returns the commonly used options for the dialog.

 */

Drupal.media.popups.getDialogOptions = function () {

  return {

    buttons: {},

    dialogClass: 'media-wrapper',

    modal: true,

    draggable: false,

    resizable: false,

    minWidth: 500,

    width: 670,

    height: 280,

    position: 'center',

    overlay: {

      backgroundColor: '#000000',

      opacity: 0.4

    },

    zIndex: 10000,

    close: function (event, ui) {

      $(event.target).remove();

    }

  };

};

/**

 * Created padding on a dialog

 *

 * @param jQuery dialogElement

 *  The element which has .dialog() attached to it.

 */

Drupal.media.popups.setDialogPadding = function (dialogElement) {

  // @TODO: Perhaps remove this hardcoded reference to height.

  // - It's included to make IE on Windows 7 display the dialog without

  //   collapsing. 550 is the height that displays all of the tab panes

  //   within the Add Media overlay. This is either a bug in the jQuery

  //   UI library, a bug in IE on Windows 7 or a bug in the way the

  //   dialog is instantiated. Or a combo of the three.

  //   All browsers except IE on Win7 ignore these defaults and adjust

  //   the height of the iframe correctly to match the content in the panes

  dialogElement.height(dialogElement.dialog('option', 'height'));

  dialogElement.width(dialogElement.dialog('option', 'width'));

};

/**

 * Get an iframe to serve as the dialog's contents. Common to both plugins.

 */

Drupal.media.popups.getPopupIframe = function (src, id, options) {

  var defaults = {width: '800px', scrolling: 'auto'};

  var options = $.extend({}, defaults, options);

  return $('<iframe class="media-modal-frame"/>')

  .attr('src', src)

  .attr('width', options.width)

  .attr('id', id)

  .attr('scrolling', options.scrolling);

};

Drupal.media.popups.overlayDisplace = function (dialog) {

  if (parent.window.Drupal.overlay && jQuery.isFunction(parent.window.Drupal.overlay.getDisplacement)) {

    var overlayDisplace = parent.window.Drupal.overlay.getDisplacement('top');

    if (dialog.offset().top < overlayDisplace) {

      dialog.css('top', overlayDisplace);

    }

  }

}

})(jQuery);