first import
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,358 @@
|
||||
|
||||
/**
|
||||
* @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);
|
||||
Reference in New Issue
Block a user