Misplaced Pages

This is an old revision of this page, as edited by Ilmari Karonen (talk | contribs) at 21:49, 13 January 2006 (please let me know if there are any problems). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

/* This script adds scroll bars to wide diffs such as . 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 and at least some versions of Internet Explorer. This script is a workaround for Bug 1229. If you have any problems with this script, please let me know. */

//

// 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%;  float: left; clear: none; position: relative; }' +
    ' .xdiff-sign1 { display: block; position: relative; width: 0; height: 0; }' +
    ' .xdiff-sign2 { display: block; position: absolute; top: 0; left: 0; width: 2em; text-align: center; }' +
    ' .xdiff-outer { display: block; }' +
    ' .xdiff-outer.diff-addedline { margin: 0 0 0 2em; font-size: 85%; background: #cfc; }' +
    ' .xdiff-outer.diff-deletedline { margin: 0 0 0 2em; font-size: 85%; background: #ffa; }' +
    ' .xdiff-outer.diff-context { margin: 0 0 0 2em; font-size: 85%; background: #eee; }' +
    ' .xdiff-inner { display: block; overflow: auto; overflow-y: visible; width: 100%; padding: 1px; }' +
    ' * html .xdiff-inner { padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 17 : 1) + "px"; }' +  // IE kluge!
    ' * html .xdiff-sign2 { top: expression((this.parentNode.parentNode.clientHeight - this.offsetHeight)/2 + "px"); }' +
'<'+'/style>');
addOnloadHook(function () {
    var diffSigns = new Array();
    var fixDiffWidth = function () {
        var tables = document.getElementsByTagName('table');
        for (var i = 0; i < tables.length; i++) {
            if (tables.className != 'diff') continue;
            var rows = tables.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.getElementsByTagName('td');
                for (var k = 0; k < cols.length; k++) { 
                    if (!colDiv) {
                        colDiv = document.createElement('div');
                        colDiv.className = 'xdiff-col';
                        rowDiv.appendChild(colDiv);
                    }
                    // 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');
                    if (cols.getAttribute('colspan') == 2 || cols.className.substring(0,5) == 'diff-') {                
                        outerSpan.className = 'xdiff-outer ' + cols.className;
                        innerSpan.className = 'xdiff-inner';
                        innerSpan.style.textAlign = cols.getAttribute('align');
                    }
                    else if (cols.firstChild && (cols.firstChild.nextSibling ||
                             cols.firstChild.nodeType != 3 || cols.firstChild.nodeValue.match(/\S/))) {
                        outerSpan.className = 'xdiff-sign1';
                        innerSpan.className = 'xdiff-sign2';
                        if (!innerSpan.style.setExpression)
                            diffSigns = innerSpan;
                    }
                    else continue; 
                    for (var node = cols.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);
                    if (innerSpan.className == 'xdiff-inner')
                        colDiv = null;  // start new column
                }
                diffDiv.appendChild(rowDiv);
            }
            tables.parentNode.replaceChild(diffDiv, tables);
        }
    };
    // finally, a kluge to vertically center the +/- signs
    var centerDiffSigns = function () {
        for (var i = 0; i < diffSigns.length; i++) {
            var parentHeight;
            if (!( parentHeight = diffSigns.parentNode )) continue; 
            if (!( parentHeight = parentHeight.parentNode )) continue; 
            if (!( parentHeight = parentHeight.clientHeight )) continue; 
            diffSigns.style.top = ((parentHeight - diffSigns.offsetHeight)/2) + "px";
        }
    };
    fixDiffWidth();
    if (diffSigns.length) {
        hookEvent('resize', centerDiffSigns);
        setTimeout(centerDiffSigns, 250); 
    }
});
//