- Patch #787940 by casey: generic approach for position:fixed elements like toolbar.

7 files changed, 41 insertions, 68 deletions

diff --git a/modules/overlay/overlay-parent.js b/modules/overlay/overlay-parent.js
index f4688af69..e33543580 100644
--- a/modules/overlay/overlay-parent.js
+++ b/modules/overlay/overlay-parent.js
@@ -650,15 +650,9 @@ Drupal.overlay.outerResize = function () {
     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();
-  });
+  var displaceTop = Drupal.displace ? Drupal.displace.getDisplacement('top') : 0;
 
-  self.$wrapper.css('top', displaceTopHeight);
+  self.$wrapper.css('top', displaceTop);
 
   // When the overlay has no height yet, make it fit exactly in the window,
   // or the configured height when autoFit is disabled.
@@ -666,7 +660,7 @@ Drupal.overlay.outerResize = function () {
     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);
+      self.lastHeight = parseInt($(window).height() - displaceTop - titleBarHeight - 45);
     }
     else {
       self.lastHeight = self.options.height;
@@ -703,11 +697,11 @@ Drupal.overlay.clickHandler = function (event) {
 
   var $target = $(event.target);
 
-  if (self.isOpen && $target.closest('.overlay-displace-top, .overlay-displace-bottom').length) {
+  if (self.isOpen && $target.closest('.displace-top, .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');
+    $(window).triggerHandler('resize');
   }
 
   // Only continue by left-click or right-click.
@@ -929,7 +923,7 @@ Drupal.overlay.resetActiveClass = function(activePath) {
   var self = this;
   var windowDomain = window.location.protocol + window.location.hostname;
 
-  $('.overlay-displace-top, .overlay-displace-bottom')
+  $('.displace-top, .displace-bottom')
   .find('a[href]')
   // Remove active class from all links in displaced regions.
   .removeClass('active')
diff --git a/modules/overlay/overlay.module b/modules/overlay/overlay.module
index c5b123b7b..5ac362ed9 100644
--- a/modules/overlay/overlay.module
+++ b/modules/overlay/overlay.module
@@ -300,16 +300,6 @@ function overlay_preprocess_page(&$variables) {
 }
 
 /**
- * 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";
-}
-
-/**
  * Form after_build callback.
  *
  * After all hook_form_alter() implementations have been processed, we look at
diff --git a/modules/system/system.css b/modules/system/system.css
index bbe712f91..adf9eee18 100644
--- a/modules/system/system.css
+++ b/modules/system/system.css
@@ -255,6 +255,26 @@ tr.selected td {
 }
 
 /*
+** To be used with displace.js
+*/
+.displace-top,
+.displace-bottom {
+  position: relative;
+  width: 100%;
+}
+.displace-processed .displace-top,
+.displace-processed .displace-bottom {
+  position: fixed;
+  width: auto;
+  left: 0;
+  right: 0;
+}
+.displace-unsupported .displace-top,
+.displace-unsupported .displace-bottom {
+  position: absolute;
+}
+
+/*
 ** Floating header for tableheader.js
 */
 table.sticky-header {
diff --git a/modules/toolbar/toolbar.css b/modules/toolbar/toolbar.css
index 5fc8159ba..7122e4ecc 100644
--- a/modules/toolbar/toolbar.css
+++ b/modules/toolbar/toolbar.css
@@ -1,12 +1,6 @@
 /* $Id$ */
 
-body.toolbar {
-  padding-top: 2.2em;
-}
 
-body.toolbar-drawer {
-  padding-top: 5.3em;
-}
 
 /**
  * Aggressive resets so we can achieve a consistent look in hostile CSS
@@ -32,10 +26,8 @@ body.toolbar-drawer {
   font: normal 0.9em "Lucida Grande", Verdana, sans-serif;
   background: #666;
   color: #ccc;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
+}
+.displace-processed #toolbar {
   margin: 0 -20px;
   padding: 0 20px;
   z-index: 600;
@@ -45,6 +37,14 @@ body.toolbar-drawer {
   filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10');
   -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10')";
 }
+.displace-unsupported #toolbar {
+  margin: 0;
+  padding-right: 0;
+  left: -20px;
+  right: 0;
+  width: 100%;
+}
+
 
 #toolbar div.collapsed {
   display: none;
@@ -132,18 +132,3 @@ body.toolbar-drawer {
   position: relative;
   padding: 0 10px;
 }
-
-/**
- * IE 6 Fix.
- *
- * IE 6 shows elements with position:fixed as position:static so we replace
- * it with position:absolute; toolbar needs it's z-index to stay above overlay.
- */
-* html #toolbar {
-  position: absolute;
-  margin: 0;
-  padding-right: 0;
-  left: -20px;
-  right: 0;
-  width: 100%;
-}
diff --git a/modules/toolbar/toolbar.js b/modules/toolbar/toolbar.js
index 85129f824..be95c76ab 100644
--- a/modules/toolbar/toolbar.js
+++ b/modules/toolbar/toolbar.js
@@ -15,9 +15,8 @@ Drupal.behaviors.toolbar = {
     // Toggling toolbar drawer.
     $('#toolbar a.toggle', context).once('toolbar-toggle').click(function(e) {
       Drupal.toolbar.toggle();
-      // As the toolbar is an overlay displaced region, overlay should be
-      // notified of it's height change to adapt its position.
-      $(window).triggerHandler('resize.overlay-event');
+      // Allow resize event handlers to recalculate sizes/positions.
+      $(window).triggerHandler('resize');
       return false;
     });
   }
@@ -49,7 +48,6 @@ Drupal.toolbar.collapse = function() {
     .removeClass('toggle-active')
     .attr('title',  toggle_text)
     .html(toggle_text);
-  $('body').removeClass('toolbar-drawer').css('paddingTop', Drupal.toolbar.height());
   $.cookie(
     'Drupal.toolbar.collapsed',
     1,
@@ -71,7 +69,6 @@ Drupal.toolbar.expand = function() {
     .addClass('toggle-active')
     .attr('title',  toggle_text)
     .html(toggle_text);
-  $('body').addClass('toolbar-drawer').css('paddingTop', Drupal.toolbar.height());
   $.cookie(
     'Drupal.toolbar.collapsed',
     0,
@@ -95,14 +92,4 @@ Drupal.toolbar.toggle = function() {
   }
 };
 
-Drupal.toolbar.height = function() {
-  var height = $('#toolbar').outerHeight();
-  // In IE, Shadow filter adds some extra height, so we need to remove it from
-  // the returned height.
-  if ($('#toolbar').css('filter').match(/DXImageTransform\.Microsoft\.Shadow/)) {
-    height -= $('#toolbar').get(0).filters.item("DXImageTransform.Microsoft.Shadow").strength;
-  }
-  return height;
-};
-
 })(jQuery);
diff --git a/modules/toolbar/toolbar.module b/modules/toolbar/toolbar.module
index c245a8fa7..b75790216 100644
--- a/modules/toolbar/toolbar.module
+++ b/modules/toolbar/toolbar.module
@@ -177,12 +177,9 @@ function toolbar_view() {
     '#theme' => 'toolbar',
     '#attached'=> array(
       'js' => array(
-        $module_path . '/toolbar.js',
+        array('data' => 'misc/displace.js', 'weight' => JS_LIBRARY - 1),
         array('data' => 'misc/jquery.cookie.js', 'weight' => JS_LIBRARY + 2),
-        array(
-          'data' => array('tableHeaderOffset' => 'Drupal.toolbar.height'),
-          'type' => 'setting'
-        ),
+        $module_path . '/toolbar.js',
       ),
       'css' => array(
         $module_path . '/toolbar.css',
diff --git a/modules/toolbar/toolbar.tpl.php b/modules/toolbar/toolbar.tpl.php
index d38aae696..eac3e88ab 100644
--- a/modules/toolbar/toolbar.tpl.php
+++ b/modules/toolbar/toolbar.tpl.php
@@ -22,7 +22,7 @@
  * @see template_preprocess_toolbar()
  */
 ?>
-<div id="toolbar" class="<?php print $classes; ?> clearfix">
+<div id="toolbar" class="<?php print $classes; ?> displace-top clearfix">
   <div class="toolbar-menu clearfix">
     <?php print render($toolbar['toolbar_home']); ?>
     <?php print render($toolbar['toolbar_user']); ?>