[Summary view] [Print] [Text view]

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