User:Axxgreazz/fixdiff.js

/* This script adds scroll bars to wide diffs such as [http://en.wikipedia.org/w/index.php?title=Wikipedia%3ACopyright_problems%2F2005_December_30&diff=33247878&oldid=33247265].  It replaces the table-based diff layout with a CSS-based layout where the column width is always exactly 50%.  Known to work in [[Firefox]], [[Konqueror]], [[Opera (web browser)|Opera]] and at least some versions of [[Internet Explorer]].  This script is a workaround for [http://bugzilla.wikipedia.org/show_bug.cgi?id=1229 Bug 1229].  If you have any problems with this script, please [[User talk:Ilmari Karonen|let me know]].

<font color="red">'''WARNING''':</font> At least one user has reported incorrect diff rendering (new paragraphs showing in the wrong column) with this script.  Until the cause of this has been found and fixed, please '''check with a known diff''' that the script works for you before using it for actual work.

<pre><nowiki> */

// inline style sheet to keep this whole thing self-contained:
document.write('<style type="text/css">' +
    ' .xdiff { width: 100%; background: white; }' +
    ' .xdiff-row { width: 100%; margin: 0 0 3px 0; overflow: hidden; }' +
    ' .xdiff-col { width: 49%; margin: 0; float: left; clear: none; position: relative; }' +
    ' .xdiff-sign, .xdiff-outer, .xdiff-inner { display: block; margin: 0; }' +
    ' .xdiff-sign { position: absolute; top: 0; left: 0; width: 2em; text-align: center; }' +
    ' .xdiff-outer { padding: 0 0 0 2em; }' +
    ' .xdiff-inner { overflow: auto; overflow-y: visible; width: 100%; }' +
    ' .xdiff-inner.diff-addedline { font-size: 85%; background: #cfc; }' +
    ' .xdiff-inner.diff-deletedline { font-size: 85%; background: #ffa; }' +
    ' .xdiff-inner.diff-context { font-size: 85%; background: #eee; }' +
    (!document.recalc ? '' :  // IE kluge:
        ' * html .xdiff-inner { padding-bottom: expression(this.scrollWidth > this.offsetWidth ? "16px" : 0); }' +
        ' * html .xdiff-sign { top: expression((this.parentNode.clientHeight - this.offsetHeight)/2 + "px"); }') +
    '<'+'/style>');

if (false) addOnloadHook(function () { // OBSOLETE!!!
    var diffSigns = new Array();
    var fixDiffWidth = function () {
        var tables = document.getElementsByTagName('table');

        for (var i = 0; i < tables.length; i++) {
            if (tables[i].className != 'diff') continue;
            var rows = tables[i].getElementsByTagName('tr');

            var diffDiv = document.createElement('div');
            diffDiv.className = 'xdiff';

            for (var j = 0; j < rows.length; j++) {
                var rowDiv = document.createElement('div');
                rowDiv.className = 'xdiff-row';

                var colDiv = null;
                var cols = rows[j].getElementsByTagName('td');
                for (var k = 0; k < cols.length; k++) { 
                    if (!colDiv) {
                        colDiv = document.createElement('div');
                        colDiv.className = 'xdiff-col';
                        rowDiv.appendChild(colDiv);
                    }
                    if (cols[k].getAttribute('colspan') == 2 || cols[k].className.substring(0,5) == 'diff-') {                
                        // use spans instead of divs so that an eventual non-js solution will look nice in lynx!
                        var outerSpan = document.createElement('span');
                        var innerSpan = document.createElement('span');
                        outerSpan.className = 'xdiff-outer';
                        innerSpan.className = 'xdiff-inner ' + cols[k].className;
                        innerSpan.style.textAlign = cols[k].getAttribute('align');
                        for (var node = cols[k].firstChild; node; node = node.nextSibling)
                            innerSpan.appendChild(node.cloneNode(true));
                        innerSpan.appendChild(document.createTextNode(String.fromCharCode(0xa0))); // add nbsp
                        outerSpan.appendChild(innerSpan);
                        colDiv.appendChild(outerSpan);
                        colDiv = null;  // start new column
                    }
                    else if (cols[k].firstChild && (cols[k].firstChild.nextSibling ||
                             cols[k].firstChild.nodeType != 3 || cols[k].firstChild.nodeValue.match(/\S/))) {
                        // use spans instead of divs so that an eventual non-js solution will look nice in lynx!
                        var signSpan = document.createElement('span');
                        signSpan.className = 'xdiff-sign';
                        if (!signSpan.style.setExpression)
                            diffSigns[diffSigns.length] = signSpan;
                        for (var node = cols[k].firstChild; node; node = node.nextSibling)
                            signSpan.appendChild(node.cloneNode(true));
                        colDiv.appendChild(signSpan);
                    }
                }
                diffDiv.appendChild(rowDiv);
            }
            tables[i].parentNode.replaceChild(diffDiv, tables[i]);
        }
    };
    // finally, a kluge to vertically center the +/- signs
    var centerDiffSigns = function () {
        for (var i = 0; i < diffSigns.length; i++) {
            var parentHeight;
            if (!( parentHeight = diffSigns[i].parentNode )) continue; 
            if (!( parentHeight = parentHeight.clientHeight )) continue; 
            diffSigns[i].style.top = ((parentHeight - diffSigns[i].offsetHeight)/2) + "px";
        }
    };
    fixDiffWidth();
    if (diffSigns.length) {
        hookEvent('resize', centerDiffSigns);
        setTimeout(centerDiffSigns, 250); 
    }
});

// </nowiki></pre>