').append($tabs.clone()).remove().html());
+
+ self.$dialogTitlebar.append($tabs);
+ if ($tabs.is('.primary')) {
+ $tabs.find('a').removeClass('overlay-processed');
+ Drupal.attachBehaviors($tabs);
+ }
+ // Remove any classes from the list element to avoid theme styles
+ // clashing with our styling.
+ $tabs.removeAttr('class');
+ }
+
+ // 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;
}
- });
+ setTimeout(function () { $target.focus(); }, 10);
+ return false;
+ }
+ });
- // When the focus leaves the child window, then drive the focus to the
- // close button of the dialog.
- $iFrameDocument.bind('keydown.overlay-event', function (event) {
- if (event.keyCode) {
- if (event.keyCode == $.ui.keyCode.TAB) {
- if (event.shiftKey && event.target == $firstTabbable.get(0)) {
- setTimeout(function () { $closeButton.focus(); }, 10);
- return false;
- }
- else if (!event.shiftKey && event.target == $lastTabbable.get(0)) {
- setTimeout(function () { $closeButton.focus(); }, 10);
- 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)) {
+ setTimeout(function () { $closeButton.focus(); }, 10);
+ return false;
}
- else if (event.keyCode == $.ui.keyCode.ESCAPE) {
- setTimeout(function () { self.close(); }, 10);
+ else if (!event.shiftKey && event.target == $lastTabbable.get(0)) {
+ setTimeout(function () { $closeButton.focus(); }, 10);
return false;
}
}
- });
-
- var autoResize = function () {
- if (typeof self.iframe.$element == 'undefined') {
- autoResizing = false;
- $(window).unbind('resize', windowResize);
- return;
- }
- var iframeElement = self.iframe.$element.get(0);
- var iframeDocument = (iframeElement.contentWindow || iframeElement.contentDocument);
- if (iframeDocument.document) {
- iframeDocument = iframeDocument.document;
+ else if (event.keyCode == $.ui.keyCode.ESCAPE) {
+ setTimeout(function () { self.close(); }, 10);
+ return false;
}
- // Use outerHeight() because otherwise the calculation will be off
- // because of padding and/or border added by the theme.
- var height = $(iframeDocument).find('body').outerHeight() + 25;
- self.iframe.$element.css('height', height);
- self.iframe.$container.css('height', height);
- self.iframe.$container.parent().css('height', height + 45);
- // Don't allow the shadow background to shrink so it's not enough to hide
- // the whole page. Take the existing document height (with overlay) and
- // the body height itself for our base calculation.
- var docHeight = Math.min($(document).find('body').outerHeight(), $(document).height());
- $('.ui-widget-overlay').height(Math.max(docHeight, $(window).height(), height + 145));
- setTimeout(autoResize, 150);
- };
-
- var windowResize = function () {
- var width = $(window).width()
- var change = lastWidth - width;
- var currentWidth = self.iframe.$element.width();
- var newWidth = lastFrameWidth - change;
- lastWidth = width;
- lastFrameWidth = newWidth;
-
- if (newWidth >= 300) {
- self.iframe.$element.css('width', newWidth);
- self.iframe.$container.css('width', newWidth);
- self.iframe.$container.parent().css('width', newWidth);
- widthBelowMin = 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) {
+ setTimeout(function () {
+ if (!self.$iframeWindow(':tabbable:not(form):first').focus().size()) {
+ $closeButton.focus();
+ }
+ }, 10);
+ return false;
+ }
+ });
+
+ self.autoResize();
+
+ // Adjust overlay to fit the iframe content?
+ if (self.options.autoFit) {
+ if (document.implementation.hasFeature('MutationEvents','2.0') || window.MutationEvent) {
+ var delayedResize = function() {
+ clearTimeout(self.resizeTimeoutID);
+ self.resizeTimeoutID = setTimeout(self.autoResize, 150);
+ };
+
+ // Bind the autoResize callback to DOM changes of the iframe.
+ if ($.browser.opera) {
+ // Opera doesn't support the DOMSubtreeModified event.
+ self.$iframeDocument.bind('DOMAttrModified', delayedResize);
+ self.$iframeDocument.bind('DOMNodeInserted', delayedResize);
+ self.$iframeDocument.bind('DOMNodeRemoved', delayedResize);
}
else {
- widthBelowMin = true;
+ self.$iframeDocument.bind('DOMSubtreeModified', delayedResize);
}
}
+ // IE and possibly other browsers don't support MutationEvents.
+ else if (!self.autoResizing) {
+ var delayedResize = function() {
+ if (!(self.isOpen && self.resizeTimeoutID)) {
+ self.resizeTimeoutID = null;
+ return;
+ }
- if (!autoResizing) {
- autoResizing = true;
- autoResize();
- var lastFrameWidth = self.iframe.$element.width();
- var lastWidth = $(window).width();
- $(window).resize(windowResize);
- }
-
- // 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) {
- setTimeout(function () {
- if (!$iFrameWindow(':tabbable:not(form):first').focus().size()) {
- $closeButton.focus();
- }
- }, 10);
- return false;
- }
- });
-
- // If there are tabs in the page, move them to the titlebar.
- var tabs = $iFrameDocument.find('ul.primary').get(0);
+ self.autoResize();
+ self.$dialog.queue(function() {
+ self.resizeTimeoutID = setTimeout(delayedResize, 1000);
+ self.$dialog.dequeue();
+ });
+ };
- // This breaks in anything less than IE 7. Prevent it from running.
- if (typeof tabs != 'undefined' && (!$.browser.msie || parseInt($.browser.version) >= 7)) {
- $('.ui-dialog-titlebar').append($(tabs).remove().get(0));
- if ($(tabs).is('.primary')) {
- $(tabs).find('a').removeClass('overlay-processed');
- Drupal.attachBehaviors($(tabs));
- }
- // Remove any classes from the list element to avoid theme styles
- // clashing with our styling.
- $(tabs).removeAttr('class');
+ self.resizeTimeoutID = setTimeout(delayedResize, 1000);
}
- });
+ }
};
/**
@@ -548,18 +536,19 @@
*
* Remove keyboard event handlers, reset title and hide the iframe.
*/
-Drupal.overlay.unbindChild = function (iFrameWindow) {
+Drupal.overlay.unbindChild = function (iframeWindow) {
var self = this;
+ var $iframeDocument = iframeWindow.jQuery(iframeWindow.document);
// Prevent memory leaks by explicitly unbinding keyboard event handler
// on the child document.
- iFrameWindow.jQuery(iFrameWindow.document).unbind('keydown.overlay-event');
+ $iframeDocument.unbind('keydown.overlay-event');
// Change the overlay title.
- $('.overlay .ui-dialog-title').html(Drupal.t('Please wait...'));
+ self.$container.dialog('option', 'title', Drupal.t('Please wait...'));
// Hide the iframe element.
- self.iframe.$element.fadeOut('fast');
+ self.$iframe.fadeOut('fast');
};
/**
@@ -600,117 +589,135 @@
}
return self.adminPathRegExp.exec(path) && !self.nonAdminPathRegExp.exec(path);
-}
+};
/**
- * Sanitize dialog size.
+ * Resize overlay to the given size.
*
- * Do not let the overlay go over the 0.78x of the width of the screen and set
- * minimal height. The height is not limited due to how we rely on the parent
- * window to provide scrolling instead of scrolling in scrolling with the
- * overlay.
+ * This is the only function that should change overlay's size and position.
*
* @param size
* Contains 'width' and 'height' items as numbers.
- * @return
- * The same structure with sanitized number values.
+ * @param immediately
+ * Boolean whether the size change should be performed immediately or animated.
*/
-Drupal.overlay.sanitizeSize = function (size) {
- var width, height;
+Drupal.overlay.resize = function (size, immediately) {
+ var self = this;
+ // Proceed only if the dialog still exists.
+ if (!(self.isOpen || self.isOpening) || self.isClosing) {
+ return;
+ }
+
var $window = $(window);
+ // Consider any region that should be visible above the overlay (such as
+ // an admin toolbar).
+ var $toolbar = $('.overlay-displace-top');
+ var toolbarHeight = 0;
+ $toolbar.each(function () {
+ toolbarHeight += $toolbar.height();
+ });
+
+ var titleBarHeight = self.$dialogTitlebar.outerHeight(true);
+
// Use 300px as the minimum width but at most expand to 78% of the window.
// Ensures that users see that there is an actual website in the background.
var minWidth = 300, maxWidth = parseInt($window.width() * .78);
- if (typeof size.width != 'number') {
- width = maxWidth;
- }
- // Set to at least minWidth but at most maxWidth.
- else if (size.width < minWidth || size.width > maxWidth) {
- width = Math.min(maxWidth, Math.max(minWidth, size.width));
+ if (typeof size.width != 'number' || isNaN(size.width)) {
+ size.width = Math.max(minWidth, maxWidth);
}
else {
- width = size.width;
+ // Set to at least minWidth but at most maxWidth.
+ size.width = Math.min(maxWidth, Math.max(minWidth, size.width));
}
- // Use 100px as the minimum height. Expand to 92% of the window if height
- // was invalid, to ensure that we have a reasonable chance to show content.
- var minHeight = 100, maxHeight = parseInt($window.height() * .92);
- if (typeof size.height != 'number') {
- height = maxHeight;
- }
- else if (size.height < minHeight) {
- // Do not consider maxHeight as the actual maximum height, since we rely on
- // the parent window scroll bar to scroll the window. Only set up to be at
- // least the minimal height.
- height = Math.max(minHeight, size.height);
+ // Use 100px as the minimum height.
+ var minHeight = 100;
+ if (typeof size.height != 'number' || isNaN(size.height)) {
+ // Expand to 92% of the window if height was invalid, to ensure that we have
+ size.height = parseInt($window.height() - toolbarHeight - titleBarHeight - 45);
+ }
+ // Do not consider a maximum height, since we rely on the parent window scroll
+ // bar to scroll the window. Only set up to be at least the minimal height.
+ size.height = Math.max(minHeight, size.height);
+
+ var dialogOptions = $.extend({}, size);
+ dialogOptions.height += titleBarHeight + 15;
+
+ // Compute position to center horizontally and on viewport top vertically.
+ dialogOptions.left = Math.max(0, parseInt(($window.width() - dialogOptions.width) / 2));
+ dialogOptions.top = toolbarHeight + 20;
+
+ if (!immediately) {
+ // Perform the resize animation.
+ self.$dialog.animate(dialogOptions, 'fast', function () {
+ // Proceed only if the dialog still exists.
+ if (!(self.isOpen || self.isOpening) || self.isClosing) {
+ return;
+ }
+
+ // Resize the container.
+ self.$container.height(size.height);
+
+ // Update the dialog size so that UI internals are aware of the change.
+ self.$container.dialog('option', {
+ width: dialogOptions.width,
+ height: dialogOptions.height
+ // Can't set position as it will call $(document).scrollTop(), which
+ // should be called only when loading a new page in the overlay
+ //position: [dialogOptions.left, dialogOptions.top]
+ });
+
+ // Keep the dim background grow or shrink with the dialog.
+ $.ui.dialog.overlay.resize();
+ });
}
else {
- height = size.height;
+ self.$dialog.css(dialogOptions);
+ // Resize the container.
+ self.$container.height(size.height);
+ // Update the dialog size so that UI internals are aware of the change.
+ self.$container.dialog('option', {
+ width: dialogOptions.width,
+ height: dialogOptions.height
+ // Can't set position as it will call $(document).scrollTop(), which
+ // should be called only when loading a new page in the overlay
+ //position: [dialogOptions.left, dialogOptions.top]
+ });
+ // Keep the dim background grow or shrink with the dialog.
+ $.ui.dialog.overlay.resize();
}
- return { width: width, height: height };
};
/**
- * Compute position to center horizontally and on viewport top vertically.
- */
-Drupal.overlay.computePosition = function ($element, elementSize) {
- var $window = $(window);
- // Consider any region that should be visible above the overlay (such as
- // an admin toolbar).
- var $toolbar = $('.overlay-displace-top');
- var toolbarHeight = 0;
- $toolbar.each(function () {
- toolbarHeight += $toolbar.height();
- });
- var position = {
- left: Math.max(0, parseInt(($window.width() - elementSize.width) / 2)),
- top: toolbarHeight + 20
- };
-
- // Reset the scroll to the top of the window so that the overlay is visible again.
- window.scrollTo(0, 0);
- return position;
-};
-
-/**
- * Resize overlay to the given size.
+ * Resize overlay according to the size of its content.
*
- * @param size
- * Contains 'width' and 'height' items as numbers.
+ * @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.resize = function (size) {
- var self = this;
-
- // Compute frame and dialog size based on requested document size.
- var titleBarHeight = $('.overlay .ui-dialog-titlebar').outerHeight(true);
- var frameSize = self.sanitizeSize(size);
- var dialogSize = $.extend({}, frameSize);
- dialogSize.height += titleBarHeight + 15;
-
- // Compute position on viewport.
- var dialogPosition = self.computePosition($('.overlay'), dialogSize);
-
- var animationOptions = $.extend(dialogSize, dialogPosition);
-
- // Perform the resize animation.
- $('.overlay').animate(animationOptions, 'fast', function () {
- // Proceed only if the dialog still exists.
- if ($.isObject(self.iframe.$element) && $.isObject(self.iframe.$container)) {
- // Resize the iframe element and container.
- $('.overlay').width(dialogSize.width).height(dialogSize.height);
- self.iframe.$container.width(frameSize.width).height(frameSize.height);
- self.iframe.$element.width(frameSize.width).height(frameSize.height);
+Drupal.overlay.autoResize = function (animate) {
+ var self = Drupal.overlay;
+ // Proceed only if the dialog still exists.
+ if (!(self.isOpen || self.isOpening) || self.isClosing) {
+ return;
+ }
- // Update the dialog size so that UI internals are aware of the change.
- self.iframe.$container.dialog('option', { width: dialogSize.width, height: dialogSize.height });
+ var size = {};
- // Keep the dim background grow or shrink with the dialog.
- $('.ui-widget-overlay').height($(document).height());
+ // Only set height when iframe content is loaded.
+ if (self.options.autoFit && $.isObject(self.$iframeBody)) {
+ size.height = self.$iframeBody.outerHeight() + 25;
+ }
+ // Use current height.
+ else {
+ size.height = self.$iframe.height();
+ }
- // Animate body opacity, so we fade in the page as it loads in.
- $(self.iframe.$element.get(0)).contents().find('body.overlay').animate({opacity: 0.9999}, 'slow');
- }
+ self.$dialog.queue(function(){
+ self.resize(size, animate);
+ $(this).dequeue();
});
};
@@ -760,21 +767,15 @@
$('a.overlay-processed').each(function () {
$(this).removeClass('active');
});
- },
- draggable: false
+ }
};
Drupal.overlay.open(overlayOptions);
}
}
- else {
- // If there is no overlay URL in the fragment, close the overlay.
- try {
- Drupal.overlay.close();
- }
- catch(e) {
- // The close attempt may have failed because the overlay isn't open.
- // If so, no special handling is needed here.
- }
+ // If there is no overlay URL in the fragment and the overlay is (still)
+ // open, close the overlay.
+ else if (Drupal.overlay.isOpen) {
+ Drupal.overlay.close();
}
};
@@ -796,9 +797,12 @@
// Determine the link's original destination, and make it relative to the
// Drupal site.
- var fullpath = link.pathname;
- var re = new RegExp('^' + Drupal.settings.basePath);
- var path = fullpath.replace(re, '');
+ var path = link.pathname;
+ // Ensure a leading slash on the path, omitted in some browsers.
+ if (path.substr(0, 1) != '/') {
+ path = '/' + path;
+ }
+ path = path.replace(new RegExp(Drupal.settings.basePath), '');
// Preserve existing query and fragment parameters in the URL.
var fragment = link.hash;
var querystring = link.search;
@@ -815,7 +819,7 @@
// Assemble the overlay-ready link.
var base = window.location.href;
return $.param.fragment(base, {'overlay':destination});
-}
+};
/**
* Make sure the internal overlay URL is reflected in the parent URL fragment.
@@ -882,7 +886,7 @@
*/
Drupal.theme.prototype.overlayContainer = function () {
return '
';
-}
+};
/**
* Theme function for the overlay title markup.