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                 previewContainer.style.display = 'block';
  91         } else {
  92                 /* Should never happen */
  93                 window.alert(i18n(wgLivepreviewMessageFailed));
  94                 lpShowNormalPreview();
  95                 return;
  96         }
  97
  98
  99         /* Inject categories */
 100         var categoryContainer  = document.getElementById( lpIdCategories );
 101         if ( categoryElement && categoryElement.firstChild ) {
 102                 if ( categoryContainer ) {
 103                         categoryContainer.innerHTML = categoryElement.firstChild.data;
 104                         /* May be hidden */
 105                         categoryContainer.style.display = 'block';
 106                 } else {
 107                         /* Just dump them somewhere */
 108         /*              previewContainer.innerHTML += categoryElement.firstChild.data;*/
 109                 }
 110         } else {
 111                 /* Nothing to show, hide old data */
 112                 if ( categoryContainer ) {
 113                         categoryContainer.style.display = 'none';
 114                 }
 115         }
 116
 117 }
 118
 119 function lpShowNormalPreview() {
 120         var fallback = document.getElementById('wpPreview');
 121         if ( fallback ) { fallback.style.display = 'inline'; }
 122 }
 123
 124
 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.
 128  */
 129 function notify(message) {
 130         var notifyElement = document.getElementById('mw-js-notify');
 131         if ( !notifyElement ) {
 132                 createNotify();
 133                 var notifyElement = document.getElementById('mw-js-notify');
 134         }
 135         notifyElement.style.display = 'block';
 136         notifyElement.innerHTML = message;
 137 }
 138
 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';
 144                 } else {
 145                         notify(message);
 146                         setTimeout("dismissNotify('', 0)", timeout);
 147                 }
 148         }
 149 }
 150
 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);
 162 }
 163
 164
 165
 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]);
 173         }
 174         return localMessage;
 175 }