From: Krinkle <krinkle@users.mediawiki.org>
Date: Wed, 4 Jan 2012 01:28:01 +0000 (+0000)
Subject: [jquery.footHovzer] new plugin for mw-log-console and mw-debug-toolbar
X-Git-Tag: 1.31.0-rc.0~25566
X-Git-Url: https://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/banques/?a=commitdiff_plain;h=2bed75d951ce77dd22ebf8059fad3f173c856c0b;p=lhc%2Fweb%2Fwiklou.git

[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 463c85c90e..5a1d8efb74 100644
--- 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
index 0000000000..77d9514c22
--- /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
index 0000000000..4ae8c8a0bd
--- /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 506db7cad1..2cc886b1b5 100644
--- 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 df2a922b1b..43381ff730 100644
--- 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 6dff8fc4f1..ad4c73df74 100644
--- 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 );