MediaWiki:Gadget-collapsibleTables.js

注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。

/**
 * Collapsible tables
 *
 * 改动自//zh.wikipedia.org/w/index.php?title=MediaWiki:Gadget-collapsibleTables.js&oldid=29207188
 * 算是还原了就有使用collapsible类的表格吧……
 */
 
var autoCollapse = 2;
var collapseCaption = wgULS('隐藏▲', '隱藏▲');
var expandCaption = wgULS('显示▼', '顯示▼');

var collapsed="collapsed";
var collapseButton="collapseButton";
var collapsibleTable="collapsibleTable";
var collapsibleTableRow="collapsibleTableRow";
var collapsibleTableHeader="collapsibleTableHeader";

function collapseTable(tableIndex) 
{
    var Table=$("table#" + collapsibleTable + tableIndex);
    var Button=Table.find('a#' + collapseButton + tableIndex).first();
    
    if ( !Table || !Button ) {
        return false;
    }
    
    var Rows=Table.find("tr");
    var FirstRow=Table.find("tr#" + collapsibleTableRow + tableIndex).first();
    
    //console.log("click");
    if(/* Button.text()==expandCaption */!Table.hasClass(collapsed))
    //if(Button.text()==expandCaption/* !Table.hasClass(collapsed) */)
    {
        Rows.each(function()
        {
            if($(this).attr("id")==collapsibleTableRow + tableIndex)
            {
                return;
            }
            else
            {
                $(this).css("display","none");
            }
            console.log("close");
        });
        Button.text(expandCaption);  
        Table.addClass(collapsed);
    }else
    {
        if(Table.hasClass(collapsed))
        {
            Rows.each(function()
            {
                if($(this).attr("id")==collapsibleTableRow + tableIndex)
                {
                    return;
                }
                else
                {
                    $(this).css("display",FirstRow.css("display"));
                }
            });
            Button.text(collapseCaption);
            Table.removeClass(collapsed);
            //console.log("open");
        }
    }
    //console.log("done");
}

function createClickHandler(tableIndex)
{
    return function(e)
    {
        e.preventDefault();
        collapseTable(tableIndex);
    }
}

function createCollapseButtons() {
    var tableIndex = 0;
    var NavigationBoxes = {};
    var Tables=$("table.collapsible");

	Tables.each(function(){
		var Table=$(this);
	    var HeaderRow=Table.find("tr").first();
	    if ( !HeaderRow ) {
	        return;//用于跳过each()
	    }
	    var Header=HeaderRow.children("th").first();
	    if ( !Header ) {
	        return;//用于跳过each(
	    }
	
	    NavigationBoxes[tableIndex] = $(this);
	    Table.attr( 'id', collapsibleTable+ tableIndex );
	    Table.addClass(collapsed);
	    HeaderRow.attr("id",collapsibleTableRow+tableIndex);
	    Header.attr("id",collapsibleTableHeader+tableIndex);
	
	
	    //console.log("mark table and header as "+tableIndex);
	    var button=$("<span>");
	    var buttonlink=$("<a>");
	
	    button
	        .css("float","right")
	        .css("font-weight","normal")
	        .css("text-align","right")
	        .css("width","6em");
	        
	    buttonlink.attr("href","#");
	    buttonlink.css("color",Header.css("color"));
	    buttonlink.attr("id",collapseButton + tableIndex);
	    buttonlink.text(collapseCaption);
	    
	    Header.css("cursor","Pointer") ;
	    
	    button.append(buttonlink);
	    Header.prepend(button);       
	        
	    //console.log("set header on "+tableIndex);
	    var clickhandler=createClickHandler(tableIndex);
	    $("th#" + collapsibleTableHeader + tableIndex/* +","+"a#collapseButton" + tableIndex */).bind("click",clickhandler);
	    tableIndex++;
	});
	
    for ( var i = 0; i < tableIndex; i++ ) {
        if ( NavigationBoxes[i].hasClass( 'collapsed' ) ||
            ( tableIndex >= autoCollapse &&  NavigationBoxes[i].hasClass( 'autocollapse' ) )
        ) {
            collapseTable( i );
        }
    }
}

$( createCollapseButtons );