prefix scripted elements with uv-, refactor search

Easier modification of the search engine by storing it in HTML
More effective process for picking a URL

public/404.html

@@ -28,9 +28,9 @@
     </div>
     <div class="desc left-margin">
       <p>The server could not route your request.</p>
-      <p id="error"></p>
-      <code id="error-code"></code>
-      <button id="register-sw" value="Register service worker">
+      <p id="uv-error"></p>
+      <code id="uv-error-code"></code>
+      <button id="uv-register-sw" value="Register service worker">
         Register ServiceWorker
       </button>
     </div>

public/error.js

@@ -1,7 +1,7 @@
 "use strict";
-const error = document.getElementById("error");
-const errorCode = document.getElementById("error-code");
-const registerButton = document.getElementById("register-sw");
+const error = document.getElementById("uv-error");
+const errorCode = document.getElementById("uv-error-code");
+const registerButton = document.getElementById("uv-register-sw");
 
 if (location.pathname.startsWith(__uv$config.prefix)) {
   error.textContent = "Error: The service worker is not registered.";

public/index.css

@@ -43,18 +43,18 @@ body {
   margin: 0px 16px;
 }
 
-#error {
+#uv-error {
   color: #ff6666 !important;
   white-space: pre-wrap;
 }
 
-#error-code {
+#uv-error-code {
   font-size: 12px;
   color: #fff;
   font-family: "Courier New", Courier, monospace;
 }
 
-#register-sw {
+#uv-register-sw {
   color: white;
   background: #555555;
   cursor: pointer;
@@ -66,11 +66,11 @@ body {
   display: none;
 }
 
-#register-sw:active {
+#uv-register-sw:active {
   background: #333333;
 }
 
-#register-sw.show {
+#uv-register-sw.show {
   display: block;
 }
 

public/index.html

@@ -81,10 +81,15 @@
     </div>
 
     <form id="uv-form" class="flex-center">
-      <input id="uv-address" placeholder="Search the web freely" />
+      <input
+        id="uv-search-engine"
+        value="https://www.google.com/search?q=%s"
+        type="hidden"
+      />
+      <input id="uv-address" type="text" placeholder="Search the web freely" />
     </form>
-    <p id="error"></p>
-    <code id="error-code"></code>
+    <p id="uv-error"></p>
+    <pre id="uv-error-code"></pre>
     <footer>
       <a
         title="Ultraviolet is a web proxy service maintained by TitaniumNetwork!"
@@ -117,6 +122,7 @@
     <script src="uv/uv.bundle.js"></script>
     <script src="uv/uv.config.js"></script>
     <script src="register-sw.js"></script>
+    <script src="search.js"></script>
     <script src="index.js"></script>
   </body>
 </html>

public/index.js

@@ -1,20 +1,28 @@
 "use strict";
+/**
+ * @type {HTMLFormElement}
+ */
 const form = document.getElementById("uv-form");
-const input = document.getElementById("uv-address");
-const error = document.getElementById("error");
-const errorCode = document.getElementById("error-code");
-
-function isUrl(val = "") {
-  if (
-    /^http(s?):\/\//.test(val) ||
-    (val.includes(".") && val.substr(0, 1) !== " ")
-  )
-    return true;
-  return false;
-}
+/**
+ * @type {HTMLInputElement}
+ */
+const address = document.getElementById("uv-address");
+/**
+ * @type {HTMLInputElement}
+ */
+const searchEngine = document.getElementById("uv-search-engine");
+/**
+ * @type {HTMLParagraphElement}
+ */
+const error = document.getElementById("uv-error");
+/**
+ * @type {HTMLPreElement}
+ */
+const errorCode = document.getElementById("uv-error-code");
 
 form.addEventListener("submit", async (event) => {
   event.preventDefault();
+
   try {
     await registerSW();
   } catch (err) {
@@ -22,10 +30,7 @@ form.addEventListener("submit", async (event) => {
     errorCode.textContent = err.toString();
     throw err;
   }
-  let url = input.value.trim();
-  if (!isUrl(url)) url = "https://www.google.com/search?q=" + url;
-  else if (!(url.startsWith("https://") || url.startsWith("http://")))
-    url = "http://" + url;
 
-  window.location.href = __uv$config.prefix + __uv$config.encodeUrl(url);
+  const url = search(address.value, searchEngine.value);
+  location.href = __uv$config.prefix + __uv$config.encodeUrl(url);
 });

public/search.js

@@ -0,0 +1,32 @@
+"use strict";
+/**
+ *
+ * @param {string} input
+ * @param {string} template Template for a search query.
+ * @returns {string} Fully qualified URL
+ */
+function search(input, template) {
+  try {
+    // input is a valid URL:
+    // eg: https://example.com, https://example.com/test?q=param
+    return new URL(input).toString();
+  } catch (err) {
+    // input was not a valid URL
+  }
+
+  try {
+    // input is a valid URL when http:// is added to the start:
+    // eg: example.com, https://example.com/test?q=param
+    const url = new URL(`http://${input}`);
+    // only if the hostname has a TLD/subdomain
+    if (url.hostname.includes(".")) return url.toString();
+  } catch (err) {
+    // input was not valid URL
+  }
+
+  // input may have been a valid URL, however the hostname was invalid
+
+  // Attempts to convert the input to a fully qualified URL have failed
+  // Treat the input as a search query
+  return template.replace("%s", encodeURIComponent(input));
+}