MediaWiki:Common.js
From BIONICLEsector01
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/***** Spoilers *****/
$( document ).ready(function() {
$( '.hidden-spoilers a' ).attr( 'disabled', 'disabled' ); /* disable links on page load */
});
$( '.spoilers' ).click(function() {
$( this ).toggleClass( 'hidden-spoilers' );
if ( $( this ).hasClass( 'hidden-spoilers' ) ) {
$( this ).find( 'a' ).attr( 'disabled', 'disabled' ); /* disable links (attribute does it for IE, CSS does it for other browsers) */
} else {
$( this ).find( 'a' ).removeAttr( 'disabled' ); /* enable links */
}
});
/***** Tabs for infoboxes.
There can be up to four main tabs, each of which can have up 4 subtabs. They are named like this:
1, 1b, 1c, 1d
2, 2b, 2c, 2d
3, 3b, 3c, 3d
4, 4b, 4c, 4d *****/
// in the beginning set the height of each infobox container to the height of its tallest infobox, hide all the infoboxes, show the start infobox
$( '.infobox-container' ).each( function() {
var infoboxContainer = $( this );
var startInfobox = infoboxContainer.children( '.infobox' + infoboxContainer.attr( 'data-start-infobox' ) )[0]; // get the start infobox (which is specified in the .infobox-container's "data-start-infobox" attribute)
var maxHeight = 0; // can't do infoboxContainer.height(); as the starting value since currently the infoboxContainer has all the boxes visible, so it could be super tall!
infoboxContainer.children( '.infobox' ).each( function() { // iterate through all the infoboxes
if ( maxHeight < $( this ).outerHeight() ) { // if this infobox is taller than the container
maxHeight = $( this ).outerHeight();
}
$( this ).hide().css( 'height', '100%' ); // hide the infobox (if JS is disabled, we want everything to be visible, so we only hide stuff if JS is enabled), have it fill the container
} );
infoboxContainer.css( 'height', maxHeight ); // set the container's height to this infobox's height
$( startInfobox ).show(); // show the start infobox
} );
// show the appropriate infobox when a tab is clicked
$( '.infobox-tab' ).click( function() {
var infoboxContainer = $( this ).closest( '.infobox-container' ); // find the appropriate .infobox-container
var infoboxToShow = infoboxContainer.children( '.infobox' + $( this ).attr( 'data-target' ) ); // get the infobox we want to show (which is specified in the tab's "data-target" attribute)
infoboxContainer.children( '.infobox' ).hide().css( "height", "100%" ); // hide all the infoboxes
$( infoboxToShow ).show(); // show the infobox we want to show
} );
/***** Dropdown code (for era dropdown but can be used for other dropdowns).
Fade code adapted from the Refreshed skin's implementation of fading dropdowns. *****/
function toggleFade( elementToFade ) {
elementToFade.toggleClass( 'faded' );
}
$( document ).click( function( e ) {
var button;
$( '.fadable:not(.faded)' ).each( function () {
// target all open fadable elements
button = $( '#' + $( this ).attr( 'data-button' ) );
if ( !$( e.target ).closest( $( this ) ).length && !$( e.target ).closest( $( button ) ).length ) {
// if starting from the element clicked and moving up the DOM, we don't
// run into that the current .fadable AND we don't run into the .fadable's
// corresponding button...
toggleFade( $( this ) );
}
} );
} );
$( '.fade-trigger' ).click( function( e ) {
var target = $( '#' + $( this ).attr( 'data-target' ) );
toggleFade( target );
} );
mw.loader.load( 'https://brickinsights.com/widgets/js' );