diff --git a/styleguide/merch.html b/styleguide/merch.html index 5b97db2..43ff3ef 100644 --- a/styleguide/merch.html +++ b/styleguide/merch.html @@ -61,7 +61,7 @@ } td.val:not(.empty):hover { - background-color: var(--color-primary); + background-color: var(--color-shade-4); } td.val { @@ -109,11 +109,11 @@ } table > thead > tr > th.highlighted { - background-color: var(--color-primary); + background-color: var(--color-shade-4); } tr:hover td.dimension { - background-color: var(--color-primary); + background-color: var(--color-shade-4); } tr > td.dimension.currentDimension { @@ -150,7 +150,7 @@

Merch

@@ -1183,7 +1183,6 @@ group.querySelectorAll(`td[data-col='${col}']`).forEach(match =>{ values[match.dataset.dim] = parseFloat(match.dataset.val); }) - console.log(values); document.querySelectorAll('td.val:not(.empty)').forEach(match => { match.style.backgroundColor = `` @@ -1218,17 +1217,26 @@ }); } + function hoverOff() { + document.querySelectorAll('table > thead > tr > th').forEach(match => { + match.classList.remove('highlighted') + }); + } + + 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; - const rowTitle = cell.parentElement.querySelector('th'); - cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1]; - cell.addEventListener('pointerdown', selectCellPlus); - cell.addEventListener('pointerenter', hoverCell); });