Add Upa URL demo

upa-url · Sep 11, 2024 · 5c5f4f7 · 5c5f4f7
1 parent c620e38
commit 5c5f4f7
Show file tree

Hide file tree

Showing 6 changed files with 186 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,48 @@
+<!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>
+  <p><i>Try the <a href="https://github.com/upa-url/upa">Upa URL library</a> that runs in the browser.</i></p>
+
+  <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 <i>(leave empty to not use base URL)</i>:</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>
+
+  <!-- GitHub Corner from https://tholman.com/github-corners/ -->
+  <a href="https://github.com/upa-url/upa/tree/url-demo/examples/url-demo" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#C2B8A3; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+</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;