Newer
Older
Earl Miles
committed
* @file
*
* Implement a modal form.
*
* @see modal.inc for documentation.
*
* This javascript relies on the CTools ajax responder.
*/
(function ($) {
// Make sure our objects are defined.
Drupal.CTools = Drupal.CTools || {};
Drupal.CTools.Modal = Drupal.CTools.Modal || {};
/**
* Display the modal
*
* @todo -- document the settings.
*/
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
Drupal.CTools.Modal.show = function(choice) {
var opts = {};
if (choice && typeof choice == 'string' && Drupal.settings[choice]) {
// This notation guarantees we are actually copying it.
$.extend(true, opts, Drupal.settings[choice]);
}
else if (choice) {
$.extend(true, opts, choice);
}
var defaults = {
modalTheme: 'CToolsModalDialog',
throbberTheme: 'CToolsModalThrobber',
animation: 'show',
animationSpeed: 'fast',
modalSize: {
type: 'scale',
width: .8,
height: .8,
addWidth: 0,
addHeight: 0,
// How much to remove from the inner content to make space for the
// theming.
contentRight: 25,
contentBottom: 45
},
modalOptions: {
opacity: .55,
background: '#fff'
}
};
var settings = {};
$.extend(true, settings, defaults, Drupal.settings.CToolsModal, opts);
if (Drupal.CTools.Modal.currentSettings && Drupal.CTools.Modal.currentSettings != settings) {
Drupal.CTools.Modal.modal.remove();
Drupal.CTools.Modal.modal = null;
}
Drupal.CTools.Modal.currentSettings = settings;
var resize = function(e) {
// When creating the modal, it actually exists only in a theoretical
// place that is not in the DOM. But once the modal exists, it is in the
// DOM so the context must be set appropriately.
var context = e ? document : Drupal.CTools.Modal.modal;
if (Drupal.CTools.Modal.currentSettings.modalSize.type == 'scale') {
var width = $(window).width() * Drupal.CTools.Modal.currentSettings.modalSize.width;
var height = $(window).height() * Drupal.CTools.Modal.currentSettings.modalSize.height;
}
else {
var width = Drupal.CTools.Modal.currentSettings.modalSize.width;
var height = Drupal.CTools.Modal.currentSettings.modalSize.height;
}
// Use the additionol pixels for creating the width and height.
$('div.ctools-modal-content', context).css({
'width': width + Drupal.CTools.Modal.currentSettings.modalSize.addWidth + 'px',
'height': height + Drupal.CTools.Modal.currentSettings.modalSize.addHeight + 'px'
});
$('div.ctools-modal-content .modal-content', context).css({
'width': (width - Drupal.CTools.Modal.currentSettings.modalSize.contentRight) + 'px',
'height': (height - Drupal.CTools.Modal.currentSettings.modalSize.contentBottom) + 'px'
});
}
if (!Drupal.CTools.Modal.modal) {
Drupal.CTools.Modal.modal = $(Drupal.theme(settings.modalTheme));
if (settings.modalSize.type == 'scale') {
$(window).bind('resize', resize);
}
}
resize();
$('span.modal-title', Drupal.CTools.Modal.modal).html(Drupal.CTools.Modal.currentSettings.loadingText);
Drupal.CTools.Modal.modalContent(Drupal.CTools.Modal.modal, settings.modalOptions, settings.animation, settings.animationSpeed);
$('#modalContent .modal-content').html(Drupal.theme(settings.throbberTheme));
Earl Miles
committed
};
/**
* Hide the modal
*/
Drupal.CTools.Modal.dismiss = function() {
if (Drupal.CTools.Modal.modal) {
Drupal.CTools.Modal.unmodalContent(Drupal.CTools.Modal.modal);
}
};
/**
* Provide the HTML to create the modal dialog.
*/
Drupal.theme.prototype.CToolsModalDialog = function () {
var html = ''
html += ' <div id="ctools-modal">'
html += ' <div class="ctools-modal-content">' // panels-modal-content
html += ' <div class="modal-header">';
html += ' <a class="close" href="#">';
html += Drupal.CTools.Modal.currentSettings.closeText + Drupal.CTools.Modal.currentSettings.closeImage;
html += ' </a>';
html += ' <span id="modal-title" class="modal-title"> </span>';
html += ' </div>';
html += ' <div id="modal-content" class="modal-content">';
html += ' </div>';
html += ' </div>';
html += ' </div>';
return html;
/**
* Provide the HTML to create the throbber.
*/
Drupal.theme.prototype.CToolsModalThrobber = function () {
var html = '';
html += ' <div id="modal-throbber">';
html += ' <div class="modal-throbber-wrapper">';
html += Drupal.CTools.Modal.currentSettings.throbber;
html += ' </div>';
html += ' </div>';
return html;
};
/**
* Figure out what settings string to use to display a modal.
*/
Drupal.CTools.Modal.getSettings = function (object) {
var match = $(object).attr('class').match(/ctools-modal-(\S+)/);
if (match) {
return match[1];
}
}
/**
* Click function for modals that can be cached.
*/
Drupal.CTools.Modal.clickAjaxCacheLink = function () {
Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
return Drupal.CTools.AJAX.clickAJAXCacheLink.apply(this);
};
/**
* Handler to prepare the modal for the response
*/
Drupal.CTools.Modal.clickAjaxLink = function () {
Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
return false;
};
/**
* Submit responder to do an AJAX submit on all modal forms.
*/
Drupal.CTools.Modal.submitAjaxForm = function(e) {
var url = $(this).attr('action');
var form = $(this);
setTimeout(function() { Drupal.CTools.AJAX.ajaxSubmit(form, url); }, 1);
return false;
}
/**
* Bind links that will open modals to the appropriate function.
*/
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
Drupal.behaviors.ZZCToolsModal = {
attach: function(context) {
// Bind links
// Note that doing so in this order means that the two classes can be
// used together safely.
/*
* @todo remimplement the warm caching feature
$('a.ctools-use-modal-cache:not(.ctools-use-modal-processed)', context)
.addClass('ctools-use-modal-processed')
.click(Drupal.CTools.Modal.clickAjaxCacheLink)
.each(function () {
Drupal.CTools.AJAX.warmCache.apply(this);
});
*/
$('a.ctools-use-modal:not(.ctools-use-modal-processed)', context)
.addClass('ctools-use-modal-processed')
.click(Drupal.CTools.Modal.clickAjaxLink)
.each(function () {
// Create a drupal ajax object
var element_settings = {};
if ($(this).attr('href')) {
element_settings.url = $(this).attr('href');
element_settings.event = 'click';
element_settings.progress = { type: 'throbber' };
}
var base = $(this).attr('href');
Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
// Attach the display behavior to the ajax object
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
);
// Bind buttons
$('input.ctools-use-modal:not(.ctools-use-modal-processed), button.ctools-use-modal:not(.ctools-use-modal-processed)', context)
.addClass('ctools-use-modal-processed')
.click(Drupal.CTools.Modal.clickAjaxLink)
.each(function() {
var button = this;
var element_settings = {};
// AJAX submits specified in this manner automatically submit to the
// normal form action.
element_settings.url = Drupal.CTools.Modal.findURL(this);
element_settings.event = 'click';
var base = $(this).attr('id');
Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
// Make sure changes to settings are reflected in the URL.
$('.' + $(button).attr('id') + '-url').change(function() {
Drupal.ajax[base].options.url = Drupal.CTools.Modal.findURL(button);
});
});
// Bind our custom event to the form submit
$('#modal-content form:not(.ctools-use-modal-processed)', context)
.addClass('ctools-use-modal-processed')
.each(function() {
var element_settings = {};
element_settings.url = $(this).attr('action');
element_settings.event = 'submit';
element_settings.progress = { 'type': 'throbber' }
var base = $(this).attr('id');
Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
Drupal.ajax[base].form = $(this);
$('input[type=submit], button', this).click(function() {
Drupal.ajax[base].element = this;
this.form.clk = this;
});
};
// The following are implementations of AJAX responder commands.
/**
* AJAX responder command to place HTML within the modal.
*/
Drupal.CTools.Modal.modal_display = function(ajax, response, status) {
Earl Miles
committed
if ($('#modalContent').length == 0) {
Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(ajax.element));
}
$('#modal-title').html(response.title);
$('#modal-content').html(response.output);
}
/**
* AJAX responder command to dismiss the modal.
*/
Drupal.CTools.Modal.modal_dismiss = function(command) {
Drupal.CTools.Modal.dismiss();
$('link.ctools-temporary-css').remove();
}
Earl Miles
committed
/**
* Display loading
*/
//Drupal.CTools.AJAX.commands.modal_loading = function(command) {
Drupal.CTools.Modal.modal_loading = function(command) {
Drupal.CTools.Modal.modal_display({
output: Drupal.theme(Drupal.CTools.Modal.currentSettings.throbberTheme),
title: Drupal.CTools.Modal.currentSettings.loadingText
Earl Miles
committed
});
}
/**
* Find a URL for an AJAX button.
*
* The URL for this gadget will be composed of the values of items by
* taking the ID of this item and adding -url and looking for that
* class. They need to be in the form in order since we will
* concat them all together using '/'.
*/
Drupal.CTools.Modal.findURL = function(item) {
var url = '';
var url_class = '.' + $(item).attr('id') + '-url';
$(url_class).each(
function() {
if (url && $(this).val()) {
url += '/';
}
url += $(this).val();
});
return url;
};
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
/**
* modalContent
* @param content string to display in the content box
* @param css obj of css attributes
* @param animation (fadeIn, slideDown, show)
* @param speed (valid animation speeds slow, medium, fast or # in ms)
*/
Drupal.CTools.Modal.modalContent = function(content, css, animation, speed) {
// If our animation isn't set, make it just show/pop
if (!animation) {
animation = 'show';
}
else {
// If our animation isn't "fadeIn" or "slideDown" then it always is show
if (animation != 'fadeIn' && animation != 'slideDown') {
animation = 'show';
}
}
if (!speed) {
speed = 'fast';
}
// Build our base attributes and allow them to be overriden
css = jQuery.extend({
position: 'absolute',
left: '0px',
margin: '0px',
background: '#000',
opacity: '.55'
}, css);
// Add opacity handling for IE.
css.filter = 'alpha(opacity=' + (100 * css.opacity) + ')';
content.hide();
// if we already ahve a modalContent, remove it
if ( $('#modalBackdrop')) $('#modalBackdrop').remove();
if ( $('#modalContent')) $('#modalContent').remove();
// position code lifted from http://www.quirksmode.org/viewport/compatibility.html
if (self.pageYOffset) { // all except Explorer
var wt = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
var wt = document.documentElement.scrollTop;
} else if (document.body) { // all other Explorers
var wt = document.body.scrollTop;
}
// Get our dimensions
// Get the docHeight and (ugly hack) add 50 pixels to make sure we dont have a *visible* border below our div
var docHeight = $(document).height() + 50;
var docWidth = $(document).width();
var winHeight = $(window).height();
var winWidth = $(window).width();
if( docHeight < winHeight ) docHeight = winHeight;
// Create our divs
$('body').append('<div id="modalBackdrop" style="z-index: 1000; display: none;"></div><div id="modalContent" style="z-index: 1001; position: absolute;">' + $(content).html() + '</div>');
// Keyboard and focus event handler ensures focus stays on modal elements only
modalEventHandler = function( event ) {
target = null;
if ( event ) { //Mozilla
target = event.target;
} else { //IE
event = window.event;
target = event.srcElement;
}
var parents = $(target).parents().get();
for (var i in $(target).parents().get()) {
var position = $(parents[i]).css('position');
if (position == 'absolute' || position == 'fixed') {
return true;
}
}
if( $(target).filter('*:visible').parents('#modalContent').size()) {
// allow the event only if target is a visible child node of #modalContent
return true;
}
if ( $('#modalContent')) $('#modalContent').get(0).focus();
return false;
};
$('body').bind( 'focus', modalEventHandler );
$('body').bind( 'keypress', modalEventHandler );
// Create our content div, get the dimensions, and hide it
var modalContent = $('#modalContent').css('top','-1000px');
var mdcTop = wt + ( winHeight / 2 ) - ( modalContent.outerHeight() / 2);
var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
$('#modalBackdrop').css(css).css('top', 0).css('height', docHeight + 'px').css('width', docWidth + 'px').show();
modalContent.css({top: mdcTop + 'px', left: mdcLeft + 'px'}).hide()[animation](speed);
// Bind a click for closing the modalContent
modalContentClose = function(){close(); return false;};
$('.close').bind('click', modalContentClose);
// Bind a keypress on escape for closing the modalContent
modalEventEscapeCloseHandler = function(event) {
if (event.keyCode == 27) {
close();
return false;
}
};
$(document).bind('keypress', modalEventEscapeCloseHandler);
// Close the open modal content and backdrop
function close() {
// Unbind the events
$(window).unbind('resize', modalContentResize);
$('body').unbind( 'focus', modalEventHandler);
$('body').unbind( 'keypress', modalEventHandler );
$('.close').unbind('click', modalContentClose);
$('body').unbind('keypress', modalEventEscapeCloseHandler);
$(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
// Set our animation parameters and use them
if ( animation == 'fadeIn' ) animation = 'fadeOut';
if ( animation == 'slideDown' ) animation = 'slideUp';
if ( animation == 'show' ) animation = 'hide';
// Close the content
modalContent.hide()[animation](speed);
// Remove the content
$('#modalContent').remove();
$('#modalBackdrop').remove();
};
// Move and resize the modalBackdrop and modalContent on resize of the window
modalContentResize = function(){
// Get our heights
var docHeight = $(document).height();
var docWidth = $(document).width();
var winHeight = $(window).height();
var winWidth = $(window).width();
if( docHeight < winHeight ) docHeight = winHeight;
// Get where we should move content to
var modalContent = $('#modalContent');
var mdcTop = ( winHeight / 2 ) - ( modalContent.outerHeight() / 2);
var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
// Apply the changes
$('#modalBackdrop').css('height', docHeight + 'px').css('width', docWidth + 'px').show();
modalContent.css('top', mdcTop + 'px').css('left', mdcLeft + 'px').show();
};
$(window).bind('resize', modalContentResize);
$('#modalContent').focus();
};
/**
* unmodalContent
* @param content (The jQuery object to remove)
* @param animation (fadeOut, slideUp, show)
* @param speed (valid animation speeds slow, medium, fast or # in ms)
*/
Drupal.CTools.Modal.unmodalContent = function(content, animation, speed)
{
// If our animation isn't set, make it just show/pop
if (!animation) { var animation = 'show'; } else {
// If our animation isn't "fade" then it always is show
if (( animation != 'fadeOut' ) && ( animation != 'slideUp')) animation = 'show';
}
// Set a speed if we dont have one
if ( !speed ) var speed = 'fast';
// Unbind the events we bound
$(window).unbind('resize', modalContentResize);
$('body').unbind('focus', modalEventHandler);
$('body').unbind('keypress', modalEventHandler);
$('.close').unbind('click', modalContentClose);
$(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
// jQuery magic loop through the instances and run the animations or removal.
content.each(function(){
if ( animation == 'fade' ) {
$('#modalContent').fadeOut(speed,function(){$('#modalBackdrop').fadeOut(speed, function(){$(this).remove();});$(this).remove();});
} else {
if ( animation == 'slide' ) {
$('#modalContent').slideUp(speed,function(){$('#modalBackdrop').slideUp(speed, function(){$(this).remove();});$(this).remove();});
} else {
$('#modalContent').remove();$('#modalBackdrop').remove();
}
}
});
};
$(function() {
Drupal.ajax.prototype.commands.modal_display = Drupal.CTools.Modal.modal_display;
Drupal.ajax.prototype.commands.modal_dismiss = Drupal.CTools.Modal.modal_dismiss;
});
})(jQuery);