MediaWiki:Common.js: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
Line 26:
/**
* @source
* @rev 6
*/
Line 355:
/* Collapsible inline footnotes ({{footnote}}) — click-triggered POPOVER.
Clicking the "note" chip opens the note as a card.
position:FIXED and placed here from the chip's rect — that's required so
text (CSS does the positioning); the note text stays in the DOM at all▼
it escapes the frozen first column's sticky stacking context and the
times, so the bot reads it from the parsed HTML regardless. Behaviour:▼
table's overflow clip (an absolute card would be hidden behind later
one card open at a time; .ed-fn-flip opens the card leftward when the▼
▲
dismiss; Enter/Space + aria-expanded for keyboard and screen readers. */▼
▲ Behaviour: one card open at a time;
viewport near an edge; mobile (<=768px) uses the CSS bottom sheet; outside
click, Escape, and scroll dismiss; Enter/Space + aria-expanded for
$( function () {
$( '.ed-fn-chip' ).attr( { role: 'button', tabindex: 0, 'aria-expanded': 'false' } );
function clearCard( fn ) {
var body = fn.querySelector( '.ed-fn-body' );
if ( body ) { body.style.left = body.style.top = ''; }
}
function closeAll( except ) {
$( '.ed-fn.ed-fn-open' ).each( function () {
if ( this !== except ) {
$( this ).removeClass( 'ed-fn-open
.children( '.ed-fn-chip' ).attr( 'aria-expanded', 'false' );
clearCard( this );
}
} );
}
function placeCard( fn, chip ) {
// mobile uses the CSS fixed bottom sheet — don't set inline coords
if ( window.innerWidth <= 768 ) { return; }
var card = fn.querySelector( '.ed-fn-body' );
if ( !card ) { return; }
card.style.left = 'auto';
card.style.top = 'auto'; // measure natural size first
cw = card.offsetWidth, ch = card.offsetHeight,
vw = window.innerWidth, vh = window.innerHeight,
left = r.left, top = r.bottom + 4;
if ( left + cw > vw - 8 ) { left = Math.max( 8, vw - 8 - cw ); } // clamp right
if ( top + ch > vh - 8 ) { top = Math.max( 8, r.top - 4 - ch ); } // flip above
card.style.left = left + 'px';
card.style.top = top + 'px';
}
Line 383 ⟶ 410:
$fn.toggleClass( 'ed-fn-open', willOpen );
if ( willOpen ) {
placeCard( $fn[ 0 ], this );
▲ var rect = this.getBoundingClientRect();
} else {
}
$( this ).attr( 'aria-expanded', willOpen ? 'true' : 'false' );
} );
//
$( document ).on( 'click', function ( e ) {
if ( !$( e.target ).closest( '.ed-fn' ).length ) {
Line 403 ⟶ 428:
}
} );
window.addEventListener( 'scroll', function () {
closeAll( null );
}, true );
} );
| |||