Difference between revisions of "MediaWiki:Common.js"
From SVR Wiki
m (Test) |
(Navbar/navbox code) |
||
(One intermediate revision by the same user not shown) | |||
Line 1: | Line 1: | ||
/* 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. */ | ||
− | mw.loader.using( | + | |
+ | /** | ||
+ | * Keep code in MediaWiki:Common.js to a minimum as it is unconditionally | ||
+ | * loaded for all users on every wiki page. If possible create a gadget that is | ||
+ | * enabled by default instead of adding it here (since gadgets are fully | ||
+ | * optimized ResourceLoader modules with possibility to add dependencies etc.) | ||
+ | * | ||
+ | * Since Common.js isn't a gadget, there is no place to declare its | ||
+ | * dependencies, so we have to lazy load them with mw.loader.using on demand and | ||
+ | * then execute the rest in the callback. In most cases these dependencies will | ||
+ | * be loaded (or loading) already and the callback will not be delayed. In case a | ||
+ | * dependency hasn't arrived yet it'll make sure those are loaded before this. | ||
+ | */ | ||
+ | |||
+ | /* global mw, $ */ | ||
+ | /* jshint strict:false, browser:true */ | ||
+ | |||
+ | mw.loader.using( ['mediawiki.util', 'mediawiki.notify', 'jquery.client'] ).done( function () { | ||
+ | |||
/* Begin of mw.loader.using callback */ | /* Begin of mw.loader.using callback */ | ||
/** | /** | ||
− | * | + | * Dynamic Navigation Bars (experimental) |
− | |||
− | |||
* | * | ||
− | * | + | * Description: See [[Wikipedia:NavFrame]]. |
− | + | * Maintainers: UNMAINTAINED | |
− | |||
− | * | ||
− | |||
− | |||
*/ | */ | ||
− | var | + | /* set up the words in your language */ |
− | var | + | var NavigationBarHide = '[' + collapseCaption + ']'; |
− | + | var NavigationBarShow = '[' + expandCaption + ']'; | |
− | var | + | var indexNavigationBar = 0; |
− | function | + | /** |
− | var | + | * Shows and hides content and picture (if available) of navigation bars |
− | var | + | * 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 ( ! | + | if ( !NavFrame || !NavToggle ) { |
return false; | 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 ( | + | /* if hidden now */ |
− | for ( | + | } 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(); | |
− | + | }; | |
− | |||
− | |||
− | |||
− | |||
− | function | + | /* adds show/hide-button to navigation bars */ |
− | var | + | function createNavigationBarToggleButton($content) { |
− | var $ | + | var NavChild; |
− | + | /* iterate over all < div >-elements */ | |
+ | var $divs = $content.find( 'div' ); | ||
+ | $divs.each( function ( i, NavFrame ) { | ||
+ | /* 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 ); | ||
} | } | ||
− | } | + | } ); |
} | } | ||
− | mw.hook( 'wikipage.content' ).add( | + | mw.hook( 'wikipage.content' ).add( createNavigationBarToggleButton ); |
+ | |||
+ | /* End of mw.loader.using callback */ | ||
+ | } ); | ||
+ | /* DO NOT ADD CODE BELOW THIS LINE */ |
Latest revision as of 22:12, 20 June 2016
/* Any JavaScript here will be loaded for all users on every page load. */ /** * Keep code in MediaWiki:Common.js to a minimum as it is unconditionally * loaded for all users on every wiki page. If possible create a gadget that is * enabled by default instead of adding it here (since gadgets are fully * optimized ResourceLoader modules with possibility to add dependencies etc.) * * Since Common.js isn't a gadget, there is no place to declare its * dependencies, so we have to lazy load them with mw.loader.using on demand and * then execute the rest in the callback. In most cases these dependencies will * be loaded (or loading) already and the callback will not be delayed. In case a * dependency hasn't arrived yet it'll make sure those are loaded before this. */ /* global mw, $ */ /* jshint strict:false, browser:true */ mw.loader.using( ['mediawiki.util', 'mediawiki.notify', 'jquery.client'] ).done( function () { /* Begin of mw.loader.using callback */ /** * Dynamic Navigation Bars (experimental) * * Description: See [[Wikipedia:NavFrame]]. * Maintainers: UNMAINTAINED */ /* set up the words in your language */ var NavigationBarHide = '[' + collapseCaption + ']'; var NavigationBarShow = '[' + expandCaption + ']'; var indexNavigationBar = 0; /** * 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($content) { var NavChild; /* iterate over all < div >-elements */ var $divs = $content.find( 'div' ); $divs.each( function ( i, NavFrame ) { /* 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 ); } } ); } mw.hook( 'wikipage.content' ).add( createNavigationBarToggleButton ); /* End of mw.loader.using callback */ } ); /* DO NOT ADD CODE BELOW THIS LINE */