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

[lhc/web/wiklou.git] / skins / common / preview.js

diff --git a/skins/common/preview.js b/skins/common/preview.js
index 9e76ca0..2922558 100644 (file)
--- a/skins/common/preview.js
+++ b/skins/common/preview.js
@@ -3,10 +3,27 @@
  */
 (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' } );
 
@@ -15,11 +32,25 @@
                                                        '#catlinks'];
                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 @@
                                        $(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();