Main Page
Difference between revisions of "MediaWiki:Common.js"
Jump to navigation
Jump to search
(testing tabs) |
m |
||
Line 107: | Line 107: | ||
{{Help page}} | {{Help page}} | ||
− | /* JS Tab System, | + | /** |
− | + | * JS Tab System, jacked and hacked from the jsprefs in wikibits.js | |
− | + | * | |
− | + | * Original code by Dantman | |
− | + | * Refactored a bit by Jack Phoenix on 11 April 2014 | |
− | + | * @note No doubt that this could be greatly simplified by converting this to jQuery, | |
− | + | * but I think it's nice to have this JS thingy fully reusable. | |
+ | */ | ||
+ | var TabSystem = { | ||
+ | /** | ||
+ | * @property {boolean} | ||
+ | * Is the user's browser a KHTML-based one (usually, but not always, Konqueror)? | ||
+ | */ | ||
+ | isKHTML: ( navigator.vendor == 'KDE' || ( document.childNodes && !document.all && !navigator.taintEnabled ) ), | ||
− | + | /** | |
− | + | * @property {boolean} | |
− | + | * Is the user's browser Opera? | |
− | + | */ | |
+ | isOpera: navigator.userAgent.toLowerCase().indexOf( 'opera' ) != -1, | ||
− | . | + | /* |
− | + | Written by Jonathan Snook, http://www.snook.ca/jonathan | |
− | + | Add-ons by Robert Nyman, http://www.robertnyman.com | |
− | + | Author says "The credit comment is all it takes, no license. Go crazy with it!:-)" | |
− | + | From http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/ | |
− | + | */ | |
− | + | getElementsByClassName: function( oElm, strTagName, oClassNames ) { | |
− | + | var arrReturnElements = []; | |
− | + | if ( typeof oElm.getElementsByClassName == 'function' ) { | |
− | + | /* Use a native implementation where possible FF3, Saf3.2, Opera 9.5 */ | |
− | + | var arrNativeReturn = oElm.getElementsByClassName( oClassNames ); | |
− | + | if ( strTagName == '*' ) { | |
− | } | + | return arrNativeReturn; |
+ | } | ||
+ | for ( var h = 0; h < arrNativeReturn.length; h++ ) { | ||
+ | if ( arrNativeReturn[h].tagName.toLowerCase() == strTagName.toLowerCase() ) { | ||
+ | arrReturnElements[arrReturnElements.length] = arrNativeReturn[h]; | ||
+ | } | ||
+ | } | ||
+ | return arrReturnElements; | ||
+ | } | ||
− | . | + | var arrElements = ( strTagName == '*' && oElm.all ) ? oElm.all : oElm.getElementsByTagName( strTagName ); |
− | + | var arrRegExpClassNames = []; | |
− | + | if ( typeof oClassNames == 'object' ) { | |
− | + | for ( var i = 0; i < oClassNames.length; i++ ) { | |
− | + | arrRegExpClassNames[arrRegExpClassNames.length] = | |
− | + | new RegExp( "(^|\\s)" + oClassNames[i].replace( /\-/g, "\\-" ) + "(\\s|$)" ); | |
− | + | } | |
− | + | } else { | |
− | + | arrRegExpClassNames[arrRegExpClassNames.length] = | |
− | } | + | new RegExp( "(^|\\s)" + oClassNames.replace( /\-/g, "\\-" ) + "(\\s|$)" ); |
+ | } | ||
− | . | + | var oElement; |
− | + | var bMatchesAll; | |
− | } | + | for ( var j = 0; j < arrElements.length; j++ ) { |
+ | oElement = arrElements[j]; | ||
+ | bMatchesAll = true; | ||
+ | for ( var k = 0; k < arrRegExpClassNames.length; k++ ) { | ||
+ | if ( !arrRegExpClassNames[k].test( oElement.className ) ) { | ||
+ | bMatchesAll = false; | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | if ( bMatchesAll ) { | ||
+ | arrReturnElements[arrReturnElements.length] = oElement; | ||
+ | } | ||
+ | } | ||
− | + | return arrReturnElements; | |
− | + | }, | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | } | ||
− | . | + | /** |
− | + | * Main function that performs all the magic on all div elements that have | |
− | + | * class="tab" and are inside a div that has class="tabcontainer". | |
− | } | + | */ |
+ | main: function() { | ||
+ | var tabcontainers = TabSystem.getElementsByClassName( document, 'div', 'tabcontainer' ); | ||
+ | for ( var tc = 0; tc < tabcontainers.length; tc++ ) { | ||
+ | if ( !tabcontainers[tc] || !document.createElement ) { | ||
+ | return; | ||
+ | } | ||
+ | if ( tabcontainers[tc].nodeName.toLowerCase() == 'a' ) { | ||
+ | return; // Occasional IE problem | ||
+ | } | ||
− | . | + | tabcontainers[tc].className += ' jstabs'; |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | var sections = []; | ||
+ | var children = tabcontainers[tc].childNodes; | ||
+ | var seci = 0; | ||
− | .tabsection { | + | for ( var i = 0; i < children.length; i++ ) { |
− | + | if ( children[i].className && children[i].className.match( /tab/i ) ) { | |
− | + | children[i].id = 'tabsection-' + seci + '-' + tc; | |
− | + | children[i].className += ' tabsection'; | |
− | } | + | // Opera and KHTML-based browsers get a special class |
+ | if ( TabSystem.isOpera || TabSystem.isKHTML ) { | ||
+ | children[i].className += ' tabsection operatabsection'; | ||
+ | } | ||
+ | var legends = TabSystem.getElementsByClassName( children[i], 'div', 'tab' ); | ||
+ | sections[seci] = {}; | ||
+ | legends[0].className = 'mainTab'; | ||
+ | if ( legends[0] && legends[0].firstChild.nodeValue ) { | ||
+ | sections[seci].text = legends[0].firstChild.nodeValue; | ||
+ | } else { | ||
+ | sections[seci].text = '# ' + seci; | ||
+ | } | ||
+ | sections[seci].secid = children[i].id; | ||
+ | seci++; | ||
+ | if ( sections.length != 1 ) { | ||
+ | children[i].style.display = 'none'; | ||
+ | } else { | ||
+ | var selectedid = children[i].id; | ||
+ | } | ||
+ | } | ||
+ | } | ||
− | . | + | var toc = document.createElement( 'ul' ); |
− | + | toc.className = 'tabtoc'; | |
− | + | toc.id = 'tabtoc-' + tc; | |
− | + | toc.selectedid = selectedid; | |
− | |||
− | . | + | for ( i = 0; i < sections.length; i++ ) { |
− | + | var li = document.createElement( 'li' ); | |
− | } | + | if ( i === 0 ) { |
+ | li.className = 'selected'; | ||
+ | } | ||
+ | var a = document.createElement( 'a' ); | ||
+ | a.href = '#' + sections[i].secid; | ||
+ | a.onmousedown = a.onclick = TabSystem.uncoverTabSection; | ||
+ | a.appendChild( document.createTextNode( sections[i].text ) ); | ||
+ | a.tc = tc; | ||
+ | a.secid = sections[i].secid; | ||
+ | li.appendChild( a ); | ||
+ | toc.appendChild( li ); | ||
+ | } | ||
− | . | + | tabcontainers[tc].parentNode.insertBefore( toc, tabcontainers[tc] ); |
− | + | } | |
− | } | + | }, |
− | . | + | /** |
− | display: | + | * Show the contents of a tab section when the user clicks on the tab. |
+ | * | ||
+ | * @return {boolean} Always false | ||
+ | */ | ||
+ | uncoverTabSection: function() { | ||
+ | var oldsecid = this.parentNode.parentNode.selectedid; | ||
+ | var newsec = document.getElementById( this.secid ); | ||
+ | if ( oldsecid != this.secid ) { | ||
+ | var ul = document.getElementById( 'tabtoc-' + this.tc ); | ||
+ | document.getElementById( oldsecid ).style.display = 'none'; | ||
+ | newsec.style.display = 'block'; | ||
+ | ul.selectedid = this.secid; | ||
+ | var lis = ul.getElementsByTagName( 'li' ); | ||
+ | for ( var i = 0; i < lis.length; i++ ) { | ||
+ | lis[i].className = ''; | ||
+ | } | ||
+ | this.parentNode.className = 'selected'; | ||
+ | } | ||
+ | return false; | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | // Attach the onload handler. This is the only not-so-self-contained part of | ||
+ | // this script: we use either jQuery or the older standard MediaWiki onload | ||
+ | // mechanism to run the script on page load. If you're going to use this little | ||
+ | // script on a non-MediaWiki-based site, you'll want to | ||
+ | if ( typeof $ === 'function' ) { | ||
+ | $( document ).ready( function() { | ||
+ | TabSystem.main(); | ||
+ | } ); | ||
+ | } else if ( typeof addOnloadHook === 'function' ) { | ||
+ | addOnloadHook( TabSystem.main ); | ||
} | } |
Revision as of 06:41, 20 January 2016
/* Any JavaScript here will be loaded for all users on every page load. */ /** * Collapsible tables * * @version 2.0.2 (2014-03-14) * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-collapsibleTables.js * @author [[User:R. Koot]] * @author [[User:Krinkle]] * @deprecated Since MediaWiki 1.20: Use class="mw-collapsible" instead which * is supported in MediaWiki core. */ /*global $, mw */ 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; 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 createClickHandler( tableIndex ) { return function ( e ) { e.preventDefault(); collapseTable( tableIndex ); }; } function createCollapseButtons() { var tableIndex = 0; var NavigationBoxes = {}; var Tables = document.getElementsByTagName( 'table' ); var i; 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 ); // TODO: Declare styles in [[MediaWiki:Gadget-collapsibleTables.css]] // Button.className = 'collapseButton'; Button.style.styleFloat = 'right'; Button.style.cssFloat = 'right'; Button.style.fontWeight = 'normal'; Button.style.textAlign = 'right'; Button.style.width = '6em'; ButtonLink.style.color = Header.style.color; ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex ); ButtonLink.setAttribute( 'href', '#' ); $( ButtonLink ).on( 'click', createClickHandler( tableIndex ) ); ButtonLink.appendChild( ButtonText ); Button.appendChild( document.createTextNode( '[' ) ); Button.appendChild( ButtonLink ); Button.appendChild( document.createTextNode( ']' ) ); Header.insertBefore( Button, Header.firstChild ); tableIndex++; } } for ( i = 0; i < tableIndex; i++ ) { if ( $( NavigationBoxes[i] ).hasClass( 'collapsed' ) || ( tableIndex >= autoCollapse && $( NavigationBoxes[i] ).hasClass( 'autocollapse' ) ) ) { collapseTable( i ); } } } mw.hook( 'wikipage.content' ).add( createCollapseButtons ); {{Help page}} /** * JS Tab System, jacked and hacked from the jsprefs in wikibits.js * * Original code by Dantman * Refactored a bit by Jack Phoenix on 11 April 2014 * @note No doubt that this could be greatly simplified by converting this to jQuery, * but I think it's nice to have this JS thingy fully reusable. */ var TabSystem = { /** * @property {boolean} * Is the user's browser a KHTML-based one (usually, but not always, Konqueror)? */ isKHTML: ( navigator.vendor == 'KDE' || ( document.childNodes && !document.all && !navigator.taintEnabled ) ), /** * @property {boolean} * Is the user's browser Opera? */ isOpera: navigator.userAgent.toLowerCase().indexOf( 'opera' ) != -1, /* Written by Jonathan Snook, http://www.snook.ca/jonathan Add-ons by Robert Nyman, http://www.robertnyman.com Author says "The credit comment is all it takes, no license. Go crazy with it!:-)" From http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/ */ getElementsByClassName: function( oElm, strTagName, oClassNames ) { var arrReturnElements = []; if ( typeof oElm.getElementsByClassName == 'function' ) { /* Use a native implementation where possible FF3, Saf3.2, Opera 9.5 */ var arrNativeReturn = oElm.getElementsByClassName( oClassNames ); if ( strTagName == '*' ) { return arrNativeReturn; } for ( var h = 0; h < arrNativeReturn.length; h++ ) { if ( arrNativeReturn[h].tagName.toLowerCase() == strTagName.toLowerCase() ) { arrReturnElements[arrReturnElements.length] = arrNativeReturn[h]; } } return arrReturnElements; } var arrElements = ( strTagName == '*' && oElm.all ) ? oElm.all : oElm.getElementsByTagName( strTagName ); var arrRegExpClassNames = []; if ( typeof oClassNames == 'object' ) { for ( var i = 0; i < oClassNames.length; i++ ) { arrRegExpClassNames[arrRegExpClassNames.length] = new RegExp( "(^|\\s)" + oClassNames[i].replace( /\-/g, "\\-" ) + "(\\s|$)" ); } } else { arrRegExpClassNames[arrRegExpClassNames.length] = new RegExp( "(^|\\s)" + oClassNames.replace( /\-/g, "\\-" ) + "(\\s|$)" ); } var oElement; var bMatchesAll; for ( var j = 0; j < arrElements.length; j++ ) { oElement = arrElements[j]; bMatchesAll = true; for ( var k = 0; k < arrRegExpClassNames.length; k++ ) { if ( !arrRegExpClassNames[k].test( oElement.className ) ) { bMatchesAll = false; break; } } if ( bMatchesAll ) { arrReturnElements[arrReturnElements.length] = oElement; } } return arrReturnElements; }, /** * Main function that performs all the magic on all div elements that have * class="tab" and are inside a div that has class="tabcontainer". */ main: function() { var tabcontainers = TabSystem.getElementsByClassName( document, 'div', 'tabcontainer' ); for ( var tc = 0; tc < tabcontainers.length; tc++ ) { if ( !tabcontainers[tc] || !document.createElement ) { return; } if ( tabcontainers[tc].nodeName.toLowerCase() == 'a' ) { return; // Occasional IE problem } tabcontainers[tc].className += ' jstabs'; var sections = []; var children = tabcontainers[tc].childNodes; var seci = 0; for ( var i = 0; i < children.length; i++ ) { if ( children[i].className && children[i].className.match( /tab/i ) ) { children[i].id = 'tabsection-' + seci + '-' + tc; children[i].className += ' tabsection'; // Opera and KHTML-based browsers get a special class if ( TabSystem.isOpera || TabSystem.isKHTML ) { children[i].className += ' tabsection operatabsection'; } var legends = TabSystem.getElementsByClassName( children[i], 'div', 'tab' ); sections[seci] = {}; legends[0].className = 'mainTab'; if ( legends[0] && legends[0].firstChild.nodeValue ) { sections[seci].text = legends[0].firstChild.nodeValue; } else { sections[seci].text = '# ' + seci; } sections[seci].secid = children[i].id; seci++; if ( sections.length != 1 ) { children[i].style.display = 'none'; } else { var selectedid = children[i].id; } } } var toc = document.createElement( 'ul' ); toc.className = 'tabtoc'; toc.id = 'tabtoc-' + tc; toc.selectedid = selectedid; for ( i = 0; i < sections.length; i++ ) { var li = document.createElement( 'li' ); if ( i === 0 ) { li.className = 'selected'; } var a = document.createElement( 'a' ); a.href = '#' + sections[i].secid; a.onmousedown = a.onclick = TabSystem.uncoverTabSection; a.appendChild( document.createTextNode( sections[i].text ) ); a.tc = tc; a.secid = sections[i].secid; li.appendChild( a ); toc.appendChild( li ); } tabcontainers[tc].parentNode.insertBefore( toc, tabcontainers[tc] ); } }, /** * Show the contents of a tab section when the user clicks on the tab. * * @return {boolean} Always false */ uncoverTabSection: function() { var oldsecid = this.parentNode.parentNode.selectedid; var newsec = document.getElementById( this.secid ); if ( oldsecid != this.secid ) { var ul = document.getElementById( 'tabtoc-' + this.tc ); document.getElementById( oldsecid ).style.display = 'none'; newsec.style.display = 'block'; ul.selectedid = this.secid; var lis = ul.getElementsByTagName( 'li' ); for ( var i = 0; i < lis.length; i++ ) { lis[i].className = ''; } this.parentNode.className = 'selected'; } return false; } }; // Attach the onload handler. This is the only not-so-self-contained part of // this script: we use either jQuery or the older standard MediaWiki onload // mechanism to run the script on page load. If you're going to use this little // script on a non-MediaWiki-based site, you'll want to if ( typeof $ === 'function' ) { $( document ).ready( function() { TabSystem.main(); } ); } else if ( typeof addOnloadHook === 'function' ) { addOnloadHook( TabSystem.main ); }