You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.1 KiB
JavaScript
102 lines
3.1 KiB
JavaScript
$( function () {
|
|
// sidebar-chunk only applies to desktop-small, but the toggles are hidden at
|
|
// other resolutions regardless and the css overrides any visible effects.
|
|
var $dropdowns = $( '#personal, #p-variants-desktop, .sidebar-chunk' );
|
|
|
|
/**
|
|
* Desktop menu click-toggling
|
|
*
|
|
* We're not even checking if it's desktop because the classes in play have no effect
|
|
* on mobile regardless... this may break things at some point, though.
|
|
*/
|
|
|
|
/**
|
|
* Close all dropdowns
|
|
*/
|
|
function closeOpen() {
|
|
$dropdowns.removeClass( 'dropdown-active' );
|
|
}
|
|
|
|
/**
|
|
* Click behaviour
|
|
*/
|
|
$dropdowns.on( 'click', function ( e ) {
|
|
// Check if it's already open so we don't open it again
|
|
// eslint-disable-next-line no-jquery/no-class-state
|
|
if ( $( this ).hasClass( 'dropdown-active' ) ) {
|
|
if ( $( e.target ).closest( $( 'h2, #p-variants-desktop h3' ) ).length > 0 ) {
|
|
// treat reclick on the header as a toggle
|
|
closeOpen();
|
|
}
|
|
// Clicked inside an open menu; don't do anything
|
|
} else {
|
|
closeOpen();
|
|
e.stopPropagation(); // stop hiding it!
|
|
$( this ).addClass( 'dropdown-active' );
|
|
}
|
|
} );
|
|
$( document ).on( 'click', function ( e ) {
|
|
if ( $( e.target ).closest( $dropdowns ).length > 0 ) {
|
|
// Clicked inside an open menu; don't close anything
|
|
} else {
|
|
closeOpen();
|
|
}
|
|
} );
|
|
} );
|
|
|
|
mw.hook( 'wikipage.content' ).add( function ( $content ) {
|
|
// Gotta wrap them for this to work; maybe later the parser etc will do this for us?!
|
|
$content.find( 'div > table:not( table table )' ).wrap( '<div class="content-table-wrapper"><div class="content-table"></div></div>' );
|
|
$content.find( '.content-table-wrapper' ).prepend( '<div class="content-table-left"></div><div class="content-table-right"></div>' );
|
|
|
|
/**
|
|
* Set up borders for experimental overflowing table scrolling
|
|
*
|
|
* I have no idea what I'm doing.
|
|
*
|
|
* @param {jQuery} $table
|
|
*/
|
|
function setScrollClass( $table ) {
|
|
var $tableWrapper = $table.parent(),
|
|
$wrapper = $tableWrapper.parent(),
|
|
// wtf browser rtl implementations
|
|
scroll = Math.abs( $tableWrapper.scrollLeft() );
|
|
|
|
// 1 instead of 0 because of weird rtl rounding errors or something (?!)
|
|
if ( scroll > 1 ) {
|
|
$wrapper.addClass( 'scroll-left' );
|
|
} else {
|
|
$wrapper.removeClass( 'scroll-left' );
|
|
}
|
|
|
|
if ( $table.outerWidth() - $tableWrapper.innerWidth() - scroll > 1 ) {
|
|
$wrapper.addClass( 'scroll-right' );
|
|
} else {
|
|
$wrapper.removeClass( 'scroll-right' );
|
|
}
|
|
}
|
|
|
|
$content.find( '.content-table' ).on( 'scroll', function () {
|
|
setScrollClass( $( this ).children( 'table' ).first() );
|
|
} );
|
|
|
|
/**
|
|
* Mark overflowed tables for scrolling
|
|
*/
|
|
function unOverflowTables() {
|
|
$content.find( '.content-table > table' ).each( function () {
|
|
var $table = $( this ),
|
|
$wrapper = $table.parent().parent();
|
|
if ( $table.outerWidth() > $wrapper.outerWidth() ) {
|
|
$wrapper.addClass( 'overflowed' );
|
|
setScrollClass( $table );
|
|
} else {
|
|
$wrapper.removeClass( 'overflowed scroll-left scroll-right fixed-scrollbar-container' );
|
|
}
|
|
} );
|
|
}
|
|
|
|
unOverflowTables();
|
|
$( window ).on( 'resize', unOverflowTables );
|
|
} );
|