사용자:Senior9324/Gadget-ReferenceDrawerDev.js

var drawer;
function showDrawer(id, name) {
	drawer.first().attr("href", "#" + id);
	drawer.first().attr("data-target", id);
	drawer.first().text(name);
	drawer.find("#reference-drawer-text").html($("#" + id + " > .reference-text").html());
	$(document.body).append(drawer);
}

$(document).ready(function($) {
	/* create drawer */
	drawer = $("<div></div>").attr("id", "reference-drawer");
	var origin = $("<a></a>").attr("id", "reference-origin").click(function() { $('html, body').animate({ scrollTop: ($("#" + $(this).attr("data-target")).offset().top - 60) }, 400); });
	var content = $("<span></span>").attr("id", "reference-drawer-text");
	drawer.append(origin);
	drawer.append(content);
	
	$(document).click(function(e) {
		if (!$(event.target).closest("#reference-drawer").length) {
			if ($(window).width() > 768) {
				$("#reference-drawer").animate({margin-top: 0}, 250, function() { $(this).remove(); });
			} else {
				$("#reference-drawer").animate({opacity: 0}, 250, function() { $(this).remove(); });
			}
		}
	}).scroll(function(e) {
		if ("ontouchstart" in window && !$(window).width() > 768) {
			$("#reference-drawer").animate({opacity: 0}, 250, function() { $(this).remove(); });
		}
	});
	$(".reference a").each(function() {
		var span = document.createElement("span");
		span.className = "reference-hooker";
		span.appendChild(this.childNodes[0]);
		this.appendChild(span);
	});
	$(".reference-hooker").click(function(e) {
		e.preventDefault();
		e.stopPropagation();
		showDrawer(this.parentNode.href.split("#")[1], this.textContent);
		if ($(window).width() > 768) {
			$("#reference-drawer").animate({margin-top: (-1 * drawer.outerHeight())}, 250);
		} else {
			drawer.css({ top: ($(this).offset().top - drawer.outerHeight()), left: $(this).offset().left });
			$("#reference-drawer").animate({opacity: 1}, 250);
		}
	});
});