-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
60 lines (60 loc) · 3.12 KB
/
example.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="initial-scale=1" name="viewport">
<meta name="description" content="Notification handler. KISS, light and library free.">
<title>TreeList.js 0.0.1 - Demo</title>
<style>
html, body { align-items: center; display: flex; flex-direction: column; font-family: sans-serif; height: 100%; justify-content: center; margin: 0; width: 100%; }
html { width: 100%; }
body { text-align: center; width: 80%; }
hr { color: white; width: 75%; }
button { border: solid 1px grey; border-radius: 5px; cursor: pointer; margin: 5px; padding: 5px 10px; }
button[disabled] { cursor: not-allowed; }
p { transition: opacity .1s ease-out; }
</style>
<link rel="stylesheet" href="dist/treelist.min.css">
</head>
<body>
<a href="https://github.com/ArthurBeaulieu/TreeList.js" target="_blank" style="position: absolute; right: 0; top: 0;"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" alt="Fork me on GitHub"></a>
<h1>TreeList.js – Version 0.0.1</h1>
<hr>
<div id="render-to"></div>
<hr>
<p>
<a href="https://github.com/ArthurBeaulieu/TreeList.js/releases" title="Releases" target="_blank" rel="noreferrer noopener"><img src="https://badgen.net/badge/version/0.0.1/blue" alt="version-badge"></a>
<a href="https://github.com/ArthurBeaulieu/TreeList.js/blob/master/LICENSE" title="License" target="_blank" rel="noreferrer noopener"><img src="https://img.shields.io/github/license/ArthurBeaulieu/TreeList.js.svg" alt="license-badge"></a>
<a href="doc/index.html" title="Documentation" target="_blank" rel="noreferrer noopener"><img src="https://badgen.net/badge/documentation/written/green" alt="documentation-badge"></a>
<img src="https://badgen.net/badge/test/passed/green" alt="test-badge" title="Run npm run test">
<img src="https://badgen.net/badge/dependencies/none/green" alt="dependencies-badge" title="Check package.json file">
</p>
<p style="font-size: .9rem; font-style: italic; margin: 0;">Arthur Beaulieu – October 2020</p>
<script type="module">
import TreeList from './src/TreeList.js';
// Need to fetch JSON file, only required for demo
const request = new XMLHttpRequest();
request.overrideMimeType('application/json');
request.open('GET', './src/demoModel.json', true);
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status === 200) {
const treelist = new TreeList({
renderTo: document.getElementById('render-to'),
model: JSON.parse(request.responseText),
nodeClicked: node => {
console.log(node)
}
});
} else {
console.log(`Error when loading ${path}.\nPlease contact [email protected] (request status: ${request.status}).`);
}
}
};
// Send HTTP req to fetch JSON model file
request.send();
</script>
</body>
</html>