### Eclipse Workspace Patch 1.0 #P drupal 7 Index: modules/overlay/overlay-child.js =================================================================== RCS file: /cvs/drupal/drupal/modules/overlay/overlay-child.js,v retrieving revision 1.8 diff -u -r1.8 overlay-child.js --- modules/overlay/overlay-child.js 24 Apr 2010 07:14:29 -0000 1.8 +++ modules/overlay/overlay-child.js 1 May 2010 20:29:26 -0000 @@ -3,30 +3,24 @@ (function ($) { /** - * Overlay object for child windows. - */ -Drupal.overlayChild = Drupal.overlayChild || { processed: false, behaviors: {} }; - -/** * Attach the child dialog behavior to new content. */ Drupal.behaviors.overlayChild = { attach: function (context, settings) { - var self = Drupal.overlayChild; - var settings = settings.overlayChild || {}; - // Make sure this behavior is not processed more than once. - if (self.processed) { + if (this.processed) { return; } - self.processed = true; + this.processed = true; // If we cannot reach the parent window, then we have nothing else to do // here. - if (!$.isPlainObject(parent.Drupal) || !$.isPlainObject(parent.Drupal.overlay)) { + if (!parent.Drupal || !parent.Drupal.overlay) { return; } + var settings = settings.overlayChild || {}; + // If a form has been submitted successfully, then the server side script // may have decided to tell us the parent window to close the popup dialog. if (settings.closeOverlay) { @@ -38,7 +32,7 @@ // disappear as soon as we close the iframe. var p = parent; p.Drupal.overlay.close(); - if (typeof settings.redirect == 'string') { + if (typeof settings.redirect == "string") { p.Drupal.overlay.redirect(settings.redirect); } }, 1); @@ -55,11 +49,20 @@ parent.Drupal.overlay.bindChild(window); // Attach child related behaviors to the iframe document. - self.attachBehaviors(context, settings); + Drupal.overlayChild.attachBehaviors(context, settings); } }; /** + * Overlay object for child windows. + */ +Drupal.overlayChild = Drupal.overlayChild || { + behaviors: {} +}; + +Drupal.overlayChild.prototype = {}; + +/** * Attach child related behaviors to the iframe document. */ Drupal.overlayChild.attachBehaviors = function (context, settings) { @@ -86,7 +89,7 @@ * to bind their own handlers to links and also to prevent overlay's handling. */ Drupal.overlayChild.behaviors.addClickHandler = function (context, settings) { - $(document).bind('click.overlay-event', parent.Drupal.overlay.clickHandler); + $(document).bind("click.drupal-overlay", parent.Drupal.overlay.clickHandler); }; /** @@ -96,19 +99,76 @@ * action attribute get a ?render=overlay suffix. */ Drupal.overlayChild.behaviors.parseForms = function (context, settings) { - $('form', context).once('overlay', function () { + $("form", context).once("overlay", function () { // Obtain the action attribute of the form. - var action = $(this).attr('action'); + var action = $(this).attr("action"); // Keep internal forms in the overlay. - if (action == undefined || (action.indexOf('http') != 0 && action.indexOf('https') != 0)) { - action += (action.indexOf('?') > -1 ? '&' : '?') + 'render=overlay'; - $(this).attr('action', action); + if (action == undefined || (action.indexOf("http") != 0 && action.indexOf("https") != 0)) { + action += (action.indexOf("?") > -1 ? "&" : "?") + "render=overlay"; + $(this).attr("action", action); } // Submit external forms into a new window. else { - $(this).attr('target', '_new'); + $(this).attr("target", "_new"); } }); }; +/** + * Replace the overlay title with a message while loading another page. + */ +Drupal.overlayChild.behaviors.loading = function (context, settings) { + var text = Drupal.t("Loading..."); + + $(document).bind("drupalOverlayBeforeLoad.drupal-overlay", function () { + $("#overlay-title").text(text); + }); +}; + +/** + * Switch active tab immediately. + */ +Drupal.overlayChild.behaviors.tabs = function (context, settings) { + var $tabsLinks = $("#overlay-tabs > li > a"); + + $("#overlay-tabs > li > a").bind("click", function () { + var active_tab = Drupal.t("(active tab)"); + $tabsLinks.parent().siblings().removeClass("active").find("element-invisible:contains(" + active_tab + ")").appendTo(this); + $(this).parent().addClass("active"); + }); +}; + +/** + * If the shortcut add/delete button exists, move it to the overlay titlebar. + */ +Drupal.overlayChild.behaviors.shortcutAddLink = function (context, settings) { + // Remove any existing shortcut button markup from the titlebar. + $("#overlay-titlebar").find(".add-or-remove-shortcuts").remove(); + // If the shortcut add/delete button exists, move it to the titlebar. + var $addToShortcuts = $(".add-or-remove-shortcuts"); + if ($addToShortcuts.length) { + $addToShortcuts.insertAfter("#overlay-title"); + } +}; + +/** + * Override the tableHeaderOffset callback for tableheader.js. + */ +Drupal.overlayChild.behaviors.tableHeaderOffset = function (context, settings) { + Drupal.overlayChild.originalTableHeaderOffset = Drupal.settings.tableHeaderOffset; + + Drupal.settings.tableHeaderOffset = "Drupal.overlayChild.tableHeaderOffset"; +}; + +/** + * Callback function Drupal.settings.tableHeaderOffset. + */ +Drupal.overlayChild.tableHeaderOffset = function () { + var offset = parseInt($(document.body).css("marginTop")); + if (Drupal.overlayChild.originalTableHeaderOffset) { + offset += eval(Drupal.overlayChild.originalTableHeaderOffset + "()"); + } + return offset; +}; + })(jQuery); Index: modules/overlay/overlay-parent.css =================================================================== RCS file: /cvs/drupal/drupal/modules/overlay/overlay-parent.css,v retrieving revision 1.14 diff -u -r1.14 overlay-parent.css --- modules/overlay/overlay-parent.css 28 Apr 2010 20:08:39 -0000 1.14 +++ modules/overlay/overlay-parent.css 1 May 2010 20:29:26 -0000 @@ -1,165 +1,44 @@ /* $Id: overlay-parent.css,v 1.14 2010/04/28 20:08:39 dries Exp $ */ -/** - * ui-dialog overlay. - */ -.ui-widget-overlay { - opacity: 1; - filter: none; - /* Using a transparent png renders faster than using opacity */ - background: transparent url(images/background.png) repeat; +html.overlay-open, +html.overlay-open body { + height: 100%; + overflow: hidden; } -body.overlay-autofit { - overflow-y: scroll; +html.overlay-scrollbar { + overflow: scroll; } -/** - * Overlay wrapper. - */ -#overlay-wrapper { +#overlay-container, +.overlay-modal-background, +.overlay-element { position: absolute; top: 0; left: 0; - width: 100%; - z-index: 501; - padding: 20px 0 15px 0; -} - -/** - * jQuery UI Dialog classes. - */ -.overlay { - position: static; - padding-right: 26px; - margin: 0 auto; - width: 88%; - min-width: 700px; - min-height: 100px; -} - -.overlay.ui-widget-content, -.overlay .ui-widget-header { - background: none; - border: none; -} - -.overlay .ui-dialog-titlebar { - white-space: nowrap; - padding: 0 20px; -} - -.overlay .ui-dialog-title { - margin: 0; - padding: 0.3em 0; - color: #fff; - font-size: 20px; -} -.overlay .ui-dialog-title:active, -.overlay .ui-dialog-title:focus { - outline: 0; -} -.overlay .ui-dialog-titlebar-close, -.overlay .ui-dialog-titlebar-close:hover { - display: block; - right: -25px; - top: 100%; - margin: 0; - border: none; - padding: 0; - width: 26px; - height: 36px; - background: transparent url(images/close.png) no-repeat; - border-top-left-radius: 0; - -moz-border-radius-topleft: 0; - -webkit-border-top-left-radius: 0; -} -.overlay .ui-dialog-titlebar-close span { - display: none; -} -.overlay .ui-dialog-content { - color: #292929; - background-color: #f8f8f8; -} - -/** - * Overlay content. - */ -.overlay #overlay-container { - margin: 0; - padding: 0; - width: 100%; - overflow: visible; - background: #fff; -} -.overlay #overlay-element { - overflow: hidden; - width: 100%; + z-index: 500; height: 100%; + width: 100%; } -/** - * Tabs on the overlay. - */ -.overlay .ui-dialog-titlebar ul { - position: absolute; - right: 20px; - bottom: 0; - margin: 0; - line-height: 27px; - text-transform: uppercase; -} -.overlay .ui-dialog-titlebar ul li { - display: inline; - list-style: none; - margin: 0 0 0 -3px; - padding: 0; +.overlay-modal-background { + /* Using a transparent png renders faster than using opacity */ + background: transparent url(images/background.png) repeat; } -.overlay .ui-dialog-titlebar ul li a, -.overlay .ui-dialog-titlebar ul li a:active, -.overlay .ui-dialog-titlebar ul li a:visited, -.overlay .ui-dialog-titlebar ul li a:hover { - display: inline-block; - background-color: #a6a7a2; - border-radius: 8px 8px 0 0; - -moz-border-radius: 8px 8px 0 0; - -webkit-border-top-left-radius: 8px; - -webkit-border-top-right-radius: 8px; - color: #000; - font-weight: bold; - padding: 0 14px; - text-decoration: none; - font-size: 11px; - margin: 0; -} -.overlay .ui-dialog-titlebar ul li.active a, -.overlay .ui-dialog-titlebar ul li.active a.active, -.overlay .ui-dialog-titlebar ul li.active a:active, -.overlay .ui-dialog-titlebar ul li.active a:visited { - background-color: #fff; - margin: 0; -} -.overlay .ui-dialog-titlebar ul li a:hover { - color: #fff; -} -.overlay .ui-dialog-titlebar ul li.active a:hover { - color: #000; +.overlay-element { + z-index: 501; + background: transparent; + left: -200%; } - -/** - * Add to shortcuts link - */ -.overlay div.add-or-remove-shortcuts { - padding-top: 0.9em; +.overlay-element.overlay-active { + left: 0; } /** - * IE 6 Fix. * - * Use filter to support transparency in IE6 for the overlay background. */ -* html .ui-widget-overlay { - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='modules/overlay/images/background.png', sizingMethod='scale'); - background: none; +.overlay-displace-top, +.overlay-displace-bottom { + z-index: 600; } Index: modules/overlay/overlay.module =================================================================== RCS file: /cvs/drupal/drupal/modules/overlay/overlay.module,v retrieving revision 1.17 diff -u -r1.17 overlay.module --- modules/overlay/overlay.module 24 Apr 2010 07:14:29 -0000 1.17 +++ modules/overlay/overlay.module 1 May 2010 20:29:27 -0000 @@ -46,6 +46,18 @@ } /** + * Implements hook_theme(). + */ +function overlay_theme() { + return array( + 'overlay' => array( + 'render element' => 'page', + 'template' => 'overlay', + ), + ); +} + +/** * Implements hook_init(). * * Determine whether the current page request is destined to appear in the @@ -150,8 +162,7 @@ $module_path . '/overlay-parent.css' => array(), ), 'dependencies' => array( - array('system', 'ui.dialog'), - array('system', 'ui.position'), + array('system', 'ui'), array('system', 'jquery-bbq'), ), ); @@ -163,8 +174,8 @@ 'js' => array( $module_path . '/overlay-child.js' => array(), ), - 'dependencies' => array( - array('system', 'ui'), + 'css' => array( + $module_path . '/overlay-child.css' => array(), ), ); @@ -210,6 +221,22 @@ } /** + * Implements hook_page_build(). + * + * Add admin toolbar to the page_top region automatically. + */ +function overlay_page_build(&$page) { + if (overlay_get_mode() == 'child') { + $page['overlay'] = array( + '#pre_render' => array('toolbar_pre_render'), + '#access' => user_access('access toolbar'), + 'toolbar_drawer' => array(), + ); + $page['overlay']['titlebar'] = array(); + } +} + +/** * Implements hook_page_alter(). */ function overlay_page_alter(&$page) { @@ -221,6 +248,11 @@ $page[$skipped_region]['#access'] = FALSE; } } + + if (overlay_get_mode() == 'child') { + // Add the overlay wrapper before the html wrapper. + array_unshift($page['#theme_wrappers'], 'overlay'); + } } /** @@ -284,6 +316,46 @@ } /** + * Process variables for overlay.tpl.php + * + * Prepare the values passed to the theme_block function to be passed + * into a pluggable template engine. Uses block properties to generate a + * series of template file suggestions. If none are found, the default + * block.tpl.php is used. + * + * Most themes utilize their own copy of block.tpl.php. The default is located + * inside "modules/block/block.tpl.php". Look in there for the full list of + * variables. + * + * The $variables array contains the following arguments: + * - $block + * + * @see overlay.tpl.php + */ +function template_preprocess_overlay(&$variables) { + $variables['tabs'] = menu_primary_local_tasks(); + $variables['title'] = drupal_get_title(); + + $variables['title_attributes_array']['tabindex'] = -1; + $variables['title_attributes_array']['unselectable'] = 'on'; +} + +/** + * Process variables for overlay.tpl.php + * + * Perform final addition and modification of variables before passing into + * the template. To customize these variables, call drupal_render() on elements + * in $variables['page'] during THEME_preprocess_page(). + * + * @see template_preprocess_overlay() + * @see overlay.tpl.php + */ +function template_process_overlay(&$variables) { + // Place the rendered HTML for the page body into a top level variable. + $variables['page'] = $variables['page']['#children']; +} + +/** * Preprocess template variables for page.tpl.php. * * Display breadcrumbs correctly inside the overlay. @@ -296,17 +368,10 @@ $overlay_breadcrumb = drupal_get_breadcrumb(); array_shift($overlay_breadcrumb); $variables['breadcrumb'] = theme('breadcrumb', array('breadcrumb' => $overlay_breadcrumb)); - } -} -/** - * Preprocess template variables for toolbar.tpl.php. - * - * Adding the 'overlay-displace-top' class to the toolbar pushes the overlay - * down, so it appears below the toolbar. - */ -function overlay_preprocess_toolbar(&$variables) { - $variables['classes_array'][] = "overlay-displace-top"; + $variables['tabs'] = ''; + $variables['primary_local_tasks'] = ''; + } } /** @@ -477,9 +542,6 @@ case 'child': drupal_add_library('overlay', 'child'); - // Pass child's document height on to parent document as quickly as - // possible so it can be updated accordingly. - drupal_add_js('if (parent.Drupal && parent.Drupal.overlay) { parent.Drupal.overlay.innerResize(jQuery(document.body).outerHeight()); }', array('type' => 'inline', 'scope' => 'footer')); // Allow modules to act upon overlay events. module_invoke_all('overlay_child_initialize'); Index: modules/overlay/overlay-parent.js =================================================================== RCS file: /cvs/drupal/drupal/modules/overlay/overlay-parent.js,v retrieving revision 1.40 diff -u -r1.40 overlay-parent.js --- modules/overlay/overlay-parent.js 30 Apr 2010 05:25:19 -0000 1.40 +++ modules/overlay/overlay-parent.js 1 May 2010 20:29:26 -0000 @@ -4,8 +4,6 @@ /** * Open the overlay, or load content into it, when an admin link is clicked. - * - * http://docs.jquery.com/Namespaced_Events */ Drupal.behaviors.overlayParent = { attach: function (context, settings) { @@ -15,17 +13,18 @@ } this.processed = true; - // Bind event handlers to the parent window. $(window) - // When the hash (URL fragment) changes, open the overlay if needed. - .bind('hashchange.overlay-event', Drupal.overlay.hashchangeHandler) - // Trigger the hashchange event once, after the page is loaded, so that - // permalinks open the overlay. - .trigger('hashchange.overlay-event'); - // Instead of binding a click event handler to every link we bind one to the - // document and only handle events that bubble up. This allows other scripts - // to bind their own handlers to links and also to prevent overlay's handling. - $(document).bind('click.overlay-event', Drupal.overlay.clickHandler); + // When the hash (URL fragment) changes, open the overlay if needed. + .bind("hashchange.drupal-overlay", Drupal.overlay.hashchangeHandler) + // Trigger the hashchange event once, after the page is loaded, so that + // permalinks open the overlay. + .trigger("hashchange.drupal-overlay"); + + $(document) + // Instead of binding a click event handler to every link we bind one to the + // document and only handle events that bubble up. This allows other scripts + // to bind their own handlers to links and also to prevent overlay's handling. + .bind("click.drupal-overlay, mouseup.drupal-overlay", Drupal.overlay.clickHandler); } }; @@ -44,224 +43,112 @@ * loading. */ Drupal.overlay = Drupal.overlay || { - options: {}, isOpen: false, isOpening: false, isClosing: false, isLoading: false, - resizeTimeoutID: null, - lastHeight: 0, - - $wrapper: null, - $dialog: null, - $dialogTitlebar: null, $container: null, - $iframe: null, + $iframeA: null, + $iframeB: null, - $iframeWindow: null, - $iframeDocument: null, - $iframeBody: null + iframeWindow: null }; +Drupal.overlay.prototype = {}; + /** - * Open an overlay. + * Open the overlay. * - * Ensure that only one overlay is opened ever. Use Drupal.overlay.load() if - * the overlay is already open but a new page needs to be opened. - * - * @param options - * Properties of the overlay to open: - * - url: the URL of the page to open in the overlay. - * - width: width of the overlay in pixels. - * - height: height of the overlay in pixels. - * - autoFit: boolean indicating whether the overlay should be resized to - * fit the contents of the document loaded. - * - customDialogOptions: an object with custom jQuery UI Dialog options. + * @param url + * The URL of the page to open in the overlay. * * @return * If the overlay was opened true, otherwise false. */ -Drupal.overlay.open = function (options) { - var self = this; - +Drupal.overlay.open = function (url) { // Just one overlay is allowed. - if (self.isOpen || self.isOpening) { - return false; + if (this.isOpen || this.isOpening) { + return this.load(url); } - self.isOpening = true; - - var defaultOptions = { - url: options.url, - width: options.width, - height: options.height, - autoFit: (options.autoFit == undefined || options.autoFit), - customDialogOptions: options.customDialogOptions || {} - }; - - self.options = $.extend(defaultOptions, options); + this.isOpening = true; // Create the dialog and related DOM elements. - self.create(); + this.create(); - // Open the dialog. - self.$container.dialog('open'); + this.isOpening = false; + this.isOpen = true; + $(document.documentElement).addClass("overlay-open"); // Allow other scripts to respond to this event. - $(document).trigger('drupalOverlayOpen'); + $(document).trigger("drupalOverlayOpen"); - return true; + return this.load(url); }; /** * Create the underlying markup and behaviors for the overlay. - * - * Reuses jQuery UI's dialog component to construct the overlay markup and - * behaviors, sanitizing the options previously set in self.options. */ Drupal.overlay.create = function () { var self = this; - var $window = $(window); - var $body = $('body'); - - var delayedOuterResize = function() { - setTimeout(self.outerResize, 1); - }; - - // Open callback for jQuery UI Dialog. - var dialogOpen = function () { - // Unbind the keypress handler installed by ui.dialog itself. - // IE does not fire keypress events for some non-alphanumeric keys - // such as the tab character. http://www.quirksmode.org/js/keys.html - // Also, this is not necessary here because we need to deal with an - // iframe element that contains a separate window. - // We'll try to provide our own behavior from bindChild() method. - self.$dialog.unbind('keypress.ui-dialog'); - - // Add title to close button features for accessibility. - self.$dialogTitlebar.find('.ui-dialog-titlebar-close').attr('title', Drupal.t('Close')); - - // Replace the title span element with an h1 element for accessibility. - var $dialogTitle = self.$dialogTitlebar.find('.ui-dialog-title'); - $dialogTitle.replaceWith(Drupal.theme('overlayTitleHeader', $dialogTitle.html())); - - // Wrap the dialog into a div so we can center it using CSS. - self.$dialog.wrap(Drupal.theme('overlayWrapper')); - self.$wrapper = self.$dialog.parent(); - - self.$dialog.css({ - // Remove some CSS properties added by ui.dialog itself. - position: '', left: '', top: '', height: '' - }); - // Add a class to the body to indicate the overlay is open. - $body.addClass('overlay-open'); + this.$container = $(Drupal.theme("overlayContainer")) + .appendTo(document.body); - // Adjust overlay size when window is resized. - $window.bind('resize.overlay-event', delayedOuterResize); - - if (self.options.autoFit) { - $body.addClass('overlay-autofit'); - } - else { - // Add scrollbar to the iframe when autoFit is disabled. - self.$iframe.css('overflow', 'auto').attr('scrolling', 'yes'); + // We use two frames as some browsers show a white background instead of our + // transparent one when loading a page into an iframe. By loading the page + // in a hidden (inactive) iframe the user doesn't see the white background. + // When the page is loaded we switch the inactive and the active iframe. + this.activeFrame = this.$iframeA = $(Drupal.theme("overlayElement")) + .appendTo(this.$container); + + this.inactiveFrame = this.$iframeB = $(Drupal.theme("overlayElement")) + .appendTo(this.$container); + + var overlayLoad = function (event) { + var iframeDocument = this.contentDocument || this.contentWindow.document; + var iframeWindow = iframeDocument.defaultView || iframeDocument.parentWindow; + if (iframeDocument.location == "about:blank") { + return; } - // Compute initial dialog size. - self.outerResize(); - - // Load the document on hidden iframe (see bindChild method). - self.load(self.options.url); + self.isLoading = false; + $(document.documentElement).removeClass("overlay-loading"); + event.data.sibling.removeClass("overlay-active"); + + // Only continue when overlay is still open and not closing. + if (self.isOpen && !self.isClosing) { + // And child document is an actual overlayChild. + if (iframeWindow.Drupal && iframeWindow.Drupal.overlayChild) { + self.activeFrame = $(this) + .addClass("overlay-active") + .attr("tabindex", ""); + self.inactiveFrame = event.data.sibling + .insertAfter(self.activeFrame) + .attr("tabindex", "-1"); - if ($.isFunction(self.options.onOverlayOpen)) { - self.options.onOverlayOpen(self); + // Allow other scripts to respond to this event. + $(document).trigger("drupalOverlayLoad"); + } + else { + self.redirect(window.location.href); + } } - - self.isOpen = true; - self.isOpening = false; - }; - - // Before close callback for jQuery UI Dialog. - var dialogBeforeClose = function () { - // Prevent double execution when close is requested more than once. - if (!self.isOpen || self.isClosing) { - return false; - } - - // Allow other scripts to decide if the overlay can be closed. If an event- - // handler returns false the overlay won't be closed. The external script - // should call Drupal.overlay.close() again when it is ready for closing. - var event = $.Event('drupalOverlayBeforeClose'); - $(document).trigger(event); - if (event.isDefaultPrevented()) { - return false; - } - - self.isClosing = true; - - // Stop all animations. - $window.unbind('resize.overlay-event', delayedOuterResize); - clearTimeout(self.resizeTimeoutID); - }; - - // Close callback for jQuery UI Dialog. - var dialogClose = function () { - $(document).unbind('keydown.overlay-event'); - - $body.removeClass('overlay-open').removeClass('overlay-autofit'); - - // When the iframe is still loading don't destroy it immediately but after - // the content is loaded (see self.load). - if (!self.isLoading) { - // As some browsers (webkit) fire a load event when the iframe is removed, - // load handlers need to be unbound before removing the iframe. - self.$iframe.unbind('load.overlay-event'); + else { self.destroy(); } - - self.isOpen = false; - self.isClosing = false; - - self.lastHeight = 0; - - // Allow other scripts to respond to this event. - $(document).trigger('drupalOverlayClose'); }; - // Default jQuery UI Dialog options. - var dialogOptions = { - autoOpen: false, - closeOnEscape: true, - dialogClass: 'overlay', - draggable: false, - modal: true, - resizable: false, - title: Drupal.t('Loading...'), - zIndex: 500, - - // When the width is not set, use an empty string instead, so that CSS will - // be able to handle it. - width: self.options.width || '', - height: self.options.height, - - open: dialogOpen, - beforeclose: dialogBeforeClose, - close: dialogClose - }; + this.$iframeA.bind("load.drupal-overlay", { sibling: this.$iframeB }, overlayLoad); + this.$iframeB.bind("load.drupal-overlay", { sibling: this.$iframeA }, overlayLoad); - // Create the overlay container and iframe. - self.$iframe = $(Drupal.theme('overlayElement')); - self.$container = $(Drupal.theme('overlayContainer')).append(self.$iframe); - - // Allow external script to override the default jQuery UI Dialog options. - $.extend(dialogOptions, self.options.customDialogOptions); - - // Create the jQuery UI Dialog. - self.$container.dialog(dialogOptions); - // Cache dialog selector. - self.$dialog = self.$container.parents('.' + dialogOptions.dialogClass); - self.$dialogTitlebar = self.$dialog.find('.ui-dialog-titlebar'); + $(window).bind("resize.drupal-overlay", this.outerResize); + $(document) + .bind("drupalOverlayLoad.drupal-overlay", this.outerResize) + .bind("drupalOverlayClose.drupal-overlay", function () { + $(".overlay-displace-top, .overlay-displace-bottom").css({maxWidth: null, clip: "inherit"}); + }) + .bind("keydown.drupal-overlay", Drupal.overlay.keydownHandler); }; /** @@ -271,124 +158,81 @@ * already open. */ Drupal.overlay.load = function (url) { - var self = this; - var iframeElement = self.$iframe.get(0); - - self.isLoading = true; - - // Change the overlay title. - self.$container.dialog('option', 'title', Drupal.t('Loading...')); - // Remove any existing shortcut button markup in the title section. - self.$dialogTitlebar.find('.add-or-remove-shortcuts').remove(); - - // Remove any existing tabs in the title section, but only if requested url - // is not one of those tabs. If the latter, set that tab active. Only check - // for tabs when the overlay is not empty. - if (self.$iframeBody) { - var urlPath = self.getPath(url); - - // Get the primary tabs - var $tabs = self.$dialogTitlebar.find('ul'); - var $tabsLinks = $tabs.find('> li > a'); - - // Check if clicked on a primary tab - var $activeLink = $tabsLinks.filter(function () { return self.getPath(this) == urlPath; }); - - if ($activeLink.length) { - var active_tab = Drupal.t('(active tab)'); - $tabsLinks.parent().removeClass('active').find('element-invisible:contains(' + active_tab + ')').appendTo($activeLink); - $activeLink.parent().addClass('active'); - removeTabs = false; - } - else { - // Get the secondary tabs - var $secondary = self.$iframeBody.find('ul.secondary'); - var $secondaryLinks = $secondary.find('> li > a'); - - // Check if clicked on a secondary tab - var $activeLinkSecondary = $secondaryLinks.filter(function () { return self.getPath(this) == urlPath; }); - - if ($activeLinkSecondary.length) { - var active_tab = Drupal.t('(active tab)'); - $secondaryLinks.parent().removeClass('active').find('element-invisible:contains(' + active_tab + ')').appendTo($activeLinkSecondary); - $activeLinkSecondary.parent().addClass('active'); - removeTabs = false; - } - else { - $tabs.remove(); - } - } + if (!this.isOpen) { + return false; } - self.$iframeWindow = null; - self.$iframeDocument = null; - self.$iframeBody = null; - - // No need to resize while loading. - clearTimeout(self.resizeTimeoutID); - // Allow other scripts to respond to this event. - $(document).trigger('drupalOverlayBeforeLoad'); + $(document).trigger("drupalOverlayBeforeLoad"); - // While the overlay is loading, we remove the loaded class from the dialog. - // After the loading is finished, the loaded class is added back. The loaded - // class is being used to hide the iframe while loading. - // See overlay-parent.css .overlay-loaded #overlay-element. - self.$dialog.removeClass('overlay-loaded'); - self.$iframe.once('overlay-event-load') - .bind('load.overlay-event', function () { - self.isLoading = false; - - // Only continue when overlay is still open and not closing. - if (self.isOpen && !self.isClosing) { - self.$dialog.addClass('overlay-loaded'); + $(document.documentElement).addClass("overlay-loading"); - // Allow other scripts to respond to this event. - $(document).trigger('drupalOverlayLoad'); - } - else { - self.destroy(); - } - }); - - // Get the document object of the iframe window. - // See http://xkr.us/articles/dom/iframe-document/. - var iframeDocument = (iframeElement.contentWindow || iframeElement.contentDocument); - if (iframeDocument.document) { - iframeDocument = iframeDocument.document; - } + var iframeElement = this.inactiveFrame[0]; + // The contentDocument property is not supported in IE until IE8. + var iframeDocument = iframeElement.contentDocument || iframeElement.contentWindow.document; // location.replace doesn't create a history entry. location.href does. // In this case, we want location.replace, as we're creating the history // entry using URL fragments. iframeDocument.location.replace(url); + + return true; }; /** * Close the overlay and remove markup related to it from the document. + * + * @return + * If the overlay was closed true, otherwise false. */ Drupal.overlay.close = function () { - return this.$container.dialog('close'); + // Prevent double execution when close is requested more than once. + if (!this.isOpen || this.isClosing) { + return false; + } + + // Allow other scripts to respond to this event. + var event = $.Event("drupalOverlayBeforeClose"); + $(document).trigger(event); + // If a handler returned false, the close will be prevented. + if (event.isDefaultPrevented()) { + return false; + } + + this.isClosing = true; + + // When the iframe is still loading don't destroy it immediately but after + // the content is loaded (see self.load). + if (!this.isLoading) { + this.destroy(); + } + + this.isOpen = false; + $(document.documentElement).removeClass("overlay-open"); + + // Allow other scripts to respond to this event. + $(document).trigger("drupalOverlayClose"); + + if (!this.isLoading) { + this.isClosing = false; + } + + return true; }; /** * Destroy the overlay. */ Drupal.overlay.destroy = function () { - var self = this; - - self.$container.dialog('destroy').remove(); - self.$wrapper.remove(); + this.$iframeA.unbind(".drupal-overlay"); + this.$iframeB.unbind(".drupal-overlay"); + this.$container.remove(); + + this.$container = null; + this.$iframeA = null; + this.$iframeB = null; - self.$wrapper = null; - self.$dialog = null; - self.$dialogTitlebar = null; - self.$container = null; - self.$iframe = null; - - self.$iframeWindow = null; - self.$iframeDocument = null; - self.$iframeBody = null; + this.iframeWindow = null; }; /** @@ -398,14 +242,14 @@ * Can be an absolute URL or a relative link to the domain root. */ Drupal.overlay.redirect = function (link) { - if (link.indexOf('http') != 0 && link.indexOf('https') != 0) { + if (link.indexOf("http") != 0 && link.indexOf("https") != 0) { var absolute = location.href.match(/https?:\/\/[^\/]*/)[0]; link = absolute + link; } // If the link is already open, force the hashchange event to simulate reload. if (location.href == link) { - $(window).trigger('hashchange.overlay-event'); + $(window).trigger("hashchange.drupal-overlay"); } location.href = link; @@ -414,174 +258,20 @@ /** * Bind the child window. - * - * Add tabs on the overlay, keyboard actions and display animation. */ Drupal.overlay.bindChild = function (iframeWindow, isClosing) { - var self = this; - self.$iframeWindow = iframeWindow.jQuery; - self.$iframeDocument = self.$iframeWindow(iframeWindow.document); - self.$iframeBody = self.$iframeWindow('body'); + this.iframeWindow = iframeWindow; // We are done if the child window is closing. - if (isClosing || self.isClosing || !self.isOpen) { + if (isClosing || this.isClosing || !this.isOpen) { return; } // Make sure the parent window URL matches the child window URL. - self.syncChildLocation(iframeWindow.document.location); + this.syncChildLocation(iframeWindow.document.location); - // Unbind the mousedown handler installed by ui.dialog because the - // handler interferes with use of the scroll bar in Chrome & Safari. - // After unbinding from the document we bind a handler to the dialog overlay - // which returns false to prevent event bubbling. - // See http://dev.jqueryui.com/ticket/4671. - // See https://bugs.webkit.org/show_bug.cgi?id=19033. - // Do the same for the click handler as prevents default handling of clicks in - // displaced regions (e.g. opening a link in a new browser tab when CTRL was - // pressed while clicking). - $(document).unbind('mousedown.dialog-overlay click.dialog-overlay'); - $('.ui-widget-overlay').bind('mousedown.dialog-overlay click.dialog-overlay', function (){return false;}); - - // Unbind the keydown and keypress handlers installed by ui.dialog because - // they interfere with use of browser's keyboard hotkeys like CTRL+w. - // This may cause problems when using modules that implement keydown or - // keypress handlers as they aren't blocked when overlay is open. - $(document).unbind('keydown.dialog-overlay keypress.dialog-overlay'); - - // Reset the scroll to the top of the window so that the overlay is visible again. - window.scrollTo(0, 0); - - var iframeTitle = self.$iframeDocument.attr('title'); - - // Update the dialog title with the child window title. - self.$container.dialog('option', 'title', iframeTitle); - self.$dialogTitlebar.find('.ui-dialog-title').focus(); // Add a title attribute to the iframe for accessibility. - self.$iframe.attr('title', Drupal.t('@title dialog', { '@title': iframeTitle })); - - // Remove any existing shortcut button markup in the title section. - self.$dialogTitlebar.find('.add-or-remove-shortcuts').remove(); - // If the shortcut add/delete button exists, move it to the dialog title. - var $addToShortcuts = self.$iframeWindow('.add-or-remove-shortcuts'); - if ($addToShortcuts.length) { - // Move the button markup to the title section. We need to copy markup - // instead of moving the DOM element, because Webkit and IE browsers will - // not move DOM elements between two DOM documents. - $addToShortcuts = $(self.$iframeWindow('
').append($addToShortcuts).remove().html()); - - self.$dialogTitlebar.find('.ui-dialog-title').after($addToShortcuts); - } - - // Remove any existing tabs in the title section. - self.$dialogTitlebar.find('ul').remove(); - // If there are tabs in the page, move them to the titlebar. - var $tabs = self.$iframeWindow('ul.primary'); - if ($tabs.length) { - // Move the tabs markup to the title section. We need to copy markup - // instead of moving the DOM element, because Webkit and IE browsers will - // not move DOM elements between two DOM documents. - $tabs = $(self.$iframeWindow('
').append($tabs).remove().html()); - - self.$dialogTitlebar.append($tabs); - - // Remove any classes from the list element to avoid theme styles - // clashing with our styling. - $tabs.removeAttr('class'); - } - - // Re-attach the behaviors we lost while copying elements from the iframe - // document to the parent document. - Drupal.attachBehaviors(self.$dialogTitlebar); - - // Try to enhance keyboard based navigation of the overlay. - // Logic inspired by the open() method in ui.dialog.js, and - // http://wiki.codetalks.org/wiki/index.php/Docs/Keyboard_navigable_JS_widgets - - // Get a reference to the close button. - var $closeButton = self.$dialogTitlebar.find('.ui-dialog-titlebar-close'); - - // Search tabbable elements on the iframed document to speed up related - // keyboard events. - // @todo: Do we need to provide a method to update these references when - // AJAX requests update the DOM on the child document? - var $iframeTabbables = self.$iframeWindow(':tabbable:not(form)'); - var $firstTabbable = $iframeTabbables.filter(':first'); - var $lastTabbable = $iframeTabbables.filter(':last'); - - // Unbind keyboard event handlers that may have been enabled previously. - $(document).unbind('keydown.overlay-event'); - $closeButton.unbind('keydown.overlay-event'); - - // When the focus leaves the close button, then we want to jump to the - // first/last inner tabbable element of the child window. - $closeButton.bind('keydown.overlay-event', function (event) { - if (event.keyCode && event.keyCode == $.ui.keyCode.TAB) { - var $target = (event.shiftKey ? $lastTabbable : $firstTabbable); - if (!$target.size()) { - $target = self.$iframeDocument; - } - $target.focus(); - return false; - } - }); - - // When the focus leaves the child window, then drive the focus to the - // close button of the dialog. - self.$iframeDocument.bind('keydown.overlay-event', function (event) { - if (event.keyCode) { - if (event.keyCode == $.ui.keyCode.TAB) { - if (event.shiftKey && event.target == $firstTabbable.get(0)) { - $closeButton.focus(); - return false; - } - else if (!event.shiftKey && event.target == $lastTabbable.get(0)) { - $closeButton.focus(); - return false; - } - } - else if (event.keyCode == $.ui.keyCode.ESCAPE) { - self.close(); - return false; - } - } - }); - - // When the focus is captured by the parent document, then try - // to drive the focus back to the first tabbable element, or the - // close button of the dialog (default). - $(document).bind('keydown.overlay-event', function (event) { - if (event.keyCode && event.keyCode == $.ui.keyCode.TAB) { - if (!self.$iframeWindow(':tabbable:not(form):first').focus().size()) { - $closeButton.focus(); - } - return false; - } - }); - - // Adjust overlay to fit the iframe content? - if (self.options.autoFit) { - self.innerResize(); - - var delayedResize = function() { - if (!self.isOpen) { - clearTimeout(self.resizeTimeoutID); - return; - } - - self.innerResize(); - iframeWindow.scrollTo(0, 0); - self.resizeTimeoutID = setTimeout(delayedResize, 150); - }; - - clearTimeout(self.resizeTimeoutID); - self.resizeTimeoutID = setTimeout(delayedResize, 150); - } - - // Scroll to anchor in overlay. This needs to be done after delayedResize(). - if (iframeWindow.document.location.hash) { - window.scrollTo(0, self.$iframeWindow(iframeWindow.document.location.hash).position().top); - } + this.activeFrame.attr("title", Drupal.t("@title dialog", { "@title": iframeWindow.document.title })); }; /** @@ -593,51 +283,19 @@ * TRUE if the URL represents an administrative link, FALSE otherwise. */ Drupal.overlay.isAdminLink = function (url) { - var self = this; - var path = self.getPath(url); + var path = this.getPath(url); // Turn the list of administrative paths into a regular expression. - if (!self.adminPathRegExp) { - var adminPaths = '^(' + Drupal.settings.overlay.paths.admin.replace(/\s+/g, ')$|^(') + ')$'; - var nonAdminPaths = '^(' + Drupal.settings.overlay.paths.non_admin.replace(/\s+/g, ')$|^(') + ')$'; - adminPaths = adminPaths.replace(/\*/g, '.*'); - nonAdminPaths = nonAdminPaths.replace(/\*/g, '.*'); - self.adminPathRegExp = new RegExp(adminPaths); - self.nonAdminPathRegExp = new RegExp(nonAdminPaths); - } - - return self.adminPathRegExp.exec(path) && !self.nonAdminPathRegExp.exec(path); -}; - -/** - * Resize overlay according to the size of its content. - * - * @todo: Watch for experience in the way we compute the size of the iframed - * document. There are many ways to do it, and none of them seem to be perfect. - * Note, though, that the size of the iframe itself may affect the size of the - * child document, especially on fluid layouts. - */ -Drupal.overlay.innerResize = function (height) { - var self = Drupal.overlay; - // Proceed only if the dialog still exists. - if (!self.isOpen || self.isClosing) { - return; - } - - // When no height is given try to get height when iframe content is loaded. - if (!height && self.$iframeBody) { - height = self.$iframeBody.outerHeight() + 25; + if (!this.adminPathRegExp) { + var adminPaths = "^(" + Drupal.settings.overlay.paths.admin.replace(/\s+/g, ")$|^(") + ")$"; + var nonAdminPaths = "^(" + Drupal.settings.overlay.paths.non_admin.replace(/\s+/g, ")$|^(") + ")$"; + adminPaths = adminPaths.replace(/\*/g, ".*"); + nonAdminPaths = nonAdminPaths.replace(/\*/g, ".*"); + this.adminPathRegExp = new RegExp(adminPaths); + this.nonAdminPathRegExp = new RegExp(nonAdminPaths); } - // Only resize when height actually is changed. - if (height && height != self.lastHeight) { - // Resize the container. - self.$container.height(height); - // Keep the dim background grow or shrink with the dialog. - $.ui.dialog.overlay.resize(); - - self.lastHeight = height; - } + return this.adminPathRegExp.exec(path) && !this.nonAdminPathRegExp.exec(path); }; /** @@ -645,55 +303,70 @@ */ Drupal.overlay.outerResize = function () { var self = Drupal.overlay; - // Proceed only if the dialog still exists. - if (!(self.isOpen || self.isOpening) || self.isClosing) { + // Proceed only if the overlay still exists. + if (!(self.isOpen || self.isOpening) || self.isClosing || !self.iframeWindow) { return; } - // Consider any region that should be visible above the overlay (such as - // an admin toolbar). - var $displaceTop = $('.overlay-displace-top'); - var displaceTopHeight = 0; - $displaceTop.each(function () { - displaceTopHeight += $(this).height(); + $(self.iframeWindow.document.body).css({ + marginTop: Drupal.overlay.processDisplacedElements(".overlay-displace-top"), + marginBottom: Drupal.overlay.processDisplacedElements(".overlay-displace-bottom") }); +}; - self.$wrapper.css('top', displaceTopHeight); - - // When the overlay has no height yet, make it fit exactly in the window, - // or the configured height when autoFit is disabled. - if (!self.lastHeight) { - var titleBarHeight = self.$dialogTitlebar.outerHeight(true); - - if (self.options.autoFit || self.options.height == undefined ||!isNan(self.options.height)) { - self.lastHeight = parseInt($(window).height() - displaceTopHeight - titleBarHeight - 45); - } - else { - self.lastHeight = self.options.height; - } - - self.$container.height(self.lastHeight); - } - - if (self.options.autoFit) { - self.innerResize(); - } +/** + * Make sure displaced elements are positioned correctly. + * + * @param selector + * Displaced elements. + * @return + * Sum of height of displaced elements. + */ +Drupal.overlay.processDisplacedElements = function (selector) { + var self = this; + var displacedHeight = 0; + var documentHeight = self.iframeWindow.document.body.clientHeight; + var documentWidth = self.iframeWindow.document.body.clientWidth; + // IE6 doesn't support maxWidth, use width instead. + var maxWidthName = (typeof document.body.style.maxWidth == "string") ? "maxWidth" : "width"; + + $(selector) + // Consider any element that should be visible above the overlay (such as + // a toolbar). + .each(function () { + displacedHeight += $(this).outerHeight(); + + var maxWidth = documentWidth; + if ($(this).css("filter").match(/DXImageTransform\.Microsoft\.Shadow/)) { + // In IE, Shadow filter adds its own height, which shouldn't be done. + displacedHeight -= this.filters.item("DXImageTransform.Microsoft.Shadow").strength; + + // In IE, Shadow filter makes element to overlap the scrollbar with 1px. + maxWidth -= 1; + } + + // Prevent displaced elements overlapping window's scrollbar. + if ($(this).css(maxWidthName) && ($(this).css(maxWidthName) == "none" || parseInt($(this).css(maxWidthName)) > maxWidth)) { + $(this).css(maxWidthName, maxWidth); + } + + // Use a more rigerous approach if the displaced element still overlaps + // window's scrollbar. Clip the element on the right if it overlaps + // the scrollbar. + var offset = $(this).offset(); + var offsetRight = offset.left + $(this).outerWidth(); + if (offsetRight > maxWidth) { + $(this).css("clip", "rect(auto, " + (maxWidth - offset.left) + "px, " + (documentHeight - offset.top) + "px, auto)"); + } + }); - // Make the dim background grow or shrink with the dialog. - $.ui.dialog.overlay.resize(); + return displacedHeight; }; /** * Click event handler. * - * Instead of binding a click event handler to every link we bind one to the - * document and handle events that bubble up. This allows other scripts to bind - * their own handlers to links and also to prevent overlay's handling. - * - * This handler makes links in displaced regions work correctly, even when the - * overlay is open. - * - * This click event handler should be bound any document (for example the + * This click event handler should be bound to any document (for example the * overlay iframe) of which you want links to open in the overlay. * * @see Drupal.overlayChild.behaviors.addClickHandler @@ -701,39 +374,43 @@ Drupal.overlay.clickHandler = function (event) { var self = Drupal.overlay; + // In some browsers the click event isn't fired for right-clicks. Use the + // mouseup event for right-clicks and the click event for everything else. + if ((event.type == "click" && event.button == 2) || (event.type == "mouseup" && event.button != 2)) { + return; + } + var $target = $(event.target); - if (self.isOpen && $target.closest('.overlay-displace-top, .overlay-displace-bottom').length) { + if (self.isOpen && $target.closest(".overlay-displace-top, .overlay-displace-bottom").length) { // Click events in displaced regions could potentionally change the size of // that region (e.g. the toggle button of the toolbar module). Trigger the // resize event to force a recalculation of overlay's size/position. - $(window).triggerHandler('resize.overlay-event'); - } - - // Only continue by left-click or right-click. - if (!(event.button == 0 || event.button == 2)) { - return; + $(window).triggerHandler("resize.drupal-overlay"); } // Only continue if clicked target (or one of its parents) is a link. - if (!$target.is('a')) { - $target = $target.closest('a'); + if (!$target.is("a")) { + $target = $target.closest("a"); if (!$target.length) { return; } } // Never open links in the overlay that contain the overlay-exclude class. - if ($target.hasClass('overlay-exclude')) { + if ($target.hasClass("overlay-exclude")) { return; } - var href = $target.attr('href'); + var href = $target.attr("href"); // Only continue if link has an href attribute and is not just linking to // an anchor. - if (href != undefined && href != '' && href.charAt(0) != '#') { + if (href != undefined && href != "" && href.charAt(0) != "#") { + if (href == "overlay:close") { + self.close(); + } // Open admin links in the overlay. - if (self.isAdminLink(href)) { + else if (self.isAdminLink(href)) { href = self.fragmentizeLink($target.get(0)); // Only override default behavior when left-clicking and user is not // pressing the ALT, CTRL, META (Command key on the Macintosh keyboard) @@ -747,47 +424,32 @@ // Otherwise only alter clicked link's href. This is being picked up by // the default action handler. else { - $target.attr('href', href); + $target.attr("href", href); } } // Open external links in a new window. else if ($target.get(0).hostname != window.location.hostname) { // Add a target attribute to the clicked link. This is being picked up by // the default action handler. - if (!$target.attr('target')) { - $target.attr('target', '_new'); + if (!$target.attr("target")) { + $target.attr("target", "_new"); } } // Non-admin links should close the overlay and open in the main window. // Only handle them if the overlay is open and the clicked link is inside // the overlay iframe, else default action will do fine. - else if (self.isOpen) { - var inFrame = false; - // W3C: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-UIEvent-view - if (event.view && event.view.frameElement != null) { - inFrame = true; - } - // IE: http://msdn.microsoft.com/en-us/library/ms534331%28VS.85%29.aspx - else if (event.target.ownerDocument.parentWindow && event.target.ownerDocument.parentWindow.frameElement != null) { - inFrame = true; + else if (self.isOpen && $target.get(0).ownerDocument === self.iframeWindow.document) { + // When the link has a destination query parameter and that destination + // is an admin link we need to fragmentize it. This will make it reopen + // in the overlay. + var params = $.deparam.querystring(href); + if (params.destination && self.isAdminLink(params.destination)) { + var fragmentizedDestination = $.param.fragment(self.getPath(window.location), { overlay: params.destination }); + $target.attr("href", $.param.querystring(href, { destination: fragmentizedDestination })); } - // Add a target attribute to the clicked link. This is being picked up by - // the default action handler. - if (inFrame) { - // When the link has a destination query parameter and that destination - // is an admin link we need to fragmentize it. This will make it reopen - // in the overlay. - var params = $.deparam.querystring(href); - if (params.destination && self.isAdminLink(params.destination)) { - var fragmentizedDestination = $.param.fragment(self.getPath(window.location), { overlay: params.destination }); - href = $.param.querystring(href, { destination: fragmentizedDestination }); - $target.attr('href', href); - } - - // Make the link to be opening in the immediate parent of the frame. - $target.attr('target', '_parent'); - } + // Make the link to be opening in the immediate parent of the frame. + $target.attr("target", "_parent"); } } }; @@ -800,39 +462,26 @@ // If we changed the hash to reflect an internal redirect in the overlay, // its location has already been changed, so don't do anything. - if ($.data(window.location, window.location.href) === 'redirect') { + if ($.data(window.location, window.location.href) === "redirect") { $.data(window.location, window.location.href, null); return; } // Get the overlay URL from the current URL fragment. - var state = $.bbq.getState('overlay'); + var state = $.bbq.getState("overlay"); if (state) { // Append render variable, so the server side can choose the right - // rendering and add child modal frame code to the page if needed. - var linkURL = Drupal.settings.basePath + state; - linkURL = $.param.querystring(linkURL, {'render': 'overlay'}); - - var path = self.getPath(state); - self.resetActiveClass(path); - - // If the modal frame is already open, replace the loaded document with - // this new one. - if (self.isOpen) { - self.load(linkURL); - } - else { - // There is not an overlay opened yet; we should open a new one. - var overlayOptions = { - url: linkURL - }; - $(document).one('drupalOverlayClose', function () { - // Clear the overlay URL fragment. - $.bbq.pushState(); - self.resetActiveClass(self.getPath(window.location)); - }); - self.open(overlayOptions); - } + // rendering and add child frame code to the page if needed. + var url = $.param.querystring(Drupal.settings.basePath + state, { render: "overlay" }); + + $(document).one("drupalOverlayClose", function (event) { + // Clear the overlay URL fragment. + $.bbq.pushState(); + self.resetActiveClass(self.getPath(window.location)); + }); + + self.open(url); + self.resetActiveClass(self.getPath(url)); } // If there is no overlay URL in the fragment and the overlay is (still) // open, close the overlay. @@ -842,6 +491,32 @@ }; /** + * Keydown event handler. + */ +Drupal.overlay.keydownHandler = function (event) { + var self = Drupal.overlay; + + if (!self.$focusables) { + self.$focusables = $(":focusable"); + } + + if (event.keyCode && event.keyCode == $.ui.keyCode.TAB) { + // Push focus forward/backward to the focusable which is right before the + // next focusable that is inside the overlay or an overlay-displaced element. + var current = self.$focusables.index(event.target); + var next = event.shiftKey ? -1 : 1; + var allowedFocusableParent = ".overlay-displace-top, overlay-displace-bottom, #overlay-container"; + if (current != -1 && self.$focusables[current + next] && !self.$focusables.eq(current + next).closest(allowedFocusableParent).length) { + while (self.$focusables[current + next] && !self.$focusables.eq(current + next).closest(allowedFocusableParent).length) { + current = current + next; + } + // Move focus. + self.$focusables.eq(current).focus(); + } + } +}; + +/** * Make a regular admin link into a URL that will trigger the overlay to open. * * @param link @@ -851,7 +526,6 @@ * /node/1#overlay=admin/config). */ Drupal.overlay.fragmentizeLink = function (link) { - var self = this; // Don't operate on links that are already overlay-ready. var params = $.deparam.fragment(link.href); if (params.overlay) { @@ -861,9 +535,10 @@ // Determine the link's original destination. Set ignorePathFromQueryString to // true to prevent transforming this link into a clean URL while clean URLs // may be disabled. - var path = self.getPath(link, true); - // Preserve existing query and fragment parameters in the URL. - var destination = path + link.search + link.hash; + var path = this.getPath(link, true); + // Preserve existing query and fragment parameters in the URL, except for + // "render=overlay" which is re-added in Drupal.overlay.hashchangeHandler. + var destination = path + link.search.replace(/&?render=overlay/, "").replace(/\?$/, "") + link.hash; // Assemble and return the overlay-ready link. return $.param.fragment(window.location.href, { overlay: destination }); @@ -877,22 +552,21 @@ * parent URL fragment will be out of date. This is a sanity check to make * sure we're in the right place. * - * @param childLocation - * The child window's location object. + * @param overlayLocation + * The overlay's location object. */ -Drupal.overlay.syncChildLocation = function (childLocation) { - var expected = $.bbq.getState('overlay'); +Drupal.overlay.syncChildLocation = function (overlayLocation) { + var expected = $.bbq.getState("overlay"); // This is just a sanity check, so we're comparing paths, not query strings. - expected = Drupal.settings.basePath + expected.replace(/\?.+/, ''); - var actual = childLocation.pathname; - if (expected !== actual) { + if (this.getPath(expected) != this.getPath(overlayLocation)) { // There may have been a redirect inside the child overlay window that the // parent wasn't aware of. Update the parent URL fragment appropriately. - var newLocation = Drupal.overlay.fragmentizeLink(childLocation); + var newLocation = Drupal.overlay.fragmentizeLink(overlayLocation); // Set a 'redirect' flag on the new location so the hashchange event handler // knows not to change the overlay's content. - $.data(window.location, newLocation, 'redirect'); - window.location.href = newLocation; + $.data(window.location, newLocation, "redirect"); + // Use location.replace() so we don't create an extra history entry. + window.location.replace(newLocation); } }; @@ -910,8 +584,8 @@ var region_info = this; $.each(region_info, function (regionClass) { var regionName = region_info[regionClass]; - var regionSelector = '.' + regionClass; - $.get(Drupal.settings.basePath + Drupal.settings.overlay.ajaxCallback + '/' + regionName, function (newElement) { + var regionSelector = "." + regionClass; + $.get(Drupal.settings.basePath + Drupal.settings.overlay.ajaxCallback + "/" + regionName, function (newElement) { $(regionSelector).replaceWith($(newElement)); Drupal.attachBehaviors($(regionSelector), Drupal.settings); }); @@ -929,17 +603,17 @@ var self = this; var windowDomain = window.location.protocol + window.location.hostname; - $('.overlay-displace-top, .overlay-displace-bottom') - .find('a[href]') + $(".overlay-displace-top, .overlay-displace-bottom") + .find("a[href]") // Remove active class from all links in displaced regions. - .removeClass('active') + .removeClass("active") // Add active class to links that match activePath. .each(function () { var linkDomain = this.protocol + this.hostname; var linkPath = self.getPath(this); if (linkDomain == windowDomain && linkPath == activePath) { - $(this).addClass('active'); + $(this).addClass("active"); } }); }; @@ -955,18 +629,25 @@ * The drupal path. */ Drupal.overlay.getPath = function (link, ignorePathFromQueryString) { - if (typeof link == 'string') { + if (typeof link == "string") { + if (!/^\w+:/.test(link)) { + // Relative paths need to be relative to Drupal.settings.basePath. + if (link.charAt(0) != "/") { + link = Drupal.settings.basePath + link; + } + } + // Create a native Link object, so we can use its object methods. link = $(link.link(link)).get(0); } var path = link.pathname; // Ensure a leading slash on the path, omitted in some browsers. - if (path.charAt(0) != '/') { - path = '/' + path; + if (path.charAt(0) != "/") { + path = "/" + path; } - path = path.replace(new RegExp(Drupal.settings.basePath + "(?:index.php)?"), ''); - if (path == '' && !ignorePathFromQueryString) { + path = path.replace(new RegExp(Drupal.settings.basePath + "(?:index.php)?"), ""); + if (path == "" && !ignorePathFromQueryString) { // If the path appears empty, it might mean the path is represented in the // query string (clean URLs are not used). var match = new RegExp("([?&])q=(.+)([&#]|$)").exec(link.search); @@ -981,29 +662,15 @@ /** * Theme function to create the overlay iframe element. */ -Drupal.theme.prototype.overlayElement = function () { - return '