csvxml/assets/js/csvxml-overview.js

(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();

        });

    });

})();