resources/mediawiki.action/mediawiki.action.edit.preview.js

   1 /**
   2  * Live edit preview.
   3  */
   4 ( function ( mw, $ ) {
   5
   6         /**
   7          * @param {jQuery.Event} e
   8          */
   9         function doLivePreview( e ) {
  10                 var $wikiPreview, $editform, copySelectors, $copyElements, $spinner,
  11                         targetUrl, postData, $previewDataHolder;
  12
  13                 e.preventDefault();
  14
  15                 // Deprecated: Use mw.hook instead
  16                 $( mw ).trigger( 'LivePreviewPrepare' );
  17
  18                 $wikiPreview = $( '#wikiPreview' );
  19                 $editform = $( '#editform' );
  20
  21                 // Show #wikiPreview if it's hidden to be able to scroll to it
  22                 // (if it is hidden, it's also empty, so nothing changes in the rendering)
  23                 $wikiPreview.show();
  24
  25                 // Jump to where the preview will appear
  26                 $wikiPreview[0].scrollIntoView();
  27
  28                 // List of selectors matching elements that we will
  29                 // update from from the ajax-loaded preview page.
  30                 copySelectors = [
  31                         // Main
  32                         '#wikiPreview',
  33                         '#wikiDiff',
  34                         '#catlinks',
  35                         '.hiddencats',
  36                         '#p-lang',
  37                         // Editing-related
  38                         '.templatesUsed',
  39                         '.limitreport',
  40                         '.mw-summary-preview'
  41                 ];
  42                 $copyElements = $( copySelectors.join( ',' ) );
  43
  44                 // Not shown during normal preview, to be removed if present
  45                 $( '.mw-newarticletext' ).remove();
  46
  47                 $spinner = $.createSpinner( {
  48                         size: 'large',
  49                         type: 'block'
  50                 });
  51                 $wikiPreview.before( $spinner );
  52                 $spinner.css( {
  53                         marginTop: $spinner.height()
  54                 } );
  55
  56                 // Can't use fadeTo because it calls show(), and we might want to keep some elements hidden
  57                 // (e.g. empty #catlinks)
  58                 $copyElements.animate( { opacity: 0.4 }, 'fast' );
  59
  60                 $previewDataHolder = $( '<div>' );
  61                 targetUrl = $editform.attr( 'action' );
  62
  63                 // Gather all the data from the form
  64                 postData = $editform.formToArray();
  65                 postData.push( {
  66                         name: e.target.name,
  67                         value: ''
  68                 } );
  69
  70                 // Load new preview data.
  71                 // TODO: This should use the action=parse API instead of loading the entire page,
  72                 // although that requires figuring out how to convert that raw data into proper HTML.
  73                 $previewDataHolder.load( targetUrl + ' ' + copySelectors.join( ',' ), postData, function () {
  74                         var i, $from;
  75
  76                         // Copy the contents of the specified elements from the loaded page to the real page.
  77                         // Also copy their class attributes.
  78                         for ( i = 0; i < copySelectors.length; i++ ) {
  79                                 $from = $previewDataHolder.find( copySelectors[i] );
  80
  81                                 $( copySelectors[i] )
  82                                         .empty()
  83                                         .append( $from.contents() )
  84                                         .attr( 'class', $from.attr( 'class' ) );
  85                         }
  86
  87                         // Deprecated: Use mw.hook instead
  88                         $( mw ).trigger( 'LivePreviewDone', [copySelectors] );
  89
  90                         mw.hook( 'wikipage.content' ).fire( $wikiPreview );
  91
  92                         $spinner.remove();
  93                         $copyElements.animate( {
  94                                 opacity: 1
  95                         }, 'fast' );
  96                 } );
  97         }
  98
  99         $( function () {
 100                 // Do not enable on user .js/.css pages, as there's no sane way of "previewing"
 101                 // the scripts or styles without reloading the page.
 102                 if ( $( '#mw-userjsyoucanpreview' ).length || $( '#mw-usercssyoucanpreview' ).length ) {
 103                         return;
 104                 }
 105
 106                 // The following elements can change in a preview but are not output
 107                 // by the server when they're empty until the preview response.
 108                 // TODO: Make the server output these always (in a hidden state), so we don't
 109                 // have to fish and (hopefully) put them in the right place (since skins
 110                 // can change where they are output).
 111
 112                 if ( !document.getElementById( 'p-lang' ) && document.getElementById( 'p-tb' ) ) {
 113                         $( '#p-tb' ).after(
 114                                 $( '<div>' ).attr( 'id', 'p-lang' )
 115                         );
 116                 }
 117
 118                 if ( !$( '.mw-summary-preview' ).length ) {
 119                         $( '.editCheckboxes' ).before(
 120                                 $( '<div>' ).addClass( 'mw-summary-preview' )
 121                         );
 122                 }
 123
 124                 if ( !document.getElementById( 'wikiDiff' ) && document.getElementById( 'wikiPreview' ) ) {
 125                         $( '#wikiPreview' ).after(
 126                                 $( '<div>' ).attr( 'id', 'wikiDiff' )
 127                         );
 128                 }
 129
 130                 // This should be moved down to '#editform', but is kept on the body for now
 131                 // because the LiquidThreads extension is re-using this module with only half
 132                 // the EditPage (doesn't include #editform presumably, bug 55463).
 133                 $( document.body ).on( 'click', '#wpPreview, #wpDiff', doLivePreview );
 134         } );
 135
 136 }( mediaWiki, jQuery ) );