MediaWiki:Gadget-refTooltip.js

$( function { 'use strict';

var $tooltip = $, $tooltipText = $, $tooltipArrow = $, show, hide;

importStylesheet( 'User:Majr/refTooltip.css' );

// Not really happy with this function; improvements wanted! function setPos { if ( !$tooltip.length ) { return; }	var $ref, tooltipWidth, tooltipOuterWidth, tooltipOuterHeight, offset = {}, refWidth, winWidth, pos = {}, posArr = {}; $ref = $( document.getElementById( $tooltip.attr( 'data-ref' ) ) ); tooltipWidth = Math.round( $tooltipText.width ); tooltipOuterWidth = Math.round( $tooltipText.outerWidth ); tooltipOuterHeight = Math.round( $tooltipText.outerHeight( true ) ); offset.x = Math.round( $ref.offset.left ); // 28 accounts for curse netbar, which throws off vertical offsets offset.y = Math.round( $ref.offset.top ) - 28; winWidth = $( window ).width; refWidth = $ref.width; // Get the tooltip's left pos, adjusting if it is offscreen if ( offset.x - 10 + tooltipOuterWidth < winWidth ) { pos.x = offset.x - 10; } else { pos.x = offset.x - ( offset.x + tooltipOuterWidth - winWidth ); // Clamp offset to end of ref tag if ( offset.x - pos.x > tooltipWidth - ( refWidth / 2 ) ) { pos.x = ( offset.x - tooltipWidth ) + ( refWidth / 2 ) + 10; }	}	// Position the arrow's left pos posArr.x = offset.x + ( refWidth / 2 ) - 10; // Get the tooltip's top pos, moving it and the arrow under the ref if it is off-screen if ( offset.y - tooltipOuterHeight - $( window ).scrollTop < 1 ) { $tooltip.addClass( 'flipped' ); // 13 is ref height pos.y = offset.y + 13; posArr.y = pos.y;	} else { $tooltip.removeClass( 'flipped' ); pos.y = offset.y - tooltipOuterHeight; // 11 is arrow height posArr.y = offset.y - 11; }	// Set the positions $tooltipText.css( { left: pos.x, top: pos.y } ); $tooltipArrow.css( { left: posArr.x, top: posArr.y } ); }

// When anywhere but the tooltip is clicked, remove it immediately $( window ).click( function( event ) {	if ( !$tooltip.length ) {		return;	}	if ( !$tooltip.has( event.target ).length ) {		$tooltip.remove;	} } );

// Jslinks need their own handler, as they don't allow propagation (due to sortable tables) $( '.jslink' ).click( function { $tooltip.remove; } );

$( '#mw-content-text' ).on( {	mouseenter: function {		var $ref = $( this ), refId = $ref.prop( 'id' ),			$refText = $( document.getElementById( $ref.find( 'a' ).prop( 'href' ).split( '#' )[1] ) );		clearTimeout( hide );		// Start the tooltip if timeout succeeds		show = setTimeout( function { // If we didn't hover over the current tooltip if ( $tooltip.attr( 'data-ref' ) !== refId ) { // Get rid of any existing tooltip $tooltip.remove; // Create the tooltip $tooltip = $( ' ' ) .attr( {						id: 'ref-tooltip',						'data-ref': refId					} ) // Callback to the ref's hover functions when the tooltip is hovered over .hover(						function { $ref.mouseenter },						function { $ref.mouseleave }					); $tooltipText = $( ' ' ).attr( 'id', 'ref-tooltip-text' ) .html( $refText.find( '.cite-reference-text' ).html ).appendTo( $tooltip ); $tooltipArrow = $( ' ' ).attr( 'id', 'ref-tooltip-arrow' ).appendTo( $tooltip ); $tooltip.appendTo( 'body' ); setPos; }		}, 200 );	},	mouseleave: function {		clearTimeout( show );		// Remove the tooltip if timeout succeeds		hide = setTimeout( function { $tooltip.remove; }, 300 );	} }, '.reference' );

} );