Merge "(bug 25830) fix JS preview causing the page to "jump""

diff --combined skins/common/preview.js
index 823d467,2922558..0053b5e
--- 1/skins/common/preview.js
--- 2/skins/common/preview.js
+++ b/skins/common/preview.js
@@@ -3,23 -3,54 +3,54 @@@
   */
  (function( $ ) {
        window.doLivePreview = function( e ) {
+               var previewShowing = false;
+ 
                e.preventDefault();
  
                $( mw ).trigger( 'LivePreviewPrepare' );
  
+               var $wikiPreview = $( '#wikiPreview' );
+ 
+               $( '#mw-content-text' ).css( 'position', 'relative' );
+ 
+               if ( $wikiPreview.is( ':visible' ) ) {
+                       previewShowing = true;
+               }
+ 
+               // show #wikiPreview if it's hidden (if it is hidden, it's also empty, so nothing changes in the rendering)
+               // to be able to scroll to it
+               $wikiPreview.show();
+ 
+               // Jump to where the preview will appear
+               $wikiPreview[0].scrollIntoView();
+ 
                var postData = $('#editform').formToArray();
 -              postData.push( { 'name' : 'wpPreview', 'value' : '1' } );
 +              postData.push( { 'name' : e.target.name, 'value' : '1' } );
  
                // Hide active diff, used templates, old preview if shown
 -              var copyElements = ['#wikiPreview', '.templatesUsed', '.hiddencats',
 -                                                      '#catlinks'];
 +              var copyElements = ['#wikiPreview', '#wikiDiff', '.templatesUsed', '.hiddencats',
 +                                                      '#catlinks', '#p-lang', '.mw-summary-preview'];
                var copySelector = copyElements.join(',');
  
-               $.each( copyElements, function(k,v) { $(v).fadeOut('fast'); } );
+               $.each( copyElements, function( k, v ) {
+                       $( v ).fadeTo( 'fast', 0.4 );
+               } );
  
                // Display a loading graphic
                var loadSpinner = $('<div class="mw-ajax-loader"/>');
-               $('#wikiPreview').before( loadSpinner );
+               // Move away from header (default is -16px)
+               loadSpinner.css( 'top', '0' );
+ 
+               // If the preview is already showing, overlay the spinner on top of it.
+               if ( previewShowing ) {
+                       loadSpinner.css( {
+                               'position': 'absolute',
+                               'z-index': '3',
+                               'left': '50%',
+                               'margin-left': '-16px'
+                       } );
+               }
+               $wikiPreview.before( loadSpinner );
  
                var page = $('<div/>');
                var target = $('#editform').attr('action');
@@@ -41,9 -72,11 +72,11 @@@
                                        $(copyElements[i]).prop( 'class', newClasses );
                                }
  
-                               $.each( copyElements, function(k,v) {
+                               $.each( copyElements, function( k, v ) {
                                        // Don't belligerently show elements that are supposed to be hidden
-                                       $(v).fadeIn( 'fast', function() { $(this).css('display', ''); } );
+                                       $( v ).fadeTo( 'fast', 1, function() {
+                                               $( this ).css( 'display', '' );
+                                       } );
                                } );
  
                                loadSpinner.remove();
@@@ -123,26 -156,6 +156,26 @@@
        };
  
        $(document).ready( function() {
 -              $('#wpPreview').click( doLivePreview );
 +              // construct space for interwiki links if missing
 +              // (it is usually not shown when action=edit, but shown if action=submit)
 +              if ( !document.getElementById( 'p-lang' ) && document.getElementById( 'p-tb' ) ) {
 +                      // we need not hide this, because it's empty anyway
 +                      $( '#p-tb' ).after( $( '<div>' ).attr( 'id', 'p-lang' ) );
 +              }
 +
 +              // construct space for summary preview if missing
 +              if ( $( '.mw-summary-preview' ).length === 0 ) {
 +                      $( '.editCheckboxes' ).before( $( '<div>' ).addClass( 'mw-summary-preview' ) );
 +              }
 +
 +              // construct space for diff if missing. also load diff styles.
 +              if ( !document.getElementById( 'wikiDiff' ) && document.getElementById( 'wikiPreview' ) ) {
 +                      $( '#wikiPreview' ).after( $( '<div>' ).attr( 'id', 'wikiDiff' ) );
 +                      // diff styles are by default only loaded when needed
 +                      // if there was no diff container, we can expect the styles not to be there either
 +                      mw.loader.load( 'mediawiki.action.history.diff' );
 +              }
 +
 +              $( '#wpPreview, #wpDiff' ).click( doLivePreview );
        } );
  }) ( jQuery );