on-screen-console/demo.html at main · chzager/on-screen-console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>on-screen-console Demo Page</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script>
		if (/\bconsole=\d/.test(window.location.search) === false)
		{
			window.location.replace(window.location + "?console=1");
		};
		</script>
		<link rel="stylesheet" href="dark.css"/>
		<script src="onscreenconsole.js"></script>
		<style>
			* {
				font-family: sans-serif;
			}
			code {
				font-family: monospace;
				font-size: 0.9rem;
				background-color: #eee;
				border-radius: 0.3em;
				padding: 0.3em;
			}
			@media (prefers-color-scheme: dark) {
				* {
					background-color: #333;
					color: #ccc;
				}
				code {
					background-color: #888;
				}
			}
		</style>
	</head>
	<body>
		<div data-style="margin-top: 40vh;">
			<h1>Welcome to the on-screen-console live demo!</h1>
			<p>You see the on-screen-console at to bottom of the page.</p>
			<p>Click any button to see a random output.</p>
			<p>
				<input type="button" value="console.log()" onclick="demo('log', event)" />
				<input type="button" value="console.debug()" onclick="demo('debug', event)" />
				<input type="button" value="console.info()" onclick="demo('info', event)" />
				<input type="button" value="console.warn()" onclick="demo('warn', event)" />
				<input type="button" value="console.error()" onclick="demo('error', event)" />
			</p>
			<p>
				<input type="button" value="simulate error" onclick="throwError(event)" />
				<input type="button" value="simulate error in async function" onclick="throwAsyncError(event)" />
				<input type="button" value="simulate error in promise" onclick="throwErrorInPromise(event)" />
			</p>
			<p>We also have a demo object here that you can inspect. It's called "myObj". Just type <code>myObj</code> in the console input box .</p>
			<p><em>Note: </em>When console loses focus (e.g. when you click outside it), it minimizes.</p>
		</div>
		<script>
		function focus_console(evt)
		{
			evt?.stopPropagation();
			document.querySelector("#on-screen-console input").click();
		};

		function demo(kind, evt)
		{
			const samples = [
				["If you ever wondered if", 0.5, "is less than", 2, ": It's", (0.5 < 2)],
				["It is", new Date()],
				[evt, "triggered from", evt.target],
				[new Error("Did you ask for an error?")],
				["Demo buttons produce random output just to show on-screen-console capabilities."]
			];
			console[kind].apply(null, samples[Math.floor(Math.random()*samples.length)]);
			focus_console(evt);
		};

		function throwErrorInPromise(evt) {
			focus_console(evt);
			return new Promise((resolve, reject) =>
			{
				throw new Error("An error occured within a promise.");
			});
		};

		async function throwAsyncError(evt) {
			focus_console(evt);
			throw new Error("An error occured within an async function.");
		};

		function throwError(evt) {
			focus_console(evt);
			throw new Error("An error occured.");
		};

		let myObj =
		{
			id: "alpha",
			cardinality: 2,
			company: "",
			members: [1, 2, 3, null, "eof"],
			e:
			{
				name: "dummy",
				magic: 21,
				ar: [
					"My name is \"Nobody\".",
					"Ain't it better?",
					'It\'s my first time here.',
					'That was a "great" idea'
				]
			},
			func: (arg) => console.log(arg)
		};
		</script>
		</body>
</html>