359 lines
11 KiB
JavaScript
359 lines
11 KiB
JavaScript
|
|
/**
|
|
* @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("destroy");
|
|
$(this).remove();
|
|
};
|
|
|
|
dialogOptions.buttons[cancel] = function () {
|
|
$(this).dialog("destroy");
|
|
$(this).remove();
|
|
};
|
|
|
|
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.browser.selectedMedia.length > 0) {
|
|
var ok = $(this).dialog('option', 'buttons')['OK'];
|
|
ok.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("destroy");
|
|
$(this).remove();
|
|
}
|
|
|
|
/**
|
|
* 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);
|
|
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("destroy");
|
|
$(this).remove();
|
|
};
|
|
|
|
dialogOptions.buttons[cancel] = function () {
|
|
$(this).dialog("destroy");
|
|
$(this).remove();
|
|
};
|
|
|
|
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 () {
|
|
alert('hell yeah');
|
|
return "poo";
|
|
|
|
var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia();
|
|
if (!formattedMedia) {
|
|
alert(notSelected);
|
|
return;
|
|
}
|
|
onSelect(formattedMedia);
|
|
$(this).dialog("destroy");
|
|
$(this).remove();
|
|
};
|
|
|
|
dialogOptions.buttons[cancel] = function () {
|
|
$(this).dialog("destroy");
|
|
$(this).remove();
|
|
};
|
|
|
|
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: 600,
|
|
width: 800,
|
|
height: 550,
|
|
position: 'center',
|
|
overlay: {
|
|
backgroundColor: '#000000',
|
|
opacity: 0.4
|
|
}
|
|
};
|
|
};
|
|
|
|
/**
|
|
* 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: 'no'};
|
|
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) {
|
|
var overlayDisplace = parent.window.Drupal.overlay.getDisplacement('top');
|
|
if (dialog.offset().top < overlayDisplace) {
|
|
dialog.css('top', overlayDisplace);
|
|
}
|
|
}
|
|
}
|
|
|
|
})(jQuery);
|