MediaWiki:Navigation.js: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
Update from mw:Manual:Collapsible_tables |
partial restore |
||
Line 90: | Line 90: | ||
addOnloadHook( createCollapseButtons ); |
addOnloadHook( createCollapseButtons ); |
||
// Faster Dynamic Navigation |
|||
// set up the words in your language |
|||
var NavigationBarHide = '▲'; |
|||
var NavigationBarShow = '▼'; |
|||
var NavigationTitleHide = 'hide contents'; |
|||
var NavigationTitleShow = 'show contents'; |
|||
// shows and hides content and picture (if available) of navigation bars |
|||
function toggleNavigationBar(e) |
|||
{ |
|||
e = e || window.event; |
|||
var target = e.target || e.srcElement; |
|||
var NavFrame, NavToggle; |
|||
if (hasClass(target, 'NavToggle')) { |
|||
NavFrame = target.parentNode.parentNode; |
|||
NavToggle = target; |
|||
} else if (hasClass(target, 'NavHead')) { |
|||
NavFrame = target.parentNode; |
|||
if (hasClass(target.lastChild, 'NavToggle')) |
|||
NavToggle = target.lastChild; |
|||
else |
|||
return; |
|||
} |
|||
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; |
|||
NavToggle.parentNode.setAttribute('title', NavigationTitleShow); |
|||
} 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; |
|||
NavToggle.parentNode.setAttribute('title', NavigationTitleHide); |
|||
} |
|||
} |
|||
// adds show/hide-button to navigation bars |
|||
function createNavigationBarToggleButton() |
|||
{ |
|||
// iterate over all div elements |
|||
var NavFrame=document.getElementsByTagName("div"); |
|||
for (var i=0; i < NavFrame.length; i++) |
|||
{ |
|||
if (!hasClass(NavFrame[i], "NavFrame")) |
|||
continue; |
|||
var NavToggle = document.createElement("a"); |
|||
var NavToggleText = document.createTextNode(hasClass(NavFrame[i], "selected") ? NavigationBarShow : NavigationBarHide); |
|||
NavToggle.className = 'NavToggle'; |
|||
NavToggle.appendChild(NavToggleText); |
|||
// add NavToggle-Button as element inside of NavHead |
|||
for (var j=0; j < NavFrame[i].childNodes.length; j++) { |
|||
var NavHead = NavFrame[i].childNodes[j]; |
|||
if (!hasClass(NavHead, "NavHead")) |
|||
continue; |
|||
NavHead.appendChild(NavToggle); |
|||
NavHead.onclick = toggleNavigationBar; |
|||
// only bother to emulate click if if toggle button was added |
|||
if (document.createEvent) { // DOM 2 and DOM 3 compliant browsers |
|||
var e = document.createEvent("MouseEvents"); |
|||
e.initMouseEvent("click", true,true, window, 0,0,0,0,0, false,false,false,false, 0, null); |
|||
NavHead.dispatchEvent(e); |
|||
} else if (NavHead.fireEvent) { // IE |
|||
NavHead.fireEvent("onclick"); |
|||
} |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
addOnloadHook( createNavigationBarToggleButton ); |
Revision as of 17:45, 3 August 2011
/** Collapsible tables *********************************************************
*
* Description: Allows tables to be collapsed, showing only the header. See
* http://www.mediawiki.org/wiki/Manual:Collapsible_tables.
* Maintainers: [[en: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.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.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]]
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;
}
}
}
}
}
addOnloadHook( createCollapseButtons );
// Faster Dynamic Navigation
// set up the words in your language
var NavigationBarHide = '▲';
var NavigationBarShow = '▼';
var NavigationTitleHide = 'hide contents';
var NavigationTitleShow = 'show contents';
// shows and hides content and picture (if available) of navigation bars
function toggleNavigationBar(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
var NavFrame, NavToggle;
if (hasClass(target, 'NavToggle')) {
NavFrame = target.parentNode.parentNode;
NavToggle = target;
} else if (hasClass(target, 'NavHead')) {
NavFrame = target.parentNode;
if (hasClass(target.lastChild, 'NavToggle'))
NavToggle = target.lastChild;
else
return;
}
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;
NavToggle.parentNode.setAttribute('title', NavigationTitleShow);
} 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;
NavToggle.parentNode.setAttribute('title', NavigationTitleHide);
}
}
// adds show/hide-button to navigation bars
function createNavigationBarToggleButton()
{
// iterate over all div elements
var NavFrame=document.getElementsByTagName("div");
for (var i=0; i < NavFrame.length; i++)
{
if (!hasClass(NavFrame[i], "NavFrame"))
continue;
var NavToggle = document.createElement("a");
var NavToggleText = document.createTextNode(hasClass(NavFrame[i], "selected") ? NavigationBarShow : NavigationBarHide);
NavToggle.className = 'NavToggle';
NavToggle.appendChild(NavToggleText);
// add NavToggle-Button as element inside of NavHead
for (var j=0; j < NavFrame[i].childNodes.length; j++) {
var NavHead = NavFrame[i].childNodes[j];
if (!hasClass(NavHead, "NavHead"))
continue;
NavHead.appendChild(NavToggle);
NavHead.onclick = toggleNavigationBar;
// only bother to emulate click if if toggle button was added
if (document.createEvent) { // DOM 2 and DOM 3 compliant browsers
var e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true,true, window, 0,0,0,0,0, false,false,false,false, 0, null);
NavHead.dispatchEvent(e);
} else if (NavHead.fireEvent) { // IE
NavHead.fireEvent("onclick");
}
break;
}
}
}
addOnloadHook( createNavigationBarToggleButton );