root / drupal7 / sites / all / modules / ctools / js / modal.js @ 560c3060
1 |
/**
|
---|---|
2 |
* @file
|
3 |
*
|
4 |
* Implement a modal form.
|
5 |
*
|
6 |
* @see modal.inc for documentation.
|
7 |
*
|
8 |
* This javascript relies on the CTools ajax responder.
|
9 |
*/
|
10 |
|
11 |
(function ($) { |
12 |
// Make sure our objects are defined.
|
13 |
Drupal.CTools = Drupal.CTools || {}; |
14 |
Drupal.CTools.Modal = Drupal.CTools.Modal || {}; |
15 |
|
16 |
/**
|
17 |
* Display the modal
|
18 |
*
|
19 |
* @todo -- document the settings.
|
20 |
*/
|
21 |
Drupal.CTools.Modal.show = function(choice) { |
22 |
var opts = {};
|
23 |
|
24 |
if (choice && typeof choice == 'string' && Drupal.settings[choice]) { |
25 |
// This notation guarantees we are actually copying it.
|
26 |
$.extend(true, opts, Drupal.settings[choice]); |
27 |
} |
28 |
else if (choice) { |
29 |
$.extend(true, opts, choice); |
30 |
} |
31 |
|
32 |
var defaults = {
|
33 |
modalTheme: 'CToolsModalDialog', |
34 |
throbberTheme: 'CToolsModalThrobber', |
35 |
animation: 'show', |
36 |
animationSpeed: 'fast', |
37 |
modalSize: {
|
38 |
type: 'scale', |
39 |
width: .8, |
40 |
height: .8, |
41 |
addWidth: 0, |
42 |
addHeight: 0, |
43 |
// How much to remove from the inner content to make space for the
|
44 |
// theming.
|
45 |
contentRight: 25, |
46 |
contentBottom: 45 |
47 |
}, |
48 |
modalOptions: {
|
49 |
opacity: .55, |
50 |
background: '#fff' |
51 |
}, |
52 |
modalClass: 'default' |
53 |
}; |
54 |
|
55 |
var settings = {};
|
56 |
$.extend(true, settings, defaults, Drupal.settings.CToolsModal, opts); |
57 |
|
58 |
if (Drupal.CTools.Modal.currentSettings && Drupal.CTools.Modal.currentSettings != settings) {
|
59 |
Drupal.CTools.Modal.modal.remove(); |
60 |
Drupal.CTools.Modal.modal = null;
|
61 |
} |
62 |
|
63 |
Drupal.CTools.Modal.currentSettings = settings; |
64 |
|
65 |
var resize = function(e) { |
66 |
// When creating the modal, it actually exists only in a theoretical
|
67 |
// place that is not in the DOM. But once the modal exists, it is in the
|
68 |
// DOM so the context must be set appropriately.
|
69 |
var context = e ? document : Drupal.CTools.Modal.modal;
|
70 |
|
71 |
if (Drupal.CTools.Modal.currentSettings.modalSize.type == 'scale') { |
72 |
var width = $(window).width() * Drupal.CTools.Modal.currentSettings.modalSize.width; |
73 |
var height = $(window).height() * Drupal.CTools.Modal.currentSettings.modalSize.height; |
74 |
} |
75 |
else {
|
76 |
var width = Drupal.CTools.Modal.currentSettings.modalSize.width;
|
77 |
var height = Drupal.CTools.Modal.currentSettings.modalSize.height;
|
78 |
} |
79 |
|
80 |
// Use the additionol pixels for creating the width and height.
|
81 |
$('div.ctools-modal-content', context).css({ |
82 |
'width': width + Drupal.CTools.Modal.currentSettings.modalSize.addWidth + 'px', |
83 |
'height': height + Drupal.CTools.Modal.currentSettings.modalSize.addHeight + 'px' |
84 |
}); |
85 |
$('div.ctools-modal-content .modal-content', context).css({ |
86 |
'width': (width - Drupal.CTools.Modal.currentSettings.modalSize.contentRight) + 'px', |
87 |
'height': (height - Drupal.CTools.Modal.currentSettings.modalSize.contentBottom) + 'px' |
88 |
}); |
89 |
} |
90 |
|
91 |
if (!Drupal.CTools.Modal.modal) {
|
92 |
Drupal.CTools.Modal.modal = $(Drupal.theme(settings.modalTheme));
|
93 |
if (settings.modalSize.type == 'scale') { |
94 |
$(window).bind('resize', resize); |
95 |
} |
96 |
} |
97 |
|
98 |
resize(); |
99 |
|
100 |
$('span.modal-title', Drupal.CTools.Modal.modal).html(Drupal.CTools.Modal.currentSettings.loadingText); |
101 |
Drupal.CTools.Modal.modalContent(Drupal.CTools.Modal.modal, settings.modalOptions, settings.animation, settings.animationSpeed, settings.modalClass); |
102 |
$('#modalContent .modal-content').html(Drupal.theme(settings.throbberTheme)).addClass('ctools-modal-loading'); |
103 |
|
104 |
// Position autocomplete results based on the scroll position of the modal.
|
105 |
$('#modalContent .modal-content').delegate('input.form-autocomplete', 'keyup', function() { |
106 |
$('#autocomplete').css('top', $(this).position().top + $(this).outerHeight() + $(this).offsetParent().filter('#modal-content').scrollTop()); |
107 |
}); |
108 |
}; |
109 |
|
110 |
/**
|
111 |
* Hide the modal
|
112 |
*/
|
113 |
Drupal.CTools.Modal.dismiss = function() { |
114 |
if (Drupal.CTools.Modal.modal) {
|
115 |
Drupal.CTools.Modal.unmodalContent(Drupal.CTools.Modal.modal); |
116 |
} |
117 |
}; |
118 |
|
119 |
/**
|
120 |
* Provide the HTML to create the modal dialog.
|
121 |
*/
|
122 |
Drupal.theme.prototype.CToolsModalDialog = function () { |
123 |
var html = '' |
124 |
html += ' <div id="ctools-modal">'
|
125 |
html += ' <div class="ctools-modal-content">' // panels-modal-content |
126 |
html += ' <div class="modal-header">';
|
127 |
html += ' <a class="close" href="#">';
|
128 |
html += Drupal.CTools.Modal.currentSettings.closeText + Drupal.CTools.Modal.currentSettings.closeImage; |
129 |
html += ' </a>';
|
130 |
html += ' <span id="modal-title" class="modal-title"> </span>';
|
131 |
html += ' </div>';
|
132 |
html += ' <div id="modal-content" class="modal-content">';
|
133 |
html += ' </div>';
|
134 |
html += ' </div>';
|
135 |
html += ' </div>';
|
136 |
|
137 |
return html;
|
138 |
} |
139 |
|
140 |
/**
|
141 |
* Provide the HTML to create the throbber.
|
142 |
*/
|
143 |
Drupal.theme.prototype.CToolsModalThrobber = function () { |
144 |
var html = ''; |
145 |
html += ' <div id="modal-throbber">';
|
146 |
html += ' <div class="modal-throbber-wrapper">';
|
147 |
html += Drupal.CTools.Modal.currentSettings.throbber; |
148 |
html += ' </div>';
|
149 |
html += ' </div>';
|
150 |
|
151 |
return html;
|
152 |
}; |
153 |
|
154 |
/**
|
155 |
* Figure out what settings string to use to display a modal.
|
156 |
*/
|
157 |
Drupal.CTools.Modal.getSettings = function (object) { |
158 |
var match = $(object).attr('class').match(/ctools-modal-(\S+)/); |
159 |
if (match) {
|
160 |
return match[1]; |
161 |
} |
162 |
} |
163 |
|
164 |
/**
|
165 |
* Click function for modals that can be cached.
|
166 |
*/
|
167 |
Drupal.CTools.Modal.clickAjaxCacheLink = function () { |
168 |
Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
|
169 |
return Drupal.CTools.AJAX.clickAJAXCacheLink.apply(this); |
170 |
}; |
171 |
|
172 |
/**
|
173 |
* Handler to prepare the modal for the response
|
174 |
*/
|
175 |
Drupal.CTools.Modal.clickAjaxLink = function () { |
176 |
Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
|
177 |
return false; |
178 |
}; |
179 |
|
180 |
/**
|
181 |
* Submit responder to do an AJAX submit on all modal forms.
|
182 |
*/
|
183 |
Drupal.CTools.Modal.submitAjaxForm = function(e) { |
184 |
var $form = $(this); |
185 |
var url = $form.attr('action'); |
186 |
|
187 |
setTimeout(function() { Drupal.CTools.AJAX.ajaxSubmit($form, url); }, 1); |
188 |
return false; |
189 |
} |
190 |
|
191 |
/**
|
192 |
* Bind links that will open modals to the appropriate function.
|
193 |
*/
|
194 |
Drupal.behaviors.ZZCToolsModal = { |
195 |
attach: function(context) { |
196 |
// Bind links
|
197 |
// Note that doing so in this order means that the two classes can be
|
198 |
// used together safely.
|
199 |
/*
|
200 |
* @todo remimplement the warm caching feature
|
201 |
$('a.ctools-use-modal-cache', context).once('ctools-use-modal', function() {
|
202 |
$(this).click(Drupal.CTools.Modal.clickAjaxCacheLink);
|
203 |
Drupal.CTools.AJAX.warmCache.apply(this);
|
204 |
});
|
205 |
*/
|
206 |
|
207 |
$('area.ctools-use-modal, a.ctools-use-modal', context).once('ctools-use-modal', function() { |
208 |
var $this = $(this); |
209 |
$this.click(Drupal.CTools.Modal.clickAjaxLink);
|
210 |
// Create a drupal ajax object
|
211 |
var element_settings = {};
|
212 |
if ($this.attr('href')) { |
213 |
element_settings.url = $this.attr('href'); |
214 |
element_settings.event = 'click';
|
215 |
element_settings.progress = { type: 'throbber' }; |
216 |
} |
217 |
var base = $this.attr('href'); |
218 |
Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings); |
219 |
}); |
220 |
|
221 |
// Bind buttons
|
222 |
$('input.ctools-use-modal, button.ctools-use-modal', context).once('ctools-use-modal', function() { |
223 |
var $this = $(this); |
224 |
$this.click(Drupal.CTools.Modal.clickAjaxLink);
|
225 |
var button = this; |
226 |
var element_settings = {};
|
227 |
|
228 |
// AJAX submits specified in this manner automatically submit to the
|
229 |
// normal form action.
|
230 |
element_settings.url = Drupal.CTools.Modal.findURL(this);
|
231 |
if (element_settings.url == '') { |
232 |
element_settings.url = $(this).closest('form').attr('action'); |
233 |
} |
234 |
element_settings.event = 'click';
|
235 |
element_settings.setClick = true;
|
236 |
|
237 |
var base = $this.attr('id'); |
238 |
Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings); |
239 |
|
240 |
// Make sure changes to settings are reflected in the URL.
|
241 |
$('.' + $(button).attr('id') + '-url').change(function() { |
242 |
Drupal.ajax[base].options.url = Drupal.CTools.Modal.findURL(button); |
243 |
}); |
244 |
}); |
245 |
|
246 |
// Bind our custom event to the form submit
|
247 |
$('#modal-content form', context).once('ctools-use-modal', function() { |
248 |
var $this = $(this); |
249 |
var element_settings = {};
|
250 |
|
251 |
element_settings.url = $this.attr('action'); |
252 |
element_settings.event = 'submit';
|
253 |
element_settings.progress = { 'type': 'throbber' } |
254 |
var base = $this.attr('id'); |
255 |
|
256 |
Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings); |
257 |
Drupal.ajax[base].form = $this;
|
258 |
|
259 |
$('input[type=submit], button', this).click(function(event) { |
260 |
Drupal.ajax[base].element = this;
|
261 |
this.form.clk = this; |
262 |
// Stop autocomplete from submitting.
|
263 |
if (Drupal.autocompleteSubmit && !Drupal.autocompleteSubmit()) {
|
264 |
return false; |
265 |
} |
266 |
// An empty event means we were triggered via .click() and
|
267 |
// in jquery 1.4 this won't trigger a submit.
|
268 |
if (event.bubbles == undefined) { |
269 |
$(this.form).trigger('submit'); |
270 |
return false; |
271 |
} |
272 |
}); |
273 |
}); |
274 |
|
275 |
// Bind a click handler to allow elements with the 'ctools-close-modal'
|
276 |
// class to close the modal.
|
277 |
$('.ctools-close-modal', context).once('ctools-close-modal') |
278 |
.click(function() {
|
279 |
Drupal.CTools.Modal.dismiss(); |
280 |
return false; |
281 |
}); |
282 |
} |
283 |
}; |
284 |
|
285 |
// The following are implementations of AJAX responder commands.
|
286 |
|
287 |
/**
|
288 |
* AJAX responder command to place HTML within the modal.
|
289 |
*/
|
290 |
Drupal.CTools.Modal.modal_display = function(ajax, response, status) { |
291 |
if ($('#modalContent').length == 0) { |
292 |
Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(ajax.element)); |
293 |
} |
294 |
$('#modal-title').html(response.title); |
295 |
// Simulate an actual page load by scrolling to the top after adding the
|
296 |
// content. This is helpful for allowing users to see error messages at the
|
297 |
// top of a form, etc.
|
298 |
$('#modal-content').html(response.output).scrollTop(0); |
299 |
|
300 |
// Attach behaviors within a modal dialog.
|
301 |
var settings = response.settings || ajax.settings || Drupal.settings;
|
302 |
Drupal.attachBehaviors('#modalContent', settings);
|
303 |
|
304 |
if ($('#modal-content').hasClass('ctools-modal-loading')) { |
305 |
$('#modal-content').removeClass('ctools-modal-loading'); |
306 |
} |
307 |
else {
|
308 |
// If the modal was already shown, and we are simply replacing its
|
309 |
// content, then focus on the first focusable element in the modal.
|
310 |
// (When first showing the modal, focus will be placed on the close
|
311 |
// button by the show() function called above.)
|
312 |
$('#modal-content :focusable:first').focus(); |
313 |
} |
314 |
} |
315 |
|
316 |
/**
|
317 |
* AJAX responder command to dismiss the modal.
|
318 |
*/
|
319 |
Drupal.CTools.Modal.modal_dismiss = function(command) { |
320 |
Drupal.CTools.Modal.dismiss(); |
321 |
$('link.ctools-temporary-css').remove(); |
322 |
} |
323 |
|
324 |
/**
|
325 |
* Display loading
|
326 |
*/
|
327 |
//Drupal.CTools.AJAX.commands.modal_loading = function(command) {
|
328 |
Drupal.CTools.Modal.modal_loading = function(command) { |
329 |
Drupal.CTools.Modal.modal_display({ |
330 |
output: Drupal.theme(Drupal.CTools.Modal.currentSettings.throbberTheme),
|
331 |
title: Drupal.CTools.Modal.currentSettings.loadingText
|
332 |
}); |
333 |
} |
334 |
|
335 |
/**
|
336 |
* Find a URL for an AJAX button.
|
337 |
*
|
338 |
* The URL for this gadget will be composed of the values of items by
|
339 |
* taking the ID of this item and adding -url and looking for that
|
340 |
* class. They need to be in the form in order since we will
|
341 |
* concat them all together using '/'.
|
342 |
*/
|
343 |
Drupal.CTools.Modal.findURL = function(item) { |
344 |
var url = ''; |
345 |
var url_class = '.' + $(item).attr('id') + '-url'; |
346 |
$(url_class).each(
|
347 |
function() {
|
348 |
var $this = $(this); |
349 |
if (url && $this.val()) { |
350 |
url += '/';
|
351 |
} |
352 |
url += $this.val();
|
353 |
}); |
354 |
return url;
|
355 |
}; |
356 |
|
357 |
|
358 |
/**
|
359 |
* modalContent
|
360 |
* @param content string to display in the content box
|
361 |
* @param css obj of css attributes
|
362 |
* @param animation (fadeIn, slideDown, show)
|
363 |
* @param speed (valid animation speeds slow, medium, fast or # in ms)
|
364 |
* @param modalClass class added to div#modalContent
|
365 |
*/
|
366 |
Drupal.CTools.Modal.modalContent = function(content, css, animation, speed, modalClass) { |
367 |
// If our animation isn't set, make it just show/pop
|
368 |
if (!animation) {
|
369 |
animation = 'show';
|
370 |
} |
371 |
else {
|
372 |
// If our animation isn't "fadeIn" or "slideDown" then it always is show
|
373 |
if (animation != 'fadeIn' && animation != 'slideDown') { |
374 |
animation = 'show';
|
375 |
} |
376 |
} |
377 |
|
378 |
if (!speed) {
|
379 |
speed = 'fast';
|
380 |
} |
381 |
|
382 |
// Build our base attributes and allow them to be overriden
|
383 |
css = jQuery.extend({ |
384 |
position: 'absolute', |
385 |
left: '0px', |
386 |
margin: '0px', |
387 |
background: '#000', |
388 |
opacity: '.55' |
389 |
}, css); |
390 |
|
391 |
// Add opacity handling for IE.
|
392 |
css.filter = 'alpha(opacity=' + (100 * css.opacity) + ')'; |
393 |
content.hide(); |
394 |
|
395 |
// If we already have modalContent, remove it.
|
396 |
if ($('#modalBackdrop').length) $('#modalBackdrop').remove(); |
397 |
if ($('#modalContent').length) $('#modalContent').remove(); |
398 |
|
399 |
// position code lifted from http://www.quirksmode.org/viewport/compatibility.html
|
400 |
if (self.pageYOffset) { // all except Explorer |
401 |
var wt = self.pageYOffset;
|
402 |
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict |
403 |
var wt = document.documentElement.scrollTop;
|
404 |
} else if (document.body) { // all other Explorers |
405 |
var wt = document.body.scrollTop;
|
406 |
} |
407 |
|
408 |
// Get our dimensions
|
409 |
|
410 |
// Get the docHeight and (ugly hack) add 50 pixels to make sure we dont have a *visible* border below our div
|
411 |
var docHeight = $(document).height() + 50; |
412 |
var docWidth = $(document).width(); |
413 |
var winHeight = $(window).height(); |
414 |
var winWidth = $(window).width(); |
415 |
if( docHeight < winHeight ) docHeight = winHeight;
|
416 |
|
417 |
// Create our divs
|
418 |
$('body').append('<div id="modalBackdrop" class="backdrop-' + modalClass + '" style="z-index: 1000; display: none;"></div><div id="modalContent" class="modal-' + modalClass + '" style="z-index: 1001; position: absolute;">' + $(content).html() + '</div>'); |
419 |
|
420 |
// Get a list of the tabbable elements in the modal content.
|
421 |
var getTabbableElements = function () { |
422 |
var tabbableElements = $('#modalContent :tabbable'), |
423 |
radioButtons = tabbableElements.filter('input[type="radio"]');
|
424 |
|
425 |
// The list of tabbable elements from jQuery is *almost* right. The
|
426 |
// exception is with groups of radio buttons. The list from jQuery will
|
427 |
// include all radio buttons, when in fact, only the selected radio button
|
428 |
// is tabbable, and if no radio buttons in a group are selected, then only
|
429 |
// the first is tabbable.
|
430 |
if (radioButtons.length > 0) { |
431 |
// First, build up an index of which groups have an item selected or not.
|
432 |
var anySelected = {};
|
433 |
radioButtons.each(function () {
|
434 |
var name = this.name; |
435 |
|
436 |
if (typeof anySelected[name] === 'undefined') { |
437 |
anySelected[name] = radioButtons.filter('input[name="' + name + '"]:checked').length !== 0; |
438 |
} |
439 |
}); |
440 |
|
441 |
// Next filter out the radio buttons that aren't really tabbable.
|
442 |
var found = {};
|
443 |
tabbableElements = tabbableElements.filter(function () {
|
444 |
var keep = true; |
445 |
|
446 |
if (this.type == 'radio') { |
447 |
if (anySelected[this.name]) { |
448 |
// Only keep the selected one.
|
449 |
keep = this.checked;
|
450 |
} |
451 |
else {
|
452 |
// Only keep the first one.
|
453 |
if (found[this.name]) { |
454 |
keep = false;
|
455 |
} |
456 |
found[this.name] = true; |
457 |
} |
458 |
} |
459 |
|
460 |
return keep;
|
461 |
}); |
462 |
} |
463 |
|
464 |
return tabbableElements.get();
|
465 |
}; |
466 |
|
467 |
// Keyboard and focus event handler ensures only modal elements gain focus.
|
468 |
modalEventHandler = function( event ) { |
469 |
target = null;
|
470 |
if ( event ) { //Mozilla |
471 |
target = event.target; |
472 |
} else { //IE |
473 |
event = window.event; |
474 |
target = event.srcElement; |
475 |
} |
476 |
|
477 |
var parents = $(target).parents().get(); |
478 |
for (var i = 0; i < parents.length; ++i) { |
479 |
var position = $(parents[i]).css('position'); |
480 |
if (position == 'absolute' || position == 'fixed') { |
481 |
return true; |
482 |
} |
483 |
} |
484 |
|
485 |
if ($(target).is('#modalContent, body') || $(target).filter('*:visible').parents('#modalContent').length) { |
486 |
// Allow the event only if target is a visible child node
|
487 |
// of #modalContent.
|
488 |
return true; |
489 |
} |
490 |
else {
|
491 |
getTabbableElements()[0].focus();
|
492 |
} |
493 |
|
494 |
event.preventDefault(); |
495 |
}; |
496 |
$('body').bind( 'focus', modalEventHandler ); |
497 |
$('body').bind( 'keypress', modalEventHandler ); |
498 |
|
499 |
// Keypress handler Ensures you can only TAB to elements within the modal.
|
500 |
// Based on the psuedo-code from WAI-ARIA 1.0 Authoring Practices section
|
501 |
// 3.3.1 "Trapping Focus".
|
502 |
modalTabTrapHandler = function (evt) { |
503 |
// We only care about the TAB key.
|
504 |
if (evt.which != 9) { |
505 |
return true; |
506 |
} |
507 |
|
508 |
var tabbableElements = getTabbableElements(),
|
509 |
firstTabbableElement = tabbableElements[0],
|
510 |
lastTabbableElement = tabbableElements[tabbableElements.length - 1],
|
511 |
singleTabbableElement = firstTabbableElement == lastTabbableElement, |
512 |
node = evt.target; |
513 |
|
514 |
// If this is the first element and the user wants to go backwards, then
|
515 |
// jump to the last element.
|
516 |
if (node == firstTabbableElement && evt.shiftKey) {
|
517 |
if (!singleTabbableElement) {
|
518 |
lastTabbableElement.focus(); |
519 |
} |
520 |
return false; |
521 |
} |
522 |
// If this is the last element and the user wants to go forwards, then
|
523 |
// jump to the first element.
|
524 |
else if (node == lastTabbableElement && !evt.shiftKey) { |
525 |
if (!singleTabbableElement) {
|
526 |
firstTabbableElement.focus(); |
527 |
} |
528 |
return false; |
529 |
} |
530 |
// If this element isn't in the dialog at all, then jump to the first
|
531 |
// or last element to get the user into the game.
|
532 |
else if ($.inArray(node, tabbableElements) == -1) { |
533 |
// Make sure the node isn't in another modal (ie. WYSIWYG modal).
|
534 |
var parents = $(node).parents().get(); |
535 |
for (var i = 0; i < parents.length; ++i) { |
536 |
var position = $(parents[i]).css('position'); |
537 |
if (position == 'absolute' || position == 'fixed') { |
538 |
return true; |
539 |
} |
540 |
} |
541 |
|
542 |
if (evt.shiftKey) {
|
543 |
lastTabbableElement.focus(); |
544 |
} |
545 |
else {
|
546 |
firstTabbableElement.focus(); |
547 |
} |
548 |
} |
549 |
}; |
550 |
$('body').bind('keydown', modalTabTrapHandler); |
551 |
|
552 |
// Create our content div, get the dimensions, and hide it
|
553 |
var modalContent = $('#modalContent').css('top','-1000px'); |
554 |
var mdcTop = wt + ( winHeight / 2 ) - ( modalContent.outerHeight() / 2); |
555 |
var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2); |
556 |
$('#modalBackdrop').css(css).css('top', 0).css('height', docHeight + 'px').css('width', docWidth + 'px').show(); |
557 |
modalContent.css({top: mdcTop + 'px', left: mdcLeft + 'px'}).hide()[animation](speed); |
558 |
|
559 |
// Bind a click for closing the modalContent
|
560 |
modalContentClose = function(){close(); return false;}; |
561 |
$('.close').bind('click', modalContentClose); |
562 |
|
563 |
// Bind a keypress on escape for closing the modalContent
|
564 |
modalEventEscapeCloseHandler = function(event) { |
565 |
if (event.keyCode == 27) { |
566 |
close(); |
567 |
return false; |
568 |
} |
569 |
}; |
570 |
|
571 |
$(document).bind('keydown', modalEventEscapeCloseHandler); |
572 |
|
573 |
// Per WAI-ARIA 1.0 Authoring Practices, initial focus should be on the
|
574 |
// close button, but we should save the original focus to restore it after
|
575 |
// the dialog is closed.
|
576 |
var oldFocus = document.activeElement;
|
577 |
$('.close').focus(); |
578 |
|
579 |
// Close the open modal content and backdrop
|
580 |
function close() { |
581 |
// Unbind the events
|
582 |
$(window).unbind('resize', modalContentResize); |
583 |
$('body').unbind( 'focus', modalEventHandler); |
584 |
$('body').unbind( 'keypress', modalEventHandler ); |
585 |
$('body').unbind( 'keydown', modalTabTrapHandler ); |
586 |
$('.close').unbind('click', modalContentClose); |
587 |
$('body').unbind('keypress', modalEventEscapeCloseHandler); |
588 |
$(document).trigger('CToolsDetachBehaviors', $('#modalContent')); |
589 |
|
590 |
// Set our animation parameters and use them
|
591 |
if ( animation == 'fadeIn' ) animation = 'fadeOut'; |
592 |
if ( animation == 'slideDown' ) animation = 'slideUp'; |
593 |
if ( animation == 'show' ) animation = 'hide'; |
594 |
|
595 |
// Close the content
|
596 |
modalContent.hide()[animation](speed); |
597 |
|
598 |
// Remove the content
|
599 |
$('#modalContent').remove(); |
600 |
$('#modalBackdrop').remove(); |
601 |
|
602 |
// Restore focus to where it was before opening the dialog
|
603 |
$(oldFocus).focus();
|
604 |
}; |
605 |
|
606 |
// Move and resize the modalBackdrop and modalContent on window resize.
|
607 |
modalContentResize = function(){ |
608 |
|
609 |
// Reset the backdrop height/width to get accurate document size.
|
610 |
$('#modalBackdrop').css('height', '').css('width', ''); |
611 |
|
612 |
// Position code lifted from:
|
613 |
// http://www.quirksmode.org/viewport/compatibility.html
|
614 |
if (self.pageYOffset) { // all except Explorer |
615 |
var wt = self.pageYOffset;
|
616 |
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict |
617 |
var wt = document.documentElement.scrollTop;
|
618 |
} else if (document.body) { // all other Explorers |
619 |
var wt = document.body.scrollTop;
|
620 |
} |
621 |
|
622 |
// Get our heights
|
623 |
var docHeight = $(document).height(); |
624 |
var docWidth = $(document).width(); |
625 |
var winHeight = $(window).height(); |
626 |
var winWidth = $(window).width(); |
627 |
if( docHeight < winHeight ) docHeight = winHeight;
|
628 |
|
629 |
// Get where we should move content to
|
630 |
var modalContent = $('#modalContent'); |
631 |
var mdcTop = wt + ( winHeight / 2 ) - ( modalContent.outerHeight() / 2); |
632 |
var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2); |
633 |
|
634 |
// Apply the changes
|
635 |
$('#modalBackdrop').css('height', docHeight + 'px').css('width', docWidth + 'px').show(); |
636 |
modalContent.css('top', mdcTop + 'px').css('left', mdcLeft + 'px').show(); |
637 |
}; |
638 |
$(window).bind('resize', modalContentResize); |
639 |
}; |
640 |
|
641 |
/**
|
642 |
* unmodalContent
|
643 |
* @param content (The jQuery object to remove)
|
644 |
* @param animation (fadeOut, slideUp, show)
|
645 |
* @param speed (valid animation speeds slow, medium, fast or # in ms)
|
646 |
*/
|
647 |
Drupal.CTools.Modal.unmodalContent = function(content, animation, speed) |
648 |
{ |
649 |
// If our animation isn't set, make it just show/pop
|
650 |
if (!animation) { var animation = 'show'; } else { |
651 |
// If our animation isn't "fade" then it always is show
|
652 |
if (( animation != 'fadeOut' ) && ( animation != 'slideUp')) animation = 'show'; |
653 |
} |
654 |
// Set a speed if we dont have one
|
655 |
if ( !speed ) var speed = 'fast'; |
656 |
|
657 |
// Unbind the events we bound
|
658 |
$(window).unbind('resize', modalContentResize); |
659 |
$('body').unbind('focus', modalEventHandler); |
660 |
$('body').unbind('keypress', modalEventHandler); |
661 |
$('body').unbind( 'keydown', modalTabTrapHandler ); |
662 |
$('.close').unbind('click', modalContentClose); |
663 |
$('body').unbind('keypress', modalEventEscapeCloseHandler); |
664 |
$(document).trigger('CToolsDetachBehaviors', $('#modalContent')); |
665 |
|
666 |
// jQuery magic loop through the instances and run the animations or removal.
|
667 |
content.each(function(){
|
668 |
if ( animation == 'fade' ) { |
669 |
$('#modalContent').fadeOut(speed, function() { |
670 |
$('#modalBackdrop').fadeOut(speed, function() { |
671 |
$(this).remove(); |
672 |
}); |
673 |
$(this).remove(); |
674 |
}); |
675 |
} else {
|
676 |
if ( animation == 'slide' ) { |
677 |
$('#modalContent').slideUp(speed,function() { |
678 |
$('#modalBackdrop').slideUp(speed, function() { |
679 |
$(this).remove(); |
680 |
}); |
681 |
$(this).remove(); |
682 |
}); |
683 |
} else {
|
684 |
$('#modalContent').remove(); |
685 |
$('#modalBackdrop').remove(); |
686 |
} |
687 |
} |
688 |
}); |
689 |
}; |
690 |
|
691 |
$(function() { |
692 |
Drupal.ajax.prototype.commands.modal_display = Drupal.CTools.Modal.modal_display; |
693 |
Drupal.ajax.prototype.commands.modal_dismiss = Drupal.CTools.Modal.modal_dismiss; |
694 |
}); |
695 |
|
696 |
})(jQuery); |