| Current File : /data/web/virtuals/215191/virtual/www/domains/starwars.cz/sites/all/modules/ctools/js/modal.js |
/**
* @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'
},
modalClass: 'default'
};
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, settings.modalClass);
$('#modalContent .modal-content').html(Drupal.theme(settings.throbberTheme)).addClass('ctools-modal-loading');
// 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.
// We also have to check jQuery version to prevent
// IE8 + jQuery 1.4.4 to break on other events
// bound to the submit button.
if (jQuery.fn.jquery.substr(0, 3) === '1.4' && typeof 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);
if ($('#modal-content').hasClass('ctools-modal-loading')) {
$('#modal-content').removeClass('ctools-modal-loading');
}
else {
// If the modal was already shown, and we are simply replacing its
// content, then focus on the first focusable element in the modal.
// (When first showing the modal, focus will be placed on the close
// button by the show() function called above.)
$('#modal-content :focusable:first').focus();
}
}
/**
* 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)
* @param modalClass class added to div#modalContent
*/
Drupal.CTools.Modal.modalContent = function(content, css, animation, speed, modalClass) {
// 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 && 0 !== 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" 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>');
// Get a list of the tabbable elements in the modal content.
var getTabbableElements = function () {
var tabbableElements = $('#modalContent :tabbable'),
radioButtons = tabbableElements.filter('input[type="radio"]');
// The list of tabbable elements from jQuery is *almost* right. The
// exception is with groups of radio buttons. The list from jQuery will
// include all radio buttons, when in fact, only the selected radio button
// is tabbable, and if no radio buttons in a group are selected, then only
// the first is tabbable.
if (radioButtons.length > 0) {
// First, build up an index of which groups have an item selected or not.
var anySelected = {};
radioButtons.each(function () {
var name = this.name;
if (typeof anySelected[name] === 'undefined') {
anySelected[name] = radioButtons.filter('input[name="' + name + '"]:checked').length !== 0;
}
});
// Next filter out the radio buttons that aren't really tabbable.
var found = {};
tabbableElements = tabbableElements.filter(function () {
var keep = true;
if (this.type == 'radio') {
if (anySelected[this.name]) {
// Only keep the selected one.
keep = this.checked;
}
else {
// Only keep the first one.
if (found[this.name]) {
keep = false;
}
found[this.name] = true;
}
}
return keep;
});
}
return tabbableElements.get();
};
// Keyboard and focus event handler ensures only modal elements gain focus.
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 {
getTabbableElements()[0].focus();
}
event.preventDefault();
};
$('body').bind( 'focus', modalEventHandler );
$('body').bind( 'keypress', modalEventHandler );
// Keypress handler Ensures you can only TAB to elements within the modal.
// Based on the psuedo-code from WAI-ARIA 1.0 Authoring Practices section
// 3.3.1 "Trapping Focus".
modalTabTrapHandler = function (evt) {
// We only care about the TAB key.
if (evt.which != 9) {
return true;
}
var tabbableElements = getTabbableElements(),
firstTabbableElement = tabbableElements[0],
lastTabbableElement = tabbableElements[tabbableElements.length - 1],
singleTabbableElement = firstTabbableElement == lastTabbableElement,
node = evt.target;
// If this is the first element and the user wants to go backwards, then
// jump to the last element.
if (node == firstTabbableElement && evt.shiftKey) {
if (!singleTabbableElement) {
lastTabbableElement.focus();
}
return false;
}
// If this is the last element and the user wants to go forwards, then
// jump to the first element.
else if (node == lastTabbableElement && !evt.shiftKey) {
if (!singleTabbableElement) {
firstTabbableElement.focus();
}
return false;
}
// If this element isn't in the dialog at all, then jump to the first
// or last element to get the user into the game.
else if ($.inArray(node, tabbableElements) == -1) {
// Make sure the node isn't in another modal (ie. WYSIWYG modal).
var parents = $(node).parents().get();
for (var i = 0; i < parents.length; ++i) {
var position = $(parents[i]).css('position');
if (position == 'absolute' || position == 'fixed') {
return true;
}
}
if (evt.shiftKey) {
lastTabbableElement.focus();
}
else {
firstTabbableElement.focus();
}
}
};
$('body').bind('keydown', modalTabTrapHandler);
// Create our content div, get the dimensions, and hide it
var modalContent = $('#modalContent').css('top','-1000px');
var $modalHeader = modalContent.find('.modal-header');
var mdcTop = wt + Math.max((winHeight / 2) - (modalContent.outerHeight() / 2), 0);
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', $modalHeader).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);
// Per WAI-ARIA 1.0 Authoring Practices, initial focus should be on the
// close button, but we should save the original focus to restore it after
// the dialog is closed.
var oldFocus = document.activeElement;
$('.close', $modalHeader).focus();
// Close the open modal content and backdrop
function close() {
// Unbind the events
$(window).unbind('resize', modalContentResize);
$('body').unbind( 'focus', modalEventHandler);
$('body').unbind( 'keypress', modalEventHandler );
$('body').unbind( 'keydown', modalTabTrapHandler );
$('.close', $modalHeader).unbind('click', modalContentClose);
$(document).unbind('keydown', modalEventEscapeCloseHandler);
$(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
// Closing animation.
switch (animation) {
case 'fadeIn':
modalContent.fadeOut(speed, modalContentRemove);
break;
case 'slideDown':
modalContent.slideUp(speed, modalContentRemove);
break;
case 'show':
modalContent.hide(speed, modalContentRemove);
break;
}
}
// Remove the content.
modalContentRemove = function () {
$('#modalContent').remove();
$('#modalBackdrop').remove();
// Restore focus to where it was before opening the dialog.
$(oldFocus).focus();
};
// Move and resize the modalBackdrop and modalContent on window resize.
modalContentResize = function () {
// Reset the backdrop height/width to get accurate document size.
$('#modalBackdrop').css('height', '').css('width', '');
// 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 + Math.max((winHeight / 2) - (modalContent.outerHeight() / 2), 0);
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);
};
/**
* 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);
$('body').unbind( 'keydown', modalTabTrapHandler );
var $modalContent = $('#modalContent');
var $modalHeader = $modalContent.find('.modal-header');
$('.close', $modalHeader).unbind('click', modalContentClose);
$('body').unbind('keypress', modalEventEscapeCloseHandler);
$(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);