/* Default style for navigation boxes * * Collapsible tables ********************************************************* * * Description: Allows tables to be collapsed, showing only the header. */ var autoCollapse = 2;var collapseCaption = 'hide';var expandCaption = 'show'; window.navbox collapseTable = function ( tableIndex ) { /* Navbox container var Button = document.getElementById( 'collapseButton' + tableIndex ); var Table = document.getElementById( 'collapsibleTable' + tableIndex ); if ( !Table || !Button ) { return false; } var Rows = Table.rows; var i; if ( Button.firstChild.data === collapseCaption ) { for ( i = 1; i < Rows.length; i++ ) { Rows[i].style.display = 'none'; } Button.firstChild.data = expandCaption; } else { for ( i = 1; i < Rows.length; i++ ) { Rows[i].style.display = Rows[0].style */.display; } Button.firstChild.data = collapseCaption; }}; function createCollapseButtons() { var tableIndex = 0; border: 1px solid #aaavar NavigationBoxes = {}; width: 100%var Tables = document.getElementsByTagName( 'table' ); margin: autovar i; clear: bothfunction handleButtonLink( index, e ) { window.collapseTable( index ); e.preventDefault(); font-size: 88%} for ( i = 0; i < Tables.length; i++ ) { if ( $( Tables[i] ).hasClass( '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; NavigationBoxes[ tableIndex ] = Tables[i]; Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex ); var Button text-align: center= document.createElement( 'span' ); var ButtonLink = document.createElement( 'a' ); var ButtonText = document.createTextNode( collapseCaption ); Button.className = 'collapseButton'; /* Styles are declared in Common.css */ ButtonLink.style.color = Header.style.color; ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex ); ButtonLink.setAttribute( 'href', '#' ); $( ButtonLink ).on( 'click', $.proxy( handleButtonLink, ButtonLink, tableIndex ) ); ButtonLink.appendChild( ButtonText ); Button.appendChild( document.createTextNode( '[' ) ); Button.appendChild( ButtonLink ); Button.appendChild( document.createTextNode( ']' ) ); Header.insertBefore( Button, Header.firstChild ); tableIndex++; } padding: 1px} for ( i = 0; i < tableIndex; i++ ) { if ( $( NavigationBoxes[i] ).hasClass( 'collapsed' ) || ( tableIndex >= autoCollapse && $( NavigationBoxes[i] ).hasClass( 'autocollapse' ) ) ) { window.collapseTable( i ); } else if ( $( NavigationBoxes[i] ).hasClass ( 'innercollapse' ) ) { var element = NavigationBoxes[i]; while ((element = element.parentNode)) { if ( $( element ).hasClass( 'outercollapse' ) ) { window.collapseTable ( i ); break; } } } }
}
mw.hook( 'wikipage.content' ).navbox-inneradd( createCollapseButtons ); /** Dynamic Navigation Bars (experimental) ************************************* * * Description: See [[Wikipedia:NavFrame]]. * Maintainers: UNMAINTAINED */ // set up the words in your languagevar NavigationBarHide = '[' + collapseCaption + ']';var NavigationBarShow = '[' + expandCaption + ']'; // shows and hides content and picture (if available) of navigation bars// Parameters:// indexNavigationBar: the index of navigation bar to be toggledwindow.toggleNavigationBar = function(indexNavigationBar){ var NavToggle = document.getElementById("NavToggle" + indexNavigationBar); var NavFrame = document.getElementById("NavFrame" + indexNavigationBar); if (!NavFrame || !NavToggle) { return false; } // if shown now if (NavToggle.firstChild.data == NavigationBarHide) { for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) { if (hasClass(NavChild, 'NavContent') || hasClass(NavChild,'NavPic')) { NavChild.style.display = 'none'; } } NavToggle.firstChild.data = NavigationBarShow; // if hidden now } else if (NavToggle.firstChild.navbox-subgroup data == NavigationBarShow) { for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) { if (hasClass(NavChild, 'NavContent') || hasClass(NavChild, 'NavPic')) { NavChild.style.display = 'block'; } } NavToggle.firstChild.data = NavigationBarHide; width: 100%;}
}
.navbox-group, .navbox// adds show/hide-title,button to navigation bars.navbox-abovebelow function createNavigationBarToggleButton(){ padding: var indexNavigationBar = 0.25em 1em; /* Title, group and above/below styles */iterate over all < div >-elements line-height: 1var divs = document.5emgetElementsByTagName("div"); text-align: centerfor (var i = 0; NavFrame = divs[i];}th.navbox-group i++) { /* Group style */ white-space: nowrap; /* @noflip */if found a navigation bar text-align: right;}.navbox if (hasClass(NavFrame, "NavFrame") && !hasClass(NavFrame,.navbox"mw-subgroup collapsible")) { background: #fdfdfd indexNavigationBar++; /* Background color */} var NavToggle = document.navbox-list {createElement("a"); line-height: 1 NavToggle.5emclassName = 'NavToggle'; border-color: #fdfdfd; /* Must match background color */} NavToggle.navbox thsetAttribute('id',.navbox-title { background: #ccccff'NavToggle' + indexNavigationBar); /* Level 1 color */} NavToggle.navbox-abovebelowsetAttribute('href',th.navbox-group,.navbox-subgroup .navbox-title { background'javascript: #ddddfftoggleNavigationBar(' + indexNavigationBar + ');'); /* Level 2 color */} .navbox-subgroup .navbox-group var isCollapsed = hasClass( NavFrame,"collapsed" );.navbox-subgroup .navbox-abovebelow { background: #e6e6ff; /* Level 3 color */}Check if any children are already hidden.navbox-even { This loop is here for backwards compatibility: background * the old way of making NavFrames start out collapsed was to manually add style="display: #f7f7f7; /* Even row striping none" *to all the NavPic/}NavContent elements.navbox-odd { background: transparent; /* Odd row striping */}Since this was bad for accessibility (no way to maketable.navbox { margin-top: 1em; / * Prevent preceding the content from clinging visible without JavaScript support), the new recommended way is to navboxes add the class */}table"collapsed" to the NavFrame itself, just like with collapsible tables.navbox table.navbox { margin-top: 0; /* No top margin for nested navboxes */}table for (var NavChild = NavFrame.navbox + tablefirstChild; NavChild != null && !isCollapsed; NavChild = NavChild.navbox nextSibling) { margin-top: -1px; /* Single pixel border between adjacent navboxes */}.navbox .hlist td dl if ( hasClass( NavChild,.navbox .hlist td ol'NavPic' ) || hasClass( NavChild,'NavContent' ) ) { if ( NavChild.navbox style.hlist td ul,.navbox td.hlist dl,.navbox td.hlist ol,.navbox td.hlist ul display == 'none' ) { padding: 0.125em 0 isCollapsed = true; /* Adjust hlist padding in navboxes */ } }/* Default styling for Navbar template */ }.navbar if (isCollapsed) { display: inline for (var NavChild = NavFrame.firstChild; font-size: 88%NavChild != null;NavChild = NavChild.nextSibling) { font-weight: normal;} if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) { NavChild.style.navbar ul { display: inline= 'none'; white-space: nowrap; } }.mw-body-content .navbar ul { line-height: inherit; } var NavToggleText = document.navbar li { word-spacingcreateTextNode(isCollapsed ? NavigationBarShow : -0.125emNavigationBarHide);} NavToggle.navbar.mini li span { font-variant: small-capsappendChild(NavToggleText);} //* Navbar styling when nested in infobox Find the NavHead and navbox */attach the toggle link (Must be this complicated because Moz's firstChild handling is borked) for(var j=0; j < NavFrame.infobox childNodes.navbar length; j++) { font-size: 100%;} if (hasClass(NavFrame.navbox .navbar childNodes[j], "NavHead")) { display: block; font-size: 100%;} NavToggle.navbox-title style.navbar { /* @noflip */ float: left; /* @noflip */ text-align: left; /* @noflip */ margin-right: 0color = NavFrame.5em; width: 6em;} /* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript in childNodes[[MediaWiki:Common.jsj]] are styled here so they can be customised. */style.collapseButton { /* @noflip */ float: right; font-weight: normalcolor; /* @noflip */ margin-left: 0 NavFrame.5em; /* @noflip */ text-align: right; width: auto;}/* In navboxes, the show/hide button balances the v·d·e links from childNodes[[Template:Navbarj]], so they need to be the same width. */.navbox .collapseButton { width: 6emappendChild(NavToggle); } }/* Styling for JQuery makeCollapsible NavFrame.setAttribute('id', matching that of collapseButton */.mw-collapsible-toggle { font-weight: normal'NavFrame' + indexNavigationBar); /* @noflip */ } text-align: right;}.navbox .mw-collapsible-toggle { width: 6em;
}
$( createNavigationBarToggleButton );