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);