Difference between revisions of "MediaWiki:Common.js"
From WikiTemp, the GBAtemp wiki
(test (part 1)) |
m |
||
Line 98: | Line 98: | ||
addOnloadHook( createCollapseButtons ); | addOnloadHook( createCollapseButtons ); | ||
− | + | /** Dynamic Navigation Bars (experimental) ************************************* | |
− | + | * | |
− | + | * Description: See [[Wikipedia:NavFrame]]. | |
− | + | * Maintainers: UNMAINTAINED | |
− | + | */ | |
− | + | ||
− | + | // set up the words in your language | |
− | + | var 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 toggled | |
− | + | function toggleNavigationBar(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.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; | |
− | + | } | |
− | + | } | |
− | + | ||
− | + | // adds show/hide-button to navigation bars | |
− | + | function createNavigationBarToggleButton() | |
− | + | { | |
− | + | var indexNavigationBar = 0; | |
− | + | // iterate over all < div >-elements | |
− | + | var divs = document.getElementsByTagName("div"); | |
− | + | for (var i = 0; NavFrame = divs[i]; i++) { | |
− | + | // if found a navigation bar | |
− | + | if (hasClass(NavFrame, "NavFrame")) { | |
− | + | ||
− | + | indexNavigationBar++; | |
− | + | var NavToggle = document.createElement("a"); | |
− | + | NavToggle.className = 'NavToggle'; | |
− | + | NavToggle.setAttribute('id', 'NavToggle' + indexNavigationBar); | |
− | + | NavToggle.setAttribute('href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');'); | |
− | + | ||
− | + | var isCollapsed = hasClass( NavFrame, "collapsed" ); | |
− | + | /* | |
− | + | * Check if any children are already hidden. This loop is here for backwards compatibility: | |
− | + | * the old way of making NavFrames start out collapsed was to manually add style="display:none" | |
− | + | * to all the NavPic/NavContent elements. Since this was bad for accessibility (no way to make | |
− | + | * the content visible without JavaScript support), the new recommended way is to add the class | |
− | + | * "collapsed" to the NavFrame itself, just like with collapsible tables. | |
− | + | */ | |
− | + | for (var NavChild = NavFrame.firstChild; NavChild != null && !isCollapsed; NavChild = NavChild.nextSibling) { | |
− | + | if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) { | |
− | + | if ( NavChild.style.display == 'none' ) { | |
− | + | isCollapsed = true; | |
− | + | } | |
− | + | } | |
− | + | } | |
− | + | if (isCollapsed) { | |
− | + | for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) { | |
− | + | if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) { | |
− | + | NavChild.style.display = 'none'; | |
− | + | } | |
− | + | } | |
− | + | } | |
− | + | var NavToggleText = document.createTextNode(isCollapsed ? NavigationBarShow : NavigationBarHide); | |
− | + | NavToggle.appendChild(NavToggleText); | |
− | + | ||
− | var NavToggleText = document.createTextNode(NavigationBarHide); | + | // Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked) |
− | + | for(var j=0; j < NavFrame.childNodes.length; j++) { | |
− | + | if (hasClass(NavFrame.childNodes[j], "NavHead")) { | |
− | + | NavToggle.style.color = NavFrame.childNodes[j].style.color; | |
− | + | NavFrame.childNodes[j].appendChild(NavToggle); | |
− | + | } | |
− | + | } | |
− | + | NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar); | |
− | + | } | |
− | + | } | |
− | + | } | |
− | + | ||
− | + | addOnloadHook( createNavigationBarToggleButton ); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + |
Revision as of 15:51, 4 December 2010
// ============================================================ // BEGIN Dynamic Navigation Bars (experimantal) // This script is from Wikipedia. For author attribution, please see http://en.wikipedia.org/w/index.php?title=MediaWiki:Common.js&action=history /* Test if an element has a certain class ************************************** * * Description: Uses regular expressions and caching for better performance. * Maintainers: User:Mike Dillon, User:R. Koot, User:SG */ var hasClass = (function () { var reCache = {}; return function (element, className) { return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className); }; })(); /** Collapsible tables ********************************************************* * * Description: Allows tables to be collapsed, showing only the header. See * [[Wikipedia:NavFrame]]. * Maintainers: [[User:R. Koot]] */ var autoCollapse = 2; var collapseCaption = "hide"; var expandCaption = "show"; function collapseTable( tableIndex ) { var Button = document.getElementById( "collapseButton" + tableIndex ); var Table = document.getElementById( "collapsibleTable" + tableIndex ); if ( !Table || !Button ) { return false; } var Rows = Table.getElementsByTagName( "tr" ); 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 NavigationBoxes = new Object(); var Tables = document.getElementsByTagName( "table" ); for ( var i = 0; i < Tables.length; i++ ) { if ( hasClass( Tables[i], "collapsible" ) ) { NavigationBoxes[ 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.fontWeight = "normal"; Button.style.textAlign = "right"; Button.style.width = "6em"; 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( "]" ) ); var Header = Tables[i].getElementsByTagName( "tr" )[0].getElementsByTagName( "th" )[0]; /* only add button and increment count if there is a header row to work with */ if (Header) { Header.insertBefore( Button, Header.childNodes[0] ); tableIndex++; } } } for ( var i = 0; i < tableIndex; i++ ) { if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) { collapseTable( i ); } } } addOnloadHook( createCollapseButtons ); /** Dynamic Navigation Bars (experimental) ************************************* * * Description: See [[Wikipedia:NavFrame]]. * Maintainers: UNMAINTAINED */ // set up the words in your language var 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 toggled function toggleNavigationBar(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.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; } } // adds show/hide-button to navigation bars function createNavigationBarToggleButton() { var indexNavigationBar = 0; // iterate over all < div >-elements var divs = document.getElementsByTagName("div"); for (var i = 0; NavFrame = divs[i]; i++) { // if found a navigation bar if (hasClass(NavFrame, "NavFrame")) { indexNavigationBar++; var NavToggle = document.createElement("a"); NavToggle.className = 'NavToggle'; NavToggle.setAttribute('id', 'NavToggle' + indexNavigationBar); NavToggle.setAttribute('href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');'); var isCollapsed = hasClass( NavFrame, "collapsed" ); /* * Check if any children are already hidden. This loop is here for backwards compatibility: * the old way of making NavFrames start out collapsed was to manually add style="display:none" * to all the NavPic/NavContent elements. Since this was bad for accessibility (no way to make * the content visible without JavaScript support), the new recommended way is to add the class * "collapsed" to the NavFrame itself, just like with collapsible tables. */ for (var NavChild = NavFrame.firstChild; NavChild != null && !isCollapsed; NavChild = NavChild.nextSibling) { if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) { if ( NavChild.style.display == 'none' ) { isCollapsed = true; } } } if (isCollapsed) { for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) { if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) { NavChild.style.display = 'none'; } } } var NavToggleText = document.createTextNode(isCollapsed ? NavigationBarShow : NavigationBarHide); NavToggle.appendChild(NavToggleText); // Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked) for(var j=0; j < NavFrame.childNodes.length; j++) { if (hasClass(NavFrame.childNodes[j], "NavHead")) { NavToggle.style.color = NavFrame.childNodes[j].style.color; NavFrame.childNodes[j].appendChild(NavToggle); } } NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar); } } } addOnloadHook( createNavigationBarToggleButton );