|
/**
* @source [www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL](https://www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL)
* @rev 6
*/
});
/* Collapsible inlineInline footnotes ({{footnote}}) —need NO JavaScript: the note is click-triggeredshown POPOVER.by
the browser's native title tooltip on desktop and a CSS attr(title) bubble
Clicking the "note" chip opens the note as a card that floats above the
on touch (see MediaWiki:Common.css .ed-fn rules). */
text (CSS does the positioning); the note text stays in the DOM at all
times, so the bot reads it from the parsed HTML regardless. Behaviour:
one card open at a time; .ed-fn-flip opens the card leftward when the
chip sits in the right part of the viewport; outside-click and Escape
dismiss; Enter/Space + aria-expanded for keyboard and screen readers. */
$( function () {
$( '.ed-fn-chip' ).attr( { role: 'button', tabindex: 0, 'aria-expanded': 'false' } );
function closeAll( except ) {
$( '.ed-fn.ed-fn-open' ).each( function () {
if ( this !== except ) {
$( this ).removeClass( 'ed-fn-open ed-fn-flip' )
.children( '.ed-fn-chip' ).attr( 'aria-expanded', 'false' );
}
} );
}
$( document ).on( 'click keydown', '.ed-fn-chip', function ( e ) {
if ( e.type === 'keydown' && e.key !== 'Enter' && e.key !== ' ' ) {
return;
}
e.preventDefault();
var $fn = $( this ).closest( '.ed-fn' ),
willOpen = !$fn.hasClass( 'ed-fn-open' );
closeAll( $fn[ 0 ] );
$fn.toggleClass( 'ed-fn-open', willOpen );
if ( willOpen ) {
// open the card leftward when the chip is in the right 40% of the viewport
var rect = this.getBoundingClientRect();
$fn.toggleClass( 'ed-fn-flip', rect.left > window.innerWidth * 0.6 );
} else {
$fn.removeClass( 'ed-fn-flip' );
}
$( this ).attr( 'aria-expanded', willOpen ? 'true' : 'false' );
} );
// click anywhere outside an .ed-fn, or press Escape, to dismiss
$( document ).on( 'click', function ( e ) {
if ( !$( e.target ).closest( '.ed-fn' ).length ) {
closeAll( null );
}
} );
$( document ).on( 'keydown', function ( e ) {
if ( e.key === 'Escape' ) {
closeAll( null );
}
} );
} );
|