편집토론문서 역사

미디어위키:Gadget-ReferenceTooltips-ko.js: 두 판 사이의 차이

다음 편집 →
새 문서: 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 =...
 
잔글편집 요약 없음
1번째 줄: 1번째 줄:
var isMobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i);
/* Drawer css start */
var drawer, origin, content;
.mode-drawer #reference-drawer {
function showDrawer(id, name, orgId) {
position: fixed;
    origin.attr("href", id);
bottom: 0;
    origin.attr("data-origin", orgId.replace(/\./g, "\\."));
left: 0;
    origin.text(name);
right: 0;
    content.html($(id.replace(/\./g, "\\.") + " > .reference-text").html());
-webkit-transition: -webkit-transform .25s, opacity .25s, visibility 0s .25s;
    drawer.addClass("visible");
-ms-transition: -ms-transform .25s, opacity .25s, visibility 0s .25s;
transition: transform .25s, opacity .25s, visibility 0s .25s;
-webkit-transform: translate(0,100px);
-ms-transform: translate(0,100px);
transform: translate(0,100px);
border: 1px solid #e1e8ed;
z-index: 10000;
opacity: 0;
visibility: hidden;
box-shadow: 0 -2px 5px rgba(0, 0, 0, .4);
}
}


function getSettings(key, type) {
.mode-drawer #reference-drawer.visible {
    if ("localStorage" in window) {
-webkit-transition: -webkit-transform .25s, opacity .25s;
        if (type === "boolean") {
-ms-transition: -ms-transform .25s, opacity .25s;
            return (window.localStoragekey === "true");
transition: transform .25s, opacity .25s;
        } else {
-webkit-transform: translate(0,0);
            return window.localStoragekey;
-ms-transform: translate(0,0);
        }
transform: translate(0,0);
    } else {
opacity: 1;
        var value = "; " + document.cookie;
visibility: visible;
        var parts = value.split("; " + key + "=");
        if (parts.length == 2) {
            if (type === "boolean") {
                return (parts.pop().split(";").shift() === "true");
            } else {
                return parts.pop().split(";").shift();
            }
        }
    }
}
}


.mode-drawer #reference-drawer .settings-icon {
display: none;
}
/* Drawer css end */
/* Tooltip css */
.mode-tooltip #reference-drawer {
position: absolute;
display: none;
opacity: 0;
font-size : 0.9em;
max-width: 300px;
border-radius: 4px;
box-shadow: 0 0 12px rgba(0,0,0,.375);
z-index: 10000;
}
.mode-tooltip #reference-drawer .close-icon {
display: none;
}
/* common css */
#reference-drawer {
padding: 10px 15px;
background: #fcfcfc;
}
#reference-origin {
padding-right: 8px;
}
#reference-settings {
position: fixed;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-top: -100px;
margin-left: -150px;
padding: 10px;
background: white;
box-shadow: 0 0 6px gray;
z-index: 1003;
}


function setSettings(key, value) {
#reference-settings .content {
    if ("localStorage" in window) {
height: 150px;
        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() {
#reference-settings .content label > input {
    if (document.getElementById("reference-settings")) {
margin-right: 4px;
        $("#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) {
#reference-settings .foot {
    showDrawer(elem.parentNode.getAttribute("href"), elem.textContent, elem.parentNode.parentNode.getAttribute("id"));
text-align: right;
    drawer.show();
    drawer.css({ top: ($(elem).offset().top - drawer.outerHeight()), left: $(elem).offset().left });
    drawer.stop().animate({opacity: 1}, 100);
}
}


function hideTooltip() {
#reference-settings .foot input {
    drawer.removeClass("visible");
margin-left: 4px;
    drawer.animate({opacity: 0}, 100, function() { $(this).hide(); });
}
}


#reference-drawer .settings-icon {
margin: -5px -8px 0 5px;
float: right;
width: 14px;
height: 14px;
background: url(//upload.wikimedia.org/wikipedia/commons/thumb/1/13/Cog%2C_Web_Fundamentals.svg/14px-Cog%2C_Web_Fundamentals.svg.png);
pointer: cursor;
}
#reference-drawer .close-icon {
float: right;
width: 16px;
height: 16px;
background: url(//upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/24px-VisualEditor_-_Icon_-_Close.svg.png);
background-position: -4px -4px;
}


$(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) {
         $(".reference-hooker").hover(function(e) {
             showTooltip(this);
             showTooltip(this);

2025년 1월 24일 (금) 10:45 판

/* Drawer css start */
.mode-drawer #reference-drawer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	-webkit-transition: -webkit-transform .25s, opacity .25s, visibility 0s .25s;
	-ms-transition: -ms-transform .25s, opacity .25s, visibility 0s .25s;
	transition: transform .25s, opacity .25s, visibility 0s .25s;
	-webkit-transform: translate(0,100px);
	-ms-transform: translate(0,100px);
	transform: translate(0,100px);
	border: 1px solid #e1e8ed;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, .4);
}

.mode-drawer #reference-drawer.visible {
	-webkit-transition: -webkit-transform .25s, opacity .25s;
	-ms-transition: -ms-transform .25s, opacity .25s;
	transition: transform .25s, opacity .25s;
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
	opacity: 1;
	visibility: visible;
}

.mode-drawer #reference-drawer .settings-icon {
	display: none;
}
/* Drawer css end */

/* Tooltip css */
.mode-tooltip #reference-drawer {
	position: absolute;
	display: none;
	opacity: 0;
	font-size : 0.9em;
	max-width: 300px;
	border-radius: 4px;
	box-shadow: 0 0 12px rgba(0,0,0,.375);
	z-index: 10000;
}

.mode-tooltip #reference-drawer .close-icon {
	display: none;
}

/* common css */
#reference-drawer {
	padding: 10px 15px;
	background: #fcfcfc;
}

#reference-origin {
	padding-right: 8px;
}

#reference-settings {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 200px;
	margin-top: -100px;
	margin-left: -150px;
	padding: 10px;
	background: white;
	box-shadow: 0 0 6px gray;
	z-index: 1003;
}

#reference-settings .content {
	height: 150px;
}

#reference-settings .content label > input {
	margin-right: 4px;
}

#reference-settings .foot {
	text-align: right;
}

#reference-settings .foot input {
	margin-left: 4px;
}

#reference-drawer .settings-icon {
	margin: -5px -8px 0 5px;
	float: right;
	width: 14px;
	height: 14px;
	background: url(//upload.wikimedia.org/wikipedia/commons/thumb/1/13/Cog%2C_Web_Fundamentals.svg/14px-Cog%2C_Web_Fundamentals.svg.png);
	pointer: cursor;
}

#reference-drawer .close-icon {
	float: right;
	width: 16px;
	height: 16px;
	background: url(//upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/24px-VisualEditor_-_Icon_-_Close.svg.png);
	background-position: -4px -4px;
}

        $(".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);
        }
    });
});