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