design/styleguide/assets/script/merch.js

const sizes = [
    "XXS", "XS", "S", "M", "L", "XL", "2XL", "3XL", "4XL", "5XL", "6XL"
]

function selectCell(e) {
    const cell = e.target;
    const value = parseFloat(cell.dataset.val);
    const col = cell.dataset.col;
    const dimension = cell.dataset.dim;

    document.querySelectorAll('td.val:not(.empty)').forEach(match => {
        match.dataset.diff = '';
        match.classList.remove('highlighted')
        match.classList.remove('currentDimension')
        if (match.dataset.dim === dimension) {
            match.classList.add('currentDimension')
            const diff = parseFloat(match.dataset.val) - value;
            match.dataset.diff = diff > 0 ? `+${diff}` : diff;
            if (match.dataset.dim === 'A') match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`
            if (match.dataset.dim === 'B') match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`
            if (match.dataset.dim === 'C') match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`
        }
    });
    document.querySelectorAll('td.dimension').forEach(match => {
        match.classList.remove('currentDimension');
        if (match.innerHTML === dimension) {
            match.classList.add('currentDimension');
        }
    });

    cell.classList.add('highlighted')
}

function selectCellPlus(e) {
    e.stopPropagation();
    const cell = e.target;
    const group = cell.parentElement.parentElement;
    const col = cell.dataset.col;

    if (cell.classList.contains('highlighted') && !cell.classList.contains('currentDimension')) {
        selectCell(e);
        return;
    }

    const values = {}
    group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
        values[match.dataset.dim] = parseFloat(match.dataset.val);
    })

    document.querySelectorAll('td.val:not(.empty)').forEach(match => {
        match.dataset.diff = '';
        match.classList.remove('highlighted')
        match.classList.remove('currentDimension')
        if (match.dataset.dim in values) {
            const diff = parseFloat(match.dataset.val) - values[match.dataset.dim];
            match.dataset.diff = diff > 0 ? `+${diff}` : diff;
            if (match.dataset.dim === 'A') match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`
            if (match.dataset.dim === 'B') match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`
            if (match.dataset.dim === 'C') match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`
        }
    });
    document.querySelectorAll('td.dimension').forEach(match => {
        match.classList.remove('currentDimension');
    });

    group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
        match.classList.add('highlighted')
    })

}

function hoverCell(e) {
    const cell = e.target;
    const group = cell.parentElement.parentElement;
    const col = cell.dataset.col;
    const dim = cell.dataset.dim;

    hoverOff()
    document.querySelectorAll('table > thead > tr > th').forEach(match => {
        if (match.dataset.col === col) match.classList.add('hover')
    });
    group.querySelectorAll('td.dimension').forEach(match => {
        if (match.innerText === dim) match.classList.add('hover')
    });
    group.querySelectorAll('td:not(.dimension), th').forEach(match => {
        match.classList.add('hover')
    });
}

function hoverOff() {
    document.querySelectorAll('table > thead > tr > th').forEach(match => {
        match.classList.remove('hover')
    });
    document.querySelectorAll('td.dimension, td, th').forEach(match => {
        match.classList.remove('hover')
    });
}

const typeList = new Set()
const fitList = new Set()

document.querySelectorAll('tbody').forEach(tbody => {
    if (tbody.dataset.from) {
        const source = document.querySelector(`tbody#${tbody.dataset.from}`)
        if (!source) {
            console.log(`tbody with ID '${tbody.dataset.from}' not found.`);
            return;
        }

        const name = tbody.querySelector('tr th').innerHTML;
        tbody.replaceChildren()
        tbody.insertAdjacentHTML("afterbegin", source.innerHTML)
        tbody.querySelector('tr th').innerHTML = name;
        delete tbody.dataset.from;
        tbody.dataset.type = source.dataset.type;
        tbody.dataset.fit = source.dataset.fit;
    }

    typeList.add(tbody.dataset.type);
    fitList.add(tbody.dataset.fit);
});

// build filter
const filterTypeElement = document.querySelector('#filterType');
typeList.forEach(type => {
    filterTypeElement.insertAdjacentHTML('beforeend', `<label>
                <input type="checkbox" value="${type}" checked>
                ${type}
            </label>`)
})
const filterFitElement = document.querySelector('#filterFit');
fitList.forEach(fit => {
    filterFitElement.insertAdjacentHTML('beforeend', `<label>
                <input type="checkbox" value="${fit}" checked>
                ${fit}
            </label>`)
})

const filterType = new Set(typeList);
const filterFit = new Set(fitList);

function filter() {
    document.querySelectorAll(`tbody`).forEach(match => {
        match.classList.toggle('filtered', !filterType.has(match.dataset.type) || !filterFit.has(match.dataset.fit));
    })
}

filterTypeElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', (e) => {
        if (checkbox.checked) {
            filterType.add(checkbox.value)
        } else {
            filterType.delete(checkbox.value)
        }
        filter();
    });
});

filterFitElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', (e) => {
        if (checkbox.checked) {
            filterFit.add(checkbox.value)
        } else {
            filterFit.delete(checkbox.value)
        }

        filter();
    });
});

document.querySelectorAll('td.val').forEach(cell => {
    const rowTitle = cell.parentElement.querySelector('th');
    cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
    cell.addEventListener('pointerenter', hoverCell);
    cell.addEventListener('pointerleave', hoverOff);
});

// initialize table
document.querySelectorAll('td.val:not(.empty)').forEach(cell => {
    cell.dataset.val = cell.innerText;
    cell.dataset.diff = '';
    cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML;

    cell.addEventListener('click', selectCellPlus);
});

// disable select on click outside value cell
document.addEventListener('click', e => {
    document.querySelectorAll('td.val:not(.empty)').forEach(match => {
        match.dataset.diff = '';
        match.classList.remove('highlighted')
        match.classList.remove('currentDimension')
    });
    document.querySelectorAll('td.dimension').forEach(match => {
        match.classList.remove('currentDimension');
    });
});