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

var drawer, origin, content;
function showDrawer(id, name, orgId) {
	origin.attr("href", "#" + id);
	origin.attr("data-target", id);
	origin.attr("data-origin", orgId);
	origin.text(name);
	content.html($("#" + id + " > .reference-text").html());
	drawer.addClass("visible");
}

function getSettings(key, type) {
	if ("localStorage" in window) {
		if (type === "boolean") {
			return (window.localStorage[key] === "true");
		} else {
			return window.localStorage[key];
		}
	} 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.localStorage[key] = 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() {
	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>").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.href.split("#")[1], elem.textContent, elem.parentNode.parentNode.getAttribute("id"));
	drawer.css({visibility: "visible", width: "auto", height: "auto"});
	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).css({visibility: "hidden", width: 0, height: 0}); });
}

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