Difference between revisions of "MediaWiki:Collapsible.js"

m
Line 2: Line 2:
 
  * Code for collapsible tables.
 
  * Code for collapsible tables.
 
  */
 
  */
var CollapseButton = Class.extend({
+
function CollapseButton(table, header) {
    init: function(table, header) {
+
    var collapse = function() {
        var spacer = document.createElement('div');
+
        if (this.firstChild.data == '[hide]') {
        spacer.style.cssFloat = 'left';
+
            for (var i = 1; i < table.rows.length; i++) {
        spacer.style.styleFloat = 'left';
+
                table.rows[i].style.display = 'none';
        spacer.style.textAlign = 'left';
+
        spacer.style.width = '35px';
+
        spacer.appendChild(document.createTextNode('\u00a0'));
+
        header.insertBefore(spacer, header.childNodes[0]);
+
 
+
        var button = document.createElement('div');
+
        button.style.cssFloat = 'right';
+
        button.style.styleFloat = 'right';
+
        button.style.fontSize = '11px';
+
        button.style.fontWeight = 'normal';
+
        button.style.textAlign = 'right';
+
        button.style.width = '35px';
+
        button.onclick = function() {
+
            if (this.firstChild.data == '[hide]') {
+
                for (var i = 1; i < table.rows.length; i++) {
+
                    table.rows[i].style.display = 'none';
+
                }
+
                this.firstChild.data = '[show]';
+
            } else {
+
                for (var i = 1; i < table.rows.length; i++) {
+
                    table.rows[i].style.display = table.rows[0].style.display;
+
                }
+
                this.firstChild.data = '[hide]';
+
 
             }
 
             }
         };
+
            this.firstChild.data = '[show]';
         button.onmouseover = function() {
+
         } else {
            this.style.cursor = 'pointer';
+
            for (var i = 1; i < table.rows.length; i++) {
        };
+
                table.rows[i].style.display = table.rows[0].style.display;
        button.appendChild(document.createTextNode('[hide]'));
+
            }
        header.insertBefore(button, header.childNodes[0]);
+
            this.firstChild.data = '[hide]';
    }
+
         }
});
+
    };
 +
 
 +
    var spacer = document.createElement('div');
 +
    spacer.style.cssFloat = 'left';
 +
    spacer.style.styleFloat = 'left';
 +
    spacer.style.textAlign = 'left';
 +
    spacer.style.width = '35px';
 +
    spacer.appendChild(document.createTextNode('\u00a0'));
 +
    header.insertBefore(spacer, header.childNodes[0]);
 +
 
 +
    var button = document.createElement('div');
 +
    button.style.cssFloat = 'right';
 +
    button.style.styleFloat = 'right';
 +
    button.style.fontSize = '11px';
 +
    button.style.fontWeight = 'normal';
 +
    button.style.textAlign = 'right';
 +
    button.style.width = '35px';
 +
    button.onclick = collapse();
 +
    button.onmouseover = function() {
 +
        this.style.cursor = 'pointer';
 +
    };
 +
    button.appendChild(document.createTextNode('[hide]'));
 +
    header.insertBefore(button, header.childNodes[0]);
 +
}
  
 
function createCollapseButtons() {
 
function createCollapseButtons() {
Line 48: Line 48:
 
             var header = headerRow.getElementsByTagName('th')[0];
 
             var header = headerRow.getElementsByTagName('th')[0];
 
             if (header) {
 
             if (header) {
                 new CollapseButton(tables[i], header);
+
                 CollapseButton(tables[i], header);
 
             }
 
             }
 
         }
 
         }

Revision as of 08:14, 31 January 2011

/**
 * Code for collapsible tables.
 */
function CollapseButton(table, header) {
    var collapse = function() {
        if (this.firstChild.data == '[hide]') {
            for (var i = 1; i < table.rows.length; i++) {
                table.rows[i].style.display = 'none';
            }
            this.firstChild.data = '[show]';
        } else {
            for (var i = 1; i < table.rows.length; i++) {
                table.rows[i].style.display = table.rows[0].style.display;
            }
            this.firstChild.data = '[hide]';
        }
    };

    var spacer = document.createElement('div');
    spacer.style.cssFloat = 'left';
    spacer.style.styleFloat = 'left';
    spacer.style.textAlign = 'left';
    spacer.style.width = '35px';
    spacer.appendChild(document.createTextNode('\u00a0'));
    header.insertBefore(spacer, header.childNodes[0]);

    var button = document.createElement('div');
    button.style.cssFloat = 'right';
    button.style.styleFloat = 'right';
    button.style.fontSize = '11px';
    button.style.fontWeight = 'normal';
    button.style.textAlign = 'right';
    button.style.width = '35px';
    button.onclick = collapse();
    button.onmouseover = function() {
        this.style.cursor = 'pointer';
    };
    button.appendChild(document.createTextNode('[hide]'));
    header.insertBefore(button, header.childNodes[0]);
}

function createCollapseButtons() {
    var tables = getElementsByClassName(document, 'table', 'collapsible');

    for (var i = 0; i < tables.length; i++) {
        var headerRow = tables[i].getElementsByTagName('tr')[0];
        if (headerRow) {
            var header = headerRow.getElementsByTagName('th')[0];
            if (header) {
                CollapseButton(tables[i], header);
            }
        }
    }
}
addOnloadHook(createCollapseButtons);