User:Bradv/splitpreview.js
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.
/*
* Split-screen Edit Preview
* Author: User:Bradv
*/
splitPreview = {
enabled: true,
width: null
};
splitPreview.init = function() {
if (mw.config.get('wgAction') == "edit" || mw.config.get('wgAction') == "submit") {
splitPreview.loadCookies();
if (splitPreview.enabled) {
splitPreview.draw();
}
}
};
splitPreview.loadCookies=function() {
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') { c = c.substring(1,c.length); }
if (c.indexOf(nameEQ) === 0) { return c.substring(nameEQ.length,c.length); }
}
return '';
}
var w = readCookie('splitPreview_width');
if (w) {
splitPreview.width = w;
}
};
splitPreview.saveCookies=function() {
var cend = "; expires=Tue, 31-Dec-2030 23:59:59 GMT; path=/";
document.cookie = 'splitPreview_width=' + splitPreview.width.toString() + cend;
};
splitPreview.draw=function() {
var wp = document.getElementById('wikiPreview');
if (wp) {
var w = splitPreview.width;
if (!w) {
w = window.innerWidth / 3 + 'px';
}
//Make room
var topbar = document.evaluate('//div[@id="p-personal"]//div[@class="pBody"]',
document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (topbar.singleNodeValue) {
topbar = topbar.singleNodeValue;
topbar.style.marginRight=w;
}
//Find the container where the placeholder goes.
//This differs between monobook and modern skins.
var container = document.getElementById('content');
if (!container) {
container = document.getElementById('mw_content');
}
container.style.marginRight = w;
var ph = document.createElement('div');
with (ph) {
id='splitPreview_placeholder';
style.width=w;
style.top='0px';
style.right='0px';
style.bottom='0px';
style.zIndex=90;
style.position='fixed';
style.backgroundColor=document.defaultView.getComputedStyle(document.body, null).backgroundColor;
//innerHTML = "<div style='width:"+ph.style.width+";position:relative'>Testing...</div>";
}
container.appendChild(ph);
var slider = document.createElement('div');
with (slider) {
id='splitPreview_slider';
style.position='absolute';
style.width='.5em';
style.top='0px';
style.left='0px';
style.bottom='0px';
style.borderLeft='1px solid #aaaaaa';
style.cursor='w-resize';
style.float='left';
}
ph.appendChild(slider);
slider.onmousedown=function(event) {
event.preventDefault();
slider.initialWidth = parseInt( window.innerWidth - event.clientX - ph.offsetWidth );
window.onmouseup=function(event) {
window.onmousemove=null;
window.onmouseup=null;
with (splitPreview) {
width=w;
saveCookies();
}
}
window.onmousemove=function(event) {
if (event.clientX > (window.innerWidth / 3)) {
w=window.innerWidth - event.clientX - slider.initialWidth+'px';
topbar.style.marginRight=w;
ph.style.width=w;
container.style.marginRight=w;
}
}
}
with (wp) {
style.position='absolute';
style.top='0px';
style.left='0.5em';
style.right='0.5em';
style.bottom='0px';
style.float='right';
style.overflow='auto';
}
ph.appendChild(wp);
}
};
$(splitPreview.init);