skins/common/preview.js

   1 /**
   2  * Live preview script for MediaWiki
   3  *
   4  * 2007-04-25 – Nikerabbit:
   5  *   Worked around text cutoff in mozilla-based browsers
   6  *   Support for categories
   7  */
   8
   9
  10 lpIdPreview = 'wikiPreview';
  11 lpIdCategories = 'catlinks';
  12 lpIdDiff = 'wikiDiff';
  13
  14 /*
  15  * Returns XMLHttpRequest based on browser support or null
  16  */
  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");
  23         } else {
  24                 return null;
  25         }
  26 }
  27
  28 /**
  29  * Returns true if could open the request,
  30  * false otherwise (eg no browser support).
  31  */
  32 function lpDoPreview(text, postUrl) {
  33         lpRequest = openXMLHttpRequest();
  34         if( !lpRequest ) return false;
  35
  36         lpRequest.onreadystatechange = lpStatusUpdate;
  37         lpRequest.open("POST", postUrl, true);
  38
  39         var postData = 'wpTextbox1=' + encodeURIComponent(text);
  40         lpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  41         lpRequest.send(postData);
  42         return true;
  43 }
  44
  45 function lpStatusUpdate() {
  46
  47         /* We are at some stage of loading */
  48         if (lpRequest.readyState > 0 && lpRequest.readyState < 4) {
  49                 notify(i18n(wgLivepreviewMessageLoading));
  50         }
  51
  52         /* Not loaded yet */
  53         if(lpRequest.readyState != 4) {
  54                 return;
  55         }
  56
  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();
  64                 return;
  65         }
  66
  67         /* All good */
  68         dismissNotify(i18n(wgLivepreviewMessageReady), 750);
  69
  70
  71         var XMLObject = lpRequest.responseXML.documentElement;
  72
  73
  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
  76          */
  77         XMLObject.normalize();
  78
  79         var previewElement = XMLObject.getElementsByTagName('preview')[0];
  80         var categoryElement = XMLObject.getElementsByTagName('category')[0];
  81
  82         /* Hide the active diff if it exists */
  83         var diff = document.getElementById(lpIdDiff);
  84         if ( diff ) { diff.style.display = 'none'; }
  85
  86         /* Inject preview */
  87         var previewContainer = document.getElementById( lpIdPreview );
  88         if ( previewContainer && previewElement ) {
  89                 previewContainer.innerHTML = previewElement.firstChild.data;
  90         } else {
  91                 /* Should never happen */
  92                 window.alert(i18n(wgLivepreviewMessageFailed));
  93                 lpShowNormalPreview();
  94                 return;
  95         }
  96
  97
  98         /* Inject categories */
  99         var categoryContainer  = document.getElementById( lpIdCategories );
 100         if ( categoryElement && categoryElement.firstChild ) {
 101                 if ( categoryContainer ) {
 102                         categoryContainer.innerHTML = categoryElement.firstChild.data;
 103                         /* May be hidden */
 104                         categoryContainer.style.display = 'block';
 105                 } else {
 106                         /* Just dump them somewhere */
 107         /*              previewContainer.innerHTML += categoryElement.firstChild.data;*/
 108                 }
 109         } else {
 110                 /* Nothing to show, hide old data */
 111                 if ( categoryContainer ) {
 112                         categoryContainer.style.display = 'none';
 113                 }
 114         }
 115
 116 }
 117
 118 function lpShowNormalPreview() {
 119         var fallback = document.getElementById('wpPreview');
 120         if ( fallback ) { fallback.style.display = 'inline'; }
 121 }
 122
 123
 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.
 127  */
 128 function notify(message) {
 129         var notifyElement = document.getElementById('mw-js-notify');
 130         if ( !notifyElement ) {
 131                 createNotify();
 132                 var notifyElement = document.getElementById('mw-js-notify');
 133         }
 134         notifyElement.style.display = 'block';
 135         notifyElement.innerHTML = message;
 136 }
 137
 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';
 143                 } else {
 144                         notify(message);
 145                         setTimeout("dismissNotify('', 0)", timeout);
 146                 }
 147         }
 148 }
 149
 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);
 161 }
 162
 163
 164
 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]);
 172         }
 173         return localMessage;
 174 }