570 lines
19 KiB
JavaScript
570 lines
19 KiB
JavaScript
/**
|
|
* @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));
|
|
|
|
// Position autocomplete results based on the scroll position of the modal.
|
|
$('#modalContent .modal-content').delegate('input.form-autocomplete', 'keyup', function() {
|
|
$('#autocomplete').css('top', $(this).position().top + $(this).outerHeight() + $(this).offsetParent().filter('#modal-content').scrollTop());
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 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 $form = $(this);
|
|
var url = $form.attr('action');
|
|
|
|
setTimeout(function() { Drupal.CTools.AJAX.ajaxSubmit($form, url); }, 1);
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Bind links that will open modals to the appropriate function.
|
|
*/
|
|
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', context).once('ctools-use-modal', function() {
|
|
$(this).click(Drupal.CTools.Modal.clickAjaxCacheLink);
|
|
Drupal.CTools.AJAX.warmCache.apply(this);
|
|
});
|
|
*/
|
|
|
|
$('area.ctools-use-modal, a.ctools-use-modal', context).once('ctools-use-modal', function() {
|
|
var $this = $(this);
|
|
$this.click(Drupal.CTools.Modal.clickAjaxLink);
|
|
// 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);
|
|
});
|
|
|
|
// Bind buttons
|
|
$('input.ctools-use-modal, button.ctools-use-modal', context).once('ctools-use-modal', function() {
|
|
var $this = $(this);
|
|
$this.click(Drupal.CTools.Modal.clickAjaxLink);
|
|
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);
|
|
if (element_settings.url == '') {
|
|
element_settings.url = $(this).closest('form').attr('action');
|
|
}
|
|
element_settings.event = 'click';
|
|
element_settings.setClick = true;
|
|
|
|
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', context).once('ctools-use-modal', function() {
|
|
var $this = $(this);
|
|
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(event) {
|
|
Drupal.ajax[base].element = this;
|
|
this.form.clk = this;
|
|
// Stop autocomplete from submitting.
|
|
if (Drupal.autocompleteSubmit && !Drupal.autocompleteSubmit()) {
|
|
return false;
|
|
}
|
|
// An empty event means we were triggered via .click() and
|
|
// in jquery 1.4 this won't trigger a submit.
|
|
if (event.bubbles == undefined) {
|
|
$(this.form).trigger('submit');
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Bind a click handler to allow elements with the 'ctools-close-modal'
|
|
// class to close the modal.
|
|
$('.ctools-close-modal', context).once('ctools-close-modal')
|
|
.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.Modal.modal_display = function(ajax, response, status) {
|
|
if ($('#modalContent').length == 0) {
|
|
Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(ajax.element));
|
|
}
|
|
$('#modal-title').html(response.title);
|
|
// Simulate an actual page load by scrolling to the top after adding the
|
|
// content. This is helpful for allowing users to see error messages at the
|
|
// top of a form, etc.
|
|
$('#modal-content').html(response.output).scrollTop(0);
|
|
|
|
// Attach behaviors within a modal dialog.
|
|
var settings = response.settings || ajax.settings || Drupal.settings;
|
|
Drupal.attachBehaviors('#modalContent', settings);
|
|
}
|
|
|
|
/**
|
|
* AJAX responder command to dismiss the modal.
|
|
*/
|
|
Drupal.CTools.Modal.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.Modal.modal_loading = function(command) {
|
|
Drupal.CTools.Modal.modal_display({
|
|
output: Drupal.theme(Drupal.CTools.Modal.currentSettings.throbberTheme),
|
|
title: Drupal.CTools.Modal.currentSettings.loadingText
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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() {
|
|
var $this = $(this);
|
|
if (url && $this.val()) {
|
|
url += '/';
|
|
}
|
|
url += $this.val();
|
|
});
|
|
return url;
|
|
};
|
|
|
|
|
|
/**
|
|
* 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 have modalContent, remove it.
|
|
if ($('#modalBackdrop').length) $('#modalBackdrop').remove();
|
|
if ($('#modalContent').length) $('#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 = 0; i < parents.length; ++i) {
|
|
var position = $(parents[i]).css('position');
|
|
if (position == 'absolute' || position == 'fixed') {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
if ($(target).is('#modalContent, body') || $(target).filter('*:visible').parents('#modalContent').length) {
|
|
// Allow the event only if target is a visible child node
|
|
// of #modalContent.
|
|
return true;
|
|
}
|
|
else {
|
|
$('#modalContent').focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
};
|
|
$('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('keydown', 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'));
|
|
|
|
// 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(){
|
|
|
|
// 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 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 = wt + ( 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);
|