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
;
90 previewContainer
.style
.display
= 'block';
92 /* Should never happen */
93 window
.alert(i18n(wgLivepreviewMessageFailed
));
94 lpShowNormalPreview();
99 /* Inject categories */
100 var categoryContainer
= document
.getElementById( lpIdCategories
);
101 if ( categoryElement
&& categoryElement
.firstChild
) {
102 if ( categoryContainer
) {
103 categoryContainer
.innerHTML
= categoryElement
.firstChild
.data
;
105 categoryContainer
.style
.display
= 'block';
107 /* Just dump them somewhere */
108 /* previewContainer.innerHTML += categoryElement.firstChild.data;*/
111 /* Nothing to show, hide old data */
112 if ( categoryContainer
) {
113 categoryContainer
.style
.display
= 'none';
119 function lpShowNormalPreview() {
120 var fallback
= document
.getElementById('wpPreview');
121 if ( fallback
) { fallback
.style
.display
= 'inline'; }
125 // TODO: move elsewhere
126 /* Small non-intrusive popup which can be used for example to notify the user
127 * about completed AJAX action. Supports only one notify at a time.
129 function notify(message
) {
130 var notifyElement
= document
.getElementById('mw-js-notify');
131 if ( !notifyElement
) {
133 var notifyElement
= document
.getElementById('mw-js-notify');
135 notifyElement
.style
.display
= 'block';
136 notifyElement
.innerHTML
= message
;
139 function dismissNotify(message
, timeout
) {
140 var notifyElement
= document
.getElementById('mw-js-notify');
141 if ( notifyElement
) {
142 if ( timeout
== 0 ) {
143 notifyElement
.style
.display
= 'none';
146 setTimeout("dismissNotify('', 0)", timeout
);
151 function createNotify() {
152 var div
= document
.createElement("div");
153 var txt
= '###PLACEHOLDER###'
154 var txtNode
= document
.createTextNode(txt
);
155 div
.appendChild(txtNode
);
156 div
.id
= 'mw-js-notify';
157 // TODO: move styles to css
158 div
.setAttribute('style',
159 '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%;');
160 var body
= document
.getElementsByTagName('body')[0];
161 body
.appendChild(div
);
166 /* Helper function similar to wfMsgReplaceArgs() */
167 function i18n(message
, keys
) {
168 var localMessage
= message
;
169 if ( !keys
) { return localMessage
; }
170 for( var i
= 0; i
< keys
.length
; i
++) {
171 var myregexp
= new RegExp("\\$"+(i
+1), 'g');
172 localMessage
= localMessage
.replace(myregexp
, keys
[i
]);