/sites/all/modules/media/js/media.popups.js
JavaScript | 446 lines | 220 code | 81 blank | 145 comment | 19 complexity | 98038365d75b09408e16e1c422e5178f MD5 | raw file
- /**
- * @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) {
- // Get default dialog options.
- var options = Drupal.media.popups.mediaBrowser.getDefaults();
- // Add global, plugin and widget options.
- options.global = $.extend({}, options.global, globalOptions);
- options.plugins = pluginOptions;
- options.widget = $.extend({}, options.widget, widgetOptions);
- // Find the URL of the modal iFrame.
- var browserSrc = options.widget.src;
- if ($.isArray(browserSrc) && browserSrc.length) {
- browserSrc = browserSrc[browserSrc.length - 1];
- }
- // Create an array of parameters to send along to the iFrame.
- var params = {};
- // Add global field widget settings and plugin information.
- $.extend(params, options.global);
- params.plugins = options.plugins;
- // Append the list of parameters to the iFrame URL as query parameters.
- browserSrc += '&' + $.param(params);
- // Create an iFrame with the iFrame URL.
- var mediaIframe = Drupal.media.popups.getPopupIframe(browserSrc, 'mediaBrowser');
- // Attach an onLoad event.
- mediaIframe.bind('load', options, options.widget.onLoad);
- // Create an array of Dialog options.
- var dialogOptions = options.dialog;
- // Setup the dialog buttons.
- var ok = Drupal.t('OK');
- var notSelected = Drupal.t('You have not selected anything!');
- dialogOptions.buttons[ok] = function () {
- // Find the current file selection.
- var selected = this.contentWindow.Drupal.media.browser.selectedMedia;
- // Alert the user if a selection has yet to be made.
- if (selected.length < 1) {
- alert(notSelected);
- return;
- }
- // Select the file.
- onSelect(selected);
- // Close the dialog.
- $(this).dialog('close');
- };
- // Create a jQuery UI dialog with the given options.
- var dialog = mediaIframe.dialog(dialogOptions);
- // Allow the dialog to react to re-sizing, scrolling, etc.
- Drupal.media.popups.sizeDialog(dialog);
- Drupal.media.popups.resizeDialog(dialog);
- Drupal.media.popups.scrollDialog(dialog);
- Drupal.media.popups.overlayDisplace(dialog.parents(".ui-dialog"));
- return mediaIframe;
- };
- /**
- * Retrieves a list of default settings for the media browser.
- *
- * @return
- * An array of default settings.
- */
- Drupal.media.popups.mediaBrowser.getDefaults = function () {
- return {
- global: {
- types: [], // Types to allow, defaults to all.
- enabledPlugins: [] // 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()
- };
- };
- /**
- * Sets up the iFrame buttons.
- */
- Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad = function (e) {
- var options = e.data;
- // Ensure that the iFrame is defined.
- if (typeof this.contentWindow.Drupal.media === 'undefined' || typeof
- this.contentWindow.Drupal.media.browser === 'undefined') {
- return;
- }
- // Check if a selection has been made and press the 'ok' button.
- if (this.contentWindow.Drupal.media.browser.selectedMedia.length > 0) {
- var ok = Drupal.t('OK');
- var ok_func = $(this).dialog('option', 'buttons')[ok];
- ok_func.call(this);
- return;
- }
- };
- /**
- * Finalizes the selection of a file.
- *
- * Alerts the user if a selection has yet to be made, triggers the file
- * selection and closes the modal dialog.
- */
- Drupal.media.popups.mediaBrowser.finalizeSelection = function () {
- // Find the current file selection.
- var selected = this.contentWindow.Drupal.media.browser.selectedMedia;
- // Alert the user if a selection has yet to be made.
- if (selected.length < 1) {
- alert(notSelected);
- return;
- }
- // Select the file.
- onSelect(selected);
- // Close the dialog.
- $(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 :(
- if (typeof defaults.src === 'string' ) {
- defaults.src = defaults.src.replace('-media_id-', mediaFile.fid) + '&fields=' + encodeURIComponent(JSON.stringify(mediaFile.fields));
- }
- else {
- var src = defaults.src.shift();
- defaults.src.unshift(src);
- defaults.src = src.replace('-media_id-', mediaFile.fid) + '&fields=' + encodeURIComponent(JSON.stringify(mediaFile.fields));
- }
- options = $.extend({}, defaults, options);
- // Create an iFrame with the iFrame URL.
- var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaStyleSelector');
- // Attach an onLoad event.
- mediaIframe.bind('load', options, options.onLoad);
- // Create an array of Dialog options.
- var dialogOptions = Drupal.media.popups.getDialogOptions();
- // Setup the dialog buttons.
- var ok = Drupal.t('OK');
- var notSelected = Drupal.t('Very sorry, there was an unknown error embedding media.');
- dialogOptions.buttons[ok] = function () {
- // Find the current file selection.
- var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia();
- formattedMedia.options = $.extend({}, mediaFile.attributes, formattedMedia.options);
- // Alert the user if a selection has yet to be made.
- if (!formattedMedia) {
- alert(notSelected);
- return;
- }
- // Select the file.
- onSelect(formattedMedia);
- // Close the dialog.
- $(this).dialog('close');
- };
- // Create a jQuery UI dialog with the given options.
- var dialog = mediaIframe.dialog(dialogOptions);
- // Allow the dialog to react to re-sizing, scrolling, etc.
- Drupal.media.popups.sizeDialog(dialog);
- Drupal.media.popups.resizeDialog(dialog);
- Drupal.media.popups.scrollDialog(dialog);
- Drupal.media.popups.overlayDisplace(dialog.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 an iFrame with the iFrame URL.
- var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaFieldEditor');
- // Attach an onLoad event.
- mediaIframe.bind('load', options, options.onLoad);
- // Create an array of Dialog options.
- var dialogOptions = Drupal.media.popups.getDialogOptions();
- // Setup the dialog buttons.
- var ok = Drupal.t('OK');
- var notSelected = Drupal.t('Very sorry, there was an unknown error embedding media.');
- dialogOptions.buttons[ok] = function () {
- // Find the current file selection.
- var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia();
- // Alert the user if a selection has yet to be made.
- if (!formattedMedia) {
- alert(notSelected);
- return;
- }
- // Select the file.
- onSelect(formattedMedia);
- // Close the dialog.
- $(this).dialog('close');
- };
- // Create a jQuery UI dialog with the given options.
- var dialog = mediaIframe.dialog(dialogOptions);
- // Allow the dialog to react to re-sizing, scrolling, etc.
- Drupal.media.popups.sizeDialog(dialog);
- Drupal.media.popups.resizeDialog(dialog);
- Drupal.media.popups.scrollDialog(dialog);
- Drupal.media.popups.overlayDisplace(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 {
- title: Drupal.t('Media browser'),
- buttons: {},
- dialogClass: Drupal.settings.media.dialogOptions.dialogclass,
- modal: Drupal.settings.media.dialogOptions.modal,
- draggable: Drupal.settings.media.dialogOptions.draggable,
- resizable: Drupal.settings.media.dialogOptions.resizable,
- minWidth: Drupal.settings.media.dialogOptions.minwidth,
- width: Drupal.settings.media.dialogOptions.width,
- height: Drupal.settings.media.dialogOptions.height,
- position: Drupal.settings.media.dialogOptions.position,
- overlay: {
- backgroundColor: Drupal.settings.media.dialogOptions.overlay.backgroundcolor,
- opacity: Drupal.settings.media.dialogOptions.overlay.opacity
- },
- zIndex: Drupal.settings.media.dialogOptions.zindex,
- close: function (event, ui) {
- var elem = $(event.target);
- var id = elem.attr('id');
- if(id == 'mediaStyleSelector') {
- $(this).dialog("destroy");
- $('#mediaStyleSelector').remove();
- }
- else {
- $(this).dialog("destroy");
- $('#mediaBrowser').remove();
- }
- }
- };
- };
- /**
- * 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: '100%', scrolling: 'auto'};
- var options = $.extend({}, defaults, options);
- return $('<iframe class="media-modal-frame" tabindex="0"/>')
- .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);
- }
- }
- }
- /**
- * Size the dialog when it is first loaded and keep it centered when scrolling.
- *
- * @param jQuery dialogElement
- * The element which has .dialog() attached to it.
- */
- Drupal.media.popups.sizeDialog = function (dialogElement) {
- if (!dialogElement.is(':visible')) {
- return;
- }
- var windowWidth = $(window).width();
- var dialogWidth = windowWidth * 0.8;
- var windowHeight = $(window).height();
- var dialogHeight = windowHeight * 0.8;
- dialogElement.dialog("option", "width", dialogWidth);
- dialogElement.dialog("option", "height", dialogHeight);
- dialogElement.dialog("option", "position", 'center');
- $('.media-modal-frame').width('100%');
- }
- /**
- * Resize the dialog when the window changes.
- *
- * @param jQuery dialogElement
- * The element which has .dialog() attached to it.
- */
- Drupal.media.popups.resizeDialog = function (dialogElement) {
- $(window).resize(function() {
- Drupal.media.popups.sizeDialog(dialogElement);
- });
- }
- /**
- * Keeps the dialog centered when the window is scrolled.
- *
- * @param jQuery dialogElement
- * The element which has .dialog() attached to it.
- */
- Drupal.media.popups.scrollDialog = function (dialogElement) {
- // Keep the dialog window centered when scrolling.
- $(window).scroll(function() {
- if (!dialogElement.is(':visible')) {
- return;
- }
- dialogElement.dialog("option", "position", 'center');
- });
- }
- })(jQuery);