Initial commit

ee0d660b · Arnaud Bey · ee0d660b · ee0d660b · ee0d660b
Commit ee0d660b authored 1 year ago by Arnaud Bey
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>poc ithac viz</title>
+    <link href="./style.css" rel="stylesheet" />
+</head>
+
+<body>
+    <header>
+        <h2>XML Explorer</h2>
+    </header>
+    <div id="wrapper">
+        <div id="tools">
+            <h1>Choix hierachiques</h1>
+            <div id="hierarchical-choices">
+            </div>
+            <div id="add-hierarchical-choice">+ ajouter un choix</div>
+        </div>
+        <div id="visu">
+            Nombre de choix hiérarchiques : <span id="choices-count">0</span>
+        </div>
+        <div id="inspector">
+        </div>
+    </div>
+
+    <script type="module" src="./script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
--- a/script.js
+++ b/script.js
+window.addEventListener("load", (event) => {
+  console.log("-------- script.js")
+  explorer.init()
+});
+
+var explorer = {
+  hierarchicalOptions: {
+    "": "",
+    paratxt_title: "Titre",
+    paratxt_lang: "Langue",
+    paratxt_author: "Auteur",
+    paratxt_pubplace: "PubPlace",
+    paratxt_date: "Date",
+    paratxt_publisher: "Publisher",
+    paratxt_editor: "Editor",
+    paratxt_ana: "Ana",
+    ancient_title: "Anc. Title",
+    ancient_author: "Anc. Author"
+  },
+
+  init: function () {
+    console.log("-------- init")
+
+    document.querySelector("#add-hierarchical-choice").addEventListener("click", () => {
+      this.addHierarchicalChoice()
+    })
+  },
+
+  recalculate: function () {
+    console.log("-------- recalculate")
+    
+    const countChoices = [...document.querySelectorAll(".hierarchical-choice")].filter((choice) => choice.value != "").length
+    document.querySelector("#choices-count").innerText = countChoices
+  },
+
+  removeHierarchicalChoice: function(deleteBtn){
+    console.log("-------- removeHierarchicalChoice")
+
+    deleteBtn.parentNode.remove()
+    this.recalculate()
+  },
+
+  addHierarchicalChoice: function () {
+    console.log("-------- addHierarchicalChoice")
+
+    let wrapper = document.createElement("div")
+    wrapper.classList.add("hierarchical-choice-wrapper")
+    let select = document.createElement("select")
+    select.classList.add("hierarchical-choice")
+    wrapper.appendChild(select)
+
+    Object.keys(this.hierarchicalOptions).forEach(key => {
+      const value = this.hierarchicalOptions[key];
+      let option = document.createElement("option")
+      option.value = key
+      option.innerText = value
+      select.appendChild(option)
+    });
+
+    select.addEventListener("change", () => {
+      this.recalculate()
+    })
+
+    let deleteBtn = document.createElement("span")
+    deleteBtn.innerText = "X"
+    deleteBtn.addEventListener("click", () => {
+      this.removeHierarchicalChoice(deleteBtn)
+    })
+
+    wrapper.appendChild(deleteBtn)
+
+    document.querySelector("#hierarchical-choices").appendChild(wrapper)
+  }
+}
\ No newline at end of file
--- a/style.css
+++ b/style.css
+:root {
+    --grey: #E9E9E9;
+    --violet_txt: #004;
+    --violet_border: #AAC;
+    --violet_background: #DFDFF8;
+    --unit: 1rem;
+    --header_height: calc(3 * var(--unit));
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3 {
+    font-size: 1rem;
+    font-weight: 400;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    height: var(--header_height);
+    position: sticky;
+    z-index: 15;
+    top: 0px;
+    padding-left: calc(1 * var(--unit));
+}
+
+#wrapper {
+    display: flex;
+    align-items: flex-start;
+}
+
+#tools,
+#inspector {
+    width: calc(100% / 5);
+    padding: calc(1 * var(--unit));
+    position: sticky;
+    top: var(--header_height);
+    overflow: scroll;
+    height: calc(100vh - var(--header_height));
+    border: 1px solid white;
+}
+
+header,
+#tools,
+#inspector {
+    background-color: var(--grey);
+}
+
+#visu {
+    flex: 1;
+    padding: calc(1 * var(--unit));
+    height: calc(100vh - var(--header_height));
+    overflow: scroll;
+}
+
+.hierarchical-choice-wrapper {
+    display: block;
+    margin-bottom: calc(0.5 * var(--unit));
+}
\ No newline at end of file