MediaWiki:Common.js: Difference between revisions
Appearance
Created page with "→Any JavaScript here will be loaded for all users on every page load.: →Any JavaScript here will be loaded for all users on every page load.: /** * Collapsible tabl..." |
No edit summary |
||
| (46 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
/** | |||
* Hideable tables ********************************************************* | |||
* | |||
* Description: Allows tables to be hidden, showing nothing. See | |||
* [[Wikipedia:NavFrame]]. | |||
* Maintainers: [[User:Jesper Hanberg, DTU Danchip]] | |||
*/ | |||
var autoHide = 2; | |||
var hideCaption = 'hide'; | |||
var expandCaption = 'show'; | |||
window.hideTable = function ( tableIndex ) { | |||
var Button = document.getElementById( 'hideButton' + tableIndex ); | |||
var showTable = document.getElementById( 'hideableTable' + tableIndex ); | |||
var Tables = document.getElementsByTagName( 'table' ); | |||
var i; | |||
if ( !showTable || !Button ) { | |||
return false; | |||
} | |||
/* hide shown tables */ | |||
for ( i = 0; i < Tables.length; i++ ) { | |||
if ( $( Tables[i] ).hasClass( 'hideable' ) ) { | |||
Tables[i].style.display = 'none'; | |||
Tables[i].className = "wikitable hideable hidden"; | |||
} | |||
} | |||
showTable.style.display = ''; | |||
showTable.className = "wikitable hideable hidden shown"; | |||
}; | |||
function createHideButtons() { | |||
var tableIndex = 0; | |||
var NavigationBoxes = {}; | |||
var Tables = document.getElementsByTagName( 'table' ); | |||
var linkTable = document.getElementById( 'linkTable'); | |||
if ( linkTable ) var linkRows = linkTable.getElementsByTagName( 'tr' ); | |||
var i, j; | |||
function handleButtonLink( index, e ) { | |||
window.hideTable( index ); | |||
e.preventDefault(); | |||
} | |||
if ( linkRows ) { | |||
for ( i = 0; i < linkRows.length; i++ ) { | |||
var linkRow = linkRows[i]; | |||
if ( !linkRow ) continue; | |||
var linkCells = linkRow.getElementsByTagName( 'th' ); | |||
if ( !linkCells ) continue; | |||
for ( j = 0; j < linkCells.length; j++ ) { | |||
var linkCell = linkCells[j]; | |||
if ( !linkCell ) continue; | |||
if ( $( linkCell ).hasClass( 'hideImage' ) ) /* add id attribute */ | |||
linkCell.setAttribute( 'id', 'hideImage' + tableIndex++ ); | |||
} | |||
} | |||
tableIndex = 0; | |||
j=0; | |||
for ( i = 0; i < Tables.length; i++ ) { | |||
if ( $( Tables[i] ).hasClass( 'hideable' ) ) { | |||
/* 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]; | |||
var linkImage = document.getElementById( 'hideImage' + j++ );; | |||
if ( !Header ) continue; | |||
NavigationBoxes[ tableIndex ] = Tables[i]; | |||
Tables[i].setAttribute( 'id', 'hideableTable' + tableIndex ); | |||
if ( 0 ) { | |||
$( linkImage ).on( 'click', $.proxy( handlelinkImage, linkImage , tableIndex ) ); | |||
} | |||
if ( 1 ) { | |||
var Button = document.createElement( 'span' ); | |||
var ButtonLink = document.createElement( 'a' ); | |||
var ButtonText = document.createTextNode( expandCaption ); | |||
Button.className = 'hideButton'; /* Styles are declared in Common.css */ | |||
ButtonLink.style.color = Header.style.color; | |||
ButtonLink.setAttribute( 'id', 'hideButton' + 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 ); | |||
if ( linkImage ) linkImage.appendChild( Button ); | |||
if ( 0 ) linkImage.insertBefore( Button, linkImage.firstChild ); | |||
} | |||
tableIndex++; | |||
} | |||
} | |||
window.hideTable( 0 ); | |||
} | |||
} | |||
$( createHideButtons ); | |||
/** | /** | ||
| Line 72: | Line 181: | ||
ButtonLink.setAttribute( 'href', '#' ); | ButtonLink.setAttribute( 'href', '#' ); | ||
$( ButtonLink ).on( 'click', $.proxy( handleButtonLink, ButtonLink, tableIndex ) ); | $( ButtonLink ).on( 'click', $.proxy( handleButtonLink, ButtonLink, tableIndex ) ); | ||
ButtonLink.appendChild( ButtonText ); | |||
Button.appendChild( document.createTextNode( '[' ) ); | Button.appendChild( document.createTextNode( '[' ) ); | ||
| Line 78: | Line 188: | ||
Button.appendChild( document.createTextNode( ']' ) ); | Button.appendChild( document.createTextNode( ']' ) ); | ||
Header.insertBefore( Button, Header. | Header.insertBefore( Button, Header.lastChild ); | ||
tableIndex++; | tableIndex++; | ||
} | } | ||
Latest revision as of 18:35, 9 January 2015
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */
/**
* Hideable tables *********************************************************
*
* Description: Allows tables to be hidden, showing nothing. See
* [[Wikipedia:NavFrame]].
* Maintainers: [[User:Jesper Hanberg, DTU Danchip]]
*/
var autoHide = 2;
var hideCaption = 'hide';
var expandCaption = 'show';
window.hideTable = function ( tableIndex ) {
var Button = document.getElementById( 'hideButton' + tableIndex );
var showTable = document.getElementById( 'hideableTable' + tableIndex );
var Tables = document.getElementsByTagName( 'table' );
var i;
if ( !showTable || !Button ) {
return false;
}
/* hide shown tables */
for ( i = 0; i < Tables.length; i++ ) {
if ( $( Tables[i] ).hasClass( 'hideable' ) ) {
Tables[i].style.display = 'none';
Tables[i].className = "wikitable hideable hidden";
}
}
showTable.style.display = '';
showTable.className = "wikitable hideable hidden shown";
};
function createHideButtons() {
var tableIndex = 0;
var NavigationBoxes = {};
var Tables = document.getElementsByTagName( 'table' );
var linkTable = document.getElementById( 'linkTable');
if ( linkTable ) var linkRows = linkTable.getElementsByTagName( 'tr' );
var i, j;
function handleButtonLink( index, e ) {
window.hideTable( index );
e.preventDefault();
}
if ( linkRows ) {
for ( i = 0; i < linkRows.length; i++ ) {
var linkRow = linkRows[i];
if ( !linkRow ) continue;
var linkCells = linkRow.getElementsByTagName( 'th' );
if ( !linkCells ) continue;
for ( j = 0; j < linkCells.length; j++ ) {
var linkCell = linkCells[j];
if ( !linkCell ) continue;
if ( $( linkCell ).hasClass( 'hideImage' ) ) /* add id attribute */
linkCell.setAttribute( 'id', 'hideImage' + tableIndex++ );
}
}
tableIndex = 0;
j=0;
for ( i = 0; i < Tables.length; i++ ) {
if ( $( Tables[i] ).hasClass( 'hideable' ) ) {
/* 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];
var linkImage = document.getElementById( 'hideImage' + j++ );;
if ( !Header ) continue;
NavigationBoxes[ tableIndex ] = Tables[i];
Tables[i].setAttribute( 'id', 'hideableTable' + tableIndex );
if ( 0 ) {
$( linkImage ).on( 'click', $.proxy( handlelinkImage, linkImage , tableIndex ) );
}
if ( 1 ) {
var Button = document.createElement( 'span' );
var ButtonLink = document.createElement( 'a' );
var ButtonText = document.createTextNode( expandCaption );
Button.className = 'hideButton'; /* Styles are declared in Common.css */
ButtonLink.style.color = Header.style.color;
ButtonLink.setAttribute( 'id', 'hideButton' + 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 );
if ( linkImage ) linkImage.appendChild( Button );
if ( 0 ) linkImage.insertBefore( Button, linkImage.firstChild );
}
tableIndex++;
}
}
window.hideTable( 0 );
}
}
$( createHideButtons );
/**
* 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';
window.collapseTable = function ( tableIndex ) {
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;
var NavigationBoxes = {};
var Tables = document.getElementsByTagName( 'table' );
var i;
function handleButtonLink( index, e ) {
window.collapseTable( index );
e.preventDefault();
}
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 );
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.lastChild );
tableIndex++;
}
}
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;
}
}
}
}
}
$( 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
**/
window.toggleNavigationBar = function ( indexNavigationBar, event ) {
var NavToggle = document.getElementById( 'NavToggle' + indexNavigationBar );
var NavFrame = document.getElementById( 'NavFrame' + indexNavigationBar );
var NavChild;
if ( !NavFrame || !NavToggle ) {
return false;
}
/* if shown now */
if ( NavToggle.firstChild.data === NavigationBarHide ) {
for ( NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) {
if ( $( NavChild ).hasClass( 'NavContent' ) || $( NavChild ).hasClass( 'NavPic' ) ) {
NavChild.style.display = 'none';
}
}
NavToggle.firstChild.data = NavigationBarShow;
/* if hidden now */
} else if ( NavToggle.firstChild.data === NavigationBarShow ) {
for ( NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) {
if ( $( NavChild ).hasClass( 'NavContent' ) || $( NavChild ).hasClass( 'NavPic' ) ) {
NavChild.style.display = 'block';
}
}
NavToggle.firstChild.data = NavigationBarHide;
}
event.preventDefault();
};
/* adds show/hide-button to navigation bars */
function createNavigationBarToggleButton() {
var indexNavigationBar = 0;
var NavFrame;
var NavChild;
/* iterate over all < div >-elements */
var divs = document.getElementsByTagName( 'div' );
for ( var i = 0; (NavFrame = divs[i]); i++ ) {
/* if found a navigation bar */
if ( $( NavFrame ).hasClass( 'NavFrame' ) ) {
indexNavigationBar++;
var NavToggle = document.createElement( 'a' );
NavToggle.className = 'NavToggle';
NavToggle.setAttribute( 'id', 'NavToggle' + indexNavigationBar );
NavToggle.setAttribute( 'href', '#' );
$( NavToggle ).on( 'click', $.proxy( window.toggleNavigationBar, window, indexNavigationBar ) );
var isCollapsed = $( NavFrame ).hasClass( '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 ( NavChild = NavFrame.firstChild; NavChild != null && !isCollapsed; NavChild = NavChild.nextSibling ) {
if ( $( NavChild ).hasClass( 'NavPic' ) || $( NavChild ).hasClass( 'NavContent' ) ) {
if ( NavChild.style.display === 'none' ) {
isCollapsed = true;
}
}
}
if ( isCollapsed ) {
for ( NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) {
if ( $( NavChild ).hasClass( 'NavPic' ) || $( NavChild ).hasClass( '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 ( $( NavFrame.childNodes[j] ).hasClass( 'NavHead' ) ) {
NavToggle.style.color = NavFrame.childNodes[j].style.color;
NavFrame.childNodes[j].appendChild( NavToggle );
}
}
NavFrame.setAttribute( 'id', 'NavFrame' + indexNavigationBar );
}
}
}
$( createNavigationBarToggleButton );