LivePreview: handle .mw-newarticletext element

Previously, if LivePreview was used during article creation, the throbber
would be first inserted as the beginning of #mw-content-text (above
.mw-newarticletext), and then overlaid over it on subsequent previews.
Since .mw-newarticletext itself wasn't being faded, this looked ugly.

Now .mw-newarticletext is hidden after first preview and treated like
other elements LivePreview updates. (This mimics the behavior of regular
preview.)

Change-Id: I794d4675721280b041858fd1cb8ca26b32a5ed17

diff --git a/skins/common/preview.js b/skins/common/preview.js
index d70a2ec..c88272d 100644 (file)
--- a/skins/common/preview.js
+++ b/skins/common/preview.js
@@ -10,9 +10,9 @@
                var $wikiPreview = $( '#wikiPreview' );
 
                // this needs to be checked before we unconditionally show the preview
-               var previewVisible = false;
-               if ( $wikiPreview.is( ':visible' ) ) {
-                       previewVisible = true;
+               var overlaySpinner = false;
+               if ( $wikiPreview.is( ':visible' ) || $( '.mw-newarticletext:visible' ).length > 0 ) {
+                       overlaySpinner = true;
                }
 
                // show #wikiPreview if it's hidden to be able to scroll to it
@@ -22,9 +22,11 @@
                $wikiPreview[0].scrollIntoView();
 
                // list of elements that will be loaded from the preview page
+               // elements absent in the preview page (such as .mw-newarticletext) will be cleared using .empty()
                var copySelectors = [
                        '#wikiPreview', '#wikiDiff', '#catlinks', '.hiddencats', '#p-lang', // the meat
-                       '.templatesUsed', '.mw-summary-preview' // editing-related
+                       '.templatesUsed', '.mw-summary-preview', // editing-related
+                       '.mw-newarticletext' // it is not shown during normal preview, and looks weird with throbber overlaid
                ];
                var $copyElements = $( copySelectors.join( ',' ) );
 
@@ -32,7 +34,7 @@
                $loadSpinner.css( 'top', '0' ); // move away from header (default is -16px)
 
                // If the preview is already visible, overlay the spinner on top of it.
-               if ( previewVisible ) {
+               if ( overlaySpinner ) {
                        $( '#mw-content-text' ).css( 'position', 'relative' ); // FIXME this seems like a bad idea
 
                        $loadSpinner.css( {