forked from playcanvas/playcanvas.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (81 loc) · 4.17 KB
/
index.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
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
<!DOCTYPE html>
<html>
<head>
<title>PlayCanvas Examples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="icon" type="image/png" href="playcanvas-favicon.png" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="sidenav-toggle">
<svg fill="white" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
</div>
<div class="sidenav closed"></div>
<iframe id="example"></iframe>
<div class="sourcenav">
<div class="btn">View Source</div>
</div>
<script src="examples.js"></script>
<script>
let currentExampleRelativeUrl;
function titleCase(string) {
let sentence = string.toLowerCase().split('-');
for (let i = 0; i < sentence.length; i++){
sentence[i] = sentence[i][0].toUpperCase() + sentence[i].slice(1);
}
return sentence.join(' ');
}
function loadExample(example) {
let iframe = document.getElementById('example');
iframe.src = example;
location.href = location.protocol + '//' +
location.host +
location.pathname +
'#' +
example;
currentExampleRelativeUrl = example;
}
// Load the initial example (loading the first one if none is specified)
let url = location.href;
let hashIndex = url.indexOf('#');
if (hashIndex === -1) {
loadExample(categories[0].name + '/' + categories[0].examples[0] + '.html');
} else {
loadExample(url.substring(hashIndex + 1));
}
// Procedurally build the navigation sidebar
let sidenav = document.querySelector(".sidenav");
categories.forEach(function (category) {
let categoryEntry = document.createElement('p');
categoryEntry.innerText = titleCase(category.name);
sidenav.appendChild(categoryEntry);
category.examples.forEach(function (example) {
let exampleEntry = document.createElement('a');
exampleEntry.addEventListener("click", function (event) {
loadExample(category.name + '/' + example + '.html');
let activeLink = document.getElementsByClassName("active")[0];
activeLink.classList.remove("active");
exampleEntry.classList.add("active");
sidenav.classList.add("closed");
}, false);
let currentExample = window.location.hash.substr(1).split("/")[1].split(".")[0];
if (example === currentExample) {
exampleEntry.classList.add("active");
}
exampleEntry.innerText = titleCase(example);
sidenav.appendChild(exampleEntry);
});
});
// Navigation
let navigationToggle = document.querySelector(".sidenav-toggle");
navigationToggle.addEventListener("click", function (event){
sidenav.classList.toggle("closed");
});
let sourceButton = document.querySelector(".sourcenav > .btn");
sourceButton.addEventListener("click", function (event){
window.open("https://github.com/playcanvas/playcanvas.github.io/blob/master/" + currentExampleRelativeUrl);
});
</script>
</body>
</html>