New web files to show content.

0eaec520 · Frank Steinberg · 6233e4e2 · 0eaec520 · 0eaec520
Commit 0eaec520 authored 5 years ago by Frank Steinberg
--- a/web/show.html
+++ b/web/show.html
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>BJCP 2015 Styleguide</title>
+    <link rel="stylesheet" type="text/css" charset="utf-8" href="bjcp-styleguide.css"/>
+    <link rel="styleguide" type="text/xml" href="bjcp-2015-styleguide-de.xml"/>
+  </head>
+  <body>
+    <div style="border:2px solid black; margin:10px; padding:10px; max-width:800px;">
+      <h1 style="text-align:center">Das BJCP Styleguide Übersetzungsprojekt von hobbybrauer.de und HBCON</h1>
+    </div>
+    <div id="styleguide"/>
+    <script src="show.js"> </script>
+  </body>
+</html>
--- a/web/show.js
+++ b/web/show.js
+
+var styleguide;
+var styleguide_node;
+
+// load styleguide and trigger rendering
+var xhr1 = new XMLHttpRequest();
+xhr1.onreadystatechange = function() {
+    if (xhr1.readyState === 4) {
+	styleguide = xhr1.responseXML.querySelector("styleguide");
+	renderStyleguide(styleguide);
+    }
+}
+xhr1.open('GET', document.querySelector('link[rel="styleguide"]').href, true);
+xhr1.setRequestHeader('Content-Type','text/xml; charset=UTF-8');
+xhr1.responseType = "document";
+xhr1.send();
+
+function renderStyleguide(styleguide) {
+
+    styleguide_node = document.importNode(styleguide, true);
+    var div = document.querySelector("div[id='styleguide']");
+    div.parentNode.insertBefore(styleguide_node, div);
+
+    var parts = styleguide_node.querySelectorAll("chapter, category, subcategory");
+    for (var i = 0; i < parts.length; i++) {
+
+	var nav = document.createElement("nav");
+	parts[i].insertBefore(nav, parts[i].childNodes[0]);
+    
+	nav.addEventListener("dblclick", function() {
+	    if (this.parentNode.classList.contains("collapsed")) {
+		var parts = document.querySelectorAll("category, subcategory");
+		for (var i = 0; i < parts.length; i++) {
+		    parts[i].classList.remove("collapsed");
+		}
+	    } else {
+		var parts = document.querySelectorAll("category, subcategory");
+		for (var i = 0; i < parts.length; i++) {
+		    parts[i].classList.add("collapsed");
+		}
+	    }
+	});
+
+	nav.addEventListener("click", function() {
+	    this.parentNode.classList.toggle("collapsed");
+	});
+
+	parts[i].classList.add("collapsed");
+
+    }
+
+}