FANDOM


참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 갱신해야 합니다.

  • 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R 을 입력 (Mac에서는 ⌘-R)
  • 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
  • 인터넷 익스플로러: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
  • 컨커러: 새로고침을 클릭하거나 F5를 입력
  • 오페라: 도구→설정에서 캐시를 비움
/**
 * Live Reference
 * 
 * Makes a tooltip pop up when users mouseover a citation link.
 * Compared to the "Reference Tooltips", this module:
 * 1. does not have configuration menu
 * 2. is significantly faster
 * 3. flips tooltip when it gets out of the screen.
 * 
 * @Author   User:Cafeinlove
 * @License  MIT License
 */
void function( window, document, undefined ) {
 
    "use strict";
 
    // excluded pages namespace numbers
    var excludedNS = [-1, 8]; // Special, MediaWiki
 
    if ( excludedNS.indexOf( mw.config.get("wgNamespaceNumber") ) > 0 ) return;
    if ( mw.config.get( "wgAction" ) != "view" ) return;
 
    // triggering elements (links like [1], [2]...)
    var content = document.getElementById( "mw-content-text" );
    var citations = content.getElementsByClassName( "reference" );
 
    if ( citations.length === 0 ) return;
 
    var tooltip; // dynamic tooltip
    var animation; // animationFrame queue
 
    void function init() {
        // create tooltip element and append it to body element
        tooltip = document.createElement( "div" );
        tooltip.id = "liveReference";
        document.body.appendChild( tooltip );
 
        // initialize mouse events
        content.addEventListener( "mouseover", function( event ) {
            checkTarget( event.target, setTooltip );
        });
        content.addEventListener( "mouseout", function( event ) {
            checkTarget( event.target, resetTooltip );
        });
    }();
 
    function checkTarget( target, callback ) {
        if ( target.tagName != "A" ) return;
        if ( !target.parentNode.classList.contains( "reference" ) ) return;
 
        callback.name == "setTooltip" ? callback( target ) : callback();
    }
 
    function setTooltip( trigger ) {
        var sourceHash = trigger.hash.replace( /\./g, "\\." );
        var sourceEl = document.querySelector( sourceHash + " .reference-text" );
        var scroll = {
            top: document.body.scrollTop || document.documentElement.scrollTop,
            left: document.body.scrollLeft || document.documentElement.scrollLeft
        };
        var rect = trigger.getBoundingClientRect();
        var isInViewport = ( rect.top - tooltip.offsetHeight ) > 100;
 
        // position the tooltip
        tooltip.style.top = ( scroll.top + rect.top ) + "px";
        tooltip.style.left = ( scroll.left + rect.left ) + "px";
 
        // copy content from target element to the tooltip
        tooltip.innerHTML = sourceEl.innerHTML;
 
        // flip the tooltip if it is going off the viewport
        if ( !isInViewport ) tooltip.classList.add( "is-flipped" );
 
        // fade in the tooltip
        fadeIn( tooltip );
    }
 
    function resetTooltip() {
        fadeOut( tooltip, function() {
            // reset flip
            tooltip.className = "";
 
            // remove content
            while ( tooltip.lastChild ) {
                tooltip.removeChild( tooltip.lastChild );
            }
        });
    }
 
    function fadeIn( el ) {
        var opacity = 0;
        var interval = 1 / 8;
 
        el.style.opacity = opacity;
        el.style.visibility = "visible";
 
        function animate() {
            opacity += interval;
 
            if ( opacity < 1 ) {
                el.style.opacity = opacity;
                animation = window.requestAnimationFrame( animate );
            } else {
                el.style.opacity = 1;
                return true;
            }
        }
 
        stopAnimation();
        animate();
    }
 
    function fadeOut( el, callback ) {
        var opacity = 1;
        var interval = 1 / 8;
 
        function animate() {
            opacity -= interval;
 
            if ( opacity > 0 ) {
                el.style.opacity = opacity;
                animation = window.requestAnimationFrame( animate );
            } else {
                el.style.opacity = 0;
                el.removeAttribute( "style" );
 
                if ( typeof callback == "function" ) callback();
 
                return true;
            }
        }
 
        stopAnimation();
        animate();
    }
 
    function stopAnimation() {
        if ( animation ) {
            window.cancelAnimationFrame( animation );
            animation = undefined;
        }
    }
 
}( window, document );