User:CBM/quickpreview.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/* javascript quick preview, via AJAX
 * Originally by Alex Smotrov, User:Alex Smotrov/qpreview.js
 * Minor tweaks by CBM:
 * - default location of button changed
 * - change button title
 * - scroll to top of preview automatically
 * <pre>
 */

if (mw.config.get('wgAction') == 'edit' || mw.config.get('wgAction') == 'submit')
	addOnloadHook(addQPreviewButton);

function addQPreviewButton(){
	if (!window.qPreviewName) qPreviewName = 'Quick Preview';
	var accesskey = window.qPreviewKey || '';
	if ((!window.qPreviewAtBottom) || (window.qPreviewAtBottom != 1) ) 
		addQPSystemButton(qPreviewName, qPreview, 'btnQPreview', 'Quick Preview', accesskey);
	else
		addQPToolbarButton(qPreviewName, qPreview, 'btnQPreview', 'Quick Preview', accesskey);

}

function qPreview(){
	var divPreview = document.getElementById('wikiPreview');
        divPreview.style.display="block";
	if (!divPreview) return;
	var btnQPreview = document.getElementById('btnQPreview');
	var btnWidth = Math.max(btnQPreview.scrollWidth, btnQPreview.offsetWidth);
	if (btnQPreview) btnQPreview.value = window.qPreviewWait || 'Please wait...';
	btnQPreview.style.width = btnWidth + 'px';
	a = sajax_init_object();
	a.open('POST', document.editform.action+'&live', true);
	var Boundary = '--------p1415';
	a.setRequestHeader('Content-Type', 'multipart/form-data; boundary='+Boundary);
        var txt = document.getElementById('wpTextbox1').value ;
        if(txt.indexOf('<ref')>=0 && txt.indexOf('<references')<0 
                && txt.indexOf('{{reflist')<0)
            txt+='\n<hr />\n==Reference preview ==\n{{reflist|2}}';

	var PostData = '--' + Boundary 
		+ '\nContent-Disposition: form-data; name="wpTextbox1"\n\n'
		+ txt + '\n--'+Boundary;
	if (a.overrideMimeType) a.overrideMimeType('text/html');
	a.send(PostData);
	a.onreadystatechange = function(){
		if (a.readyState != 4) return;
		var html = a.responseText;
		html = html.replace(/&gt;/g,'>').replace(/&lt;/g,'<').replace(/&quot;/g,'"').replace(/&amp;/g,'&').replace(/&apos;/g,"'");
		divPreview.innerHTML = html;
		var coords = findQPPos(divPreview);
		window.scrollTo(0, coords[1]); // hard left, only scroll vertically
		if (btnQPreview) btnQPreview.value = qPreviewName;
	};
}

function addQPSystemButton(name, onclick, id, tooltip, accesskey){ 
	var wpPreview = document.getElementById('wpPreview');
	if (!wpPreview) {
           return;
        }
	var btn = document.createElement('input');
	btn.type = 'button'; 
	if (name) btn.value = name; 
	if (onclick) btn.onclick = onclick;
	if (id) btn.id = id;
	if (tooltip) btn.title = tooltip; 
	if (accesskey) { 
		btn.accessKey = accesskey; 
		btn.title += ' [' + tooltipAccessKeyPrefix + btn.accessKey + ']';
	}	
	wpPreview.parentNode.insertBefore(btn, wpPreview);
	return btn;
}

function addQPToolbarButton(name, onclick, id, tooltip, accesskey){
	var toolbar = document.getElementById('toolbar');
	if (!toolbar) return;
	var btn = document.createElement('input');
	btn.type = 'button'; 
	btn.style.background = '#adbede';
	btn.style.height = '22px'; 
	btn.style.verticalAlign = 'middle';
	if (name) btn.value = name; 
	if (onclick) btn.onclick = onclick;
	if (id) btn.id = id;
	if (tooltip) btn.title = tooltip; 
	if (accesskey) btn.accessKey = accesskey; 
	toolbar.appendChild(btn);
	return btn;
}

function findQPPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
  }
  return [curleft,curtop];
}

// </pre>