User:Bradv/NewPagePreview.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/*
* New Page Preview
*     Author: User:Bradv
*/
m_zIndex=101;
nppreview = {
    enabled:   true
};

nppreview.init = function() {
    if (wgPageName == "Special:NewPages" ) {
        nppreview.showLinks();
    }
};

nppreview.showLinks = function() {
    var snapshot = document.evaluate('//div[@id="content"]/div[@id="bodyContent"]/ul/li', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );

    for (var i=0;i<snapshot.snapshotLength;i++) {
        nppreview.makeLink(snapshot.snapshotItem(i));
    }
};

nppreview.makeLink = function(li) {
    var title, titlehref, url;
    if (li.className=='not-patrolled') {    
        var a = li.getElementsByTagName('a')[0];
        title = a.textContent;
        titlehref = a.href;
        url = a.href + '&action=render';
    } else {
        var a = li.getElementsByTagName('a')[0];
        title = a.textContent;
        titlehref = a.href;
        url = li.getElementsByTagName('a')[1].href.replace('&action=history', '&action=render');
    }
        
    var span = document.createElement('span');
    span.appendChild(document.createTextNode(' ['));
    var aPreview = document.createElement('a');
    aPreview.href = '#';
    aPreview.onclick = function () {
        nppreview.showPreview(title, titlehref, url); 
        return false;
    };            
    aPreview.appendChild(document.createTextNode('Preview'));
    span.appendChild(aPreview);
    span.appendChild(document.createTextNode('] '));
    li.insertBefore(span, li.firstChild);
};

nppreview.showPreview=function(title, titlehref, url) {
    var aj = sajax_init_object();
    if (aj) { 
        var wnd = document.createElement('div');
        wnd.id='np_previewWindow';
        wnd.style.position='fixed';
        wnd.style.padding='10px';
        wnd.style.zIndex=++m_zIndex;
        wnd.style.backgroundColor='white';
        wnd.style.border='2px solid #aaaaaa';
        wnd.style.width='60em';
        wnd.style.height='30em';
        wnd.style.minWidth='20em';
        wnd.style.minHeight='10em';

//This is where we place the preview window - TODO: Check for modern skin
        var obj = document.getElementById('column-one');
        obj.appendChild(wnd);

        wnd.style.left=parseInt(window.innerWidth-wnd.clientWidth)/2 + 'px';
        wnd.style.top=parseInt(window.innerHeight-wnd.clientHeight)/2 + 'px';

        var hdr = document.createElement('div');
        hdr.style.position='relative';
        hdr.style.width='100%';
        hdr.style.height='2em';
        hdr.style.borderBottom='1px solid #aaaaaa';
        hdr.style.cursor='move';
        wnd.appendChild(hdr);

        var closeButton = document.createElement('a');
        closeButton.href='#';
        closeButton.style.position='absolute';
        closeButton.style.top='10px';
        closeButton.style.right='10px';
        closeButton.onclick = function () {wnd.parentNode.removeChild(wnd); return false;};
        //closeButton.innerHTML = '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Nuvola_apps_error.png/18px-Nuvola_apps_error.png"/>';
        var img = document.createElement('img');
        img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Nuvola_apps_error.png/18px-Nuvola_apps_error.png';
        closeButton.appendChild(img);
        wnd.appendChild(closeButton);

        var content = document.createElement('div');
        content.id='sprint_previewContent';
        content.style.position='relative';
        content.style.clear='both';
        content.style.overflow='scroll';
        content.style.height=parseInt(wnd.clientHeight - hdr.offsetHeight - parseInt(wnd.style.padding)*2)+'px';
        content.style.lineHeight='1.5em';
        wnd.appendChild(content);

        wnd.onmousedown=function(event) {
            if (wnd.style.zIndex < m_zIndex) {
                wnd.style.zIndex=++m_zIndex;
            }
        }

        hdr.onmousedown=function(event) {
            wnd.initialX = parseInt( event.clientX - wnd.offsetLeft );
            wnd.initialY = parseInt( event.clientY - wnd.offsetTop );
            window.onmouseup=function(event) {
                window.onmousemove=null;
                window.onmouseup=null;
                wnd.style.opacity='';
                content.style.display='';
            }
            window.onmousemove=function(event) {
                if (!content.style.display) {
                    wnd.style.opacity='.8';
                    content.style.display='none';
                }
                wnd.style.left=event.clientX-wnd.initialX+'px';
                wnd.style.top=event.clientY-wnd.initialY+'px';
            }
        }

        var resize = document.createElement('div');
        resize.id='sprint_previewResize';
        resize.style.position='absolute';
        resize.style.bottom='0px';
        resize.style.right='0px';
        resize.style.height='20px';
        resize.style.width='20px';
        resize.style.cursor='se-resize';
        wnd.appendChild(resize);

        resize.onmousedown=function(event) {
            wnd.initialWidth = parseInt( event.clientX - wnd.offsetWidth );
            wnd.initialHeight = parseInt( event.clientY - wnd.offsetHeight );
            window.onmouseup=function(event) {
                window.onmousemove=null;
                window.onmouseup=null;
                wnd.style.opacity='';
                content.style.height=parseInt(wnd.clientHeight - hdr.offsetHeight - parseInt(wnd.style.padding)*2)+'px';
                content.style.display='';
            }
            window.onmousemove=function(event) {
                if (!content.style.display) {
                    wnd.style.opacity='.8';
                    content.style.display='none';
                }
                wnd.style.width=event.clientX-wnd.initialWidth-parseInt(wnd.style.padding)*2+'px';
                wnd.style.height=event.clientY-wnd.initialHeight-parseInt(wnd.style.padding)*2+'px';
            }
        }

        //hdr.innerHTML='<a href="/wiki/'+title+'" style="font-size:1.5em;">'+title+'</a>';
        var aTitle = document.createElement('a');
        aTitle.href = titlehref;
        aTitle.style.fontSize = '1.5em';
        aTitle.appendChild(document.createTextNode(title));
        hdr.appendChild(aTitle);
        
        //content.innerHTML='Loading...';
        while (content.firstChild) { content.removeChild(content.firstChild) };
        content.appendChild(document.createTextNode('Loading...'));
    
        aj.onreadystatechange = function() {
            if(aj.readyState == 4 && aj.status == 200) {
                var htm;    
                htm = aj.responseText;
                content.innerHTML = htm;
                content.id = 'bodyContent'; //TODO: Find a better way to make the page format correctly
                if (ajaxPatrolLinks) {
                    ajaxPatrolLinks();
                }
            }                      
        }
                
        aj.open("GET", url, true);
        aj.send(null);
    }
};

addOnloadHook(nppreview.init);