MediaWiki:Common.js: Difference between revisions

Jump to navigation Jump to search
m
Update to wikipedia version for collapsible elements
(Fore preview)
m (Update to wikipedia version for collapsible elements)
Line 13: Line 13:
})();
})();


/** Collapsible tables *********************************************************
/**
* Collapsible tables *********************************************************
  *
  *
  * Description: Allows tables to be collapsed, showing only the header.
  * Description: Allows tables to be collapsed, showing only the header.
  */
  */
   
   
var autoCollapse = 2;
var autoCollapse = 2;
var collapseCaption = "hide";
var collapseCaption = 'hide';
var expandCaption = "show";
var expandCaption = 'show';
   
   
window.collapseTable = function( tableIndex ){
window.collapseTable = function ( tableIndex ) {
     var Button = document.getElementById( "collapseButton" + tableIndex );
     var Button = document.getElementById( 'collapseButton' + tableIndex );
     var Table = document.getElementById( "collapsibleTable" + tableIndex );
     var Table = document.getElementById( 'collapsibleTable' + tableIndex );
   
   
     if ( !Table || !Button ) {
     if ( !Table || !Button ) {
Line 31: Line 32:
   
   
     var Rows = Table.rows;
     var Rows = Table.rows;
    var i;
   
   
     if ( Button.firstChild.data == collapseCaption ) {
     if ( Button.firstChild.data === collapseCaption ) {
         for ( var i = 1; i < Rows.length; i++ ) {
         for ( i = 1; i < Rows.length; i++ ) {
             Rows[i].style.display = "none";
             Rows[i].style.display = 'none';
         }
         }
         Button.firstChild.data = expandCaption;
         Button.firstChild.data = expandCaption;
     } else {
     } else {
         for ( var i = 1; i < Rows.length; i++ ) {
         for ( i = 1; i < Rows.length; i++ ) {
             Rows[i].style.display = Rows[0].style.display;
             Rows[i].style.display = Rows[0].style.display;
         }
         }
         Button.firstChild.data = collapseCaption;
         Button.firstChild.data = collapseCaption;
     }
     }
}
};
   
   
function createCollapseButtons(){
function createCollapseButtons() {
     var tableIndex = 0;
     var tableIndex = 0;
     var NavigationBoxes = new Object();
     var NavigationBoxes = {};
     var Tables = document.getElementsByTagName( "table" );
     var Tables = document.getElementsByTagName( 'table' );
    var i;
    function handleButtonLink( index, e ) {
        window.collapseTable( index );
        e.preventDefault();
    }
   
   
     for ( var i = 0; i < Tables.length; i++ ) {
     for ( i = 0; i < Tables.length; i++ ) {
         if ( hasClass( Tables[i], "collapsible" ) ) {
         if ( $( Tables[i] ).hasClass( 'collapsible' ) ) {
   
   
             /* only add button and increment count if there is a header row to work with */
             /* only add button and increment count if there is a header row to work with */
             var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0];
             var HeaderRow = Tables[i].getElementsByTagName( 'tr' )[0];
             if (!HeaderRow) continue;
             if ( !HeaderRow ) continue;
             var Header = HeaderRow.getElementsByTagName( "th" )[0];
             var Header = HeaderRow.getElementsByTagName( 'th' )[0];
             if (!Header) continue;
             if ( !Header ) continue;
   
   
             NavigationBoxes[ tableIndex ] = Tables[i];
             NavigationBoxes[ tableIndex ] = Tables[i];
             Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );
             Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex );
   
   
             var Button    = document.createElement( "span" );
             var Button    = document.createElement( 'span' );
             var ButtonLink = document.createElement( "a" );
             var ButtonLink = document.createElement( 'a' );
             var ButtonText = document.createTextNode( collapseCaption );
             var ButtonText = document.createTextNode( collapseCaption );
   
   
             Button.className = "collapseButton";  //Styles are declared in Common.css
             Button.className = 'collapseButton';  /* Styles are declared in Common.css */
   
   
             ButtonLink.style.color = Header.style.color;
             ButtonLink.style.color = Header.style.color;
             ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
             ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex );
             ButtonLink.setAttribute( "href", "#" );
             ButtonLink.setAttribute( 'href', '#' );
             addHandler( ButtonLink,  "click", new Function( "evt", "collapseTable(" + tableIndex + " ); return killEvt( evt );") );
             $( ButtonLink ).on( 'click', $.proxy( handleButtonLink, ButtonLink, tableIndex ) );
             ButtonLink.appendChild( ButtonText );
             ButtonLink.appendChild( ButtonText );
   
   
             Button.appendChild( document.createTextNode( "[" ) );
             Button.appendChild( document.createTextNode( '[' ) );
             Button.appendChild( ButtonLink );
             Button.appendChild( ButtonLink );
             Button.appendChild( document.createTextNode( "]" ) );
             Button.appendChild( document.createTextNode( ']' ) );
   
   
             Header.insertBefore( Button, Header.firstChild );
             Header.insertBefore( Button, Header.firstChild );
Line 83: Line 91:
     }
     }
   
   
     for ( var i = 0;  i < tableIndex; i++ ) {
     for ( i = 0;  i < tableIndex; i++ ) {
         if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) {
         if ( $( NavigationBoxes[i] ).hasClass( 'collapsed' ) || ( tableIndex >= autoCollapse && $( NavigationBoxes[i] ).hasClass( 'autocollapse' ) ) ) {
             collapseTable( i );
             window.collapseTable( i );
         }  
         }  
         else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) {
         else if ( $( NavigationBoxes[i] ).hasClass ( 'innercollapse' ) ) {
             var element = NavigationBoxes[i];
             var element = NavigationBoxes[i];
             while (element = element.parentNode) {
             while ((element = element.parentNode)) {
                 if ( hasClass( element, "outercollapse" ) ) {
                 if ( $( element ).hasClass( 'outercollapse' ) ) {
                     collapseTable ( i );
                     window.collapseTable ( i );
                     break;
                     break;
                 }
                 }
Line 99: Line 107:
}
}
   
   
$( createCollapseButtons );
mw.hook( 'wikipage.content' ).add( createCollapseButtons );


/** Dynamic Navigation Bars (experimental) *************************************
/** Dynamic Navigation Bars (experimental) *************************************

Navigation menu