Skip to content

Commit ffc8cb3

Browse files
shakibashakiba
committed
change local dev testbed url format and handling
1 parent f628eab commit ffc8cb3

File tree

2 files changed

+81
-93
lines changed

2 files changed

+81
-93
lines changed

‎testbed/index.html

+81-75
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,92 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
6-
<link rel="stylesheet" href="/testbed/styles.css" />
7-
<title>Testbed for Planck.js</title>
8-
</head>
9-
<body>
10-
<div class="center">
11-
<div class="header">
12-
<table class="control">
13-
<tr><td>
14-
<a id="testbed-play" class="pause"><span class="pause">Pause</span><span class="play">Play</span></a>
15-
</td><td>
16-
<a id="testbed-reload">Reload</a>
17-
</td><td>
18-
<a id="testbed-prev">Prev</a>
19-
</td><td>
20-
<a id="testbed-next">Next</a>
21-
</td><td>
22-
<select id="testbed-select">
23-
<option selected disabled hidden value=''>Select...</option>
24-
</select>
25-
</td></tr>
26-
</table>
27-
<h3 class="title">Planck.js</h3>
28-
</div>
29-
<canvas id="stage"></canvas>
30-
<div class="output">
31-
<div id="testbed-status"></div>
32-
<div id="testbed-info"></div>
33-
</div>
34-
</div>
35-
<script type="module">
36-
if (window.location.pathname.startsWith('/example/')) {
37-
import(window.location.pathname);
38-
}
39-
</script>
40-
<script type="module">
41-
import list from '/example/list.json';
42-
{
43-
const reloadButton = document.getElementById('testbed-reload');
44-
const listSelect = document.getElementById('testbed-select');
45-
const nextButton = document.getElementById('testbed-next');
46-
const prevButton = document.getElementById('testbed-prev');
473

48-
reloadButton.addEventListener('click', function() {
49-
window.location.reload();
50-
});
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport"
7+
content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
8+
<link rel="stylesheet" href="/testbed/styles.css" />
9+
<title>Testbed for Planck.js</title>
10+
</head>
11+
12+
<body>
13+
<div class="center">
14+
<div class="header">
15+
<table class="control">
16+
<tr>
17+
<td>
18+
<a id="testbed-play" class="pause"><span class="pause">Pause</span><span class="play">Play</span></a>
19+
</td>
20+
<td>
21+
<a id="testbed-reload">Reload</a>
22+
</td>
23+
<td>
24+
<a id="testbed-prev">Prev</a>
25+
</td>
26+
<td>
27+
<a id="testbed-next">Next</a>
28+
</td>
29+
<td>
30+
<select id="testbed-select">
31+
<option selected disabled hidden value=''>Select...</option>
32+
</select>
33+
</td>
34+
</tr>
35+
</table>
36+
<h3 class="title">Planck.js</h3>
37+
</div>
38+
<canvas id="stage"></canvas>
39+
<div class="output">
40+
<div id="testbed-status"></div>
41+
<div id="testbed-info"></div>
42+
</div>
43+
</div>
44+
<script type="module">
45+
const url = new URL(document.location.toString());
46+
const file = url.searchParams.get("example");
47+
import('/example/' + file + '.ts');
48+
</script>
49+
<script type="module">
50+
import list from '/example/list.json';
51+
{
52+
const reloadButton = document.getElementById('testbed-reload');
53+
const listSelect = document.getElementById('testbed-select');
54+
const nextButton = document.getElementById('testbed-next');
55+
const prevButton = document.getElementById('testbed-prev');
5156

52-
listSelect.addEventListener('change', function() {
53-
window.location.href = this.options[listSelect.selectedIndex].value;
54-
});
57+
reloadButton.addEventListener('click', function () {
58+
window.location.reload();
59+
});
5560

56-
for (const example of list){
57-
var opt = document.createElement('option');
58-
opt.value = '/example/' + example;
59-
opt.innerHTML = example;
60-
opt.selected = opt.value === window.location.pathname;
61-
listSelect.appendChild(opt);
62-
}
61+
listSelect.addEventListener('change', function () {
62+
window.location.href = this.options[listSelect.selectedIndex].value;
63+
});
6364

64-
nextButton.addEventListener('click', function() {
65-
playNext(+1);
66-
});
65+
for (const example of list) {
66+
const option = document.createElement('option');
67+
option.value = '?example=' + example;
68+
option.innerHTML = example;
69+
option.selected = window.location.search.indexOf(example) > -1;
70+
listSelect.appendChild(option);
71+
}
6772

68-
prevButton.addEventListener('click', function() {
69-
playNext(-1);
70-
});
73+
nextButton.addEventListener('click', function () {
74+
playNext(+1);
75+
});
7176

72-
function playNext(step) {
73-
for (var i = 0; i < listSelect.options.length; i++) {
74-
var index = (listSelect.selectedIndex + (1 + i) * step + listSelect.options.length) % listSelect.options.length;
77+
prevButton.addEventListener('click', function () {
78+
playNext(-1);
79+
});
7580

76-
var option = listSelect.options[index];
77-
if (option && option.value) {
78-
window.location.href = option.value;
79-
break;
80-
}
81-
}
81+
function playNext(step) {
82+
const nextIndex = (listSelect.selectedIndex + step + listSelect.options.length) % listSelect.options.length;
83+
const nextOption = listSelect.options[nextIndex];
84+
if (nextOption && nextOption.value) {
85+
window.location.href = nextOption.value;
8286
}
8387
}
84-
</script>
85-
</body>
86-
</html>
88+
}
89+
</script>
90+
</body>
91+
92+
</html>

‎vite.config.mts

-18
Original file line numberDiff line numberDiff line change
@@ -79,27 +79,9 @@ function serveConfig(configEnv: ConfigEnv) {
7979
CONSTRUCTOR_FACTORY: "false",
8080
_CONSTRUCTOR_FACTORY: "false",
8181
},
82-
plugins: [
83-
TestbedPlugin,
84-
]
8582
});
8683
}
8784

88-
/** A plugin to serve the testbed for /example/* request */
89-
const TestbedPlugin: Plugin = {
90-
name: "testbed-plugin",
91-
configureServer(server) {
92-
server.middlewares.use(function (req, res, next) {
93-
// console.log("middleware", req);
94-
// todo: check if the url + ".js" or ".ts" is a file
95-
if (req.originalUrl && /^\/example\/(\w|-)+$/.test(req.originalUrl)) {
96-
req.url = "/testbed/";
97-
}
98-
next();
99-
});
100-
}
101-
};
102-
10385
function getLicense() {
10486
const version = process.env.npm_package_version;
10587
const year = new Date().getFullYear();

0 commit comments

Comments
 (0)