Index: js/lib/mc.js =================================================================== RCS file: /cvs/drupal-contrib/contributions/modules/panels/js/lib/mc.js,v retrieving revision 1.1.2.4 diff -u -r1.1.2.4 mc.js --- js/lib/mc.js 9 Jul 2008 23:01:21 -0000 1.1.2.4 +++ js/lib/mc.js 31 Aug 2008 09:55:32 -0000 @@ -1,13 +1,13 @@ /** * modalContent jQuery Plugin * - * @version 0.9 - * @since 2006-11-28 + * @version 0.9.x + * @since 2006-12-19 * @copyright Copyright (c) 2006 Glyphix Studio, Inc. http://www.glyphix.com * @author Gavin M. Roy * @license MIT http://www.opensource.org/licenses/mit-license.php - * @requires >= jQuery 1.0.3 http://jquery.com/ - * @requires dimensions.js http://jquery.com/dev/svn/trunk/plugins/dimensions/dimensions.js?format=raw + * @requires >= jQuery 1.0.3 http://jquery.com/ + * @requires dimensions.js http://jquery.com/dev/svn/trunk/plugins/dimensions/dimensions.js?format=raw * * Call modalContent() on a DOM object and it will make a centered modal box over a div overlay preventing access to the page. * Create an element (anchor/img/etc) with the class "close" in your content to close the modal box on click. @@ -26,27 +26,46 @@ if ( $('#modalBackdrop') ) $('#modalBackdrop').remove(); if ( $('#modalContent') ) $('#modalContent').remove(); - // hide the scrollbars - $('body').css('overflow', 'hidden'); - // 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; + 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; + var wt = document.body.scrollTop; } // Get our dimensions + var docHeight = $(document).outerHeight(); var winHeight = $(window).height(); - var winWidth = $(window).width(); + var winWidth = $(window).innerWidth(); + 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; + } + if( $(target).filter('*:visible').parents('#modalContent').size() ) { + // allow the event only if target is a visible child node of #modalContent + return true; + } + $('#modalContent .focus').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 modalContent = $('#modalContent').top('-1000px'); var mdcTop = wt + ( winHeight / 2 ) - ( modalContent.outerHeight() / 2); var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2); modalContent.hide(); @@ -54,31 +73,30 @@ // Apply our css and positioning, then show if ( animation == 'fade' ) { - $('#modalBackdrop').css('top',wt).css('height', winHeight + 'px').css('width', winWidth + 'px').show(); - modalContent.css('top', mdcTop + 'px').css('left', mdcLeft + 'px').fadeIn(speed); + $('#modalBackdrop').top(wt).css(css).height(docHeight + 'px').width(winWidth + 'px').show(); + modalContent.top(mdcTop + 'px').left(mdcLeft + 'px').fadeIn(speed); } else { if ( animation == 'slide' ) { - $('#modalBackdrop').css('top', wt).css('height', winHeight + 'px').css('width', winWidth + 'px').show(); - modalContent.hide().css('top', mdcTop + 'px').css('left', mdcLeft + 'px').slideDown(speed); + $('#modalBackdrop').top(wt).css(css).height(docHeight + 'px').width(winWidth + 'px').show(); + modalContent.hide().top(mdcTop + 'px').left(mdcLeft + 'px').slideDown(speed); } else { if ( animation == 'show') { - $('#modalBackdrop').css('top', wt).css('height', winHeight + 'px').css('width', winWidth + 'px').show(); - modalContent.css('top', mdcTop + 'px').css('left', mdcLeft + 'px').show(); + $('#modalBackdrop').top(wt).css(css).height(docHeight + 'px').width(winWidth + 'px').show(); + modalContent.top(mdcTop + 'px').left(mdcLeft + 'px').show(); } } } // Bind a click for closing the modalContent - $('#modalContent a.close').click(function(){close(); return false}); + $('#modalContent .close').click(function(){close(); return false}); // Close the open modal content and backdrop function close() { $(window).unbind('resize'); - - // hide the scrollbars - $('body').css('overflow', 'auto'); + $('body').unbind( 'focus', modalEventHandler ); + $('body').unbind( 'keypress', modalEventHandler ); if ( animation == 'fade' ) { $('#modalContent').fadeOut(speed,function(){$('#modalBackdrop').fadeOut(speed, function(){$(this).remove();});$(this).remove();}); @@ -94,8 +112,10 @@ // Move and resize the modalBackdrop and modalContent on resize of the window $(window).resize(function(){ // Get our heights + var docHeight = $(document).outerHeight(); var winHeight = $(window).height(); var winWidth = $(window).width(); + if( docHeight < winHeight ) docHeight = winHeight; // Get where we should move content to var modalContent = $('#modalContent'); @@ -103,9 +123,11 @@ var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2); // Apply the changes - $('#modalBackdrop').css('height', winHeight + 'px').css('width', winWidth + 'px').show(); - modalContent.css('top', mdcTop + 'px').css('left', mdcLeft + 'px').show(); + $('#modalBackdrop').height(docHeight + 'px').width(winWidth + 'px').show(); + modalContent.top(mdcTop + 'px').left(mdcLeft + 'px').show(); }); + + $('#modalContent .focus').focus(); }; /** @@ -156,9 +178,8 @@ // Unbind the resize we bound $(window).unbind('resize'); - - // hide the scrollbars - $('body').css('overflow', 'auto'); + $('body').unbind( 'focus', modalEventHandler ); + $('body').unbind( 'keypress', modalEventHandler ); // jQuery magic loop through the instances and run the animations or removal. this.each(function(){ @@ -172,4 +193,4 @@ } } }); -}; +}; \ No newline at end of file