From d41434cd245a9d68c1560d200f47d74530e39ebc Mon Sep 17 00:00:00 2001
From: James Tomasino <james@tomasino.org>
Date: Fri, 24 Feb 2023 14:28:58 +0000
Subject: [PATCH] externalizing js

---
 index.html | 100 ++------------------------------------------------
 main.js    | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 109 insertions(+), 97 deletions(-)
 create mode 100644 main.js

diff --git a/index.html b/index.html
index ff403f7..c59b76b 100644
--- a/index.html
+++ b/index.html
@@ -5,106 +5,12 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 		<link rel='icon' href='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>♊️</text></svg>'>
 		<link rel="stylesheet" href="styles.css">
-		<script>
-			var geminiHistory = []
-			var geminiPresent = 0
-			function geminiInit(){
-				document.getElementById("wobbly-window").innerHTML = ""
-
-				var startpage = "gemini://tildeverse.org/"
-				query_string = window.location.href.split('?')
-				if (query_string.length > 1){
-					startpage = query_string[1]
-				}
-
-				document.getElementById("wobbly-addressbar").value = startpage
-				geminiHistory.push({url:startpage})
-				geminiGo()
-			}
-			function geminiHelpToggle(){
-				if (document.getElementById("wobbly-help-button").innerHTML === 'Help') {
-					document.getElementById("wobbly-help").style.display = 'block'
-					document.getElementById("wobbly-help-button").innerHTML = "Unhelp"
-				} else {
-					document.getElementById("wobbly-help").style.display = 'none'
-					document.getElementById("wobbly-help-button").innerHTML = "Help"
-				}
-			}
-			function geminiGo(){
-				url = document.getElementById("wobbly-addressbar").value.trim().split("?")[0]
-				if (url.length == 0) {
-					return
-				}
-				if (! url.startsWith("gemini://")) {
-					url = "gemini://" + url
-				}
-				if (! (url === geminiHistory[geminiPresent].url)) {
-					geminiPresent++
-					geminiHistory[geminiPresent] = {url:url}
-					while (geminiHistory.length > geminiPresent +1) {
-						geminiHistory.pop()
-					}
-				}
-				var xmlHttp = new XMLHttpRequest()
-				xmlHttp.open( "GET", "browser.cgi?" + url )
-				xmlHttp.onload = function (e) {
-					var body = xmlHttp.responseText
-					document.getElementById("wobbly-window").innerHTML = body
-					geminiHistory[geminiPresent].body = body
-				}
-				xmlHttp.send(null)
-			}
-			function geminiBack(){
-				if (geminiPresent > 0) {
-					geminiPresent--
-					document.getElementById("wobbly-addressbar").value = geminiHistory[geminiPresent].url
-					document.getElementById("wobbly-window").innerHTML = geminiHistory[geminiPresent].body
-				}
-			}
-			// Big thanks to idiomdrottning for fixing my geminiUp function <3
-			function geminiUp(){
-				var components = geminiHistory[geminiPresent].url.match(/\/[^/]*/g)
-				if ("/" == components.pop()) components.pop()
-				if (components.length == 1) return
-				document.getElementById("wobbly-addressbar").value = "gemini:" + components.join("") + "/"
-				geminiGo()
-			}
-			function geminiForward(){
-				if (geminiPresent < geminiHistory.length - 1) {
-					geminiPresent++
-					document.getElementById("wobbly-addressbar").value = geminiHistory[geminiPresent].url
-					document.getElementById("wobbly-window").innerHTML = geminiHistory[geminiPresent].body
-				}
-			}
-			function geminiEnterListener(e) {
-				if(e.keyCode === 13) {
-					e.preventDefault()
-					geminiGo()
-				}
-			}
-			function geminiLinkClickListener(e) {
-				var e = window.e || e;
-				if (e.target.tagName === 'A' && e.target.href.startsWith("gemini://")) {
-					// We only care about clicked gemini:// links
-					e.preventDefault()
-					document.getElementById("wobbly-addressbar").value = e.target.href
-					geminiGo()
-				} else {
-					return;
-				}
-			
-			}
-			if (document.addEventListener) {
-				document.addEventListener('click', geminiLinkClickListener, false);
-			} else {
-				document.attachEvent('onclick', geminiLinkClickListener);
-			}
-		</script>
+		<script defer type="text/javascript" src="main.css"></script>
 	</head>
-	<body onload="geminiInit()">
+	<body>
 		<div id="wobbly-toolbar">
 			<div id="wobbly-tools">
-				<button onclick="geminiHelpToggle()" id="wobbly-help-button">Help</button>
+				<button id="wobbly-help-button">Help</button>
 				<button onclick="geminiBack()" id="wobbly-back">⬅️</button>
 				<button onclick="geminiUp()" id="wobbly-up">⬆️</button>
 				<button onclick="geminiForward()" id="wobbly-forward">➡️</button>
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..9e6ea37
--- /dev/null
+++ b/main.js
@@ -0,0 +1,106 @@
+var geminiHistory = []
+var geminiPresent = 0
+
+// DOM Elements
+var wobblyWindow
+var wobblyHelpButton
+
+function geminiInit() {
+  wobblyWindow = document.getElementById("wobbly-window")
+  wobblyHelpButton = document.getElementById('wobbly-help-button')
+  wobblyHelpButton.addEventListener('click', geminiHelpToggle)
+
+  // Clear screen to init
+  wobblyWindow.innerHTML = ""
+
+  var startpage = "gemini://tildeverse.org/"
+  query_string = window.location.href.split('?')
+  if (query_string.length > 1){
+    startpage = query_string[1]
+  }
+
+  document.getElementById("wobbly-addressbar").value = startpage
+  geminiHistory.push({url:startpage})
+  geminiGo()
+}
+
+function geminiHelpToggle() {
+  if (document.getElementById("wobbly-help-button").innerHTML === 'Help') {
+    document.getElementById("wobbly-help").style.display = 'block'
+    document.getElementById("wobbly-help-button").innerHTML = "Unhelp"
+  } else {
+    document.getElementById("wobbly-help").style.display = 'none'
+    document.getElementById("wobbly-help-button").innerHTML = "Help"
+  }
+}
+
+function geminiGo() {
+  url = document.getElementById("wobbly-addressbar").value.trim().split("?")[0]
+  if (url.length == 0) {
+    return
+  }
+  if (! url.startsWith("gemini://")) {
+    url = "gemini://" + url
+  }
+  if (! (url === geminiHistory[geminiPresent].url)) {
+    geminiPresent++
+    geminiHistory[geminiPresent] = {url:url}
+    while (geminiHistory.length > geminiPresent +1) {
+      geminiHistory.pop()
+    }
+  }
+  var xmlHttp = new XMLHttpRequest()
+  xmlHttp.open( "GET", "browser.cgi?" + url )
+  xmlHttp.onload = function (e) {
+    var body = xmlHttp.responseText
+    document.getElementById("wobbly-window").innerHTML = body
+    geminiHistory[geminiPresent].body = body
+  }
+  xmlHttp.send(null)
+}
+
+function geminiBack() {
+  if (geminiPresent > 0) {
+    geminiPresent--
+    document.getElementById("wobbly-addressbar").value = geminiHistory[geminiPresent].url
+    document.getElementById("wobbly-window").innerHTML = geminiHistory[geminiPresent].body
+  }
+}
+
+// Big thanks to idiomdrottning for fixing my geminiUp function <3
+function geminiUp() {
+  var components = geminiHistory[geminiPresent].url.match(/\/[^/]*/g)
+  if ("/" == components.pop()) components.pop()
+  if (components.length == 1) return
+  document.getElementById("wobbly-addressbar").value = "gemini:" + components.join("") + "/"
+  geminiGo()
+}
+function geminiForward() {
+  if (geminiPresent < geminiHistory.length - 1) {
+    geminiPresent++
+    document.getElementById("wobbly-addressbar").value = geminiHistory[geminiPresent].url
+    document.getElementById("wobbly-window").innerHTML = geminiHistory[geminiPresent].body
+  }
+}
+function geminiEnterListener(e) {
+  if(e.keyCode === 13) {
+    e.preventDefault()
+    geminiGo()
+  }
+}
+
+function geminiLinkClickListener(e) {
+  if (e.target.tagName === 'A' && e.target.href.startsWith("gemini://")) {
+    // We only care about clicked gemini:// links
+    e.preventDefault()
+    document.getElementById("wobbly-addressbar").value = e.target.href
+    geminiGo()
+  } else {
+    return;
+  }
+
+}
+
+window.onload = function () {
+  geminiInit()
+}