MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
Line 91: | Line 91: | ||
addOnloadHook( createCollapseButtons ); | addOnloadHook( createCollapseButtons ); | ||
=== NavBars === | |||
<pre>*/ | |||
var NavigationBarHide = 'hide ▲'; | |||
var NavigationBarShow = 'show ▼'; | |||
function NavToggleCategory(navFrame) | |||
{ | |||
var table = navFrame.getElementsByTagName('table')[0]; | |||
if (table && table.className == "translations") | |||
return "translations"; | |||
var heading = navFrame.previousSibling; | |||
while (heading) { | |||
if (/[hH][4-6]/.test(heading.nodeName)) { | |||
if (heading.getElementsByTagName('span')[1]) | |||
heading = heading.getElementsByTagName('span')[1]; | |||
else | |||
heading = heading.getElementsByTagName('span')[0]; | |||
return $(heading).text().toLowerCase() | |||
// jQuery's .text() is inconsistent about whitespace: | |||
.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ') | |||
// remove numbers added by the "Auto-number headings" pref: | |||
.replace(/^[1-9][0-9.]+ ?/, ''); | |||
} | |||
else if (/[hH][1-3]/.test(heading.nodeName)) | |||
break; | |||
heading = heading.previousSibling; | |||
} | |||
return "other boxes"; | |||
}; | |||
function createNavToggle(navFrame){ | |||
var navHead, navToggle, navContent; | |||
for (var j=0; j < navFrame.childNodes.length; j++) { | |||
var div = navFrame.childNodes[j]; | |||
switch (div.className) { | |||
case 'NavHead': | |||
navHead = div; | |||
break; | |||
case 'NavContent': | |||
navContent = div; | |||
break; | |||
} | |||
} | |||
if (!navHead || !navContent) | |||
return; | |||
// Step 1, don't react when a subitem is clicked. | |||
for (var i=0; i<navHead.childNodes.length; i++) { | |||
var child = navHead.childNodes[i]; | |||
if (child.nodeName == "A") { | |||
child.onclick = function (e) | |||
{ | |||
if (e && e.stopPropagation) | |||
e.stopPropagation(); | |||
else | |||
window.event.cancelBubble = true; | |||
} | |||
} | |||
} | |||
// Step 2, toggle visibility when bar is clicked. | |||
// NOTE This function was chosen due to some funny behaviour in Safari. | |||
navToggle = newNode('a', {href: 'javascript:(function(){})()'}, ''); | |||
navHead.insertBefore(newNode('span', {'class': 'NavToggle'}, '[', navToggle, ']'), navHead.firstChild); | |||
navHead.style.cursor = "pointer"; | |||
navHead.onclick = VisibilityToggles.register(NavToggleCategory(navFrame), | |||
function show() { | |||
navToggle.innerHTML = NavigationBarHide; | |||
if (navContent) | |||
navContent.style.display = "block"; | |||
}, | |||
function hide() { | |||
navToggle.innerHTML = NavigationBarShow; | |||
if (navContent) | |||
navContent.style.display = "none"; | |||
}); | |||
}; | |||
addOnloadHook( function () | |||
{ | |||
var divs = $(".NavFrame"); | |||
for (var i=0; i<divs.length; i++) { | |||
// NOTE: some templates use a class of NavFrame for the style, but for legacy reasons, are not NavFrames | |||
if (divs[i].className == "NavFrame") { | |||
createNavToggle(divs[i]); | |||
} | |||
} | |||
}); | |||
/*</pre> | |||
/** Test if an element has a certain class ************************************** | /** Test if an element has a certain class ************************************** | ||
* | * |
Revision as of 16:44, 8 January 2013
/** 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 );
=== NavBars ===
<pre>*/
var NavigationBarHide = 'hide ▲';
var NavigationBarShow = 'show ▼';
function NavToggleCategory(navFrame)
{
var table = navFrame.getElementsByTagName('table')[0];
if (table && table.className == "translations")
return "translations";
var heading = navFrame.previousSibling;
while (heading) {
if (/[hH][4-6]/.test(heading.nodeName)) {
if (heading.getElementsByTagName('span')[1])
heading = heading.getElementsByTagName('span')[1];
else
heading = heading.getElementsByTagName('span')[0];
return $(heading).text().toLowerCase()
// jQuery's .text() is inconsistent about whitespace:
.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ')
// remove numbers added by the "Auto-number headings" pref:
.replace(/^[1-9][0-9.]+ ?/, '');
}
else if (/[hH][1-3]/.test(heading.nodeName))
break;
heading = heading.previousSibling;
}
return "other boxes";
};
function createNavToggle(navFrame){
var navHead, navToggle, navContent;
for (var j=0; j < navFrame.childNodes.length; j++) {
var div = navFrame.childNodes[j];
switch (div.className) {
case 'NavHead':
navHead = div;
break;
case 'NavContent':
navContent = div;
break;
}
}
if (!navHead || !navContent)
return;
// Step 1, don't react when a subitem is clicked.
for (var i=0; i<navHead.childNodes.length; i++) {
var child = navHead.childNodes[i];
if (child.nodeName == "A") {
child.onclick = function (e)
{
if (e && e.stopPropagation)
e.stopPropagation();
else
window.event.cancelBubble = true;
}
}
}
// Step 2, toggle visibility when bar is clicked.
// NOTE This function was chosen due to some funny behaviour in Safari.
navToggle = newNode('a', {href: 'javascript:(function(){})()'}, '');
navHead.insertBefore(newNode('span', {'class': 'NavToggle'}, '[', navToggle, ']'), navHead.firstChild);
navHead.style.cursor = "pointer";
navHead.onclick = VisibilityToggles.register(NavToggleCategory(navFrame),
function show() {
navToggle.innerHTML = NavigationBarHide;
if (navContent)
navContent.style.display = "block";
},
function hide() {
navToggle.innerHTML = NavigationBarShow;
if (navContent)
navContent.style.display = "none";
});
};
addOnloadHook( function ()
{
var divs = $(".NavFrame");
for (var i=0; i<divs.length; i++) {
// NOTE: some templates use a class of NavFrame for the style, but for legacy reasons, are not NavFrames
if (divs[i].className == "NavFrame") {
createNavToggle(divs[i]);
}
}
});
/*</pre>
/** Test if an element has a certain class **************************************
*
* Description: Uses regular expressions and caching for better performance.
* Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
*/
var hasClass = ( function() {
var reCache = {};
return function( element, className ) {
return ( reCache[className] ? reCache[className] : ( reCache[className] = new RegExp( "(?:\\s|^)" + className + "(?:\\s|$)" ) ) ).test( element.className );
};
})();
/* For Favicon */
<!-- document.write("<link rel='shortcut icon' href='http://conlang.wikkii.com/w/images/conlang/uploads/2/26/Favicon.png' type='image/x-icon'>"); -->