Code clenaup, safer, and more 'perfect'

Author: petabyt

javascript.js

@@ -1,15 +1,20 @@
+// The initial SF app object
 // Create the initial formatter element
-var formatter;
+var sf = {
+	formatter: null
+};
 
-// Everything is customizable here.
-// (local images don't work yet, but who cares.
-// this is the internet.)
-var version = 3;
+// Use a simple DOM element to check Scratch 3/2 UI.
+sf.version = 3;
 if (document.body.children[0].id == "pagewrapper") {
-	version = 2;
+	sf.version = 2;
 }
 
-var tags = [
+// Create the SF "tags"
+// Everything is customizable here.
+// (local images don't work yet, but who cares.
+// this is the internet.)
+sf.tags = [
 	{
 		"name": "bold",
 		"tag": "b",
@@ -50,7 +55,7 @@ var tags = [
 		"name": "link",
 		"tag": "link",
 		"src": "https://raw.githubusercontent.com/Remix-Design/RemixIcon/master/icons/Editor/link.svg",
-		"fillers": ["[link=https://example.com]", "[/link]"],
+		"fillers": ["[link=", "]Link[/link]"],
 		"formatter": function(part1, part2) {
 			return "<a href='" + part1 + "'  target='_newtab'>" + part2 + "</a>";
 		}
@@ -70,12 +75,11 @@ var tags = [
 		"src": "https://raw.githubusercontent.com/Remix-Design/RemixIcon/master/icons/Development/bug-line.svg",
 		"ignore": true
 	}
-]
+];
 
-// Firstly, initialize the formatter, and its icons
-// This is a 1 second timeout for page load, since I am
-// too lazy to figure out real page load times
-setTimeout(function() {
+// Firstly, initialize the formatter, and its icons.
+// This is executed on the next block
+sf.init = function() {
 	var textareaFinder = "[name=compose-comment],[name=content]";
 
 	// Helpful first textarea message
@@ -87,33 +91,38 @@ setTimeout(function() {
 		return;
 	}
 
-	formatter = document.createElement("div");
-	formatter.id = "formatter";
-	for (var t = 0; t < tags.length; t++) {
-		if (tags[t].dontshow) {
-			// Basically, skip to next part
+	sf.formatter = document.createElement("div");
+	sf.formatter.id = "formatter";
+	for (var t = 0; t < sf.tags.length; t++) {
+		if (sf.tags[t].dontshow) {
+			// Skip to next part int this loop
 			continue;
 		}
 
 		var icon = document.createElement("img");
-		icon.src = tags[t].src;
+		icon.src = sf.tags[t].src;
 
 		// Help icon
-		if (tags[t].help) {
+		if (sf.tags[t].help) {
 			icon.style.float = "right";
 			icon.onclick = function() {
 				// Popup message HTML got a bit out of hand here
-				smod.dialogText("ScratchFormat Help", `
-					<a href="https://github.com/ScratchFormat/ScratchFormat2/issues" style="color: #12b1e4;">Report issues at our Github</a>
-					If you do not own a Github account, simply comment on my profile <a href="https://scratch.mit.edu/users/pufflegamerz/" style="color: #12b1e4;">@pufflegamerz</a>
-				`, version);
+				if (sf.version == 2) {
+					smod.dialogText(
+						"ScratchFormat Help",
+						`<a href="https://github.com/ScratchFormat/ScratchFormat2/issues" style="color: #12b1e4;">Report issues at our Github</a> If you do not own a Github account, simply comment on my profile <a href="https://scratch.mit.edu/users/pufflegamerz/" style="color: #12b1e4;">@pufflegamerz</a>`,
+						sf.version
+					);
+				} else {
+					prompt("Go here to report bugs:", "https://github.com/ScratchFormat/ScratchFormat2/issues");
+				}
 			}
 
-			formatter.appendChild(icon);
+			sf.formatter.appendChild(icon);
 			continue;
 		}
 
-		icon.fillers = tags[t].fillers;
+		icon.fillers = sf.tags[t].fillers;
 
 		// This may look janky, but with Chrome extensions,
 		// Everything is jank. Basically I have to set custom
@@ -149,78 +158,94 @@ setTimeout(function() {
 			textarea.focus();
 		}
 
-		formatter.appendChild(icon);
+		sf.formatter.appendChild(icon);
 	}
 
 	// Move formatter if user clicks on textarea.
 	document.body.onclick = function(event) {
+		// Note: duplicate of "textareaFinder"
 		if (event.target.name == "content" || event.target.name == "compose-comment") {
-			event.target.parentElement.prepend(formatter);
-			formatter.style.width = event.target.offsetWidth + "px";
+			// Check if it already has formatter.
+			// A somewhat messy solution, but it is fine.
+			if (event.target.parentElement.children[0].id !== "formatter") {
+				event.target.parentElement.prepend(sf.formatter);
+				sf.formatter.style.width = event.target.offsetWidth + "px";
+			}
 		}
 	}
 
 	// Initial background formatting loop.
 	setInterval(function() {
-		format();
+		sf.format();
 	}, 300);
-}, 1000);
+}
 
-var oldComments = 0;
-function format() {
+// This is a 1 second timeout for page load, since I am
+// too lazy to figure out real page load times
+setTimeout(sf.init, 1000);
+
+// Function to format comments that are not already
+// formatted
+sf.oldComments = 0;
+sf.format = function() {
 	// Quit if we already formatted those comments.
 	// Checks for last vs new length.
 	var comments = document.querySelectorAll(".content, .emoji-text");
-	if (oldComments == comments.length) {
+	if (sf.oldComments == comments.length) {
 		return;
 	}
 
-	oldComments = comments.length;
+	sf.oldComments = comments.length;
 
 	for (var c = 0; c < comments.length; c++) {
 		comments[c].style.whiteSpace = "pre-line";
 		if (comments[c].className == "emoji-text") {
 			comments[c].style.marginLeft = "3px";
 		}
 
-		comments[c].innerHTML = parse(comments[c].innerHTML);
+		comments[c].innerHTML = sf.parse(comments[c].innerHTML);
 	}
 }
 
-// Custom regex parser. Easy to maintain.
-function parse(text) {
+// Custom regex SFML* parser. It parses differently than HTML. Instead
+// Of replacing [b] with <b>, it it replaces both tags with
+// text between them. Therefore, "[b][b]Hello[/b][/b]" will not work.
+// It doesn't really matter though, and won't be changed unless it
+// is able to cause significant issues in the future.
+// *ScratchFormat Markup Language (basically BBCode)
+sf.parse = function(text) {
 	// Note that the new scratchformat standard is [],
 	// and the () is outdated, and a bit harder to type.
 	// But, we will detect both for historical reasons
 	var startBracket = "[\\(|\\[]";
 	var endBracket = "[\\)|\\]]";
 
-	for (var t = 0; t < tags.length; t++) {
-		if (tags[t].ignore) {
+	for (var t = 0; t < sf.tags.length; t++) {
+		if (sf.tags[t].ignore) {
 			continue;
 		}
 
 		// First part of tag
 		var regex = "";
 		regex += startBracket;
-		regex += tags[t].tag;
+		regex += sf.tags[t].tag;
 		regex += "[=]*([^\\]\\[\\)\\(]*)";
 		regex += endBracket;
 
 		// If just 1 tag (Ex [br])
-		if (tags[t].fillers.length > 1) {
+		if (sf.tags[t].fillers.length > 1) {
 			// Lazy matching (?)
 			regex += "(.*?)";
 
 			// Second part of tag
 			regex += startBracket;
 			regex += "\/";
-			regex += tags[t].tag;
+			regex += sf.tags[t].tag;
 			regex += endBracket;
 		}
-		console.log(regex);
+
 		regex = new RegExp(regex, "gm");
-		text = text.replace(regex, tags[t].formatter("$1", "$2"));
+		text = text.replace(regex, sf.tags[t].formatter("$1", "$2"));
 	}
 
 	// Format trailing breaklines and spaces

smod.js

@@ -30,6 +30,7 @@ var smod = {
 	// This is bad, bad, bad. If anybody can find the native
 	// way to create popups in Scratch 3.0 React.js, let me know.
 	dialog3: function(title, text) {
+		console.log("asd");
 		var html = `"<div class="ReactModalPortal"><div class="modal-overlay modal-overlay"><div aria-label="Report Comment" class="modal-content mod-report modal-sizes modal-content mod-report" role="dialog" tabindex="-1"><div class="modal-content-close" onclick="this.parentElement.parentElement.parentElement.outerHTML = null;"><img alt="close-icon" class="modal-content-close-img" draggable="true" src="/svgs/modal/close-x.svg"></div><div><div class="report-modal-header" style="background-color: #395c79; box-shadow: inset 0 -1px 0 0 #001fff;"><div class="report-content-label"><span>` + title + `</span></div></div><div class="report-modal-content" style="padding-bottom: 50px;"><div><div class="instructions"><span>` + text +`</span></div></div></div></div></div></div>"</div>`;
 		document.body.innerHTML += html;
 	},