* 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
'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',
),
'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',
--- /dev/null
+#jquery-foot-hovzer {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ z-index: 1000;
+}
--- /dev/null
+/**
+ * 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 ) );
.mw-debug {
width: 100%;
text-align: left;
- position: fixed;
- bottom: 0;
background-color: #eee;
border-top: 1px solid #aaa;
}
( function ( $, mw, undefined ) {
"use strict";
+ var hovzer = $.getFootHovzer();
+
var debug = mw.Debug = {
/**
* Toolbar container element
* @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 );
},
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;
}
debug.$container.data( 'currentPane', requestedPaneId );
if ( currentPaneId === undefined || currentPaneId === null ) {
- $requestedPane.slideDown();
+ $requestedPane.slideDown( updateHov );
} else {
$currentPane.hide();
$requestedPane.show();
+ updateHov();
}
},
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>' );
* @author Trevor Parscal <tparscal@wikimedia.org>
*/
-(function( $ ) {
+( function ( $ ) {
/**
* Logs a message to the console.
}
// 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
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>' )
} )
.text( prefix + args.join( ', ' ) )
.prepend( '<span style="float: right;">[' + time + ']</span>' )
- );
+ );
+ } );
};
})( jQuery );