skins/common/preview.js

   1 /**
   2  * Live preview script for MediaWiki
   3  */
   4 (function( $ ) {
   5         window.doLivePreview = function( e ) {
   6                 var previewShowing = false;
   7
   8                 e.preventDefault();
   9
  10                 $( mw ).trigger( 'LivePreviewPrepare' );
  11
  12                 var $wikiPreview = $( '#wikiPreview' );
  13
  14                 $( '#mw-content-text' ).css( 'position', 'relative' );
  15
  16                 if ( $wikiPreview.is( ':visible' ) ) {
  17                         previewShowing = true;
  18                 }
  19
  20                 // show #wikiPreview if it's hidden (if it is hidden, it's also empty, so nothing changes in the rendering)
  21                 // to be able to scroll to it
  22                 $wikiPreview.show();
  23
  24                 // Jump to where the preview will appear
  25                 $wikiPreview[0].scrollIntoView();
  26
  27                 var postData = $('#editform').formToArray(); // formToArray: from jquery.form
  28                 postData.push( { 'name' : e.target.name, 'value' : '1' } );
  29
  30                 // Hide active diff, used templates, old preview if shown
  31                 var copyElements = ['#wikiPreview', '#wikiDiff', '.templatesUsed', '.hiddencats',
  32                                                         '#catlinks', '#p-lang', '.mw-summary-preview'];
  33                 var copySelector = copyElements.join(',');
  34
  35                 $.each( copyElements, function( k, v ) {
  36                         $( v ).fadeTo( 'fast', 0.4 );
  37                 } );
  38
  39                 // Display a loading graphic
  40                 var loadSpinner = $('<div class="mw-ajax-loader"/>');
  41                 // Move away from header (default is -16px)
  42                 loadSpinner.css( 'top', '0' );
  43
  44                 // If the preview is already showing, overlay the spinner on top of it.
  45                 if ( previewShowing ) {
  46                         loadSpinner.css( {
  47                                 'position': 'absolute',
  48                                 'z-index': '3',
  49                                 'left': '50%',
  50                                 'margin-left': '-16px'
  51                         } );
  52                 }
  53                 $wikiPreview.before( loadSpinner );
  54
  55                 var page = $('<div/>');
  56                 var target = $('#editform').attr('action');
  57
  58                 if ( !target ) {
  59                         target = window.location.href;
  60                 }
  61
  62                 page.load( target + ' ' + copySelector, postData,
  63                         function() {
  64
  65                                 for( var i=0; i<copyElements.length; ++i) {
  66                                         // For all the specified elements, find the elements in the loaded page
  67                                         //  and the real page, empty the element in the real page, and fill it
  68                                         //  with the content of the loaded page
  69                                         var copyContent = page.find( copyElements[i] ).contents();
  70                                         $(copyElements[i]).empty().append( copyContent );
  71                                         var newClasses = page.find( copyElements[i] ).prop('class');
  72                                         $(copyElements[i]).prop( 'class', newClasses );
  73                                 }
  74
  75                                 $.each( copyElements, function( k, v ) {
  76                                         // Don't belligerently show elements that are supposed to be hidden
  77                                         $( v ).fadeTo( 'fast', 1, function() {
  78                                                 $( this ).css( 'display', '' );
  79                                         } );
  80                                 } );
  81
  82                                 loadSpinner.remove();
  83
  84                                 $( mw ).trigger( 'LivePreviewDone', [copyElements] );
  85                         } );
  86         };
  87
  88         $(document).ready( function() {
  89                 // construct space for interwiki links if missing
  90                 // (it is usually not shown when action=edit, but shown if action=submit)
  91                 if ( !document.getElementById( 'p-lang' ) && document.getElementById( 'p-tb' ) ) {
  92                         // we need not hide this, because it's empty anyway
  93                         $( '#p-tb' ).after( $( '<div>' ).attr( 'id', 'p-lang' ) );
  94                 }
  95
  96                 // construct space for summary preview if missing
  97                 if ( $( '.mw-summary-preview' ).length === 0 ) {
  98                         $( '.editCheckboxes' ).before( $( '<div>' ).addClass( 'mw-summary-preview' ) );
  99                 }
 100
 101                 // construct space for diff if missing. also load diff styles.
 102                 if ( !document.getElementById( 'wikiDiff' ) && document.getElementById( 'wikiPreview' ) ) {
 103                         $( '#wikiPreview' ).after( $( '<div>' ).attr( 'id', 'wikiDiff' ) );
 104                         // diff styles are by default only loaded when needed
 105                         // if there was no diff container, we can expect the styles not to be there either
 106                         mw.loader.load( 'mediawiki.action.history.diff' );
 107                 }
 108
 109                 $( '#wpPreview, #wpDiff' ).click( doLivePreview );
 110         } );
 111 }) ( jQuery );