1.6.1dev: fix the auto-centering of wikiColumn function in wiki.js (closes #13784)

* Skip elements which have `float: ...`, `position: absolute`, `position: fixed`.
* Add `trac-wiki-center` class instead of directly set the style of the elements.
* The auto-centering doesn't work if enabling narrow when fullwidth is configured.
* The auto-centering in narrow incorrectly effects print view.

[skip ci]


git-svn-id: http://trac.edgewall.org/intertrac/log:/branches/1.6-stable@17867 af82e41b-90c4-0310-8c96-b1721e28e2e2

Author: jomae

trac/htdocs/css/wiki.css

@@ -107,9 +107,16 @@ h3.section:target {
 }
 
 
+@media screen {
+ #content.narrow .trac-wiki-center {
+  background: #fff;
+  opacity: 0.8;
+ }
+}
 @media print {
  #content.narrow #wikipage { max-width: none }
- #content.narrow #trac-wiki-expander:before, #content #trac-wiki-expander { display: none }
+ #content.narrow .trac-wiki-center { margin-left: unset !important }
+ #content #trac-wiki-expander { display: none }
  h2.section:target {
   background: linear-gradient(to top,
    #fff 0,

trac/htdocs/js/wiki.js

@@ -16,58 +16,77 @@
     }).prependTo($wikipage);
 
     // Auto-centering of top-level elements larger than #wikipage's max-width
-    var wpow = $wikipage.outerWidth();
-    var large_elements = [];
+    var wpow;
+    var large_elements;
     var detectLargeElement = function() {
-      var rol = $(this).offset().left - $wikipage.offset().left;
-      var excess = $(this).outerWidth() + rol - wpow;
+      var $e = $(this);
+      if ($e.css('float') !== 'none')
+        return 0;
+      switch ($e.css('position')) {
+        case 'absolute':
+        case 'fixed':
+          return 0;
+      }
+      var rol = $e.offset().left - $wikipage.offset().left;
+      var excess = $e.outerWidth() + rol - wpow;
       if (excess > 0) {
-        $(this).data('excess', excess);
-        $(this).data('rol', rol);
+        $e.data('excess', excess);
+        $e.data('rol', rol);
         large_elements.push(this);
       }
       return excess;
     };
     var centerLargeElement = function($e, wpleft) {
-        var shift_left;
-        var excess = $e.data('excess');
-        var rol = $e.data('rol');
-        if (excess > rol)
-            shift_left = rol + (excess - rol) / 2;
-        else
-            shift_left = excess;
-        if (shift_left > wpleft)
-          shift_left = wpleft;
+      var shift_left;
+      var excess = $e.data('excess');
+      var rol = $e.data('rol');
+      if (excess > rol)
+        shift_left = rol + (excess - rol) / 2;
+      else
+        shift_left = excess;
+      if (shift_left > wpleft)
+        shift_left = wpleft;
 
-        $e.css({'margin-left': -shift_left,
-                'background': 'rgba(255, 255, 255, .8)'});
+      $e.css('margin-left', -shift_left).addClass('trac-wiki-center');
     };
     var resetLargeElements = function() {
-      for (var i = 0; i < large_elements.length; i++) {
-        $(large_elements[i]).css({'margin-left': 0, 'background': 'none'});
-      }
+      if (large_elements === undefined)
+        return;
+      $(large_elements)
+        .css('margin-left', '')
+        .removeClass('trac-wiki-center');
     };
     var detectLargeImage = function() {
       var excess = detectLargeElement.apply(this);
       if (excess > 0)
         centerLargeElement($(this), $wikipage.offset().left);
     };
-    $("#wikipage > table").each(detectLargeElement);
-    $("#wikipage > div").each(detectLargeElement);
-    $("#wikipage > p > a > img").one("load", detectLargeImage).each(
-      function() {
-        if (this.complete)
-          detectLargeImage.apply(this);
-      }
-    );
-
+    var detectLargeElements = function() {
+      $wikipage.find("> table, > div").each(detectLargeElement);
+      $wikipage.find("> p > a > img").one("load", detectLargeImage).each(
+        function() {
+          if (this.complete)
+            detectLargeImage.apply(this);
+        }
+      );
+    };
     var centerLargeElements = function() {
+      if (large_elements === undefined) {
+        wpow = $wikipage.outerWidth();
+        large_elements = [];
+        detectLargeElements();
+      }
       var wikipage_left = $wikipage.offset().left;
-      for (var i = 0; i < large_elements.length; i++)
-        centerLargeElement($(large_elements[i]), wikipage_left);
+      $.each(large_elements, function() {
+        centerLargeElement($(this), wikipage_left);
+      });
+    };
+    var centerLargeElementsIfNarrow = function() {
+      if ($content.hasClass('narrow'))
+        centerLargeElements();
     };
-    $(window).resize(centerLargeElements);
-    centerLargeElements();
+    $(window).resize(centerLargeElementsIfNarrow);
+    centerLargeElementsIfNarrow();
   };