Berny23/TumblThree_BackupViewer.html

## TumblThree_BackupViewer.html
<!--
	TumblThree Backup Viewer
	Copyright © 2021 Berny23

	This file is released under the "MIT" license.
	Go to "https://choosealicense.com/licenses/mit" for full license details.
-->

<html>
<head>
<meta charset="utf-8"/>
<title>TumblThree Backup Viewer by Berny23</title>

<script>
window.onload = function() {
	var posts = new Array();
	var curPost = 0;

	var content = document.getElementById('content');
	var nextPostLinks = document.getElementsByClassName("nextPost");
	var previousPostLinks = document.getElementsByClassName("previousPost");
	var postNavFields = document.getElementsByClassName("postNav");
	var postNavButtons = document.getElementsByClassName("postNavBtn");

	function updateContent() {
		content.innerHTML = posts[curPost];
		for (var i = 0; i < postNavFields.length; i++) {
			postNavFields[i].value = curPost;
		}
	}

	for (var i = 0; i < nextPostLinks.length; i++) {
		nextPostLinks[i].onclick = function() {
			curPost++;
			updateContent();
		}
	}

	for (var i = 0; i < previousPostLinks.length; i++) {
		previousPostLinks[i].onclick = function() {
			if (curPost > 0) curPost--;
			updateContent();
		}
	}

	for (var i = 0; i < postNavButtons.length; i++) {
		postNavButtons[i].onclick = function() {
			curPost = postNavFields[this.dataset.id].value;
			updateContent();
		}
	}

	document.getElementById('file').onchange = function() {
		var file = this.files[0]
		var fReader = new FileReader();
		posts = [];
		curPost = 0;

		fReader.onload = function(progressEvent) {
			var lines = this.result.split('\n');
			for (var lineIndex = 0; lineIndex < lines.length; lineIndex++) {
				if (lines[lineIndex].startsWith('Title: ')) {
					posts.push('<div class="post"><h2>' + lines[lineIndex].slice(6) + '</h2>' + lines[lineIndex + 1] + '</div>');
				}
			}
			updateContent();
		};

		fReader.readAsText(file);
	};
};
</script>

<style>
#header {
	border: black 0.2em solid;
	background-color: lightgray;
	padding: 1em;
	text-align: center;
}
.nav {
	background-color: darkgray;
	padding: 1em;
	text-align: center;
}
.post {
	border: gray 0.2em solid;
	background-color: white;
	padding: 1em;
}
.previousPost {
	cursor:pointer;
    color:blue;
    text-decoration:underline;
	margin-right: 1em;
}
.nextPost {
	cursor:pointer;
    color:blue;
    text-decoration:underline;
	margin-left: 1em;
}
</style>
</head>

<body>
<div id="header">
	<h1>TumblThree Backup Viewer by Berny23</h1>
	<p>Please choose the txt file of your backup:<br></p>
	<input type="file" name="file" id="file" accept=".txt">
</div>
<div id="navTop" class="nav"><span class="previousPost" href="">← Newer Post</span><input type="number" class="postNav" min="0"><input class="postNavBtn" type="submit" value="Go" data-id="0"><span class="nextPost" href="">Older Post →</span></div>
<div id="content"></div>
<div id="navBottom" class="nav"><span class="previousPost" href="">← Newer Post</span><input type="number" class="postNav" min="0"><input class="postNavBtn" type="submit" value="Go" data-id="1"><span class="nextPost" href="">Older Post →</span></div>
</body>
</html>
	<!--
	TumblThree Backup Viewer
	Copyright © 2021 Berny23

	This file is released under the "MIT" license.
	Go to "https://choosealicense.com/licenses/mit" for full license details.
	-->

	<html>
	<head>
	<meta charset="utf-8"/>
	<title>TumblThree Backup Viewer by Berny23</title>

	<script>
	window.onload = function() {
	var posts = new Array();
	var curPost = 0;

	var content = document.getElementById('content');
	var nextPostLinks = document.getElementsByClassName("nextPost");
	var previousPostLinks = document.getElementsByClassName("previousPost");
	var postNavFields = document.getElementsByClassName("postNav");
	var postNavButtons = document.getElementsByClassName("postNavBtn");

	function updateContent() {
	content.innerHTML = posts[curPost];
	for (var i = 0; i < postNavFields.length; i++) {
	postNavFields[i].value = curPost;
	}
	}

	for (var i = 0; i < nextPostLinks.length; i++) {
	nextPostLinks[i].onclick = function() {
	curPost++;
	updateContent();
	}
	}

	for (var i = 0; i < previousPostLinks.length; i++) {
	previousPostLinks[i].onclick = function() {
	if (curPost > 0) curPost--;
	updateContent();
	}
	}

	for (var i = 0; i < postNavButtons.length; i++) {
	postNavButtons[i].onclick = function() {
	curPost = postNavFields[this.dataset.id].value;
	updateContent();
	}
	}

	document.getElementById('file').onchange = function() {
	var file = this.files[0]
	var fReader = new FileReader();
	posts = [];
	curPost = 0;

	fReader.onload = function(progressEvent) {
	var lines = this.result.split('\n');
	for (var lineIndex = 0; lineIndex < lines.length; lineIndex++) {
	if (lines[lineIndex].startsWith('Title: ')) {
	posts.push('<div class="post"><h2>' + lines[lineIndex].slice(6) + '</h2>' + lines[lineIndex + 1] + '</div>');
	}
	}
	updateContent();
	};

	fReader.readAsText(file);
	};
	};
	</script>

	<style>
	#header {
	border: black 0.2em solid;
	background-color: lightgray;
	padding: 1em;
	text-align: center;
	}
	.nav {
	background-color: darkgray;
	padding: 1em;
	text-align: center;
	}
	.post {
	border: gray 0.2em solid;
	background-color: white;
	padding: 1em;
	}
	.previousPost {
	cursor:pointer;
	color:blue;
	text-decoration:underline;
	margin-right: 1em;
	}
	.nextPost {
	cursor:pointer;
	color:blue;
	text-decoration:underline;
	margin-left: 1em;
	}
	</style>
	</head>

	<body>
	<div id="header">
	<h1>TumblThree Backup Viewer by Berny23</h1>
	<p>Please choose the txt file of your backup:<br></p>
	<input type="file" name="file" id="file" accept=".txt">
	</div>
	<div id="navTop" class="nav"><span class="previousPost" href="">← Newer Post</span><input type="number" class="postNav" min="0"><input class="postNavBtn" type="submit" value="Go" data-id="0"><span class="nextPost" href="">Older Post →</span></div>
	<div id="content"></div>
	<div id="navBottom" class="nav"><span class="previousPost" href="">← Newer Post</span><input type="number" class="postNav" min="0"><input class="postNavBtn" type="submit" value="Go" data-id="1"><span class="nextPost" href="">Older Post →</span></div>
	</body>
	</html>