move tree into frame, orchestrate navigation via channels

unreal-archive · Jun 14, 2022 · c514cfe · c514cfe
1 parent 0ff03ca
commit c514cfe
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 39 deletions.
diff --git a/src/main/java/net/shrimpworks/unreal/scriptbrowser/App.java b/src/main/java/net/shrimpworks/unreal/scriptbrowser/App.java
@@ -87,7 +87,9 @@ public static void main(String[] args) throws IOException {
 		System.err.printf("Loaded %d classes in %d packages in %dms%n", classCounter.get(), sources.packages.size(),
 						  loadedTime - startTime);
 
+		System.err.println("Generating index page");
 		Generator.offloadStatic("static.list", outPath);
+		Generator.index(outPath);
 
 		System.err.println("Generating navigation tree");
 		Generator.tree(children(sources, null), outPath);

diff --git a/src/main/java/net/shrimpworks/unreal/scriptbrowser/www/Generator.java b/src/main/java/net/shrimpworks/unreal/scriptbrowser/www/Generator.java
@@ -66,6 +66,21 @@ public class Generator {
 		TPL_CONFIG.setOutputFormat(HTMLOutputFormat.INSTANCE);
 	}
 
+	public static void index(Path outPath) {
+		try {
+			Template tpl = TPL_CONFIG.getTemplate("index.ftl");
+			try (Writer writer = Channels.newWriter(
+				Files.newByteChannel(
+					outPath.resolve("index.html"),
+					StandardOpenOption.WRITE, StandardOpenOption.CREATE, StandardOpenOption.TRUNCATE_EXISTING
+				), StandardCharsets.UTF_8)) {
+				tpl.process(Map.of(), writer);
+			}
+		} catch (IOException | TemplateException e) {
+			throw new RuntimeException(e);
+		}
+	}
+
 	public static void tree(Collection<UClassNode> nodes, Path outPath) {
 		try {
 			Template tpl = TPL_CONFIG.getTemplate("tree.ftl");

diff --git a/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/index.ftl b/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/index.ftl
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+	<title>UnrealScript Browser</title>
+	<link rel="stylesheet" href="static/style.css">
+	<link rel="stylesheet" href="static/solarized-light.css">
+</head>
+
+<body>
+<div id="page">
+	<iframe id="nav" src="tree.html"></iframe>
+
+	<header><h1 id="header"></h1></header>
+
+	<iframe id="source"></iframe>
+</div>
+</body>
+
+<#noparse>
+<script>
+	document.addEventListener("DOMContentLoaded", () => {
+		const header = document.getElementById("header")
+		const nav = document.getElementById("nav")
+		const source = document.getElementById("source")
+
+		// establish comms with the navigation tree, so it can tell us what to put into the source area
+		nav.addEventListener("load", () => {
+			const channel = new MessageChannel()
+			const port1 = channel.port1
+
+			port1.onmessage = (m) => {
+				switch (m.data.event) {
+					case "nav":
+			  		source.src = m.data.url;
+						break
+					default:
+						console.log("unknown message event ", m.data.type, m.data)
+				}
+			}
+
+			nav.contentWindow.postMessage('hello nav', '*', [channel.port2])
+		})
+
+	  // establish comms with the source area, so we can change the title based on what its showing
+		source.addEventListener("load", () => {
+			const channel = new MessageChannel()
+			const port1 = channel.port1
+
+			port1.onmessage = (m) => {
+				switch (m.data.event) {
+					case "loaded":
+						header.innerHTML = m.data.pkg + " / " + m.data.clazz
+						break
+					default:
+						console.log("unknown message event ", m.data.type, m.data)
+				}
+			}
+
+			source.contentWindow.postMessage('hello source', '*', [channel.port2])
+		})
+	})
+</script>
+</#noparse>
+
+</html>
diff --git a/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/static/solarized-light.css b/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/static/solarized-light.css
@@ -7,7 +7,7 @@ header {
 	border-left: 50px solid #eee8d5;
 }
 
-nav {
+#nav, #tree-holder {
 	background-color: #eee8d5;
 }
 

diff --git a/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/static/style.css b/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/static/style.css
@@ -17,11 +17,19 @@ body {
 	height: 100vh;
 }
 
-nav {
+#nav {
 	grid-area: nav;
+	height: 100%;
+	width: 100%;
+	border: none;
+}
+
+#tree-holder {
 	display: grid;
 	grid-template: "search"
 	               "tree";
+	height: 100vh;
+
 	grid-template-rows: 40px 1fr;
 
 	box-shadow: -10px 0 10px -7px rgba(0,0,0,0.5) inset;

diff --git a/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/tree.ftl b/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/tree.ftl
@@ -17,16 +17,11 @@
 </head>
 
 <body>
-	<div id="page">
-		<nav>
-			<section id="search">
-				<input type="text" id="filter" placeholder="filter"/>
-			</section>
-			<section id="tree"></section>
-		</nav>
-
-		<header><h1 id="header"></h1></header>
-		<iframe id="source"></iframe>
+	<div id="tree-holder">
+		<section id="search">
+			<input type="text" id="filter" placeholder="filter"/>
+		</section>
+		<section id="tree"></section>
 	</div>
 </body>
 
@@ -39,10 +34,18 @@
 <#noparse>
 <script>
   document.addEventListener("DOMContentLoaded", () => {
-	  const header = document.getElementById("header")
 	  const tree = document.getElementById("tree")
-	  const source = document.getElementById("source")
 	  const filter = document.getElementById("filter")
+	  let port2
+
+		// establish comms with the index page
+	  window.addEventListener('message', (e) => {
+		  port2 = e.ports[0]
+
+		  port2.onmessage = (m) => {
+			  console.log(m.data)
+		  }
+	  })
 
 		function initTree() {
 			while (tree.firstChild) {
@@ -61,19 +64,18 @@
 			pad.classList.add("pad")
 			if (node.children.length) {
 				pad.classList.add("plus")
-		  	pad.textContent = "+";
+		  	pad.textContent = "+"
 		  	pad.addEventListener("click", () => {
 			  	kids.classList.toggle("open")
+					pad.textContent = kids.classList.contains("open") ? "-" : "+"
 				})
 	  	}
 			div.appendChild(pad);
 
 			const link =  document.createElement('a');
 			link.id = `${node.pkg}.${node.clazz}`
 			link.textContent = node.clazz
-			link.addEventListener("click", () => {
-				source.src = node.pkg.toLowerCase() + "/" + node.clazz.toLowerCase() + ".html"
-			})
+			link.addEventListener("click", () => openClassNode(node))
 			div.appendChild(link)
 
 			if (node.children) {
@@ -104,36 +106,24 @@
 				const link = document.createElement('a');
 				link.id = `${node.pkg}.${node.clazz}`
 				link.textContent = node.clazz
-				link.addEventListener("click", () => {
-					source.src = node.pkg.toLowerCase() + "/" + node.clazz.toLowerCase() + ".html"
-				})
+				link.addEventListener("click", () => openClassNode(node))
 				div.appendChild(link)
 				parent.appendChild(div);
 			}
 
 		  if (node.children) node.children.forEach(n => filterNode(parent, n, filterString))
 		}
 
-		initTree()
-
-		source.addEventListener("load", () => {
-			const channel = new MessageChannel()
-			const port1 = channel.port1
-
-			port1.onmessage = (m) => {
-				switch (m.data.event) {
-					case "loaded":
-						header.innerHTML = m.data.pkg + " / " + m.data.clazz
-						break
-					default:
-						console.log("unknown message event ", m.data.type, m.data)
-		  	}
-			}
+		function openClassNode(node) {
+			port2.postMessage({
+				"event": "nav",
+				"url": node.pkg.toLowerCase() + "/" + node.clazz.toLowerCase() + ".html"
+			});
+		}
 
-			source.contentWindow.postMessage('hello frame', '*', [channel.port2])
-		})
+		initTree()
 
-	  filter.addEventListener("keyup", (e) => {
+	  filter.addEventListener("keyup", () => {
 			filterNodes(filter.value)
 		})
   })
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ header { @@
     	border-left: 50px solid #eee8d5;
     }
-    nav {
+    #nav, #tree-holder {
     	background-color: #eee8d5;
     }
@@ Expand Down @@