사용자:Senior9324/Gadget-ReferenceDrawerDev.js

function getOffset(elem) {
	var offset = null;
	if (elem) {
		offset = {left: 0, top: 0};
		do {
			offset.top += elem.offsetTop;
			offset.left += elem.offsetLeft;
			elem = elem.offsetParent;
		} while (elem);
	}
	return offset;
}

function showDrawer(id, name) {
	var drawer = document.getElementById("reference-drawer");
	drawer.children[0].href = "#" + id;
	drawer.children[0].setAttribute("data-target", id);
	drawer.children[0].textContent = name;
	drawer.children[1].innerHTML = document.querySelector("#" + id + " > .reference-text").innerHTML;
	drawer.className = "visible";
}

window.onload = function() {
	/* create drawer */
	var drawer = document.createElement("div");
	drawer.setAttribute("id", "reference-drawer");
	var origin = document.createElement("a");
	origin.setAttribute("id", "reference-origin");
	origin.onclick = function() {
		if (jQuery) {
			$('html, body').animate({
				scrollTop: ($("#" + $(this).attr("data-target")).offset().top - 60)
			}, 400);
		} else {
			window.scrollTo(0, getOffset(document.getElementById(this.getAttribute("data-target"))).top - 60);
		}
	};
	var content = document.createElement("span");
	content.setAttribute("id", "reference-drawer-text");
	drawer.appendChild(origin);
	drawer.appendChild(content);
	document.body.appendChild(drawer);
	
	document.onclick = function(e) {
		if (!$(event.target).closest("#reference-drawer").length) {
			document.getElementById("reference-drawer").className = "";
		}
	}
	document.onscroll = function(e) {
		document.getElementById("reference-drawer").className = "";
	});
	var refLinkList = document.querySelectorAll(".reference a");
	for (var elem in refLinkList) {
		if (!refLinkList.hasOwnProperty(elem)) continue;
		var span = document.createElement("span");
		span.className = "reference-hooker";
		span.onclick = function(e) {
			e.preventDefault();
			e.stopPropagation();
			showDrawer(this.parentNode.href.split("#")[1], this.textContent);
		};
		span.appendChild(elem.childNodes[0]);
		elem.appendChild(span);
	};
};