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]);