MediaWiki:Gadget-tooltipRef.js

/**
 * Accès immédiat au contenu des références et notes en bas de page
 * dans une fenêtre contextuelle.
 * auteur : https://fr.wikipedia.org/wiki/Utilisateur:Lgd
 * licence : MIT
 *
 * Utilise : https://fr.wikipedia.org/wiki/MediaWiki:Gadget-tooltipRef.css
 *
 * Paramétrage: ajouter window.tooltipRefHover = true; dans le common.js personnel
 * pour utiliser au survol plutôt qu'au clic
 *
 * {{Catégorisation JS|TooltipRef}}
 */

window.tooltipRefEnabled = true;

if( typeof referenceTooltipsEnabled === 'undefined' ) {
    var tooltipRef = function ( $ ) {

        var backClass = '.mw-cite-backlink';
        var msg_err1 = 'Erreur : note ou référence non trouvée.';
        var msg_err2 = 'Erreur : entrée non trouvée dans la bibliographie.';
        var msg_close = 'Fermer';
        var msg_go1 = 'Aller';
        var msg_go1title = 'Aller à cette référence en fin de page';
        var msg_go2 ='Aller à la bibliographie';
        var tooltipRefTimer = false;


        function fixId( myid ) { // replaces special characters in id name
            return '#' + $.escapeSelector( myid.substr( 1 ) );
        }
        function closeNote() {
            $( '.hasnote' ).removeClass( 'hasnote' );
            $( 'li.tooltipRef' ).remove();
        }
        function closeNoteAfterDelay() {
            tooltipRefTimer = setTimeout( closeNote, 400 );
        }
        function cancelDelayedNoteClosure() {
            clearTimeout( tooltipRefTimer );
        }

        function openNote( $ref ) {
            closeNote();
            var id = $ref.attr( 'href' );
            var note;
            var fallback;
            var idfix = fixId( id );
            if ( $( idfix ).length !== 0 ) {
                note = $( idfix ).clone();
                // copy computed styles to clone as inline styles
                var links1 = $( idfix ).find( 'a.external' );
                var links2 = note.find( 'a.external' );
                links1.each( function ( i, elm ) {
                    var computed = $( elm ).css( [ 'color', 'background-image', 'background-position', 'background-repeat', 'background-size', 'padding-right' ] );
                    links2.eq( i ).css( computed );
                } );
                note.removeAttr( 'id' ).addClass( 'tooltipRef' );
                note.find( backClass ).remove();
                note.find( '[href^="#"]' ).click( function() {
                    if ( $( this ).is( '.open' ) ) {
                        $( '.subnote' ).remove();
                        $( this ).removeClass( 'open' );
                        return false;
                    }
                    $( '.subnote' ).remove();
                    $( '.tooltipRef .open' ).removeClass( 'open' );
                    var id2 = $( this ).attr( 'href' );
                    var more = $( '<a href="' + mw.html.escape( id2 ) + '">' + msg_go2 + '</a>' );
                    more.click( closeNote );
                    var note2;
                    id2 = fixId( id2 );
                    if ( $( id2 ).length !== 0) {
                        note2 = $( id2 ).clone().addClass( 'subnote' ).removeAttr( 'id' );
                        var morep = $( '<p class="more"></p>' );
                        morep.append( more );
                        note2.append( morep );
                    } else {
                        note2 = $( '<span class="subnote">' + msg_err2 + '</span>' );
                    }
                    note.append( note2 );
                    $( this ).addClass( 'open' );
                    return false;
                } );
                fallback = $( '<a href="' + mw.html.escape( id ) + '" class="go" title="' + msg_go1title + '">' + msg_go1 + '</a>&nbsp;' );
                fallback.click( closeNote );
            } else {
                note = $( '<li class="tooltipRef">' + msg_err1 + '</li>' );
            }
            var link = $( '<a href="#" class="close" title="' + msg_close + '">X</a>' );
            link.click( function () {
                closeNote();
                return false;
            } );
            var span = $( '<span class="actions">&nbsp;</span>' );
            span.prepend( fallback ).append( link );
            note.prepend( span );
            if ( typeof tooltipRefHover !== 'undefined' && tooltipRefHover ) {
                note.mouseover( cancelDelayedNoteClosure );
                note.mouseout( closeNoteAfterDelay );
            }
            $( 'body' ).append( note );
            var offset = $ref.offset();
            note.offset( {
                top : offset.top + $ref.height(),
                left: offset.left > 500 ? offset.left - note.outerWidth() : offset.left
            } );
            $ref.addClass( 'hasnote' );
            return false;
        }

        if ( typeof tooltipRefHover !== 'undefined' && tooltipRefHover ) {
            $( 'sup.reference > a' ).mouseenter( function () {
                openNote( $ ( this ) );
            } );
            $( 'sup.reference' ).mouseover( cancelDelayedNoteClosure );
            $( 'sup.reference' ).mouseout( closeNoteAfterDelay );
            $( 'sup.reference > a' ).click( function () {
                return false;
            } );
        } else {
            $( 'sup.reference > a' ).click( function () {
                if ( $( this ).is( '.hasnote' ) ) {
                    closeNote();
                    return false;
                }
                openNote( $( this ) );
                return false;
            } );
        }
    };

    mw.loader.using( 'user', function () {

        // si l'état est null, cela signifie que ce gadget n'est plus listé dans les définitions (ou a été renommé en oubliant de mettre à jour le nom ici)
        // si l'état est resté sur registered, cela signifie que l'utilisateur charge ce gadget autrement que par le ResourceLoader (importScript(), etc.)
        var state = mw.loader.getState( 'ext.gadget.tooltipRef' );
        if ( !state || state === 'registered' ) {
            importStylesheet( 'MediaWiki:Gadget-tooltipRef.css' );
        }

        $( tooltipRef );
    });
}