[jquery.footHovzer] new plugin for mw-log-console and mw-debug-toolbar

* Previously mw.log and mw.Debug both were in a fixed container on the bottom, overlapping each other. mw.log did increase the body's padding-bottom to account for the height so that all content is still visible, but it was still a problem when mw.Debug came along.
* This plugin adds a single fixed position element to bottom of the body, to which other stuff like mw.log and mw.Debug can append a non-fixed position container. That will take care of it.
* Method update() will re-check the padding and scroll position and fix where needed
* Reduces code a little bit

diff --git a/resources/Resources.php b/resources/Resources.php
index 463c85c..5a1d8ef 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -127,6 +127,10 @@ return array(
                'styles' => 'resources/jquery/jquery.farbtastic.css',
                'dependencies' => 'jquery.colorUtil',
        ),
+       'jquery.footHovzer' => array(
+               'scripts' => 'resources/jquery/jquery.footHovzer.js',
+               'styles' => 'resources/jquery/jquery.footHovzer.css',
+       ),
        'jquery.form' => array(
                'scripts' => 'resources/jquery/jquery.form.js',
        ),
@@ -533,6 +537,7 @@ return array(
        'mediawiki.debug' => array(
                'scripts' => 'resources/mediawiki/mediawiki.debug.js',
                'styles' => 'resources/mediawiki/mediawiki.debug.css',
+               'dependencies' => 'jquery.footHovzer',
        ),
        'mediawiki.feedback' => array(
                'scripts' => 'resources/mediawiki/mediawiki.feedback.js',

diff --git a/resources/jquery/jquery.footHovzer.css b/resources/jquery/jquery.footHovzer.css
new file mode 100644 (file)
index 0000000..77d9514
--- /dev/null
+++ b/resources/jquery/jquery.footHovzer.css
@@ -0,0 +1,6 @@
+#jquery-foot-hovzer {
+       position: fixed;
+       bottom: 0;
+       width: 100%;
+       z-index: 1000;
+}

diff --git a/resources/jquery/jquery.footHovzer.js b/resources/jquery/jquery.footHovzer.js
new file mode 100644 (file)
index 0000000..4ae8c8a
--- /dev/null
+++ b/resources/jquery/jquery.footHovzer.js
@@ -0,0 +1,50 @@
+/**
+ * Utility to stack stuff in an overlay fixed on the bottom of the page.
+ *
+ * Usage:
+ * <code>
+ *     var hovzer = $.getFootHovzer();
+ *     hovzer.$.append( $myCollection );
+ *     hovzer.update();
+ * </code>
+ *
+ * @author Timo Tijhof, 2012
+ */
+( function ( $ ) {
+       var $hovzer, footHovzer, prevHeight, newHeight;
+
+       function getHovzer() {
+               if ( $hovzer === undefined ) {
+                       $hovzer = $( '<div id="jquery-foot-hovzer"></div>' ).appendTo( 'body' );
+               }
+               return $hovzer;
+       }
+
+       footHovzer = {
+               update: function () {
+                       var $body, winTop;
+
+                       $body = $( 'body' );
+                       if ( prevHeight === undefined ) {
+                               prevHeight = getHovzer().outerHeight( /*includeMargin=*/true );
+                               $body.css( 'paddingBottom', '+=' + prevHeight + 'px' );
+                       } else {
+                               newHeight = getHovzer().outerHeight( true );
+                               $body.css( 'paddingBottom', ( parseFloat( $body.css( 'paddingBottom' ) ) - prevHeight ) + newHeight );
+                               // Update scroll so that page stays focusses on same area
+                               winTop = $(window).scrollTop();
+                               if ( $(document).height() - $(window).height() > winTop ) {
+                                       $(window).scrollTop( winTop + ( newHeight - prevHeight ) );
+                               }
+                               
+                               prevHeight = newHeight;
+                       }
+               }
+       };
+
+       $.getFootHovzer = function () {
+               footHovzer.$ = getHovzer();
+               return footHovzer;
+       };
+
+}( jQuery ) );

diff --git a/resources/mediawiki/mediawiki.debug.css b/resources/mediawiki/mediawiki.debug.css
index 506db7c..2cc886b 100644 (file)
--- a/resources/mediawiki/mediawiki.debug.css
+++ b/resources/mediawiki/mediawiki.debug.css
@@ -1,8 +1,6 @@
 .mw-debug {
        width: 100%;
        text-align: left;
-       position: fixed;
-       bottom: 0;
        background-color: #eee;
        border-top: 1px solid #aaa;
 }

diff --git a/resources/mediawiki/mediawiki.debug.js b/resources/mediawiki/mediawiki.debug.js
index df2a922..43381ff 100644 (file)
--- a/resources/mediawiki/mediawiki.debug.js
+++ b/resources/mediawiki/mediawiki.debug.js
@@ -8,6 +8,8 @@
 ( function ( $, mw, undefined ) {
 "use strict";
 
+       var hovzer = $.getFootHovzer();
+
        var debug = mw.Debug = {
                /**
                 * Toolbar container element
@@ -29,11 +31,13 @@
                 * @param {Object} data
                 */
                init: function ( data ) {
+
                        this.data = data;
                        this.buildHtml();
 
                        // Insert the container into the DOM
-                       $( 'body' ).append( this.$container );
+                       hovzer.$.append( this.$container );
+                       hovzer.update();
 
                        $( '.mw-debug-panelink' ).click( this.switchPane );
                },
@@ -49,15 +53,22 @@
                        var currentPaneId = debug.$container.data( 'currentPane' ),
                                requestedPaneId = $(this).prop( 'id' ).substr( 9 ),
                                $currentPane = $( '#mw-debug-pane-' + currentPaneId ),
-                               $requestedPane = $( '#mw-debug-pane-' + requestedPaneId );
+                               $requestedPane = $( '#mw-debug-pane-' + requestedPaneId ),
+                               hovDone = false;
+
+                       function updateHov() {
+                               if ( !hovDone ) {
+                                       hovzer.update();
+                                       hovDone = true;
+                               }
+                       }
 
                        $( this ).addClass( 'current ')
                        $( '.mw-debug-panelink' ).not( this ).removeClass( 'current ');
 
-
                        // Hide the current pane
                        if ( requestedPaneId === currentPaneId ) {
-                               $currentPane.slideUp();
+                               $currentPane.slideUp( updateHov );
                                debug.$container.data( 'currentPane', null );
                                return;
                        }
@@ -65,10 +76,11 @@
                        debug.$container.data( 'currentPane', requestedPaneId );
 
                        if ( currentPaneId === undefined || currentPaneId === null ) {
-                               $requestedPane.slideDown();
+                               $requestedPane.slideDown( updateHov );
                        } else {
                                $currentPane.hide();
                                $requestedPane.show();
+                               updateHov();
                        }
                },
 
@@ -78,7 +90,7 @@
                buildHtml: function () {
                        var $container, $bits, panes, id;
 
-                       $container = $( '<div id="mw-debug-container" class="mw-debug"></div>' );
+                       $container = $( '<div id="mw-debug-toolbar" class="mw-debug"></div>' );
 
                        $bits = $( '<div class="mw-debug-bits"></div>' );
 

diff --git a/resources/mediawiki/mediawiki.log.js b/resources/mediawiki/mediawiki.log.js
index 6dff8fc..ad4c73d 100644 (file)
--- a/resources/mediawiki/mediawiki.log.js
+++ b/resources/mediawiki/mediawiki.log.js
@@ -6,7 +6,7 @@
  * @author Trevor Parscal <tparscal@wikimedia.org>
  */
 
-(function( $ ) {
+( function ( $ ) {
 
        /**
         * Logs a message to the console.
@@ -31,6 +31,7 @@
                }
 
                // If there is no console, use our own log box
+               mw.loader.using( 'jquery.footHovzer', function () {
 
                        var     d = new Date(),
                                // Create HH:MM:SS.MIL timestamp
@@ -42,21 +43,14 @@
        
                        if ( !$log.length ) {
                                $log = $( '<div id="mw-log-console"></div>' ).css( {
-                                               position: 'fixed',
                                                overflow: 'auto',
-                                               zIndex: 500,
-                                               bottom: '0px',
-                                               left: '0px',
-                                               right: '0px',
                                                height: '150px',
                                                backgroundColor: 'white',
                                                borderTop: 'solid 2px #ADADAD'
                                        } );
-                               $( 'body' )
-                                       // Since the position is fixed, make sure we don't hide any actual content.
-                                       // Increase padding to account for #mw-log-console.
-                                       .css( 'paddingBottom', '+=150px' )
-                                       .append( $log );
+                               var hovzer = $.getFootHovzer();
+                               hovzer.$.append( $log );
+                               hovzer.update();
                        }
                        $log.append(
                                $( '<div></div>' )
@@ -69,7 +63,8 @@
                                        } )
                                        .text( prefix + args.join( ', ' ) )
                                        .prepend( '<span style="float: right;">[' + time + ']</span>' )
-               );
+                       );
+               } );
        };
 
 })( jQuery );