MediaWiki:Gadget-collapsibleTables.js

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

/**
 * Collapsible tables
 *
 * @version 2.0.1 (2013-03-26)
 * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-collapsibleTables.js
 * @author [[User:R. Koot]]
 * @author [[User:Krinkle]]
 * @deprecated Since MediaWiki 1.20: Use class="mw-collapsible" instead which
 * is supported in MediaWiki core.
 * Edited by [[User:Cwek]]
 */

( function ( window, document, $, undefined ) { 
var collapsibleTables={};
window.collapsibleTables=collapsibleTables;
 
collapsibleTables.autoCollapse = 2;
collapsibleTables.collapseCaption = wgULS('隐藏▲', '隱藏▲');
collapsibleTables.expandCaption = wgULS('显示▼', '顯示▼');

collapsibleTables.collapsed="collapsed";
collapsibleTables.uncollapsed="uncollapsed";
collapsibleTables.Button="collapseButton";
collapsibleTables.Table="collapsibleTable";
collapsibleTables.Row="collapsibleTableRow";
collapsibleTables.Header="collapsibleTableHeader";
 
collapsibleTables.collapseTable=function(tableIndex) 
{
    var Table=$("table#" + collapsibleTables.Table + tableIndex);
    var Button=Table.find('a.' + collapsibleTables.Button + tableIndex).first();
 
    if ( !Table || !Button ) {
        return false;
    }
 
    var Rows=Table.children("tbody").children("tr");
    var FirstRow=Table.find("tr." + collapsibleTables.Row + tableIndex).first();
 
    //console.log("click");
    if(Table.hasClass(collapsibleTables.collapsed))
    {
        Rows.each(function()
        {
            if($(this).hasClass(collapsibleTables.Row + tableIndex))
            {
                return;
            }
            else
            {
                $(this).css("display","none");
            }
            //console.log("close");
        });
        Button.text(collapsibleTables.expandCaption);  
        Table.removeClass(collapsibleTables.collapsed).addClass(collapsibleTables.uncollapsed);
    }
    else
    {
        Rows.each(function()
        {
            if($(this).hasClass(collapsibleTables.Row + tableIndex))
            {
                return;
            }
            else
            {
                $(this).css("display",FirstRow.css("display"));
            }
        });
        Button.text(collapsibleTables.collapseCaption);
        Table.addClass(collapsibleTables.collapsed).removeClass(collapsibleTables.uncollapsed);
        //console.log("open");
    }
    //console.log("done");
}
 
collapsibleTables.createClickHandler=function(tableIndex)
{
    return function(e)
    {
        var target = $(e.target);
        var a=target.is("th."+collapsibleTables.Header + tableIndex);//是指定<th>本身？
        var b=target.parents().is("th."+collapsibleTables.Header + tableIndex);//本身是指定<th>子代？
        var c=target.is("a."+ collapsibleTables.Button + tableIndex);//本身是指定<a>？
        var d=(target.is("a")&&!c)||(target.parents("a").is("a")&&!target.parents("a").is("a."+ collapsibleTables.Button + tableIndex));//本身或其父代是<a>但不是指定<a>？
        console.debug(target);
        console.debug("a,b,c,d=>",a,b,c,d);
        if(b&&d)//是指定<td>的子代<a>但不是指定<a>
        {}
        else//否则
        {
	        if(a||b)//针对td符合的click触发，判断是否td本身或td的子代（部分td包含其他非纯文字节点，点击时是其td子代触发，td只包含纯文字节点，点击时是td本身出发）
	        {
	        	collapsibleTables.collapseTable(tableIndex);
	        	if(c)
	        	{
	    			return false;//防止子元素（<a>与父代<td>）事件冒泡    	
	        	}
	        }  
        }
    }
}
 
collapsibleTables.createCollapseButtons=function() {
    var tableIndex = 0;
    var NavigationBoxes = new Array();
    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",collapsibleTables.Table + tableIndex );
	    Table.addClass(collapsibleTables.collapsed);
	    HeaderRow.addClass(collapsibleTables.Row + tableIndex);
	    Header.addClass(collapsibleTables.Header + 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.addClass(collapsibleTables.Button + tableIndex);
	    buttonlink.text(collapsibleTables.collapseCaption);
 
	    Header.css("cursor","Pointer") ;
 
	    button.append(buttonlink);
	    Header.prepend(button);       
 
	    //console.log("set header on "+tableIndex);
	    var clickhandler=collapsibleTables.createClickHandler(tableIndex);
	    $("th." + collapsibleTables.Header + tableIndex+","+"a." + collapsibleTables.Button + tableIndex )
	    	.bind("click",clickhandler);
 
	    tableIndex++;
	});
 
    for ( var i = 0; i < tableIndex; i++ ) {
        if ( NavigationBoxes[i].hasClass(collapsibleTables.collapsed) ||
            ( tableIndex >= collapsibleTables.autoCollapse &&  NavigationBoxes[i].hasClass( 'autocollapse' ) )
        ) {
            collapsibleTables.collapseTable( i );
        }
    }
}

$( collapsibleTables.createCollapseButtons );
} ( window, document, jQuery ));