미디어위키:Gadget-ReferenceTooltips.js

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

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

var isMobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i);
var drawer, origin, content;
function showDrawer(id, name, orgId) {
    origin.attr("href", id);
    origin.attr("data-origin", orgId.replace(/\./g, "\\."));
    origin.text(name);
    content.html($(id.replace(/\./g, "\\.") + " > .reference-text").html());
    drawer.addClass("visible");
}

function getSettings(key, type) {
    if ("localStorage" in window) {
        if (type === "boolean") {
            return (window.localStoragekey === "true");
        } else {
            return window.localStoragekey;
        }
    } else {
        var value = "; " + document.cookie;
        var parts = value.split("; " + key + "=");
        if (parts.length == 2) {
            if (type === "boolean") {
                return (parts.pop().split(";").shift() === "true");
            } else {
                return parts.pop().split(";").shift();
            }
        }
    }
}

function setSettings(key, value) {
    if ("localStorage" in window) {
        window.localStoragekey = value;
    } else {
        var now = new Date();
        var time = now.getTime();
        var expireTime = time + (10 * 365 * 24 * 24);
        now.setTime(expireTime);
        document.cookie = key + "=" + value + ";expires=" + now.toGMTString() +";path=/";
    }
}

function initSettings() {
    if (document.getElementById("reference-settings")) {
        $("#reference-settings").show();
        return;
    }
    var setbox = $("<form>").attr("id", "reference-settings").append(
        $("<div>").addClass("content").append(
            $("<label>").append(
                $("<input>").attr({"type": "checkbox", "name": "showRefOnHover", "checked": getSettings("showRefOnHover", "boolean")}),
                "갖다 대서 주석을 띄웁니다."
            )
        ),
        $("<div>").addClass("foot").append(
            $("<input>").attr({"type": "button", "value": "취소"}).click(function() {
                $("#reference-settings").hide();
            }),
            $("<input>").addClass("save-settings").attr({"type": "submit", "value": "저장"})
        )
    ).submit(function(e) {
        e.preventDefault();
        setSettings("showRefOnHover", $(this).find("name=showRefOnHover").is(":checked"));
        location.reload();
    });
    $(document.body).append(setbox);
}

function showTooltip(elem) {
    showDrawer(elem.parentNode.getAttribute("href"), elem.textContent, elem.parentNode.parentNode.getAttribute("id"));
    drawer.show();
    drawer.css({ top: ($(elem).offset().top - drawer.outerHeight()), left: $(elem).offset().left });
    drawer.stop().animate({opacity: 1}, 100);
}

function hideTooltip() {
    drawer.removeClass("visible");
    drawer.animate({opacity: 0}, 100, function() { $(this).hide(); });
}

$(document).ready(function($) {
    if (getSettings("showRefOnHover") === undefined) {
        setSettings("showRefOnHover", true);
    }
    if (isMobile) {
        $(document.body).addClass("mode-drawer");
    } else {
        $(document.body).addClass("mode-tooltip");
    }
    /* create drawer */
    drawer = $("<div>").attr("id", "reference-drawer");
    origin = $("<a>").attr("id", "reference-origin").click(function() {
        $('html, body').animate({scrollTop: ($($(this).attr("href")).offset().top - 60)}, 400);
    });
    content = $("<span>").attr("id", "reference-drawer-text");
    var settingsIcon = $("<span>").addClass("settings-icon").click(function() {
        initSettings();
    });
    var closeDrawer = $("<span>").addClass("close-icon").click(function() {
        drawer.removeClass("visible");
    });
    drawer.append(settingsIcon);
    drawer.append(closeDrawer);
    drawer.append(origin);
    drawer.append(content);
    $(document.body).append(drawer);
    
    $(document).click(function(e) {
        if (!$(e.target).closest("#reference-drawer").length)  {
            if (!isMobile) {
                hideTooltip();
            } else {
                drawer.removeClass("visible");
            }
        }
    }).scroll(function(e) {
        if ("ontouchstart" in window && isMobile) {
            drawer.removeClass("visible");
        }
    });
    $(".reference a").each(function() {
        var span = document.createElement("span");
        span.className = "reference-hooker";
        span.appendChild(this.childNodes0);
        this.appendChild(span);
    });
    if (getSettings("showRefOnHover", "boolean") && !isMobile) {
        drawer.hover(function(e) {
            showTooltip($("#" + origin.attr("data-origin") + " .reference-hooker").get(0));
        }, function(e) {
            hideTooltip();
        });
        $(".reference-hooker").hover(function(e) {
            showTooltip(this);
        }, function(e) {
            hideTooltip();
        });
    }
    $(".reference-hooker").click(function(e) {
        if (isMobile) {
            e.preventDefault();
            e.stopPropagation();
            showDrawer(this.parentNode.getAttribute("href"), this.textContent, this.parentNode.parentNode.getAttribute("id"));
            drawer.addClass("visible");
        } else if (!getSettings("showRefOnHover", "boolean")) {
            e.preventDefault();
            e.stopPropagation();
            showTooltip(this);
        }
    });
});