root / drupal7 / sites / all / modules / media / js / media.browser.js @ f4462ddf
1 |
/**
|
---|---|
2 |
* @file
|
3 |
* Provides default functions for the media browser
|
4 |
*/
|
5 |
|
6 |
(function ($) { |
7 |
namespace('Drupal.media.browser');
|
8 |
|
9 |
Drupal.media.browser.selectedMedia = []; |
10 |
Drupal.media.browser.activeTab = 0;
|
11 |
Drupal.media.browser.mediaAdded = function () {}; |
12 |
Drupal.media.browser.selectionFinalized = function (selectedMedia) { |
13 |
// This is intended to be overridden if a callee wants to be triggered
|
14 |
// when the media selection is finalized from inside the browser.
|
15 |
// This is used for the file upload form for instance.
|
16 |
}; |
17 |
|
18 |
Drupal.behaviors.MediaBrowser = { |
19 |
attach: function (context) { |
20 |
if (Drupal.settings.media && Drupal.settings.media.selectedMedia) {
|
21 |
Drupal.media.browser.selectMedia(Drupal.settings.media.selectedMedia); |
22 |
// Fire a confirmation of some sort.
|
23 |
Drupal.media.browser.finalizeSelection(); |
24 |
} |
25 |
|
26 |
// Instantiate the tabs.
|
27 |
$('#media-browser-tabset').tabs({ |
28 |
// Ensure that the modal resizes to the content on each tab switch.
|
29 |
show: Drupal.media.browser.resizeIframe, // jquery ui < 1.8 |
30 |
activate: Drupal.media.browser.resizeIframe // jquery ui >= 1.8 |
31 |
}); |
32 |
|
33 |
$('.ui-tabs-nav li').mouseup(function() { |
34 |
Drupal.media.browser.activeTab = $(this).index(); |
35 |
}); |
36 |
|
37 |
$('.media-browser-tab').each( Drupal.media.browser.validateButtons ); |
38 |
|
39 |
Drupal.media.browser.selectActiveTab(); |
40 |
Drupal.media.browser.selectErrorTab(); |
41 |
|
42 |
} |
43 |
// Wait for additional params to be passed in.
|
44 |
}; |
45 |
|
46 |
Drupal.media.browser.launch = function () { |
47 |
|
48 |
}; |
49 |
|
50 |
Drupal.media.browser.validateButtons = function() { |
51 |
// The media browser runs in an IFRAME. The Drupal.media.popups.mediaBrowser()
|
52 |
// function sets up the IFRAME and "OK" and "Cancel" buttons that are outside
|
53 |
// of the IFRAME, so that their click handlers can destroy the IFRAME while
|
54 |
// retaining information about what media items were selected. However,
|
55 |
// Drupal UI convention is to place all action buttons on the same "line"
|
56 |
// at the bottom of the form, so if the form within the IFRAME contains a
|
57 |
// "Submit" button or other action buttons, then the "OK" and "Cancel"
|
58 |
// buttons below the IFRAME break this convention and confuse the user.
|
59 |
// Therefore, we add "Submit" and "Cancel" buttons inside the IFRAME, and
|
60 |
// have their click action trigger the click action of the corresonding
|
61 |
// "OK" and "Cancel" buttons that are outside the IFRAME. media.css contains
|
62 |
// CSS rules that hide the outside buttons.
|
63 |
|
64 |
// If a submit button is present, another round-trip to the server is needed
|
65 |
// before the user's selection is finalized. For these cases, when the form's
|
66 |
// real Submit button is clicked, the server either returns another form for
|
67 |
// the user to fill out, or else a completion page that contains or sets the
|
68 |
// Drupal.media.browser.selectedMedia variable. If the latter, then
|
69 |
// Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad() auto-triggers the
|
70 |
// "OK" button action to finalize the selection and remove the IFRAME.
|
71 |
|
72 |
// We need to check for the fake submit/cancel buttons that are used on
|
73 |
// non-form based pane content. On these items we need to bind the clicks
|
74 |
// so that media can be selected or the window can be closed. This is still a
|
75 |
// hacky approach, but it is a step in the right direction.
|
76 |
|
77 |
$('a.button.fake-submit', this).once().bind('click', Drupal.media.browser.submit); |
78 |
$('a.button.fake-cancel', this).once().bind('click', Drupal.media.browser.submit); |
79 |
}; |
80 |
|
81 |
Drupal.media.browser.submit = function () { |
82 |
// @see Drupal.media.browser.validateButtons().
|
83 |
var buttons = $(parent.window.document.body).find('#mediaBrowser').parent('.ui-dialog').find('.ui-dialog-buttonpane button'); |
84 |
if ($(this).hasClass('fake-cancel')) { |
85 |
buttons[1].click();
|
86 |
} |
87 |
else {
|
88 |
buttons[0].click();
|
89 |
} |
90 |
|
91 |
// Return false to prevent the fake link "click" from continuing.
|
92 |
return false; |
93 |
} |
94 |
|
95 |
Drupal.media.browser.selectMedia = function (selectedMedia) { |
96 |
Drupal.media.browser.selectedMedia = selectedMedia; |
97 |
}; |
98 |
|
99 |
Drupal.media.browser.finalizeSelection = function () { |
100 |
if (!Drupal.media.browser.selectedMedia) {
|
101 |
throw new exception(Drupal.t('Cannot continue, nothing selected')); |
102 |
} |
103 |
else {
|
104 |
Drupal.media.browser.selectionFinalized(Drupal.media.browser.selectedMedia); |
105 |
} |
106 |
}; |
107 |
|
108 |
/**
|
109 |
* Resize the Media Browser to the content height.
|
110 |
*/
|
111 |
Drupal.media.browser.resizeIframe = function (event) { |
112 |
var h = $('body').height(); |
113 |
$(parent.window.document).find('#mediaBrowser').height(h); |
114 |
}; |
115 |
|
116 |
Drupal.media.browser.selectErrorTab = function() { |
117 |
// Find the ID of a tab with an error in it
|
118 |
var errorTabID = $('#media-browser-tabset') |
119 |
.find('.error')
|
120 |
.parents('.media-browser-tab')
|
121 |
.attr('id');
|
122 |
|
123 |
if (errorTabID !== undefined) { |
124 |
// Find the Tab Link with errorTabID
|
125 |
var tab = $('a[href="#' + errorTabID + '"]'); |
126 |
// Find the index of the tab
|
127 |
var index = $('#media-browser-tabset a').index(tab); |
128 |
// Select the tab
|
129 |
Drupal.media.browser.selectTab(index); |
130 |
} |
131 |
} |
132 |
|
133 |
Drupal.media.browser.selectActiveTab = function() { |
134 |
// Find the index of the last active tab.
|
135 |
setTimeout(function() {
|
136 |
Drupal.media.browser.selectTab(Drupal.media.browser.activeTab); |
137 |
Drupal.media.browser.resizeIframe(); |
138 |
}, 10);
|
139 |
}; |
140 |
|
141 |
/**
|
142 |
* Helper function to change the media browser jQuery UI tabs
|
143 |
* since it requires two different methods dependingon the version.
|
144 |
*/
|
145 |
Drupal.media.browser.selectTab = function(index) { |
146 |
var ver = jQuery.ui.version.split('.'); |
147 |
if (ver[0] == '1' && parseInt(ver[1]) <= 8) { |
148 |
// jQuery UI <= 1.8
|
149 |
$('#media-browser-tabset').tabs('select', index); |
150 |
} |
151 |
else {
|
152 |
// jQuery UI 1.9+
|
153 |
$('#media-browser-tabset').tabs('option', 'active', index); |
154 |
} |
155 |
|
156 |
// Update the active tab variable.
|
157 |
Drupal.media.browser.activeTab = index; |
158 |
}; |
159 |
|
160 |
}(jQuery)); |