Start work on new start page

assets/js/csvxml-overview.js

@@ -0,0 +1,118 @@
+(function() {
+
+    let csvBySelectionButton = document.getElementById("csvBySelection");
+    let unsetSelectionButton = document.getElementById("unsetSelection");
+
+    function checkCSVBySelectionAccessibility() {
+
+        let selected = document.getElementsByClassName("humanTLToggled");
+        if (selected.length === 0) {
+            csvBySelectionButton.classList.add("invisible");
+            unsetSelection.classList.add("invisible");
+        }
+        else {
+            csvBySelectionButton.classList.remove("invisible");
+            unsetSelection.classList.remove("invisible");
+        }
+
+    }
+
+    // Takes a callback function
+    function doForFieldList(callback) {
+        let fieldLists = document.getElementsByClassName("fieldList");
+        for (let i = 0, max = fieldLists.length; i < max; i++) {
+
+            let fields = fieldLists[i].getElementsByTagName("li");
+            for (let j = 0, maxj = fields.length; j < maxj; j++) {
+
+                callback(fields[j]);
+
+            }
+
+        }
+    }
+
+    function toggleListFieldSelectionState(field) {
+
+        let newValue = field.getAttribute("data-alt");
+        field.setAttribute("data-alt", field.textContent);
+        field.textContent = newValue;
+        field.classList.toggle("humanTLToggled");
+
+    }
+
+    doForFieldList(function(field) {
+
+        // Each field should switch its visible content and human-readable
+        // translation on a click.
+        field.addEventListener('click', function(e) {
+
+            toggleListFieldSelectionState(field);
+            checkCSVBySelectionAccessibility();
+
+        });
+
+    });
+
+    csvBySelectionButton.addEventListener('click', function(e) {
+
+        let selectionForm = document.createElement("form");
+        selectionForm.method = "POST";
+        selectionForm.action = "csv.php";
+
+        let hiddenInput = document.createElement("input");
+        hiddenInput.type = "hidden";
+        hiddenInput.name = "selectedFields";
+        hiddenInput.value = "";
+
+        let selected = document.getElementsByClassName("humanTLToggled");
+        for (let i = 0, max = selected.length; i < max; i++) {
+            hiddenInput.value += selected[i].getAttribute("data-value") + ",";
+        }
+
+        selectionForm.appendChild(hiddenInput);
+        document.documentElement.appendChild(selectionForm);
+        selectionForm.submit();
+
+    });
+
+    let selectRequired = document.getElementById("selectRequired");
+    selectRequired.addEventListener('click', function(e) {
+
+        doForFieldList(function(field) {
+            if (field.classList.contains("requiredField") === false) return;
+            if (field.classList.contains("humanTLToggled") === true) return;
+
+            toggleListFieldSelectionState(field);
+            checkCSVBySelectionAccessibility();
+
+        });
+
+    });
+
+    let selectAll = document.getElementById("selectAll");
+    selectAll.addEventListener('click', function(e) {
+
+        doForFieldList(function(field) {
+            if (field.classList.contains("humanTLToggled") === true) return;
+
+            toggleListFieldSelectionState(field);
+            checkCSVBySelectionAccessibility();
+
+        });
+
+    });
+
+    unsetSelectionButton.addEventListener('click', function(e) {
+
+        doForFieldList(function(field) {
+            if (field.classList.contains("humanTLToggled") === false) return;
+
+            toggleListFieldSelectionState(field);
+            checkCSVBySelectionAccessibility();
+
+        });
+
+    });
+
+})();

assets/js/newToolTip.js

@@ -0,0 +1,73 @@
+/**
+ * A simple implementation of a tooltip.
+ *
+ * @author Joshua Ramon Enslin <joshua@jrenslin.de>
+ */
+
+function generateToolTips() {
+
+    /**
+     * Function for setting the alignment of an element.
+     *
+     * @param {Event}      e    Event triggering the execution of this function.
+     * @param {DOMElement} elem Dom element to position.
+     *
+     * @return {void}
+     */
+    function getDirection(e, elem) {
+
+        if (window.innerHeight < e.clientY + elem.clientHeight) {
+            elem.style.top    = "";
+            elem.style.bottom = (window.innerHeight - e.clientY) + "px";
+        }
+        else {
+            elem.style.bottom  = "";
+            elem.style.top     = (e.clientY + 2) + "px";
+        }
+        if (window.innerWidth < e.clientX + elem.clientWidth) {
+            elem.style.left  = "";
+            elem.style.right = (window.innerWidth - e.clientX) + "px";
+        } else {
+            elem.style.right = "";
+            elem.style.left  = (e.clientX + 2) + "px";
+        }
+
+    }
+
+    let triggers = document.getElementsByClassName("newToolTipTag");
+    for (let i = 0, max = triggers.length; i < max; i++) {
+
+        let trigger = triggers[i];
+        let dataTarget = trigger.getAttribute("data-for");
+        let target = document.getElementById("tooltip_" + dataTarget);
+
+        trigger.addEventListener("mouseover", function(e) {
+            let newMain = document.getElementById("newToolTipMain");
+            if (newMain !== null) return;
+            newMain = target.cloneNode(true);
+            newMain.id = "newToolTipMain";
+            document.getElementsByTagName("body")[0].appendChild(newMain);
+            newMain.classList.add("visible");
+            getDirection(e, newMain);
+        });
+        trigger.addEventListener("mousemove", function(e) {
+            let newMain = document.getElementById("newToolTipMain");
+            getDirection(e, newMain);
+        });
+        trigger.addEventListener("mouseout", function(e) {
+            let newMain = document.getElementById("newToolTipMain");
+            if (newMain.classList.contains("sticked")) return;
+            newMain.classList.remove("visible");
+            document.getElementsByTagName("body")[0].removeChild(newMain);
+        });
+        /*
+        trigger.addEventListener("click", function(e) {
+            document.getElementById("newToolTipMain").classList.toggle("sticked");
+        });
+        */
+
+    }
+
+}
+
+generateToolTips();