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