html.js/example.html at wip · duckafire/html.js · 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
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>html.js example</title>
	<style>body{background-color:#292929;color:#bfbfbf;}input{min-width: 6em;width: 50%;background-color:#3a3a3a;color:inherit;border:1px solid #1f1f1f;border-radius:0.25em;font-size:1em;outline:none;}.hello-world{margin:0;font-size:10em;}.dest{background-color:#714;height:min-content;margin:1em;padding:1em;}</style>
	<script src="./index.js"></script>
</head>
<body>
	<div id="dest" class="dest"></div>

	<script>
		HJDefaultAttributes.set({
			a: {rel: "noopener noreferrer"},
			i: {display: "block", fontSize: "2rem"},
		});

		HJDefaultAttributes.unset({
			i: ["fontSize"],
		});

		const inputEvents = {
			click: () => console.log("CLICKED!"),
			mouseover: [
				() => console.log("MOUSE OVER!"),
				() => console.log("mouse over AGAIN!!"),
			],
		};

		document.getElementById("dest").appendChild(
			DIV( null,
				H1( {className: "hello-world", _data: {foo: "bar"}, _var: {fooColor: "#123456"}},
					"Hello world!",
				H1),
				INPUT( {value: "Lorem ipsum", type: "text", readOnly: "readonly", _event: inputEvents} ),
				P( {translate: "no", _style: {fontSize: "1.25rem", paddingRight: "20%"}, _aria: {label: "Foo ARIA label."}},
					"Lorem ipsum odor amet, consectetuer adipiscing elit.",
					BR(),
					BR(),
					SPAN( {_style: {fontWeight: "bold", cursor: "pointer"}},
						"Potenti ultricies inceptos, ",
					SPAN),
					"quam facilisis aliquam vehicula",
				P),
			DIV),
		);
	</script>
</body>
</html>