미디어위키:Common.js

/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
/*
 * Back to top function not working 
$( function () {
	var elems = document.getElementsByClassName('editsection'); // *** NOTE: ClassName may need to be 'mw-editsection' instead
	for (i = 0; i < elems.length; i++) {
		var span = document.createElement('span');
		var link = document.createElement('a');
		link.href = '#top';
		link.appendChild(document.createTextNode('back to top'));
		span.appendChild(document.createTextNode('['));
		span.appendChild(link);
		span.appendChild(document.createTextNode('] '));
		elems[i].insertBefore(span, elems[i].firstChild);
	}
});
*/

/*
	// create go to top button
	var topButtonDiv = document.createElement("div");
	topButtonDiv.setAttribute("id", "topButtonDiv");
	var topButtonDivStyle = "width:40px; height:40px; border:solid 2px " + buttonBorderColor + "; background: " + buttonColor + ";";
	topButtonDivStyle += "position:fixed; float: bottom; cursor: pointer;";
	// topButtonDivStyle += "bottom: 9%; right: 173px;";
	topButtonDivStyle += "bottom: 5%; right: 58px;";
	topButtonDivStyle += "color: " + buttonTextColor + "; font-size: 26px; text-align: center; -webkit-user-select: none; line-height: 40px;";
	topButtonDiv.setAttribute("style", topButtonDivStyle);
	topButtonDiv.innerHTML += '▲';
	
	// create go to bottom button
	var bottomButtonDiv = document.createElement("div");
	bottomButtonDiv.setAttribute("id", "bottomButtonDiv");
	var bottomButtonDivStyle = "width:40px; height:40px; border:solid 2px #147060; background: #019480;";
	bottomButtonDivStyle += "position:fixed; float: bottom; cursor: pointer;";
	// topButtonDivStyle += "bottom: 9%; right: 130px;";
	bottomButtonDivStyle += "bottom: 5%; right: 15px;";
	bottomButtonDivStyle += "color: #147060; font-size: 26px; text-align: center; -webkit-user-select: none; line-height: 40px;";
	bottomButtonDiv.setAttribute("style", bottomButtonDivStyle);
	bottomButtonDiv.innerHTML += '▼';
*/

$( function () {
	// variables
	var buttonWidth = "40px";
	var buttonHeight = "40px";
	var buttonTextSize = "26px";
	var buttonColor = "#019480";
	var buttonBorderColor = "#147060";
	var buttonTextColor = "#147060";
	
	// create go to top button
	var topButtonDiv = document.createElement("div");
	topButtonDiv.setAttribute("id", "topButtonDiv");
	var topButtonDivStyle = "width: " + buttonWidth + "; " + 
		"height: " + buttonHeight + "; " +
		"border: solid 2px " + buttonBorderColor + "; " + 
		"background: " + buttonColor + "; " +
		"position: fixed; " +
		"float: bottom; " +
		"cursor: pointer; " +
		"bottom: 5%; " +  // bottom: 9%;
		"right: 58px; " +  // right: 173px;
		"color: " + buttonTextColor + ";" +
		"font-size: " + buttonTextSize + "; " +
		"text-align: center; " +
		"-webkit-user-select: none; " +
		"line-height: " + buttonHeight + ";";
	topButtonDiv.setAttribute("style", topButtonDivStyle);
	topButtonDiv.innerHTML += '▲';
	
	// create go to bottom button
	var bottomButtonDiv = document.createElement("div");
	bottomButtonDiv.setAttribute("id", "bottomButtonDiv");
	var bottomButtonDivStyle = "width: " + buttonWidth + "; " + 
		"height: " + buttonHeight + "; " +
		"border: solid 2px " + buttonBorderColor + "; " + 
		"background: " + buttonColor + "; " +
		"position: fixed; " +
		"float: bottom; " +
		"cursor: pointer; " +
		"bottom: 5%; " +  // bottom: 9%;
		"right: 15px; " +  // right: 130px;
		"color: " + buttonTextColor + ";" +
		"font-size: " + buttonTextSize + "; " +
		"text-align: center; " +
		"-webkit-user-select: none; " +
		"line-height: " + buttonHeight + ";";
	bottomButtonDiv.setAttribute("style", bottomButtonDivStyle);
	bottomButtonDiv.innerHTML += '▼';

	// add element
	var parentDiv = document.getElementById("mw-related-navigation");
	parentDiv.appendChild(topButtonDiv);
	parentDiv.appendChild(bottomButtonDiv);
	
	// add go to top function
	topButtonDiv.addEventListener('click', function() {
		window.scrollTo({ top: 0, behavior: 'smooth' });
	}, false);
	
	// add go to bottom function
	bottomButtonDiv.addEventListener('click', function() {
		window.scrollTo({ top: $(document).height(), behavior: 'smooth' });
	}, false);
});