/**
* @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.
*/
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));
};
/**
* 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 += '
';
return html;
}
/**
* Provide the HTML to create the throbber.
*/
Drupal.theme.prototype.CToolsModalThrobber = function () {
var html = '';
html += ' ';
html += '
';
html += Drupal.CTools.Modal.currentSettings.throbber;
html += '
';
html += '
';
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);
};
/**
* Generic replacement click handler to open the modal with the destination
* specified by the href of the link.
*/
Drupal.CTools.Modal.clickAjaxLink = function () {
// show the empty dialog right away.
Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
Drupal.CTools.AJAX.clickAJAXLink.apply(this);
if (!$(this).hasClass('ctools-ajaxing')) {
Drupal.CTools.Modal.dismiss();
}
return false;
};
/**
* Generic replacement click handler to open the modal with the destination
* specified by the href of the link.
*/
Drupal.CTools.Modal.clickAjaxButton = function() {
if ($(this).hasClass('ctools-ajaxing')) {
return false;
}
Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
Drupal.CTools.AJAX.clickAJAXButton.apply(this);
if (!$(this).hasClass('ctools-ajaxing')) {
Drupal.CTools.Modal.dismiss();
}
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.
*/
Drupal.behaviors.ZZCToolsModal = function(context) {
// Bind links
// Note that doing so in this order means that the two classes can be
// used together safely.
$('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);
// 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.clickAjaxButton);
// Bind submit links in the modal form.
$('#modal-content form:not(.ctools-use-modal-processed)', context)
.addClass('ctools-use-modal-processed')
.submit(Drupal.CTools.Modal.submitAjaxForm)
.bind('CToolsAJAXSubmit', Drupal.CTools.AJAX.ajaxSubmit);
// add click handlers so that we can tell which button was clicked,
// because the AJAX submit does not set the values properly.
$('#modal-content input[type="submit"]:not(.ctools-use-modal-processed), #modal-content button:not(.ctools-use-modal-processed)', context)
.addClass('ctools-use-modal-processed')
.click(function() {
if (Drupal.autocompleteSubmit && !Drupal.autocompleteSubmit()) {
return false;
}
// Make sure it knows our button.
if (!$(this.form).hasClass('ctools-ajaxing')) {
this.form.clk = this;
}
});
// Bind a click handler to allow elements with the 'ctools-close-modal'
// class to close the modal.
$('.ctools-close-modal:not(.ctools-close-modal-processed)', context)
.addClass('ctools-close-modal-processed')
.click(function() {
Drupal.CTools.Modal.dismiss();
return false;
});
};
// The following are implementations of AJAX responder commands.
/**
* AJAX responder command to place HTML within the modal.
*/
Drupal.CTools.AJAX.commands.modal_display = function(command) {
$('#modal-title').html(command.title);
$('#modal-content').html(command.output);
Drupal.attachBehaviors();
}
/**
* AJAX responder command to dismiss the modal.
*/
Drupal.CTools.AJAX.commands.modal_dismiss = function(command) {
Drupal.CTools.Modal.dismiss();
$('link.ctools-temporary-css').remove();
}
/**
* Display loading
*/
Drupal.CTools.AJAX.commands.modal_loading = function(command) {
Drupal.CTools.AJAX.commands.modal_display({
output: Drupal.theme(Drupal.CTools.Modal.currentSettings.throbberTheme),
title: Drupal.CTools.Modal.currentSettings.loadingText
});
}
/**
* 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('' + $(content).html() + '
');
// 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);
// 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);
$(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
// 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();
}
}
});
};
})(jQuery);