base.js

// DO NOT EDIT THIS FILE!!!

const YEARS = [];
for (let i = 2001; i <= 2018; i++) YEARS.push(i);

function whenReady(cb) {
    document.addEventListener('DOMContentLoaded', cb);
}

function initializeChart(element, chartData, name) {
    const ctx = element.querySelector('.chart').getContext('2d');
    const rankByYear = {};
    chartData.forEach(c => rankByYear[c.year] = c.rank);

    new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
        ticks: { reverse: true },

        // The data for our dataset
        data: {
            labels: YEARS.map(year => year + "") ,
            datasets: [{
                label: name + '\'s rank',
                borderColor: 'rgb(255, 99, 132)',
                data: YEARS.map(year => rankByYear[year])
            }]
        },
        // Configuration options go here
        options: {
            scales: {
                yAxes: [{
                    display: true,
                    ticks: { reverse: true }
                }]
            }
        }

    });
}

function doHandleYearSelect(year) {
    const tableElem = document.querySelector("#ranking-table");
    while (tableElem.lastElementChild && !tableElem.lastElementChild.id) {
        tableElem.removeChild(tableElem.lastElementChild);
    }
    const tempElem = document.querySelector("#template-row-record");
    const data = provideYearData(year);
    if (!Array.isArray(data)) {
        alert("provideYearData() should return an array!");
        return;
    }
    data.forEach(record => {
        function decorateRank(e, rankChange) {
            if (rankChange == null) {
                e.querySelector("span").textContent = "";
                e.querySelector("i").textContent = "fiber_new";
                e.classList.add("blue-text", "text-darken-2");
            } else if (rankChange < 0) {
                e.querySelector("span").textContent = -rankChange;
                e.querySelector("i").textContent = "arrow_upward";
                e.classList.add("teal-text");
            } else if (rankChange > 0) {
                e.querySelector("span").textContent = rankChange;
                e.querySelector("i").textContent = "arrow_downward";
                e.classList.add("red-text");
            } else {
                e.querySelector("span").textContent = "";
                e.querySelector("i").textContent = 'drag_handle';
                e.classList.add("grey-text");
            }
        }
        function handleClick(e, name, gender) {
            e.preventDefault();
            const chartData = provideChartData(name, gender);
            if (!Array.isArray(chartData)) {
                alert("provideChartData() should return an array!");
                return;
            }

            let preventShow = false;
            if (newRow.nextElementSibling &&
                    newRow.nextElementSibling.classList.contains("row-chart")) {
                // disable chart row
                preventShow = newRow.nextElementSibling.getAttribute("data-name") === name;
                newRow.parentNode.removeChild(newRow.nextElementSibling);
            }
            if (!preventShow) {
                // enable chart row
                const newChartRow = document.querySelector("#template-row-chart").cloneNode(true);
                newChartRow.id = "";
                newChartRow.style.display = "table-row";
                newChartRow.setAttribute("data-name", name);
                newRow.parentNode.insertBefore(
                    newChartRow, newRow.nextElementSibling
                );
                initializeChart(newChartRow, chartData, name);
            }
        }
        const newRow = tempElem.cloneNode(true);
        newRow.id = "";
        newRow.style.display = 'table-row';
        let child = newRow.firstElementChild;
        child.textContent = record.rank;
        child = child.nextElementSibling;
        child.querySelector("a").textContent = record.male;
        child.querySelector("a").addEventListener("click", (e) => handleClick(e, record.male, 'M'));
        child = child.nextElementSibling;
        decorateRank(child, record.maleRankChange);
        child = child.nextElementSibling;
        child.querySelector("a").textContent = record.female;
        child.querySelector("a").addEventListener("click", (e) => handleClick(e, record.female, 'F'));
        child = child.nextElementSibling;
        decorateRank(child, record.femaleRankChange);
        tableElem.appendChild(newRow);
    });
}

function handleYearSelect() {
    const elem = document.querySelector("#year-select");
    const value = parseInt(elem.value);
    doHandleYearSelect(value);
}

whenReady(function () {
    const elem = document.querySelector("#year-select");

    YEARS.forEach(year => {
        const optionElem = document.createElement("option");
        optionElem.value = year;
        optionElem.textContent = year;
        elem.appendChild(optionElem);
    });
    elem.value = YEARS[0];
    M.FormSelect.init(elem, {})

    fetch("data/babyname.report.csv")
        .then(resp => resp.text())
        .then(text => parseAndSave(text))
        .then(() => handleYearSelect());
    elem.addEventListener("change", handleYearSelect);
});


whenReady(function () {
    document.querySelector("#to-bottom").addEventListener("click", function () {
        window.scrollTo(0,document.body.scrollHeight);
    });
    document.querySelector("#to-top").addEventListener("click", function () {
        window.scrollTo(0,0);
    });
});

whenReady(function () {
    const form = document.querySelector("#signup-form");
    form.addEventListener("submit", function (e) {
        e.preventDefault();
        // e.stopPropagation();
        const form = e.target;
        const result = handleSignUpFormSubmit(form);
        result.validationResults.forEach(fieldInfo => {
            const fieldName = fieldInfo.name;
            const fieldElem = form[fieldName];
            const valid = fieldInfo.valid;
            const message = fieldInfo.message;
            fieldElem.classList.remove("invalid");
            fieldElem.classList.remove("valid");
            if (valid) {
                fieldElem.classList.add("valid");
            } else {
                fieldElem.classList.add("invalid");
            }
            fieldElem.parentNode.querySelector(".helper-text").setAttribute("data-error", message);
        });
        alert(result.alertMessage);
        M.updateTextFields();
    });
    form.addEventListener("keypress", function (e) {
        if (e.keyCode === 13) {
            e.preventDefault();
        }
    });
});