사용자:Senior9324/Gadget-ReferenceDrawerDev.js

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

function getSettings(key) {
	if ("localStorage" in window) {
		return window.localStorage[key];
	} else {
		var value = "; " + document.cookie;
		var parts = value.split("; " + key + "=");
		if (parts.length == 2) 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=/";
	}
}

$(document).ready(function($) {
	/* create drawer */
	drawer = $("<div></div>").attr("id", "reference-drawer");
	origin = $("<a></a>")
	.attr("id", "reference-origin")
	.click(function() {
		$('html, body').animate({scrollTop: ($("#" + $(this).attr("data-target")).offset().top - 60)}, 400);
	});
	content = $("<span></span>").attr("id", "reference-drawer-text");
	drawer.append(origin);
	drawer.append(content);
	$(document.body).append(drawer);
	
	$(document).click(function(e) {
		if (!$(event.target).closest("#reference-drawer").length) {
			if ($(window).width() < 768) {
				drawer.removeClass("visible");
			} else {
				drawer.animate({opacity: 0}, 100, function() { $(this).css({visibility: "hidden", width: 0, height: 0}); });
			}
		}
	}).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")) {
		$(".reference-hooker").hover(function(e) {
			if ($(window).width() >= 768) {
				showDrawer(this.parentNode.href.split("#")[1], this.textContent);
				drawer.css({visibility: "visible", width: "auto", height: "auto"});
				drawer.css({ top: ($(this).offset().top - drawer.outerHeight()), left: $(this).offset().left });
				drawer.stop().animate({opacity: 1}, 100);
			}
		}, function(e) {
			if ($(window).width() >= 768) {
				drawer.animate({opacity: 0}, 100, function() { $(this).css({visibility: "hidden", width: 0, height: 0}); });
			}
		});
	}
	$(".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")) {
			e.preventDefault();
			e.stopPropagation();
			showDrawer(this.parentNode.href.split("#")[1], this.textContent);
			drawer.css({visibility: "visible", width: "auto", height: "auto"});
			drawer.css({ top: ($(this).offset().top - drawer.outerHeight()), left: $(this).offset().left });
			drawer.stop().animate({opacity: 1}, 100);
		} else {
			$('html, body').animate({scrollTop: ($("#" + $(this).attr("data-target")).offset().top - 60)}, 400);
		}
	});
});