skins/common/preview.js

   1 /**
   2  * Live preview script for MediaWiki
   3  */
   4 ( function( mw, $ ) {
   5         var doLivePreview = function( e ) {
   6                 e.preventDefault();
   7
   8                 $( mw ).trigger( 'LivePreviewPrepare' );
   9
  10                 var $wikiPreview = $( '#wikiPreview' );
  11
  12                 // this needs to be checked before we unconditionally show the preview
  13                 var overlaySpinner = false;
  14                 if ( $wikiPreview.is( ':visible' ) || $( '.mw-newarticletext:visible' ).length > 0 ) {
  15                         overlaySpinner = true;
  16                 }
  17
  18                 // show #wikiPreview if it's hidden to be able to scroll to it
  19                 // (if it is hidden, it's also empty, so nothing changes in the rendering)
  20                 $wikiPreview.show();
  21                 // jump to where the preview will appear
  22                 $wikiPreview[0].scrollIntoView();
  23
  24                 // list of elements that will be loaded from the preview page
  25                 // elements absent in the preview page (such as .mw-newarticletext) will be cleared using .empty()
  26                 var copySelectors = [
  27                         '#wikiPreview', '#wikiDiff', '#catlinks', '.hiddencats', '#p-lang', // the meat
  28                         '.templatesUsed', '.mw-summary-preview', // editing-related
  29                         '.mw-newarticletext' // it is not shown during normal preview, and looks weird with throbber overlaid
  30                 ];
  31                 var $copyElements = $( copySelectors.join( ',' ) );
  32
  33                 var $loadSpinner = $( '<div>' ).addClass( 'mw-ajax-loader' );
  34                 $loadSpinner.css( 'top', '0' ); // move away from header (default is -16px)
  35
  36                 // If the preview is already visible, overlay the spinner on top of it.
  37                 if ( overlaySpinner ) {
  38                         $( '#mw-content-text' ).css( 'position', 'relative' ); // FIXME this seems like a bad idea
  39
  40                         $loadSpinner.css( {
  41                                 'position': 'absolute',
  42                                 'z-index': '3',
  43                                 'left': '50%',
  44                                 'margin-left': '-16px'
  45                         } );
  46                 }
  47
  48                 // fade out the elements and display the throbber
  49                 $( '#mw-content-text' ).prepend( $loadSpinner );
  50                 // we can't use fadeTo because it calls show(), and we might want to keep some elements hidden
  51                 // (e.g. empty #catlinks)
  52                 $copyElements.animate( { 'opacity': 0.4 }, 'fast' );
  53
  54                 var $previewDataHolder = $( '<div>' );
  55                 var target = $( '#editform' ).attr( 'action' ) || window.location.href;
  56
  57                 // gather all the data from the form
  58                 var postData = $( '#editform' ).formToArray(); // formToArray: from jquery.form
  59                 postData.push( { 'name' : e.target.name, 'value' : '1' } );
  60
  61                 // load new preview data
  62                 // FIXME this should use the action=parse API instead of loading the entire page
  63                 $previewDataHolder.load( target + ' ' + copySelectors.join( ',' ), postData, function() {
  64                         // Copy the contents of the specified elements from the loaded page to the real page.
  65                         // Also copy their class attributes.
  66                         for ( var i = 0; i < copySelectors.length; i++ ) {
  67                                 var $from = $previewDataHolder.find( copySelectors[i] );
  68                                 var $to = $( copySelectors[i] );
  69
  70                                 $to.empty().append( $from.contents() );
  71                                 $to.attr( 'class', $from.attr( 'class' ) );
  72                         }
  73
  74                         $loadSpinner.remove();
  75                         $copyElements.animate( { 'opacity': 1 }, 'fast' );
  76
  77                         $( mw ).trigger( 'LivePreviewDone', [copySelectors] );
  78                 } );
  79         };
  80
  81         $( document ).ready( function() {
  82                 // construct the elements we need if they are missing (usually when action=edit)
  83                 // we don't need to hide them, because they are empty when created
  84
  85                 // interwiki links
  86                 if ( !document.getElementById( 'p-lang' ) && document.getElementById( 'p-tb' ) ) {
  87                         $( '#p-tb' ).after( $( '<div>' ).attr( 'id', 'p-lang' ) );
  88                 }
  89
  90                 // summary preview
  91                 if ( $( '.mw-summary-preview' ).length === 0 ) {
  92                         $( '.editCheckboxes' ).before( $( '<div>' ).addClass( 'mw-summary-preview' ) );
  93                 }
  94
  95                 // diff
  96                 if ( !document.getElementById( 'wikiDiff' ) && document.getElementById( 'wikiPreview' ) ) {
  97                         $( '#wikiPreview' ).after( $( '<div>' ).attr( 'id', 'wikiDiff' ) );
  98                 }
  99
 100                 // diff styles are usually only loaded during, well, diff, and we might need them
 101                 // (mw.loader takes care of stuff if they happen to be loaded already)
 102                 mw.loader.load( 'mediawiki.action.history.diff' );
 103
 104                 $( '#wpPreview, #wpDiff' ).click( doLivePreview );
 105         } );
 106 } )( mediaWiki, jQuery );