Defnyddiwr:Annabel/transtop/js

/** Collapsible tables *********************************************************

*
*  Description: Allows tables to be collapsed, showing only the header. See
*               Wikipedia:NavFrame.
*  Maintainers: User:R. Koot
*/

var autoCollapse = 2;

var collapseCaption = "Cuddio";

var expandCaption = "Dangos";

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 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 = "center";
           Button.style.cssFloat = "center";
           Button.style.fontWeight = "bold";
           Button.style.textAlign = "right";
           Button.style.width = "10em";

           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 );
       } 
       else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) {
           var element = NavigationBoxes[i];
           while (element = element.parentNode) {
               if ( hasClass( element, "outercollapse" ) ) {
                   collapseTable ( i );
                   break;
               }
           }
       }
   }

}

$( 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 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")) {
                   NavFrame.childNodes[j].appendChild(NavToggle);
               }
           }
           NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar);
       }
   }

}

$( createNavigationBarToggleButton );