c88272d3d0b2fc2f737cb4928e89d57a0d30ec6e
2 * Live preview script for MediaWiki
5 var doLivePreview = function( e
) {
8 $( mw
).trigger( 'LivePreviewPrepare' );
10 var $wikiPreview
= $( '#wikiPreview' );
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;
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)
21 // jump to where the preview will appear
22 $wikiPreview
[0].scrollIntoView();
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()
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
31 var $copyElements
= $( copySelectors
.join( ',' ) );
33 var $loadSpinner
= $( '<div>' ).addClass( 'mw-ajax-loader' );
34 $loadSpinner
.css( 'top', '0' ); // move away from header (default is -16px)
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
41 'position': 'absolute',
44 'margin-left': '-16px'
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' );
54 var $previewDataHolder
= $( '<div>' );
55 var target
= $( '#editform' ).attr( 'action' ) || window
.location
.href
;
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' } );
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
] );
70 $to
.empty().append( $from.contents() );
71 $to
.attr( 'class', $from.attr( 'class' ) );
74 $loadSpinner
.remove();
75 $copyElements
.animate( { 'opacity': 1 }, 'fast' );
77 $( mw
).trigger( 'LivePreviewDone', [copySelectors
] );
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
86 if ( !document
.getElementById( 'p-lang' ) && document
.getElementById( 'p-tb' ) ) {
87 $( '#p-tb' ).after( $( '<div>' ).attr( 'id', 'p-lang' ) );
91 if ( $( '.mw-summary-preview' ).length
=== 0 ) {
92 $( '.editCheckboxes' ).before( $( '<div>' ).addClass( 'mw-summary-preview' ) );
96 if ( !document
.getElementById( 'wikiDiff' ) && document
.getElementById( 'wikiPreview' ) ) {
97 $( '#wikiPreview' ).after( $( '<div>' ).attr( 'id', 'wikiDiff' ) );
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' );
104 $( '#wpPreview, #wpDiff' ).click( doLivePreview
);
106 } )( mediaWiki
, jQuery
);