MediaWiki:Common.js/collapsibletables.js

/* Any JavaScript here will be loaded for all users on every page load. */

// ===================================================================== // Collapsible Tables // // Description: Allows tables to be collapsed, showing only the header. // Reference:  Wikipedia:Wikipedia:NavFrame //             Wikipedia:Help:Collapsing // Maintainers: Wikipedia:User:R. Koot // // ===================================================================== /* Test if an element has a certain class * Maintainers: User:Mike Dillon, User:R. Koot, User:SG * * @deprecated: Use $(element).hasClass instead. */ window.hasClass = ( function {   var reCache = {};    return function (element, className) {        return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);   }; });

function collapseTable(tableIndex) { var Button = document.getElementById("collapseButton" + tableIndex); var Table = document.getElementById("collapsibleTable" + tableIndex); if (!Table || !Button) return false; var Rows = Table.rows; if (Button.firstChild.data == collapseCaption) { for (var i = 1; i < Rows.length; i++) { Rows[i].style.display = "none"; }           Button.firstChild.data = expandCaption; } else { for (var i = 1; i < Rows.length; i++) { Rows[i].style.display = Rows[0].style.display; }         Button.firstChild.data = collapseCaption; }   }    function createCollapseButtons { var tableIndex = 0; var navBoxes = new Object; var Tables = document.getElementsByTagName("table"); for (var i = 0; i < Tables.length; i++) { if (hasClass(Tables[i], "collapsible")) { /* Only add button and increment count if there is a header row to work with */ var HeaderRow = Tables[i].getElementsByTagName("tr")[0]; if (!HeaderRow) continue; var Header = HeaderRow.getElementsByTagName("th")[0]; if (!Header) continue; navBoxes[tableIndex] = Tables[i]; Tables[i].setAttribute("id", "collapsibleTable" + tableIndex); var Button    = document.createElement("span"); var ButtonLink = document.createElement("a"); var ButtonText = document.createTextNode(collapseCaption); Button.style.styleFloat = "right"; Button.style.cssFloat = "right"; Button.style.fontSize = "90%"; Button.style.fontWeight = "normal"; Button.style.textAlign = "right"; Button.style.width = "6em"; ButtonLink.style.color = Header.style.color; ButtonLink.setAttribute("id", "collapseButton" + tableIndex); ButtonLink.setAttribute("href", "javascript:collapseTable(" + tableIndex + ");"); ButtonLink.appendChild(ButtonText); Button.appendChild(document.createTextNode("[")); Button.appendChild(ButtonLink); Button.appendChild(document.createTextNode("]")); Header.insertBefore(Button, Header.childNodes[0]); tableIndex++; }       }        var j = 0; for (var i = 0; i < tableIndex; i++) { if (hasClass(navBoxes[i], "navbox") && hasClass(navBoxes[i], "collapsible") && hasClass(navBoxes[i], "autocollapse")) j++; var h = 0; if (hasClass(navBoxes[i], "navbox") && hasClass(navBoxes[i], "collapsible")) h = navBoxes[i].clientHeight; if(h == null || h == undefined) h = 0; // Does not collapse if: //  Contains "uncollapsed" // Collapses if: //  1. Contains "collapsed" //  2. If j>autoCollapse, and contains "navbox collapsible autocollapse" //  3. If table height > maxHeight, and contains "navbox collapsible" //  4. If there are "innercollapse" tables in "outercollapse" tables if (!hasClass(navBoxes[i], "uncollapsed")) { if (hasClass(navBoxes[i], "collapsed") || (j > autoCollapse) || (h > maxHeight)) { collapseTable(i); }               else if (hasClass(navBoxes[i], "innercollapse")) { var element = navBoxes[i]; while (element = element.parentNode) { if (hasClass(element, "outercollapse")) { collapseTable(i); break; }                   }                }            }        }    }    addOnloadHook(createCollapseButtons); // ===================================================================== // End of Collapsible Tables // =====================================================================