comments.html

<!doctype html>
<html>
	<head>
		<title>
			Cramped
		</title>
		<base target="_blank">
		<link rel="icon" href="images/favicon.ico">
		<script src="https://www.gstatic.com/firebasejs/4.6.1/firebase.js"></script>
		<script src="https://www.gstatic.com/firebasejs/4.6.1/firebase-firestore.js"></script>
		<script src="https://epicenterprograms.github.io/standards/behavior/firebaseinit.js"></script>
		<script src="https://epicenterprograms.github.io/standards/behavior/general.js"></script>
		<script src="https://epicenterprograms.github.io/standards/behavior/storage.js"></script>
		<script src="behavior.js"></script>
		<script>
			var S = Standards.general;
			var server = Standards.storage.server;
			server.defaultLocation = "^websites/cramped/comments";
			server.requireSignIn = false;

			function refreshComments() {
				server.list().then(function (comments) {
					if (comments.length > 0) {
						S.getId("commentsList").innerHTML = "";
						S.forEach(comments, function (commentKey) {
							server.recall(commentKey).then(function (data) {
								let row = S.getId("commentsList").insertRow(0);
								let author = document.createElement("th");
								if (data.author) {
									author.textContent = data.author;
								} else {
									author.textContent = "Anonymous";
								}
								let comment = document.createElement("td");
								comment.textContent = data.message;
								comment.innerHTML = comment.textContent.replace(/(^|[^:])\/\/(.+?)\/\//g, "$1<em>$2</em>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/__(.+?)__/g, '<span style="text-decoration:underline">$1</span>').replace(/(https?:\/\/[^. \n]+(?:\.[^. \n]+)+)/g, "<a href='$1'>$1</a>");
								row.dataset.timestamp = commentKey;
								row.appendChild(author);
								row.appendChild(comment);
							}).catch(function (error) {
								console.error("A comment couldn't be recalled.");
								console.error(error);
							});
						});
					}
				}).catch(function (error) {
					console.error("The information couldn't be listed.");
					console.error(error);
				});
			}

			function leaveComment() {
				if (S.getId("commentArea").value.trim() != "") {
					let data = {};
					data.message = S.getId("commentArea").value.trim();
					data.author = S.getId("author").value.trim();
					server.store(String(new Date().getTime()), data).then(function () {
						S.makeDialog("Comment stored.");
						S.getId("commentArea").value = "";
						S.getId("author").value = "";
						refreshComments();
					}).catch(function (error) {
						console.error("The information couldn't be stored.");
						console.error(error);
						S.makeDialog("The comment couldn't be stored.");
					});
				}
			}

			S.listen("commentEditor", "click", function () {
				if (this.textContent.trim() == "Edit comments") {  // if attempting to edit
					S.makeDialog('Enter the password<br><br><input type="password" id="commentsEditorPassword">',
						"Cancel",
						["Submit",
							function () {
								if (S.getId("commentsEditorPassword").value == "b3a8A3i6b") {
									S.getId("commentsList").contentEditable = true;
									S.getId("commentEditor").textContent = "Finish";
									S.makeDialog("Login successful.");
								} else {
									S.makeDialog("The password was incorrect.");
								}
							}
						]
					);
				} else {  // if currently editing
					let remaining = new S.Listenable();
					remaining.value = 0;
					remaining.addEventListener("set", function (value) {
						if (value == 0) {  // if all items have been iterated through
							S.getId("commentEditor").textContent = "Edit comments";
							S.getId("commentsList").contentEditable = false;
							S.makeDialog("Editing successful.");
							refreshComments();
						}
					});
					S.forEach(S.getId("commentsList").rows, function (row) {
						remaining.value++;
						let data = {};
						data.author = row.getElementsByTagName("th")[0].textContent;
						data.message = row.getElementsByTagName("td")[0].innerHTML.trim();
						if (data.message == "<br>") {
							data.message = "";
						}
						data.message = data.message.replace(/<em>(.+?)<\/em>/g, "//$1//");
						data.message = data.message.replace(/<strong>(.+?)<\/strong>/g, "**$1**");
						data.message = data.message.replace(/<span style="text-decoration:underline">(.+?)<\/span>/g, "__$1__");
						data.message = data.message.replace(/<a.*?>(.+?)<\/a>/g, "$1");
						if (data.message) {
							server.store(row.dataset.timestamp, data).then(function () {
								remaining.value--;
							}).catch(function (error) {
								console.error("The edits couldn't be saved.");
								console.error(error);
							});
						} else {
							server.forget(row.dataset.timestamp).then(function () {
								remaining.value--;
							}).catch(function (error) {
								console.error("The empty comment couldn't be deleted.");
								console.error(error);
							});
						}
					});
					remaining.value = remaining.value;
				}
			});

			S.onLoad(function () {
                refreshComments();
                //// S.getTag("button")[0].disabled = false;
			});
		</script>
		<link rel="stylesheet" href="https://epicenterprograms.github.io/standards/formatting/foundation.css">
		<link rel="stylesheet" href="formatting.css">
		<style>
			.elaborate.colorful {
				color: blue;
			}
			#commentsContainer {
				margin: 1em auto;
				max-width: 100%;
				max-height: 35em;
				overflow: auto;
			}
			#commentsList {
				margin: auto;
			}
			#commentsList tr {
				margin: .5em;
				border: .05em solid #ddd;
				border-radius: 1em;
				background: white;
			}
			#commentsList th {
				border-right: .05em solid black;
			}
			#commentsList td {
				white-space: pre-wrap;
			}

			@media (prefers-color-scheme: dark) {
				.elaborate.colorful {
					color: yellow;
				}
				#commentsList tr {
					background: black;
				}
				#commentsList th {
					border-right-color: #aaa;
				}
			}
		</style>
	</head>
	<body>
		<nav class="hidden-left-nav">
			<iframe src="navigation.html"></iframe>
		</nav>
		<h1 class="main-title">
			Comments
		</h1>
		<main>
			<section>
				This allows you to tell me how amazing this website is.
			</section>
			<section>
				<span class="elaborate colorful">[Learn how to make special formatting]</span>
			</section>
			<aside data-heading="Formatting help">
				<h3>Italics</h3>
				<section>Surround the word or words to be italicized with two slashes.</section>
				<section>//Stuff// = <em>Stuff</em></section>
				<h3>Bolding</h3>
				<section>Surround the word or words to be bolded with two asterisks.</section>
				<section>**Stuff** = <strong>Stuff</strong></section>
				<h3>Underlining</h3>
				<section>Surround the word or words to be underlined with two underscores.</section>
				<section>__Stuff__ = <span style="text-decoration:underline">Stuff</span></section>
				<h3>Combining</h3>
				<section>Text can have more than one type of formatting as long as the markup doesn't have to cross any other markup. (Treat them like parentheses.)</section>
				<section>//**__Stuff__**// = <em><strong><span style="text-decoration:underline">Stuff</span></strong></em></section>
				<section><del style="color:red">//**__Stuff//**__</del></section>
				<section>//**Stuff**// **and stuffity stuff** = <em><strong>Stuff</strong></em> <strong>and stuffity stuff</strong></section>
				<section>**//Stuff// and stuffity stuff** = <strong><em>Stuff</em> and stuffity stuff</strong></section>
				<section><del style="color:red">//**Stuff// and stuffity stuff**</del></section>
				<h3>Other</h3>
				<section>Full links will become clickable.</section>
				<section>https://coolprogramminguser.github.io/cramped/ = <a href="https://coolprogramminguser.github.io/cramped/">https://coolprogramminguser.github.io/cramped/</a></section>
			</aside>
			<input type="text" id="author" placeholder="Name/username (optional)">
			<br>
			<textarea id="commentArea" placeholder="Enter your comment..."></textarea>
			<br>
			<button onclick="leaveComment()">
				Leave a comment
			</button>
			<br>
			<div id="commentsContainer">
				<table class="labeled-list" id="commentsList"><tr><td>No comments could be loaded.</td></tr></table>
			</div>
			<br>
			<button id="commentEditor">
				Edit comments
			</button>
		</main>
	</body>
</html>