미디어위키:Gadget-ReferenceTooltips-ko.js

window.pg || $(function() {

    // Make sure we are in article, project, or help namespace
    if ( $.inArray(mw.config.get('wgCanonicalNamespace'), [ "", "Project", "Help", "Draft" ]) !== -1 ) {
        mw.messages.set({
            "RT-enable" : "각주 말풍선 켜기",
            "RT-disable" : "각주 말풍선 끄기",
            "RT-disablenote" : "각주 말풍선 기능을 끄면, 이 기능을 문서 아래에 있는 링크를 통해 다시 켤 수 있습니다.",
            "RT-delay" : "말풍선을 띄울 때까지 걸릴 시간(밀리초 단위): ",
            "RT-activationmethod" : "말풍선을 띄울 방법:",
            "RT-hovering" : "마우스 올리기",
            "RT-clicking" : "클릭하기",
            "RT-options" : "각주 말풍선 설정",
            "RT-options-save" : "설정 저장하기",
            "RT-settings" :"말풍선 설정"
        });

        function toggleRT(o){
            mw.loader.using("jquery.cookie",function(){
                $.cookie("RTsettings", o + "|" + settings[1] + "|" + settings[2], {path:"/",expires:90});
                location.reload();
            });
        }
        
        var settings = document.cookie.split("RTsettings=")[1];
        settings = settings ? settings.split(";")[0].split("%7C") : [1, 200, +("ontouchstart" in document.documentElement)];
        if (settings[0] == 0) {
            var footer = $("#footer-places, #f-list");
            if (footer.length === 0) {
                footer = $("#footer li").parent();
            }
            footer.append($("<li>").append(
                $("<a>")
                    .text(mw.message("RT-enable"))
                    .attr("href","")
                    .click(function(e){
                        e.preventDefault();
                        toggleRT(1);
                    })
            ));
            return;
        }

        var isTouchscreen = +settings[2],
            timerLength = isTouchscreen ? 0 : +settings[1];

        $(".reference").each(function() {
            var tooltipNode, hideTimer, showTimer, checkFlip = false;
            
            function findRef(h) {
                h = h.firstChild;
                h = h && h.getAttribute && h.getAttribute("href");
                h = h && h.split("#");
                h = h && h[1];
                h = h && document.getElementById(h);
                h = h && h.nodeName == "LI" && h;
                return h;
            }

            function hide(refLink) {
                if (tooltipNode && tooltipNode.parentNode == document.body) {
                    hideTimer = setTimeout(function() {
                        $(tooltipNode).animate({opacity: 0}, 100, function(){
                            if(tooltipNode.parentNode) {
                                tooltipNode.parentNode.removeChild(tooltipNode);
                            }
                        });
                    }, isTouchscreen ? 16 : 100);
                } else {
                    $(findRef(refLink)).removeClass("RTTarget");
                }
            }

            function show() {
                if (!tooltipNode.parentNode || tooltipNode.parentNode.nodeType === 11) {
                    document.body.appendChild(tooltipNode);
                    checkFlip = true;
                }
                $(tooltipNode).stop().animate({opacity: 1}, 100);
                clearTimeout(hideTimer);
            }

            function onStartEvent(e) {
                var _this = this;
                if (window.pg) {
                    return;
                }
                if (isTouchscreen) {
                    e.preventDefault();
                    (tooltipNode && tooltipNode.parentNode == document.body) || setTimeout(function(){
                        $(document.body).on("click touchstart", function(e) {
                            e = e || event;
                            e = e.target || e.srcElement;
                            for (; e && !$(e).hasClass("referencetooltip"); )
                                e = e.parentNode;
                            if (!e) {
                                clearTimeout(showTimer);
                                hide(_this);
                                $(document.body).off("click touchstart", arguments.callee);
                            }
                        });
                    }, 0);
                }
                hideTimer && clearTimeout(hideTimer);
                showTimer && clearTimeout(showTimer);
                showTimer = setTimeout(function() {
                    var h = findRef(_this);
                    if (!h) {
                        return;
                    }
                    var windowTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
                        hOffsetTop = $(h).offset().top;
                    if (!isTouchscreen && windowTop < hOffsetTop && windowTop + $(window).height() > hOffsetTop + h.offsetHeight) {
                        $(h).addClass("RTTarget");
                        return;
                    }
                    if (!tooltipNode) {
                        tooltipNode = document.createElement("ul");
                        tooltipNode.className = "referencetooltip";
                        
                        var footnoteNumber = $(_this).text().match(/\[(\d+)\]/)[1];
                        var footnoteHref = $(_this).find('a').attr('href'); // 각주 번호 하이퍼링크 얻기
                        var footnoteText = $(h).html(); // 각주 내용을 복사

                        // "↑" 링크를 제거
                        footnoteText = footnoteText.replace(/<a[^>]*>(?:\u2191|↑)<\/a>/g, '');

                        // 각주 번호를 하이퍼링크로 포함하고, 각주 내용을 일반 텍스트로 포함
                        var formattedContent = `
                            <li>
                                <a href="${footnoteHref}" class="rt-number">[${footnoteNumber}]</a>
                                <span class="rt-text">${footnoteText}</span>
                            </li>`;
                        $(tooltipNode).html(formattedContent);

                        tooltipNode.appendChild(document.createElement("li"));
                        isTouchscreen || $(tooltipNode).on("mouseenter", show).on("mouseleave", hide);
                    }
                    show();
                    var o = $(_this).offset(),
                        oH = tooltipNode.offsetHeight;
                    $(tooltipNode).css({top: o.top - oH, left: o.left - 7 });
                    if (tooltipNode.offsetHeight > oH) {
                        $(tooltipNode).css({left:'auto', right:0});
                        tooltipNode.lastChild.style.marginLeft = (o.left - tooltipNode.offsetLeft) + "px";
                    }
                    if (checkFlip) {
                        if (o.top < tooltipNode.offsetHeight + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0)) {
                            $(tooltipNode).addClass("RTflipped").css({top: o.top + 12});
                        } else if (tooltipNode.className === "referencetooltip RTflipped") {
                            $(tooltipNode).removeClass("RTflipped");
                        }
                        checkFlip = false;
                    }
                }, timerLength);
            }

            function onEndEvent() {
                clearTimeout(showTimer); 
                hide(this);
            }

            $(this).on(isTouchscreen ? { click: onStartEvent } : { mouseenter: onStartEvent, mouseleave: onEndEvent });
        });   
    }
});