2 * Live preview script for MediaWiki
5 window
.doLivePreview = function( e
) {
6 var previewShowing
= false;
10 $( mw
).trigger( 'LivePreviewPrepare' );
12 var $wikiPreview
= $( '#wikiPreview' );
14 $( '#mw-content-text' ).css( 'position', 'relative' );
16 if ( $wikiPreview
.is( ':visible' ) ) {
17 previewShowing
= true;
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
24 // Jump to where the preview will appear
25 $wikiPreview
[0].scrollIntoView();
27 var postData
= $('#editform').formToArray();
28 postData
.push( { 'name' : 'wpPreview', 'value' : '1' } );
30 // Hide active diff, used templates, old preview if shown
31 var copyElements
= ['#wikiPreview', '.templatesUsed', '.hiddencats',
33 var copySelector
= copyElements
.join(',');
35 $.each( copyElements
, function( k
, v
) {
36 $( v
).fadeTo( 'fast', 0.4 );
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' );
44 // If the preview is already showing, overlay the spinner on top of it.
45 if ( previewShowing
) {
47 'position': 'absolute',
50 'margin-left': '-16px'
53 $wikiPreview
.before( loadSpinner
);
55 var page
= $('<div/>');
56 var target
= $('#editform').attr('action');
59 target
= window
.location
.href
;
62 page
.load( target
+ ' ' + copySelector
, postData
,
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
);
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', '' );
84 $( mw
).trigger( 'LivePreviewDone', [copyElements
] );
88 // Shamelessly stolen from the jQuery form plugin, which is licensed under the GPL.
89 // http://jquery.malsup.com/form/#download
90 $.fn
.formToArray = function() {
92 if (this.length
== 0) return a
;
95 var els
= form
.elements
;
97 for(var i
=0, max
=els
.length
; i
< max
; i
++) {
102 var v
= $.fieldValue(el
, true);
103 if (v
&& v
.constructor == Array
) {
104 for(var j
=0, jmax
=v
.length
; j
< jmax
; j
++)
105 a
.push({name
: n
, value
: v
[j
]});
107 else if (v
!== null && typeof v
!= 'undefined')
108 a
.push({name
: n
, value
: v
});
112 // input type=='image' are not found in elements array! handle it here
113 var $input
= $(form
.clk
), input
= $input
[0], n
= input
.name
;
114 if (n
&& !input
.disabled
&& input
.type
== 'image') {
115 a
.push({name
: n
, value
: $input
.val()});
116 a
.push({name
: n
+'.x', value
: form
.clk_x
}, {name
: n
+'.y', value
: form
.clk_y
});
123 * Returns the value of the field element.
125 $.fieldValue = function(el
, successful
) {
126 var n
= el
.name
, t
= el
.type
, tag
= el
.tagName
.toLowerCase();
127 if (typeof successful
== 'undefined') successful
= true;
129 if (successful
&& (!n
|| el
.disabled
|| t
== 'reset' || t
== 'button' ||
130 (t
== 'checkbox' || t
== 'radio') && !el
.checked
||
131 (t
== 'submit' || t
== 'image') && el
.form
&& el
.form
.clk
!= el
||
132 tag
== 'select' && el
.selectedIndex
== -1))
135 if (tag
== 'select') {
136 var index
= el
.selectedIndex
;
137 if (index
< 0) return null;
138 var a
= [], ops
= el
.options
;
139 var one
= (t
== 'select-one');
140 var max
= (one
? index
+1 : ops
.length
);
141 for(var i
=(one
? index
: 0); i
< max
; i
++) {
145 if (!v
) // extra pain for IE...
146 v
= (op
.attributes
&& op
.attributes
['value'] &&
147 !(op
.attributes
['value'].specified
))
148 ? op
.text
: op
.value
;
158 $(document
).ready( function() {
159 $('#wpPreview').click( doLivePreview
);