first test and demo

2 years ago · d1bf127222
commit d1bf127222
9 changed files with 200 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,36 @@
+# Textoscope
+
+![cover stupid](cover.jpg)
+
+Write text with different levels of details and modulate them with the textoscope. It reads XML files and generate an interactive controller for adjusting the visibility of each level. This time with the name went really bad ops ah ah sorry.
+
+## How to use it
+
+Select an XML file. If it's well formed the Textoscope will read it and generate an interface to toggle each level. The file is not uploaded anywhere, everything happens in your browser.
+
+## XML document?
+
+XML is a markup language to write structured document. It's similar to HTML, but there are no defined tag. You can just invent whatever and use it to create some structures.
+
+Here is a simple example, the indentation is just for fun and not necessary at all.
+
+```xml
+<stage>
+    There is a stage with a stand-up comedian that tells a lame joke
+        <actor>
+            "Why is everyone friends with mushrooms?
+                <mumble>(oh no I forgot why)</mumble>
+            Because they are fungis."
+        </actor>
+        <public>
+            and everyone in the public look at the stage awkwardly,
+                <guy>
+                    a guy cough
+                            <sfx>*cough *cough</sfx>
+                </guy>
+        </public>
+    and leaves.
+</stage>
+```
+
+The only constraint is that the document must have one root element that contains all the others, like the `<stage>` element in the example.
--- a/another.xml
+++ b/another.xml
@ -0,0 +1,3 @@
+<test>
+This is another test just to see <how>how this thing works</how> <disclaimer> (if it works)</disclaimer>
+</test>
--- a/cover.jpg
+++ b/cover.jpg
--- a/demo.mov
+++ b/demo.mov
--- a/error.xml
+++ b/error.xml
@ -0,0 +1,9 @@
+<bad>
+
+a bad formed xml
+
+<with>
+
+with messed up tags etc </end>
+
+</bad>
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>XML WRITING</title>
+		<script src="text.js" defer></script>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<input type="file" id="file-selector" accept=".xml" /><br />
+		<div id="controller"></div>
+		<div id="container"></div>
+	</body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,26 @@
+html,
+body {
+	font-size: 36px;
+	line-height: 1.6;
+	font-family: sans-serif;
+	padding: 18px;
+	color: #2e4053;
+}
+
+#controller {
+	margin-bottom: 48px;
+	display: inline-block;
+	padding: 16px;
+	background-color: #ebedef;
+}
+
+#controller label + input {
+	margin-left: 32px;
+}
+
+input[type="file"] {
+	background-color: #ebedef;
+	padding: 16px;
+	font-size: 36px;
+	line-height: 1.6;
+}
--- a/test.xml
+++ b/test.xml
@ -0,0 +1,16 @@
+<stage>
+    There is a stage with a stand-up comedian that tells a lame joke
+        <actor>
+            "Why is everyone friends with mushrooms? 
+                <mumble>(oh no I forgot why)</mumble>     
+            Because they are fungis."
+        </actor>
+        <public>
+            and everyone in the public look at the stage awkwardly, 
+                <guy>
+                    a guy cough 
+                            <sfx>*cough *cough</sfx>
+                </guy>
+        </public>
+    and leaves. 
+</stage>
--- a/text.js
+++ b/text.js
@ -0,0 +1,94 @@
+fetch("test.xml")
+	.then((res) => res.text())
+	.then((data) => {
+		parseDocument(data);
+	});
+
+const parseDocument = function (data) {
+	const parser = new DOMParser();
+	const doc = parser.parseFromString(data, "application/xml");
+
+	const container = document.querySelector("#container");
+	const levels = document.querySelector("#controller");
+	container.innerHTML = "";
+	levels.innerHTML = "";
+
+	const errorNode = doc.querySelector("parsererror");
+	if (errorNode) {
+		let error = document.createElement("span");
+		error.style.color = "tomato";
+		error.innerHTML = "Error while parsing the XML file! Check if the document is well formed";
+		levels.appendChild(error);
+	} else {
+		controller(layers(doc));
+		display(doc);
+	}
+};
+
+const layers = function (xml) {
+	return new Set([...xml.querySelectorAll("*")].map((node) => node.tagName));
+};
+
+const controller = function (levels) {
+	const controller = document.querySelector("#controller");
+	for (const level of levels) {
+		let check = document.createElement("input");
+		check.type = "checkbox";
+		check.checked = true;
+		check.value = level;
+
+		let label = document.createElement("label");
+		label.for = level;
+		label.innerHTML = level;
+
+		controller.appendChild(check);
+		controller.appendChild(label);
+
+		check.addEventListener("change", (el) => {
+			console.log(check.checked);
+			setVisibility(check.checked, level);
+		});
+	}
+};
+
+const setVisibility = function (visibility, selector) {
+	let elements = document.getElementsByClassName(selector);
+	for (const el of elements) {
+		el.style.display = visibility ? "initial" : "none";
+	}
+};
+
+const display = function (doc) {
+	const container = document.querySelector("#container");
+
+	traverse(doc.documentElement, (el) => {
+		let block = document.createElement("span");
+		block.classList.add(el.parentNode.tagName);
+		block.innerHTML = el.textContent;
+		container.appendChild(block);
+	});
+};
+
+const traverse = function (el, callback) {
+	if (el.childNodes.length) {
+		for (const child of el.childNodes) {
+			traverse(child, callback);
+		}
+	} else {
+		if (typeof callback == "function") {
+			callback(el);
+		}
+	}
+};
+
+const fileSelector = document.getElementById("file-selector");
+fileSelector.addEventListener("change", (event) => {
+	const file = event.target.files[0];
+
+	const reader = new FileReader();
+	reader.addEventListener("load", (event) => {
+		parseDocument(event.target.result);
+	});
+
+	reader.readAsText(file);
+});