|
|
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */ | | /** |
| /** Collapsible tables ********************************************************* | | * Collapsible tables |
| *
| | * |
| * Description: Allows tables to be collapsed, showing only the header. See
| | * @version 2.0.2 (2014-03-14) |
| * [[Wikipedia:NavFrame]].
| | * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-collapsibleTables.js |
| * Maintainers: [[User:R. Koot]]
| | * @author [[User:R. Koot]] |
| */
| | * @author [[User:Krinkle]] |
|
| | * @deprecated Since MediaWiki 1.20: Use class="mw-collapsible" instead which |
| var autoCollapse = 2;
| | * is supported in MediaWiki core. |
| var collapseCaption = "hide";
| | */ |
| var expandCaption = "show";
| | /*global $, mw */ |
|
| | var autoCollapse = 2; |
| function collapseTable( tableIndex )
| | var collapseCaption = 'hide'; |
| {
| | var expandCaption = 'show'; |
| 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 NavigationBoxes = 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;
| |
| | |
| 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.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++;
| |
| }
| |
| }
| |
|
| |
| 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, 'NavPic' ) ) {
| |
| NavChild.style.display = 'none';
| |
| }
| |
| if ( hasClass( NavChild, 'NavContent') ) {
| |
| 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, 'NavPic')) {
| |
| NavChild.style.display = 'block';
| |
| }
| |
| if (hasClass(NavChild, 'NavContent')) {
| |
| 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 NavToggleText = document.createTextNode(NavigationBarHide);
| |
| for (
| |
| var NavChild = NavFrame.firstChild;
| |
| NavChild != null;
| |
| NavChild = NavChild.nextSibling
| |
| ) {
| |
| if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) {
| |
| if (NavChild.style.display == 'none') {
| |
| NavToggleText = document.createTextNode(NavigationBarShow);
| |
| break;
| |
| }
| |
| }
| |
| }
| |
|
| |
| 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")) {
| |
| NavFrame.childNodes[j].appendChild(NavToggle);
| |
| }
| |
| }
| |
| NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar);
| |
| }
| |
| }
| |
| }
| |
|
| |
| addOnloadHook( createNavigationBarToggleButton );
| |
|
| |
|
| | function collapseTable( tableIndex ) { |
| | var Button = document.getElementById( 'collapseButton' + tableIndex ); |
| | var Table = document.getElementById( 'collapsibleTable' + tableIndex ); |
|
| |
|
| /* Test if an element has a certain class **************************************
| | if ( !Table || !Button ) { |
| *
| | return false; |
| * Description: Uses regular expressions and caching for better performance.
| | } |
| * Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
| | |
| */
| | var Rows = Table.rows; |
|
| | var i; |
| var hasClass = (function () {
| | |
| var reCache = {};
| | if ( Button.firstChild.data === collapseCaption ) { |
| return function (element, className) {
| | for ( i = 1; i < Rows.length; i++ ) { |
| return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
| | 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 createClickHandler( tableIndex ) { |
| | return function ( e ) { |
| | e.preventDefault(); |
| | collapseTable( tableIndex ); |
| | }; |
| | } |
| | |
| | function createCollapseButtons() { |
| | var tableIndex = 0; |
| | var NavigationBoxes = {}; |
| | var Tables = document.getElementsByTagName( 'table' ); |
| | var i; |
| | |
| | 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 = document.createElement( 'span' ); |
| | var ButtonLink = document.createElement( 'a' ); |
| | var ButtonText = document.createTextNode( collapseCaption ); |
| | // TODO: Declare styles in [[MediaWiki:Gadget-collapsibleTables.css]] |
| | // Button.className = 'collapseButton'; |
| | Button.style.styleFloat = 'right'; |
| | Button.style.cssFloat = 'right'; |
| | 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', '#' ); |
| | $( ButtonLink ).on( 'click', createClickHandler( tableIndex ) ); |
| | ButtonLink.appendChild( ButtonText ); |
| | |
| | Button.appendChild( document.createTextNode( '[' ) ); |
| | Button.appendChild( ButtonLink ); |
| | Button.appendChild( document.createTextNode( ']' ) ); |
| | |
| | Header.insertBefore( Button, Header.firstChild ); |
| | tableIndex++; |
| | } |
| | } |
| | |
| | for ( i = 0; i < tableIndex; i++ ) { |
| | if ( $( NavigationBoxes[i] ).hasClass( 'collapsed' ) || |
| | ( tableIndex >= autoCollapse && $( NavigationBoxes[i] ).hasClass( 'autocollapse' ) ) |
| | ) { |
| | collapseTable( i ); |
| | } |
| | } |
| | } |
| | |
| | mw.hook( 'wikipage.content' ).add( createCollapseButtons ); |