2 * Live preview script for MediaWiki
4 * 2007-04-25 – Nikerabbit:
5 * Worked around text cutoff in mozilla-based browsers
6 * Support for categories
10 lpIdPreview
= 'wikiPreview';
11 lpIdCategories
= 'catlinks';
12 lpIdDiff
= 'wikiDiff';
15 * Returns XMLHttpRequest based on browser support or null
17 function openXMLHttpRequest() {
18 if( window
.XMLHttpRequest
) {
19 return new XMLHttpRequest();
20 } else if( window
.ActiveXObject
&& navigator
.platform
!= 'MacPPC' ) {
21 // IE/Mac has an ActiveXObject but it doesn't work.
22 return new ActiveXObject("Microsoft.XMLHTTP");
29 * Returns true if could open the request,
30 * false otherwise (eg no browser support).
32 function lpDoPreview(text
, postUrl
) {
33 lpRequest
= openXMLHttpRequest();
34 if( !lpRequest
) return false;
36 lpRequest
.onreadystatechange
= lpStatusUpdate
;
37 lpRequest
.open("POST", postUrl
, true);
39 var postData
= 'wpTextbox1=' + encodeURIComponent(text
);
40 lpRequest
.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
41 lpRequest
.send(postData
);
45 function lpStatusUpdate() {
47 /* We are at some stage of loading */
48 if (lpRequest
.readyState
> 0 && lpRequest
.readyState
< 4) {
49 notify(i18n(wgLivepreviewMessageLoading
));
53 if(lpRequest
.readyState
!= 4) {
57 /* We got response, bug it not what we wanted */
58 if( lpRequest
.status
!= 200 ) {
59 var keys
= new Array();
60 keys
[0] = lpRequest
.status
;
61 keys
[1] = lpRequest
.statusText
;
62 window
.alert(i18n(wgLivepreviewMessageError
, keys
));
63 lpShowNormalPreview();
68 dismissNotify(i18n(wgLivepreviewMessageReady
), 750);
71 var XMLObject
= lpRequest
.responseXML
.documentElement
;
74 /* Work around Firefox (Gecko?) limitation where it shows only the first 4096
75 * bytes of data. Ref: http://www.thescripts.com/forum/thread482760.html
77 XMLObject
.normalize();
79 var previewElement
= XMLObject
.getElementsByTagName('preview')[0];
80 var categoryElement
= XMLObject
.getElementsByTagName('category')[0];
82 /* Hide the active diff if it exists */
83 var diff
= document
.getElementById(lpIdDiff
);
84 if ( diff
) { diff
.style
.display
= 'none'; }
87 var previewContainer
= document
.getElementById( lpIdPreview
);
88 if ( previewContainer
&& previewElement
) {
89 previewContainer
.innerHTML
= previewElement
.firstChild
.data
;
91 /* Should never happen */
92 window
.alert(i18n(wgLivepreviewMessageFailed
));
93 lpShowNormalPreview();
98 /* Inject categories */
99 var categoryContainer
= document
.getElementById( lpIdCategories
);
100 if ( categoryElement
&& categoryElement
.firstChild
) {
101 if ( categoryContainer
) {
102 categoryContainer
.innerHTML
= categoryElement
.firstChild
.data
;
104 categoryContainer
.style
.display
= 'block';
106 /* Just dump them somewhere */
107 /* previewContainer.innerHTML += categoryElement.firstChild.data;*/
110 /* Nothing to show, hide old data */
111 if ( categoryContainer
) {
112 categoryContainer
.style
.display
= 'none';
118 function lpShowNormalPreview() {
119 var fallback
= document
.getElementById('wpPreview');
120 if ( fallback
) { fallback
.style
.display
= 'inline'; }
124 // TODO: move elsewhere
125 /* Small non-intrusive popup which can be used for example to notify the user
126 * about completed AJAX action. Supports only one notify at a time.
128 function notify(message
) {
129 var notifyElement
= document
.getElementById('mw-js-notify');
130 if ( !notifyElement
) {
132 var notifyElement
= document
.getElementById('mw-js-notify');
134 notifyElement
.style
.display
= 'block';
135 notifyElement
.innerHTML
= message
;
138 function dismissNotify(message
, timeout
) {
139 var notifyElement
= document
.getElementById('mw-js-notify');
140 if ( notifyElement
) {
141 if ( timeout
== 0 ) {
142 notifyElement
.style
.display
= 'none';
145 setTimeout("dismissNotify('', 0)", timeout
);
150 function createNotify() {
151 var div
= document
.createElement("div");
152 var txt
= '###PLACEHOLDER###'
153 var txtNode
= document
.createTextNode(txt
);
154 div
.appendChild(txtNode
);
155 div
.id
= 'mw-js-notify';
156 // TODO: move styles to css
157 div
.setAttribute('style',
158 'display: none; position: fixed; bottom: 0px; right: 0px; color: white; background-color: DarkRed; z-index: 5; padding: 0.1em 1em 0.1em 1em; font-size: 120%;');
159 var body
= document
.getElementsByTagName('body')[0];
160 body
.appendChild(div
);
165 /* Helper function similar to wfMsgReplaceArgs() */
166 function i18n(message
, keys
) {
167 var localMessage
= message
;
168 if ( !keys
) { return localMessage
; }
169 for( var i
= 0; i
< keys
.length
; i
++) {
170 var myregexp
= new RegExp("\\$"+(i
+1), 'g');
171 localMessage
= localMessage
.replace(myregexp
, keys
[i
]);