XML WRITING

commit d1bf127222a7c946ef0e8093b45f756646a1389f Author: Francesco Luzzana Date: Fri Jun 3 18:48:35 2022 +0200 first test and demo diff --git a/README.md b/README.md new file mode 100644 index 0000000..23c2b80 --- /dev/null +++ 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 + + There is a stage with a stand-up comedian that tells a lame joke + + "Why is everyone friends with mushrooms? + (oh no I forgot why) + Because they are fungis." + + + and everyone in the public look at the stage awkwardly, + + a guy cough + *cough *cough + + + and leaves. + +``` + +The only constraint is that the document must have one root element that contains all the others, like the `` element in the example. diff --git a/another.xml b/another.xml new file mode 100644 index 0000000..a173259 --- /dev/null +++ b/another.xml @@ -0,0 +1,3 @@ + +This is another test just to see how this thing works (if it works) + \ No newline at end of file diff --git a/cover.jpg b/cover.jpg new file mode 100644 index 0000000..65d46a1 Binary files /dev/null and b/cover.jpg differ diff --git a/demo.mov b/demo.mov new file mode 100644 index 0000000..b6e170a Binary files /dev/null and b/demo.mov differ diff --git a/error.xml b/error.xml new file mode 100644 index 0000000..4150afb --- /dev/null +++ b/error.xml @@ -0,0 +1,9 @@ + + +a bad formed xml + + + +with messed up tags etc + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..cb5c31b --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + XML WRITING + + + + +
+

+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..044bd6d --- /dev/null +++ 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; +} diff --git a/test.xml b/test.xml new file mode 100644 index 0000000..69878e1 --- /dev/null +++ b/test.xml @@ -0,0 +1,16 @@ + + There is a stage with a stand-up comedian that tells a lame joke + + "Why is everyone friends with mushrooms? + (oh no I forgot why) + Because they are fungis." + + + and everyone in the public look at the stage awkwardly, + + a guy cough + *cough *cough + + + and leaves. + \ No newline at end of file diff --git a/text.js b/text.js new file mode 100644 index 0000000..6d42116 --- /dev/null +++ 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); +});