root / drupal7 / sites / all / modules / media / js / media.popups.js @ 2cf41c1d
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 |
activePlugins: [] // 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 (this.contentWindow.Drupal.media == undefined) { |
132 |
return;
|
133 |
} |
134 |
|
135 |
// Check if a selection has been made and press the 'ok' button.
|
136 |
if (this.contentWindow.Drupal.media.browser.selectedMedia.length > 0) { |
137 |
var ok = Drupal.t('OK'); |
138 |
var ok_func = $(this).dialog('option', 'buttons')[ok]; |
139 |
|
140 |
ok_func.call(this);
|
141 |
|
142 |
return;
|
143 |
} |
144 |
}; |
145 |
|
146 |
/**
|
147 |
* Finalizes the selection of a file.
|
148 |
*
|
149 |
* Alerts the user if a selection has yet to be made, triggers the file
|
150 |
* selection and closes the modal dialog.
|
151 |
*/
|
152 |
Drupal.media.popups.mediaBrowser.finalizeSelection = function () { |
153 |
// Find the current file selection.
|
154 |
var selected = this.contentWindow.Drupal.media.browser.selectedMedia; |
155 |
|
156 |
// Alert the user if a selection has yet to be made.
|
157 |
if (selected.length < 1) { |
158 |
alert(notSelected); |
159 |
|
160 |
return;
|
161 |
} |
162 |
|
163 |
// Select the file.
|
164 |
onSelect(selected); |
165 |
|
166 |
// Close the dialog.
|
167 |
$(this).dialog('close'); |
168 |
}; |
169 |
|
170 |
/**
|
171 |
* Style chooser Popup. Creates a dialog for a user to choose a media style.
|
172 |
*
|
173 |
* @param mediaFile
|
174 |
* The mediaFile you are requesting this formatting form for.
|
175 |
* @todo: should this be fid? That's actually all we need now.
|
176 |
*
|
177 |
* @param Function
|
178 |
* onSubmit Function to be called when the user chooses a media style. Takes
|
179 |
* one parameter (Object formattedMedia).
|
180 |
*
|
181 |
* @param Object
|
182 |
* options Options for the mediaStyleChooser dialog.
|
183 |
*/
|
184 |
Drupal.media.popups.mediaStyleSelector = function (mediaFile, onSelect, options) { |
185 |
var defaults = Drupal.media.popups.mediaStyleSelector.getDefaults();
|
186 |
|
187 |
// @todo: remove this awful hack :(
|
188 |
if (typeof defaults.src === 'string' ) { |
189 |
defaults.src = defaults.src.replace('-media_id-', mediaFile.fid) + '&fields=' + encodeURIComponent(JSON.stringify(mediaFile.fields)); |
190 |
} |
191 |
else {
|
192 |
var src = defaults.src.shift();
|
193 |
|
194 |
defaults.src.unshift(src); |
195 |
defaults.src = src.replace('-media_id-', mediaFile.fid) + '&fields=' + encodeURIComponent(JSON.stringify(mediaFile.fields)); |
196 |
} |
197 |
|
198 |
options = $.extend({}, defaults, options);
|
199 |
|
200 |
// Create an iFrame with the iFrame URL.
|
201 |
var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaStyleSelector'); |
202 |
|
203 |
// Attach an onLoad event.
|
204 |
mediaIframe.bind('load', options, options.onLoad);
|
205 |
|
206 |
// Create an array of Dialog options.
|
207 |
var dialogOptions = Drupal.media.popups.getDialogOptions();
|
208 |
|
209 |
// Setup the dialog buttons.
|
210 |
var ok = Drupal.t('OK'); |
211 |
var notSelected = Drupal.t('Very sorry, there was an unknown error embedding media.'); |
212 |
|
213 |
dialogOptions.buttons[ok] = function () {
|
214 |
// Find the current file selection.
|
215 |
var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia(); |
216 |
|
217 |
// Alert the user if a selection has yet to be made.
|
218 |
if (!formattedMedia) {
|
219 |
alert(notSelected); |
220 |
|
221 |
return;
|
222 |
} |
223 |
|
224 |
// Select the file.
|
225 |
onSelect(formattedMedia); |
226 |
|
227 |
// Close the dialog.
|
228 |
$(this).dialog('close'); |
229 |
}; |
230 |
|
231 |
// Create a jQuery UI dialog with the given options.
|
232 |
var dialog = mediaIframe.dialog(dialogOptions);
|
233 |
|
234 |
// Allow the dialog to react to re-sizing, scrolling, etc.
|
235 |
Drupal.media.popups.sizeDialog(dialog); |
236 |
Drupal.media.popups.resizeDialog(dialog); |
237 |
Drupal.media.popups.scrollDialog(dialog); |
238 |
Drupal.media.popups.overlayDisplace(dialog.parents(".ui-dialog"));
|
239 |
|
240 |
return mediaIframe;
|
241 |
}; |
242 |
|
243 |
Drupal.media.popups.mediaStyleSelector.mediaBrowserOnLoad = function (e) { |
244 |
}; |
245 |
|
246 |
Drupal.media.popups.mediaStyleSelector.getDefaults = function () { |
247 |
return {
|
248 |
src: Drupal.settings.media.styleSelectorUrl,
|
249 |
onLoad: Drupal.media.popups.mediaStyleSelector.mediaBrowserOnLoad
|
250 |
}; |
251 |
}; |
252 |
|
253 |
/**
|
254 |
* Style chooser Popup. Creates a dialog for a user to choose a media style.
|
255 |
*
|
256 |
* @param mediaFile
|
257 |
* The mediaFile you are requesting this formatting form for.
|
258 |
* @todo: should this be fid? That's actually all we need now.
|
259 |
*
|
260 |
* @param Function
|
261 |
* onSubmit Function to be called when the user chooses a media style. Takes
|
262 |
* one parameter (Object formattedMedia).
|
263 |
*
|
264 |
* @param Object
|
265 |
* options Options for the mediaStyleChooser dialog.
|
266 |
*/
|
267 |
Drupal.media.popups.mediaFieldEditor = function (fid, onSelect, options) { |
268 |
var defaults = Drupal.media.popups.mediaFieldEditor.getDefaults();
|
269 |
|
270 |
// @todo: remove this awful hack :(
|
271 |
defaults.src = defaults.src.replace('-media_id-', fid);
|
272 |
options = $.extend({}, defaults, options);
|
273 |
|
274 |
// Create an iFrame with the iFrame URL.
|
275 |
var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaFieldEditor'); |
276 |
|
277 |
// Attach an onLoad event.
|
278 |
mediaIframe.bind('load', options, options.onLoad);
|
279 |
|
280 |
// Create an array of Dialog options.
|
281 |
var dialogOptions = Drupal.media.popups.getDialogOptions();
|
282 |
|
283 |
// Setup the dialog buttons.
|
284 |
var ok = Drupal.t('OK'); |
285 |
var notSelected = Drupal.t('Very sorry, there was an unknown error embedding media.'); |
286 |
|
287 |
dialogOptions.buttons[ok] = function () {
|
288 |
// Find the current file selection.
|
289 |
var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia(); |
290 |
|
291 |
// Alert the user if a selection has yet to be made.
|
292 |
if (!formattedMedia) {
|
293 |
alert(notSelected); |
294 |
|
295 |
return;
|
296 |
} |
297 |
|
298 |
// Select the file.
|
299 |
onSelect(formattedMedia); |
300 |
|
301 |
// Close the dialog.
|
302 |
$(this).dialog('close'); |
303 |
}; |
304 |
|
305 |
// Create a jQuery UI dialog with the given options.
|
306 |
var dialog = mediaIframe.dialog(dialogOptions);
|
307 |
|
308 |
// Allow the dialog to react to re-sizing, scrolling, etc.
|
309 |
Drupal.media.popups.sizeDialog(dialog); |
310 |
Drupal.media.popups.resizeDialog(dialog); |
311 |
Drupal.media.popups.scrollDialog(dialog); |
312 |
Drupal.media.popups.overlayDisplace(dialog); |
313 |
|
314 |
return mediaIframe;
|
315 |
}; |
316 |
|
317 |
Drupal.media.popups.mediaFieldEditor.mediaBrowserOnLoad = function (e) { |
318 |
|
319 |
}; |
320 |
|
321 |
Drupal.media.popups.mediaFieldEditor.getDefaults = function () { |
322 |
return {
|
323 |
// @todo: do this for real
|
324 |
src: '/media/-media_id-/edit?render=media-popup', |
325 |
onLoad: Drupal.media.popups.mediaFieldEditor.mediaBrowserOnLoad
|
326 |
}; |
327 |
}; |
328 |
|
329 |
/**
|
330 |
* Generic functions to both the media-browser and style selector.
|
331 |
*/
|
332 |
|
333 |
/**
|
334 |
* Returns the commonly used options for the dialog.
|
335 |
*/
|
336 |
Drupal.media.popups.getDialogOptions = function () { |
337 |
return {
|
338 |
title: Drupal.t('Media browser'), |
339 |
buttons: {},
|
340 |
dialogClass: Drupal.settings.media.dialogOptions.dialogclass,
|
341 |
modal: Drupal.settings.media.dialogOptions.modal,
|
342 |
draggable: Drupal.settings.media.dialogOptions.draggable,
|
343 |
resizable: Drupal.settings.media.dialogOptions.resizable,
|
344 |
minWidth: Drupal.settings.media.dialogOptions.minwidth,
|
345 |
width: Drupal.settings.media.dialogOptions.width,
|
346 |
height: Drupal.settings.media.dialogOptions.height,
|
347 |
position: Drupal.settings.media.dialogOptions.position,
|
348 |
overlay: {
|
349 |
backgroundColor: Drupal.settings.media.dialogOptions.overlay.backgroundcolor,
|
350 |
opacity: Drupal.settings.media.dialogOptions.overlay.opacity
|
351 |
}, |
352 |
zIndex: Drupal.settings.media.dialogOptions.zindex,
|
353 |
close: function (event, ui) { |
354 |
var elem = $(event.target); |
355 |
var id = elem.attr('id'); |
356 |
if(id == 'mediaStyleSelector') { |
357 |
$(this).dialog("destroy"); |
358 |
$('#mediaStyleSelector').remove(); |
359 |
} |
360 |
else {
|
361 |
$(this).dialog("destroy"); |
362 |
$('#mediaBrowser').remove(); |
363 |
} |
364 |
} |
365 |
}; |
366 |
}; |
367 |
|
368 |
/**
|
369 |
* Get an iframe to serve as the dialog's contents. Common to both plugins.
|
370 |
*/
|
371 |
Drupal.media.popups.getPopupIframe = function (src, id, options) { |
372 |
var defaults = {width: '100%', scrolling: 'auto'}; |
373 |
var options = $.extend({}, defaults, options); |
374 |
|
375 |
return $('<iframe class="media-modal-frame"/>') |
376 |
.attr('src', src)
|
377 |
.attr('width', options.width)
|
378 |
.attr('id', id)
|
379 |
.attr('scrolling', options.scrolling);
|
380 |
}; |
381 |
|
382 |
Drupal.media.popups.overlayDisplace = function (dialog) { |
383 |
if (parent.window.Drupal.overlay && jQuery.isFunction(parent.window.Drupal.overlay.getDisplacement)) {
|
384 |
var overlayDisplace = parent.window.Drupal.overlay.getDisplacement('top'); |
385 |
|
386 |
if (dialog.offset().top < overlayDisplace) {
|
387 |
dialog.css('top', overlayDisplace);
|
388 |
} |
389 |
} |
390 |
} |
391 |
|
392 |
/**
|
393 |
* Size the dialog when it is first loaded and keep it centered when scrolling.
|
394 |
*
|
395 |
* @param jQuery dialogElement
|
396 |
* The element which has .dialog() attached to it.
|
397 |
*/
|
398 |
Drupal.media.popups.sizeDialog = function (dialogElement) { |
399 |
if (!dialogElement.is(':visible')) { |
400 |
return;
|
401 |
} |
402 |
|
403 |
var windowWidth = $(window).width(); |
404 |
var dialogWidth = windowWidth * 0.8; |
405 |
var windowHeight = $(window).height(); |
406 |
var dialogHeight = windowHeight * 0.8; |
407 |
|
408 |
dialogElement.dialog("option", "width", dialogWidth); |
409 |
dialogElement.dialog("option", "height", dialogHeight); |
410 |
dialogElement.dialog("option", "position", 'center'); |
411 |
|
412 |
$('.media-modal-frame').width('100%'); |
413 |
} |
414 |
|
415 |
/**
|
416 |
* Resize the dialog when the window changes.
|
417 |
*
|
418 |
* @param jQuery dialogElement
|
419 |
* The element which has .dialog() attached to it.
|
420 |
*/
|
421 |
Drupal.media.popups.resizeDialog = function (dialogElement) { |
422 |
$(window).resize(function() { |
423 |
Drupal.media.popups.sizeDialog(dialogElement); |
424 |
}); |
425 |
} |
426 |
|
427 |
/**
|
428 |
* Keeps the dialog centered when the window is scrolled.
|
429 |
*
|
430 |
* @param jQuery dialogElement
|
431 |
* The element which has .dialog() attached to it.
|
432 |
*/
|
433 |
Drupal.media.popups.scrollDialog = function (dialogElement) { |
434 |
// Keep the dialog window centered when scrolling.
|
435 |
$(window).scroll(function() { |
436 |
if (!dialogElement.is(':visible')) { |
437 |
return;
|
438 |
} |
439 |
|
440 |
dialogElement.dialog("option", "position", 'center'); |
441 |
}); |
442 |
} |
443 |
|
444 |
})(jQuery); |