skmrSharma/display_modlist.html

## display_modlist.html
<!-- Add these lines to the top of the modlist file
	#Author: author of the modlist
	#Link: Link of the video/website from where u got the file(optional)
	#Link-title: Title of the video, if link is provided(optional)
-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Modlist . <<Enter title here>></title>
</head>
<body>
	<header>
		The Activated Mods <button id="new-list-btn">Open New Modlist</button><br>
		Link: <a href="Enter link here">Enter link title/description here</a> <button id="sort-btn">Maintain MO2 Order</button><br><br>
	</header>
	<!--<main style="white-space: pre-line; font-size: 25px;">-->	<!-- bigger font and more space bw lines -->
	<main style="font-size: 20px;">

	</main>
	<script type="text/javascript">
		var mai = document.getElementsByTagName("main")[0];
		var ytLink = document.getElementsByTagName("a")[0];
		modlist_file = sessionStorage.getItem("filename");
		//console.log(ytLink);
		let mod_array = [];
		var unsorted;
		fetch(modlist_file)
		.then((res) => res.text())
		.then((data) => {
			mod_array = data.split(/\r?\n/);
			document.title = "Modlist ." + mod_array[0].substring(mod_array[0].indexOf(":")+1);
			ytLink.setAttribute("href", mod_array[1].substring(mod_array[1].indexOf(":")+1));
			ytLink.innerHTML = mod_array[2].substring(mod_array[2].indexOf(":")+1)
			//console.log(mod_array);
			unsorted = [...mod_array];
			const regx = /^\+/;
			mai.innerHTML = mod_array.sort().filter((data) => {return regx.test(data)}).map((item) => "<li>"+item.substring(1)+"</li>").join("\n\n");
		});

		const sortBtn = document.getElementById("sort-btn");
		sortBtn.onclick = () => {
			const regx = /^\+/;
			if(sortBtn.innerHTML == "Maintain MO2 Order") {
				console.log("Maintain pressed");
				mai.innerHTML = unsorted.filter((data) => {return regx.test(data)}).map((item) => "<li>"+item.substring(1)+"</li>").join("\n\n");
				sortBtn.innerHTML = "Sort";
			}else {
				console.log("Sort pressed");
				mai.innerHTML = mod_array.filter((data) => {return regx.test(data)}).map((item) => "<li>"+item.substring(1)+"</li>").join("\n\n");
				sortBtn.innerHTML = "Maintain MO2 Order";
			}
		}

		const newListBtn = document.getElementById("new-list-btn");
		newListBtn.onclick = () => {
			if(newListBtn.nextSibling == document.getElementsByTagName("br")[0]) {
				const headerTag = document.getElementsByTagName("header")[0];
				const input = document.createElement("input");
				input.setAttribute("autofocus", "");
				input.setAttribute("placeholder", "Enter modlist file name")
				headerTag.insertBefore(input, newListBtn.nextSibling);		// Apparently, there is no insertAfter method ;)
				input.focus();
				input.onchange = () => {
					sessionStorage.setItem("filename", input.value);
					console.log("input captured " + input.value);
					location.reload(true);
				}
			} else {
				document.getElementsByTagName("input")[0].remove();
			}
		}
	</script>
</body>
</html>
	<!-- Add these lines to the top of the modlist file
	#Author: author of the modlist
	#Link: Link of the video/website from where u got the file(optional)
	#Link-title: Title of the video, if link is provided(optional)
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Modlist . <<Enter title here>></title>
	</head>
	<body>
	<header>
	The Activated Mods <button id="new-list-btn">Open New Modlist</button><br>
	Link: <a href="Enter link here">Enter link title/description here</a> <button id="sort-btn">Maintain MO2 Order</button><br><br>
	</header>
	<!--<main style="white-space: pre-line; font-size: 25px;">--> <!-- bigger font and more space bw lines -->
	<main style="font-size: 20px;">

	</main>
	<script type="text/javascript">
	var mai = document.getElementsByTagName("main")[0];
	var ytLink = document.getElementsByTagName("a")[0];
	modlist_file = sessionStorage.getItem("filename");
	//console.log(ytLink);
	let mod_array = [];
	var unsorted;
	fetch(modlist_file)
	.then((res) => res.text())
	.then((data) => {
	mod_array = data.split(/\r?\n/);
	document.title = "Modlist ." + mod_array[0].substring(mod_array[0].indexOf(":")+1);
	ytLink.setAttribute("href", mod_array[1].substring(mod_array[1].indexOf(":")+1));
	ytLink.innerHTML = mod_array[2].substring(mod_array[2].indexOf(":")+1)
	//console.log(mod_array);
	unsorted = [...mod_array];
	const regx = /^\+/;
	mai.innerHTML = mod_array.sort().filter((data) => {return regx.test(data)}).map((item) => "<li>"+item.substring(1)+"</li>").join("\n\n");
	});

	const sortBtn = document.getElementById("sort-btn");
	sortBtn.onclick = () => {
	const regx = /^\+/;
	if(sortBtn.innerHTML == "Maintain MO2 Order") {
	console.log("Maintain pressed");
	mai.innerHTML = unsorted.filter((data) => {return regx.test(data)}).map((item) => "<li>"+item.substring(1)+"</li>").join("\n\n");
	sortBtn.innerHTML = "Sort";
	}else {
	console.log("Sort pressed");
	mai.innerHTML = mod_array.filter((data) => {return regx.test(data)}).map((item) => "<li>"+item.substring(1)+"</li>").join("\n\n");
	sortBtn.innerHTML = "Maintain MO2 Order";
	}
	}

	const newListBtn = document.getElementById("new-list-btn");
	newListBtn.onclick = () => {
	if(newListBtn.nextSibling == document.getElementsByTagName("br")[0]) {
	const headerTag = document.getElementsByTagName("header")[0];
	const input = document.createElement("input");
	input.setAttribute("autofocus", "");
	input.setAttribute("placeholder", "Enter modlist file name")
	headerTag.insertBefore(input, newListBtn.nextSibling); // Apparently, there is no insertAfter method ;)
	input.focus();
	input.onchange = () => {
	sessionStorage.setItem("filename", input.value);
	console.log("input captured " + input.value);
	location.reload(true);
	}
	} else {
	document.getElementsByTagName("input")[0].remove();
	}
	}
	</script>
	</body>
	</html>