skins/common/preview.js

   1 // Live preview
   2
   3 function openXMLHttpRequest() {
   4         if( window.XMLHttpRequest ) {
   5                 return new XMLHttpRequest();
   6         } else if( window.ActiveXObject && navigator.platform != 'MacPPC' ) {
   7                 // IE/Mac has an ActiveXObject but it doesn't work.
   8                 return new ActiveXObject("Microsoft.XMLHTTP");
   9         } else {
  10                 return null;
  11         }
  12 }
  13
  14 /**
  15  * Returns true if could open the request,
  16  * false otherwise (eg no browser support).
  17  */
  18 function livePreview(target, text, postUrl) {
  19         prevTarget = target;
  20         if( !target ) {
  21                 window.alert(i18n(wgLivepreviewMessageFailed));
  22                 showFallback();
  23         }
  24         prevReq = openXMLHttpRequest();
  25         if( !prevReq ) return false;
  26
  27         prevReq.onreadystatechange = updatePreviewText;
  28         prevReq.open("POST", postUrl, true);
  29
  30         var postData = 'wpTextbox1=' + encodeURIComponent(text);
  31         prevReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  32         prevReq.send(postData);
  33         return true;
  34 }
  35
  36 function updatePreviewText() {
  37
  38         if (prevReq.readyState > 0 && prevReq.readyState < 4) {
  39                 notify(i18n(wgLivepreviewMessageLoading));
  40         }
  41
  42         if(prevReq.readyState != 4) {
  43                 return;
  44         }
  45
  46         dismissNotify(i18n(wgLivepreviewMessageReady), 750);
  47
  48         if( prevReq.status != 200 ) {
  49                 var keys = new Array();
  50                 keys[0] = prevReq.status;
  51                 keys[1] = prevReq.statusText;
  52                 window.alert(i18n(wgLivepreviewMessageError, keys));
  53                 showFallback();
  54                 return;
  55         }
  56
  57         var xmlObject = prevReq.responseXML.documentElement;
  58         var previewElement = xmlObject.getElementsByTagName('preview')[0];
  59         prevTarget.innerHTML = previewElement.firstChild.data;
  60
  61         /* Hide the active diff if it exists */
  62         var diff = document.getElementById('wikiDiff');
  63         if ( diff ) { diff.style.display = 'none'; }
  64 }
  65
  66 function showFallback() {
  67         var fallback = document.getElementById('wpPreview');
  68         if ( fallback ) { fallback.style.display = 'inline'; }
  69 }
  70
  71
  72 // TODO: move elsewhere
  73 /* Small non-intrusive popup which can be used for example to notify the user
  74  * about completed AJAX action
  75  */
  76 function notify(message) {
  77         var notifyElement = document.getElementById('mw-js-notify');
  78         if ( !notifyElement ) {
  79                 createNotify();
  80                 var notifyElement = document.getElementById('mw-js-notify');
  81         }
  82         notifyElement.style.display = 'block';
  83         notifyElement.innerHTML = message;
  84 }
  85
  86 function dismissNotify(message, timeout) {
  87         var notifyElement = document.getElementById('mw-js-notify');
  88         if ( notifyElement ) {
  89                 if ( timeout == 0 ) {
  90                         notifyElement.style.display = 'none';
  91                 } else {
  92                         notify(message);
  93                         setTimeout("dismissNotify('', 0)", timeout);
  94                 }
  95         }
  96 }
  97
  98 function createNotify() {
  99         var div = document.createElement("div");
 100         var txt = '###PLACEHOLDER###'
 101         var txtNode = document.createTextNode(txt);
 102         div.appendChild(txtNode);
 103         div.id = 'mw-js-notify';
 104         // TODO: move styles to css
 105         div.setAttribute('style',
 106                 '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%;');
 107         var body = document.getElementsByTagName('body')[0];
 108         body.appendChild(div);
 109 }
 110
 111
 112
 113 /* Helper function similar to wfMsgReplaceArgs() */
 114 function i18n(message, keys) {
 115         var localMessage = message;
 116         if ( !keys ) { return localMessage; }
 117         for( var i = 0; i < keys.length; i++) {
 118                 var myregexp = new RegExp("\\$"+(i+1), 'g');
 119                 localMessage = localMessage.replace(myregexp, keys[i]);
 120         }
 121         return localMessage;
 122 }