Add Upa URL demo

upa-url · Sep 10, 2024 · ad616bb · ad616bb
1 parent c620e38
commit ad616bb
Show file tree

Hide file tree

Showing 6 changed files with 182 additions and 3 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -7,8 +7,14 @@
 # Source files
 ###############################################################################
 
-*.css   text
-*.html  text
-*.js    text
+*.css   text eol=lf
+*.html  text eol=lf
+*.js    text eol=lf
 *.md    text
 *.txt   text
+
+###############################################################################
+# Binary files
+###############################################################################
+
+*.wasm  binary
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Upa URL demo</title>
+  <link rel="stylesheet" href="url-demo.css">
+  <script src="url-api.js"></script>
+  <script type="module" src="url-demo.js"></script>
+</head>
+<body>
+  <h1>Upa URL demo</h1>
+
+  <form>
+    <label class="label" for="url">URL input:</label>
+    <input id="url" class="field" value="https://example.org/" autofocus>
+
+    <label class="label" for="base">Base URL:</label>
+    <input id="base" class="field" value="https://example.org/">
+
+    <div class="label">
+      <select id="setter"><option value="">—</option></select>
+      <label for="setter-inp">setter:</label>
+    </div>
+    <input id="setter-inp" class="field" value="">
+  </form>
+
+  <h2>Parsing result:</h2>
+
+  <table id="url-output" class="output">
+    <tr class="href"><th>href</th><td></td></tr>
+    <tr class="protocol"><th>protocol</th><td></td></tr>
+    <tr class="username"><th>username</th><td></td></tr>
+    <tr class="password"><th>password</th><td></td></tr>
+    <tr class="hostname"><th>hostname</th><td></td></tr>
+    <tr class="port"><th>port</th><td></td></tr>
+    <tr class="pathname"><th>pathname</th><td></td></tr>
+    <tr class="search"><th>search</th><td></td></tr>
+    <tr class="hash"><th>hash</th><td></td></tr>
+    <tr class="origin"><th>origin</th><td></td></tr>
+  </table>
+
+  <div id="url-error" class="output error"></div>
+</body>
+</html>
diff --git a/demo/url-api.js b/demo/url-api.js
diff --git a/demo/url-api.wasm b/demo/url-api.wasm
diff --git a/demo/url-demo.css b/demo/url-demo.css
@@ -0,0 +1,47 @@
+* { box-sizing: border-box; }
+
+body {
+  font-family: Arial;
+  max-width: 70em;
+  margin: 16px;
+}
+
+h2 {
+  font-size: 1.4em;
+  margin-top: 0.3em;
+  margin-bottom: 0.2em;
+}
+
+form .label {
+  display: block;
+  margin-bottom: 6px;
+}
+
+form .field {
+  width: 100%;
+  margin-bottom: 20px;
+  padding: 3px;
+}
+
+.output {
+  background-color: #F7F0E0;
+  border: 1px solid #D2691E;
+  width: 100%;
+  padding: 1em;
+  margin: 0;
+}
+
+.output th {
+  width: 80px;
+  text-align: right;
+  padding-right: 10px;
+}
+
+.output td {
+  font-family: 'Bitstream Vera Sans Mono', 'Andale Mono', 'Lucida Console', monospace, fixed;
+  white-space: pre-wrap;
+}
+
+.output.error {
+  color: #B90000;
+}
diff --git a/demo/url-demo.js b/demo/url-demo.js
@@ -0,0 +1,81 @@
+const component_list = [
+  "href",
+  "protocol",
+  "username",
+  "password",
+  "host",
+  "hostname",
+  "port",
+  "pathname",
+  "search",
+  "hash",
+  "origin"
+];
+
+function getUrl() {
+  // construct URL
+  const url = elemBase.value.length !== 0
+    ? new Module.URL(elemUrl.value, elemBase.value)
+    : new Module.URL(elemUrl.value);
+  // apply setter
+  if (elemSetter.value.length !== 0)
+    url[elemSetter.value] = elemSetterInp.value;
+  return url;
+}
+
+function showResult(url) {
+  const output = document.getElementById("url-output");
+  const error = document.getElementById("url-error");
+  if (url.valid) {
+    output.hidden = false;
+    error.hidden = true;
+    for (const component of component_list) {
+      const trComponent = output.querySelector(`.${component}`);
+      if (trComponent) {
+        const elemComponent = trComponent.querySelector("td");
+        elemComponent.textContent = url[component];
+      }
+    }
+  } else {
+    output.hidden = true;
+    error.hidden = false;
+    error.textContent = url.base_valid ? "URL parse error" : "Base URL parse error";
+  }
+}
+
+function onInpChange() {
+  showResult(getUrl());
+}
+
+function onSetterChange() {
+  elemSetterInp.disabled = elemSetter.value.length === 0;
+  onInpChange();
+}
+
+// Input elements
+const elemUrl = document.getElementById("url");
+const elemBase = document.getElementById("base");
+const elemSetter = document.getElementById("setter");
+const elemSetterInp = document.getElementById("setter-inp");
+
+// After text change
+elemUrl.addEventListener("input", onInpChange);
+elemBase.addEventListener("input", onInpChange);
+elemSetter.addEventListener("change", onSetterChange);
+elemSetterInp.addEventListener("input", onInpChange);
+
+// Fill setters list
+for (var component of component_list) {
+  if (component !== "origin") {
+    var option = document.createElement("option");
+    option.text = component;
+    option.value = component;
+    elemSetter.add(option);
+  }
+}
+
+// Parse initial URL
+if (Module.URL)
+  onSetterChange();
+else
+  Module['onRuntimeInitialized'] = onSetterChange;