Skip to content

Commit fc73b9e

Browse files
rmisevrmisev
committed
Add Upa URL demo
1 parent c620e38 commit fc73b9e

File tree

6 files changed

+186
-3
lines changed

6 files changed

+186
-3
lines changed

‎.gitattributes‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,14 @@
77
# Source files
88
###############################################################################
99

10-
*.css text
11-
*.html text
12-
*.js text
10+
*.css text eol=lf
11+
*.html text eol=lf
12+
*.js text eol=lf
1313
*.md text
1414
*.txt text
15+
16+
###############################################################################
17+
# Binary files
18+
###############################################################################
19+
20+
*.wasm binary

‎demo/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Upa URL demo</title>
6+
<link rel="stylesheet" href="url-demo.css">
7+
<script src="url-api.js"></script>
8+
<script type="module" src="url-demo.js"></script>
9+
</head>
10+
<body>
11+
<h1>Upa URL demo</h1>
12+
<p><i>Try the <a href="https://github.com/upa-url/upa">Upa URL library</a> that runs in the browser.</i></p>
13+
14+
<form>
15+
<label class="label" for="url">URL input:</label>
16+
<input id="url" class="field" value="https://example.org/" autofocus>
17+
18+
<label class="label" for="base">Base URL <i>(leave empty to not use base URL)</i>:</label>
19+
<input id="base" class="field" value="https://example.org/">
20+
21+
<div class="label">
22+
<select id="setter"><option value="">—</option></select>
23+
<label for="setter-inp">setter:</label>
24+
</div>
25+
<input id="setter-inp" class="field" value="">
26+
</form>
27+
28+
<h2>Parsing result:</h2>
29+
30+
<table id="url-output" class="output">
31+
<tr class="href"><th>href</th><td></td></tr>
32+
<tr class="protocol"><th>protocol</th><td></td></tr>
33+
<tr class="username"><th>username</th><td></td></tr>
34+
<tr class="password"><th>password</th><td></td></tr>
35+
<tr class="hostname"><th>hostname</th><td></td></tr>
36+
<tr class="port"><th>port</th><td></td></tr>
37+
<tr class="pathname"><th>pathname</th><td></td></tr>
38+
<tr class="search"><th>search</th><td></td></tr>
39+
<tr class="hash"><th>hash</th><td></td></tr>
40+
<tr class="origin"><th>origin</th><td></td></tr>
41+
</table>
42+
43+
<div id="url-error" class="output error"></div>
44+
45+
<!-- GitHub Corner from https://tholman.com/github-corners/ -->
46+
<a href="https://github.com/upa-url/upa/tree/main/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>
47+
</body>
48+
</html>

‎demo/url-api.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/url-api.wasm‎

185 KB
Binary file not shown.

‎demo/url-demo.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
* { box-sizing: border-box; }
2+
3+
body {
4+
font-family: Arial;
5+
max-width: 70em;
6+
margin: 16px;
7+
}
8+
9+
h2 {
10+
font-size: 1.4em;
11+
margin-top: 0.3em;
12+
margin-bottom: 0.2em;
13+
}
14+
15+
form .label {
16+
display: block;
17+
margin-bottom: 6px;
18+
}
19+
20+
form .field {
21+
width: 100%;
22+
margin-bottom: 20px;
23+
padding: 3px;
24+
}
25+
26+
.output {
27+
background-color: #F7F0E0;
28+
border: 1px solid #D2691E;
29+
width: 100%;
30+
padding: 1em;
31+
margin: 0;
32+
}
33+
34+
.output th {
35+
width: 80px;
36+
text-align: right;
37+
padding-right: 10px;
38+
}
39+
40+
.output td {
41+
font-family: 'Bitstream Vera Sans Mono', 'Andale Mono', 'Lucida Console', monospace, fixed;
42+
white-space: pre-wrap;
43+
}
44+
45+
.output.error {
46+
color: #B90000;
47+
}

‎demo/url-demo.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const component_list = [
2+
"href",
3+
"protocol",
4+
"username",
5+
"password",
6+
"host",
7+
"hostname",
8+
"port",
9+
"pathname",
10+
"search",
11+
"hash",
12+
"origin"
13+
];
14+
15+
function getUrl() {
16+
// construct URL
17+
const url = elemBase.value.length !== 0
18+
? new Module.URL(elemUrl.value, elemBase.value)
19+
: new Module.URL(elemUrl.value);
20+
// apply setter
21+
if (elemSetter.value.length !== 0)
22+
url[elemSetter.value] = elemSetterInp.value;
23+
return url;
24+
}
25+
26+
function showResult(url) {
27+
const output = document.getElementById("url-output");
28+
const error = document.getElementById("url-error");
29+
if (url.valid) {
30+
output.hidden = false;
31+
error.hidden = true;
32+
for (const component of component_list) {
33+
const trComponent = output.querySelector(`.${component}`);
34+
if (trComponent) {
35+
const elemComponent = trComponent.querySelector("td");
36+
elemComponent.textContent = url[component];
37+
}
38+
}
39+
} else {
40+
output.hidden = true;
41+
error.hidden = false;
42+
error.textContent = url.base_valid ? "URL parse error" : "Base URL parse error";
43+
}
44+
}
45+
46+
function onInpChange() {
47+
showResult(getUrl());
48+
}
49+
50+
function onSetterChange() {
51+
elemSetterInp.disabled = elemSetter.value.length === 0;
52+
onInpChange();
53+
}
54+
55+
// Input elements
56+
const elemUrl = document.getElementById("url");
57+
const elemBase = document.getElementById("base");
58+
const elemSetter = document.getElementById("setter");
59+
const elemSetterInp = document.getElementById("setter-inp");
60+
61+
// After text change
62+
elemUrl.addEventListener("input", onInpChange);
63+
elemBase.addEventListener("input", onInpChange);
64+
elemSetter.addEventListener("change", onSetterChange);
65+
elemSetterInp.addEventListener("input", onInpChange);
66+
67+
// Fill setters list
68+
for (var component of component_list) {
69+
if (component !== "origin") {
70+
var option = document.createElement("option");
71+
option.text = component;
72+
option.value = component;
73+
elemSetter.add(option);
74+
}
75+
}
76+
77+
// Parse initial URL
78+
if (Module.URL)
79+
onSetterChange();
80+
else
81+
Module['onRuntimeInitialized'] = onSetterChange;

0 commit comments

Comments
 (0)