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(Table.hasClass(collapsed))
    {
        Rows.each(function()
        {
            if($(this).hasClass(collapsibleTableRow + tableIndex))
            {
                return;
            }
            else
            {
                $(this).css("display","none");
            }
            //console.log("close");
        });
        Button.text(expandCaption);  
        Table.removeClass(collapsed);
    }
    else
    {
        Rows.each(function()
        {
            if($(this).hasClass(collapsibleTableRow + tableIndex))
            {
                return;
            }
            else
            {
                $(this).css("display",FirstRow.css("display"));
            }
        });
        Button.text(collapseCaption);
        Table.addClass(collapsed);
        //console.log("open");
    }
    //console.log("done");
}
 
function createClickHandler(tableIndex)
{
    return function(e)
    {
        var target = $(e.target);
        var a=target.is("th."+collapsibleTableHeader + tableIndex);//是指定<td>本身
        var b=target.parents().is("th."+collapsibleTableHeader + tableIndex);//本身是指定<td>子代
        var c=target.is("a."+ collapseButton + tableIndex);//本身是指定<a>
        var d=(target.is("a")&&!c)||(target.parents("a").is("a")&&!target.parents("a").is("a."+ collapseButton + 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本身出发）
	        {
	        	collapseTable(tableIndex);
	        	if(c)
	        	{
	    			return false;//防止子元素（<a>与父代<td>）事件冒泡    	
	        	}
	        }  
        }
    }
}
 
function createCollapseButtons() {
    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",collapsibleTable + tableIndex );
	    Table.addClass(collapsed);
	    HeaderRow.addClass(collapsibleTableRow + tableIndex);
	    Header.addClass(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.addClass(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 );