root / drupal7 / sites / all / modules / media / js / media.popups.js @ 01f36513
1 |
|
---|---|
2 |
/**
|
3 |
* @file: Popup dialog interfaces for the media project.
|
4 |
*
|
5 |
* Drupal.media.popups.mediaBrowser
|
6 |
* Launches the media browser which allows users to pick a piece of media.
|
7 |
*
|
8 |
* Drupal.media.popups.mediaStyleSelector
|
9 |
* Launches the style selection form where the user can choose what
|
10 |
* format/style they want their media in.
|
11 |
*/
|
12 |
|
13 |
(function ($) { |
14 |
namespace('Drupal.media.popups');
|
15 |
|
16 |
/**
|
17 |
* Media browser popup. Creates a media browser dialog.
|
18 |
*
|
19 |
* @param {function}
|
20 |
* onSelect Callback for when dialog is closed, received (Array media, Object
|
21 |
* extra);
|
22 |
* @param {Object}
|
23 |
* globalOptions Global options that will get passed upon initialization of
|
24 |
* the browser. @see Drupal.media.popups.mediaBrowser.getDefaults();
|
25 |
* @param {Object}
|
26 |
* pluginOptions Options for specific plugins. These are passed to the plugin
|
27 |
* upon initialization. If a function is passed here as a callback, it is
|
28 |
* obviously not passed, but is accessible to the plugin in
|
29 |
* Drupal.settings.variables. Example:
|
30 |
* pluginOptions = {library: {url_include_patterns:'/foo/bar'}};
|
31 |
* @param {Object}
|
32 |
* widgetOptions Options controlling the appearance and behavior of the modal
|
33 |
* dialog. @see Drupal.media.popups.mediaBrowser.getDefaults();
|
34 |
*/
|
35 |
Drupal.media.popups.mediaBrowser = function (onSelect, globalOptions, pluginOptions, widgetOptions) { |
36 |
// Get default dialog options.
|
37 |
var options = Drupal.media.popups.mediaBrowser.getDefaults();
|
38 |
|
39 |
// Add global, plugin and widget options.
|
40 |
options.global = $.extend({}, options.global, globalOptions);
|
41 |
options.plugins = pluginOptions; |
42 |
options.widget = $.extend({}, options.widget, widgetOptions);
|
43 |
|
44 |
// Find the URL of the modal iFrame.
|
45 |
var browserSrc = options.widget.src;
|
46 |
|
47 |
if ($.isArray(browserSrc) && browserSrc.length) { |
48 |
browserSrc = browserSrc[browserSrc.length - 1];
|
49 |
} |
50 |
|
51 |
// Create an array of parameters to send along to the iFrame.
|
52 |
var params = {};
|
53 |
|
54 |
// Add global field widget settings and plugin information.
|
55 |
$.extend(params, options.global);
|
56 |
params.plugins = options.plugins; |
57 |
|
58 |
// Append the list of parameters to the iFrame URL as query parameters.
|
59 |
browserSrc += '&' + $.param(params); |
60 |
|
61 |
// Create an iFrame with the iFrame URL.
|
62 |
var mediaIframe = Drupal.media.popups.getPopupIframe(browserSrc, 'mediaBrowser'); |
63 |
|
64 |
// Attach an onLoad event.
|
65 |
mediaIframe.bind('load', options, options.widget.onLoad);
|
66 |
|
67 |
// Create an array of Dialog options.
|
68 |
var dialogOptions = options.dialog;
|
69 |
|
70 |
// Setup the dialog buttons.
|
71 |
var ok = Drupal.t('OK'); |
72 |
var notSelected = Drupal.t('You have not selected anything!'); |
73 |
|
74 |
dialogOptions.buttons[ok] = function () {
|
75 |
// Find the current file selection.
|
76 |
var selected = this.contentWindow.Drupal.media.browser.selectedMedia; |
77 |
|
78 |
// Alert the user if a selection has yet to be made.
|
79 |
if (selected.length < 1) { |
80 |
alert(notSelected); |
81 |
|
82 |
return;
|
83 |
} |
84 |
|
85 |
// Select the file.
|
86 |
onSelect(selected); |
87 |
|
88 |
// Close the dialog.
|
89 |
$(this).dialog('close'); |
90 |
}; |
91 |
|
92 |
// Create a jQuery UI dialog with the given options.
|
93 |
var dialog = mediaIframe.dialog(dialogOptions);
|
94 |
|
95 |
// Allow the dialog to react to re-sizing, scrolling, etc.
|
96 |
Drupal.media.popups.sizeDialog(dialog); |
97 |
Drupal.media.popups.resizeDialog(dialog); |
98 |
Drupal.media.popups.scrollDialog(dialog); |
99 |
Drupal.media.popups.overlayDisplace(dialog.parents(".ui-dialog"));
|
100 |
|
101 |
return mediaIframe;
|
102 |
}; |
103 |
|
104 |
/**
|
105 |
* Retrieves a list of default settings for the media browser.
|
106 |
*
|
107 |
* @return
|
108 |
* An array of default settings.
|
109 |
*/
|
110 |
Drupal.media.popups.mediaBrowser.getDefaults = function () { |
111 |
return {
|
112 |
global: {
|
113 |
types: [], // Types to allow, defaults to all. |
114 |
enabledPlugins: [] // If provided, a list of plugins which should be enabled. |
115 |
}, |
116 |
widget: { // Settings for the actual iFrame which is launched. |
117 |
src: Drupal.settings.media.browserUrl, // Src of the media browser (if you want to totally override it) |
118 |
onLoad: Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad // Onload function when iFrame loads. |
119 |
}, |
120 |
dialog: Drupal.media.popups.getDialogOptions()
|
121 |
}; |
122 |
}; |
123 |
|
124 |
/**
|
125 |
* Sets up the iFrame buttons.
|
126 |
*/
|
127 |
Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad = function (e) { |
128 |
var options = e.data;
|
129 |
|
130 |
// Ensure that the iFrame is defined.
|
131 |
if (typeof this.contentWindow.Drupal.media === 'undefined' || typeof |
132 |
this.contentWindow.Drupal.media.browser === 'undefined') { |
133 |
return;
|
134 |
} |
135 |
|
136 |
// Check if a selection has been made and press the 'ok' button.
|
137 |
if (this.contentWindow.Drupal.media.browser.selectedMedia.length > 0) { |
138 |
var ok = Drupal.t('OK'); |
139 |
var ok_func = $(this).dialog('option', 'buttons')[ok]; |
140 |
|
141 |
ok_func.call(this);
|
142 |
|
143 |
return;
|
144 |
} |
145 |
}; |
146 |
|
147 |
/**
|
148 |
* Finalizes the selection of a file.
|
149 |
*
|
150 |
* Alerts the user if a selection has yet to be made, triggers the file
|
151 |
* selection and closes the modal dialog.
|
152 |
*/
|
153 |
Drupal.media.popups.mediaBrowser.finalizeSelection = function () { |
154 |
// Find the current file selection.
|
155 |
var selected = this.contentWindow.Drupal.media.browser.selectedMedia; |
156 |
|
157 |
// Alert the user if a selection has yet to be made.
|
158 |
if (selected.length < 1) { |
159 |
alert(notSelected); |
160 |
|
161 |
return;
|
162 |
} |
163 |
|
164 |
// Select the file.
|
165 |
onSelect(selected); |
166 |
|
167 |
// Close the dialog.
|
168 |
$(this).dialog('close'); |
169 |
}; |
170 |
|
171 |
/**
|
172 |
* Style chooser Popup. Creates a dialog for a user to choose a media style.
|
173 |
*
|
174 |
* @param mediaFile
|
175 |
* The mediaFile you are requesting this formatting form for.
|
176 |
* @todo: should this be fid? That's actually all we need now.
|
177 |
*
|
178 |
* @param Function
|
179 |
* onSubmit Function to be called when the user chooses a media style. Takes
|
180 |
* one parameter (Object formattedMedia).
|
181 |
*
|
182 |
* @param Object
|
183 |
* options Options for the mediaStyleChooser dialog.
|
184 |
*/
|
185 |
Drupal.media.popups.mediaStyleSelector = function (mediaFile, onSelect, options) { |
186 |
var defaults = Drupal.media.popups.mediaStyleSelector.getDefaults();
|
187 |
|
188 |
// @todo: remove this awful hack :(
|
189 |
if (typeof defaults.src === 'string' ) { |
190 |
defaults.src = defaults.src.replace('-media_id-', mediaFile.fid) + '&fields=' + encodeURIComponent(JSON.stringify(mediaFile.fields)); |
191 |
} |
192 |
else {
|
193 |
var src = defaults.src.shift();
|
194 |
|
195 |
defaults.src.unshift(src); |
196 |
defaults.src = src.replace('-media_id-', mediaFile.fid) + '&fields=' + encodeURIComponent(JSON.stringify(mediaFile.fields)); |
197 |
} |
198 |
|
199 |
options = $.extend({}, defaults, options);
|
200 |
|
201 |
// Create an iFrame with the iFrame URL.
|
202 |
var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaStyleSelector'); |
203 |
|
204 |
// Attach an onLoad event.
|
205 |
mediaIframe.bind('load', options, options.onLoad);
|
206 |
|
207 |
// Create an array of Dialog options.
|
208 |
var dialogOptions = Drupal.media.popups.getDialogOptions();
|
209 |
|
210 |
// Setup the dialog buttons.
|
211 |
var ok = Drupal.t('OK'); |
212 |
var notSelected = Drupal.t('Very sorry, there was an unknown error embedding media.'); |
213 |
|
214 |
dialogOptions.buttons[ok] = function () {
|
215 |
// Find the current file selection.
|
216 |
var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia(); |
217 |
formattedMedia.options = $.extend({}, mediaFile.attributes, formattedMedia.options);
|
218 |
|
219 |
// Alert the user if a selection has yet to be made.
|
220 |
if (!formattedMedia) {
|
221 |
alert(notSelected); |
222 |
|
223 |
return;
|
224 |
} |
225 |
|
226 |
// Select the file.
|
227 |
onSelect(formattedMedia); |
228 |
|
229 |
// Close the dialog.
|
230 |
$(this).dialog('close'); |
231 |
}; |
232 |
|
233 |
// Create a jQuery UI dialog with the given options.
|
234 |
var dialog = mediaIframe.dialog(dialogOptions);
|
235 |
|
236 |
// Allow the dialog to react to re-sizing, scrolling, etc.
|
237 |
Drupal.media.popups.sizeDialog(dialog); |
238 |
Drupal.media.popups.resizeDialog(dialog); |
239 |
Drupal.media.popups.scrollDialog(dialog); |
240 |
Drupal.media.popups.overlayDisplace(dialog.parents(".ui-dialog"));
|
241 |
|
242 |
return mediaIframe;
|
243 |
}; |
244 |
|
245 |
Drupal.media.popups.mediaStyleSelector.mediaBrowserOnLoad = function (e) { |
246 |
}; |
247 |
|
248 |
Drupal.media.popups.mediaStyleSelector.getDefaults = function () { |
249 |
return {
|
250 |
src: Drupal.settings.media.styleSelectorUrl,
|
251 |
onLoad: Drupal.media.popups.mediaStyleSelector.mediaBrowserOnLoad
|
252 |
}; |
253 |
}; |
254 |
|
255 |
/**
|
256 |
* Style chooser Popup. Creates a dialog for a user to choose a media style.
|
257 |
*
|
258 |
* @param mediaFile
|
259 |
* The mediaFile you are requesting this formatting form for.
|
260 |
* @todo: should this be fid? That's actually all we need now.
|
261 |
*
|
262 |
* @param Function
|
263 |
* onSubmit Function to be called when the user chooses a media style. Takes
|
264 |
* one parameter (Object formattedMedia).
|
265 |
*
|
266 |
* @param Object
|
267 |
* options Options for the mediaStyleChooser dialog.
|
268 |
*/
|
269 |
Drupal.media.popups.mediaFieldEditor = function (fid, onSelect, options) { |
270 |
var defaults = Drupal.media.popups.mediaFieldEditor.getDefaults();
|
271 |
|
272 |
// @todo: remove this awful hack :(
|
273 |
defaults.src = defaults.src.replace('-media_id-', fid);
|
274 |
options = $.extend({}, defaults, options);
|
275 |
|
276 |
// Create an iFrame with the iFrame URL.
|
277 |
var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaFieldEditor'); |
278 |
|
279 |
// Attach an onLoad event.
|
280 |
mediaIframe.bind('load', options, options.onLoad);
|
281 |
|
282 |
// Create an array of Dialog options.
|
283 |
var dialogOptions = Drupal.media.popups.getDialogOptions();
|
284 |
|
285 |
// Setup the dialog buttons.
|
286 |
var ok = Drupal.t('OK'); |
287 |
var notSelected = Drupal.t('Very sorry, there was an unknown error embedding media.'); |
288 |
|
289 |
dialogOptions.buttons[ok] = function () {
|
290 |
// Find the current file selection.
|
291 |
var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia(); |
292 |
|
293 |
// Alert the user if a selection has yet to be made.
|
294 |
if (!formattedMedia) {
|
295 |
alert(notSelected); |
296 |
|
297 |
return;
|
298 |
} |
299 |
|
300 |
// Select the file.
|
301 |
onSelect(formattedMedia); |
302 |
|
303 |
// Close the dialog.
|
304 |
$(this).dialog('close'); |
305 |
}; |
306 |
|
307 |
// Create a jQuery UI dialog with the given options.
|
308 |
var dialog = mediaIframe.dialog(dialogOptions);
|
309 |
|
310 |
// Allow the dialog to react to re-sizing, scrolling, etc.
|
311 |
Drupal.media.popups.sizeDialog(dialog); |
312 |
Drupal.media.popups.resizeDialog(dialog); |
313 |
Drupal.media.popups.scrollDialog(dialog); |
314 |
Drupal.media.popups.overlayDisplace(dialog); |
315 |
|
316 |
return mediaIframe;
|
317 |
}; |
318 |
|
319 |
Drupal.media.popups.mediaFieldEditor.mediaBrowserOnLoad = function (e) { |
320 |
|
321 |
}; |
322 |
|
323 |
Drupal.media.popups.mediaFieldEditor.getDefaults = function () { |
324 |
return {
|
325 |
// @todo: do this for real
|
326 |
src: '/media/-media_id-/edit?render=media-popup', |
327 |
onLoad: Drupal.media.popups.mediaFieldEditor.mediaBrowserOnLoad
|
328 |
}; |
329 |
}; |
330 |
|
331 |
/**
|
332 |
* Generic functions to both the media-browser and style selector.
|
333 |
*/
|
334 |
|
335 |
/**
|
336 |
* Returns the commonly used options for the dialog.
|
337 |
*/
|
338 |
Drupal.media.popups.getDialogOptions = function () { |
339 |
return {
|
340 |
title: Drupal.t('Media browser'), |
341 |
buttons: {},
|
342 |
dialogClass: Drupal.settings.media.dialogOptions.dialogclass,
|
343 |
modal: Drupal.settings.media.dialogOptions.modal,
|
344 |
draggable: Drupal.settings.media.dialogOptions.draggable,
|
345 |
resizable: Drupal.settings.media.dialogOptions.resizable,
|
346 |
minWidth: Drupal.settings.media.dialogOptions.minwidth,
|
347 |
width: Drupal.settings.media.dialogOptions.width,
|
348 |
height: Drupal.settings.media.dialogOptions.height,
|
349 |
position: Drupal.settings.media.dialogOptions.position,
|
350 |
overlay: {
|
351 |
backgroundColor: Drupal.settings.media.dialogOptions.overlay.backgroundcolor,
|
352 |
opacity: Drupal.settings.media.dialogOptions.overlay.opacity
|
353 |
}, |
354 |
zIndex: Drupal.settings.media.dialogOptions.zindex,
|
355 |
close: function (event, ui) { |
356 |
var elem = $(event.target); |
357 |
var id = elem.attr('id'); |
358 |
if(id == 'mediaStyleSelector') { |
359 |
$(this).dialog("destroy"); |
360 |
$('#mediaStyleSelector').remove(); |
361 |
} |
362 |
else {
|
363 |
$(this).dialog("destroy"); |
364 |
$('#mediaBrowser').remove(); |
365 |
} |
366 |
} |
367 |
}; |
368 |
}; |
369 |
|
370 |
/**
|
371 |
* Get an iframe to serve as the dialog's contents. Common to both plugins.
|
372 |
*/
|
373 |
Drupal.media.popups.getPopupIframe = function (src, id, options) { |
374 |
var defaults = {width: '100%', scrolling: 'auto'}; |
375 |
var options = $.extend({}, defaults, options); |
376 |
|
377 |
return $('<iframe class="media-modal-frame" tabindex="0"/>') |
378 |
.attr('src', src)
|
379 |
.attr('width', options.width)
|
380 |
.attr('id', id)
|
381 |
.attr('scrolling', options.scrolling);
|
382 |
}; |
383 |
|
384 |
Drupal.media.popups.overlayDisplace = function (dialog) { |
385 |
if (parent.window.Drupal.overlay && jQuery.isFunction(parent.window.Drupal.overlay.getDisplacement)) {
|
386 |
var overlayDisplace = parent.window.Drupal.overlay.getDisplacement('top'); |
387 |
|
388 |
if (dialog.offset().top < overlayDisplace) {
|
389 |
dialog.css('top', overlayDisplace);
|
390 |
} |
391 |
} |
392 |
} |
393 |
|
394 |
/**
|
395 |
* Size the dialog when it is first loaded and keep it centered when scrolling.
|
396 |
*
|
397 |
* @param jQuery dialogElement
|
398 |
* The element which has .dialog() attached to it.
|
399 |
*/
|
400 |
Drupal.media.popups.sizeDialog = function (dialogElement) { |
401 |
if (!dialogElement.is(':visible')) { |
402 |
return;
|
403 |
} |
404 |
|
405 |
var windowWidth = $(window).width(); |
406 |
var dialogWidth = windowWidth * 0.8; |
407 |
var windowHeight = $(window).height(); |
408 |
var dialogHeight = windowHeight * 0.8; |
409 |
|
410 |
dialogElement.dialog("option", "width", dialogWidth); |
411 |
dialogElement.dialog("option", "height", dialogHeight); |
412 |
dialogElement.dialog("option", "position", 'center'); |
413 |
|
414 |
$('.media-modal-frame').width('100%'); |
415 |
} |
416 |
|
417 |
/**
|
418 |
* Resize the dialog when the window changes.
|
419 |
*
|
420 |
* @param jQuery dialogElement
|
421 |
* The element which has .dialog() attached to it.
|
422 |
*/
|
423 |
Drupal.media.popups.resizeDialog = function (dialogElement) { |
424 |
$(window).resize(function() { |
425 |
Drupal.media.popups.sizeDialog(dialogElement); |
426 |
}); |
427 |
} |
428 |
|
429 |
/**
|
430 |
* Keeps the dialog centered when the window is scrolled.
|
431 |
*
|
432 |
* @param jQuery dialogElement
|
433 |
* The element which has .dialog() attached to it.
|
434 |
*/
|
435 |
Drupal.media.popups.scrollDialog = function (dialogElement) { |
436 |
// Keep the dialog window centered when scrolling.
|
437 |
$(window).scroll(function() { |
438 |
if (!dialogElement.is(':visible')) { |
439 |
return;
|
440 |
} |
441 |
|
442 |
dialogElement.dialog("option", "position", 'center'); |
443 |
}); |
444 |
} |
445 |
|
446 |
})(jQuery); |