merch sizing-guide: add filter

2025-02-14 02:08:10 +01:00 · 2025-02-14 02:08:10 +01:00 · 358bc7d211
commit 358bc7d211
parent deea38b1b5
5 changed files with 364 additions and 163 deletions
--- a/styleguide/assets/style/merch.css
+++ b/styleguide/assets/style/merch.css
@ -48,6 +48,9 @@ table tbody {
 table tbody.currentEvent {
  border: solid 4px var(--color-primary);
 }
+table tbody.filtered {
+  display: none;
+}
 table tbody > tr > th,
 table thead > tr > th,
 table td {
@ -127,4 +130,61 @@ table td.dimension.currentDimension::after {
  font-weight: bold;
 }

+div.filterBox {
+  border: solid 4px var(--color-foreground);
+  margin: 2rem 0;
+  padding: 1rem;
+  position: relative;
+  font-family: "Departure Mono", ui-monospace, monospace;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 4rem;
+  row-gap: 2rem;
+  width: fit-content;
+}
+div.filterBox::before {
+  content: "filter";
+  position: absolute;
+  top: -0.6lh;
+  background-color: var(--color-background);
+  padding: 0 0.5rem;
+}
+div.filterBox > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 1.2rem;
+}
+div.filterBox > div label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+div.filterBox > div label input[type=checkbox] {
+  appearance: none;
+  background-color: var(--color-shade-1);
+  margin: 0;
+  color: currentColor;
+  width: 1.8em;
+  height: 1.8em;
+  border: 0.3em solid var(--color-shade-4);
+  border-radius: 0.15em;
+  transform: translateY(-0.075em);
+  position: relative;
+  font-family: inherit;
+}
+div.filterBox > div label input[type=checkbox]::before {
+  position: absolute;
+  inset: 0;
+  content: "x";
+  text-align: center;
+  font-size: 1.2rem;
+  line-height: 0.7;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+}
+div.filterBox > div label input[type=checkbox]:checked::before {
+  transform: scale(1);
+}
+
 /*# sourceMappingURL=merch.css.map */
--- a/styleguide/assets/style/merch.css.map
+++ b/styleguide/assets/style/merch.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["merch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EAKE;;AAJA;EACE;;AAKF;EACE;;AAKN;EACE;;AAEA;EACE;;AAIJ;AAAA;AAAA;EAGE;;AAGF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;;AAKF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AAGF;EACE;AACA;EACA;EACA;EACA;EACA;EACA","file":"merch.css"}
+{"version":3,"sourceRoot":"","sources":["merch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EAKE;;AAJA;EACE;;AAKF;EACE;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIJ;AAAA;AAAA;EAGE;;AAGF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;;AAKF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AAGF;EACE;AACA;EACA;EACA;EACA;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE","file":"merch.css"}
--- a/styleguide/assets/style/merch.scss
+++ b/styleguide/assets/style/merch.scss
@ -55,6 +55,10 @@ table {
    &.currentEvent {
      border: solid 4px var(--color-primary);
    }
+
+    &.filtered {
+      display: none;
+    }
  }

  tbody > tr > th,
@ -156,3 +160,66 @@ table {
    }
  }
 }
+
+div.filterBox {
+  border: solid 4px var(--color-foreground);
+  margin: 2rem 0;
+  padding: 1rem;
+  position: relative;
+  font-family: "Departure Mono", ui-monospace, monospace;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 4rem;
+  row-gap: 2rem;
+  width: fit-content;
+
+  &::before{
+    content: 'filter';
+    position: absolute;
+    top: -0.6lh;
+    background-color: var(--color-background);
+    padding: 0 0.5rem;
+  }
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    font-size: 1.2rem;
+
+    label {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      input[type='checkbox'] {
+        appearance: none;
+        background-color: var(--color-shade-1);
+        margin: 0;
+        color: currentColor;
+        width: 1.8em;
+        height: 1.8em;
+        border: 0.3em solid var(--color-shade-4);
+        border-radius: 0.15em;
+        transform: translateY(-0.075em);
+        position: relative;
+        font-family: inherit;
+
+        &::before {
+          position: absolute;
+          inset: 0;
+          content: "x";
+          text-align: center;
+          font-size: 1.2rem;
+          line-height: 0.7;
+          transform: scale(0);
+          transition: 120ms transform ease-in-out;
+        }
+
+        &:checked::before {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+}
--- a/styleguide/merch/index.html
+++ b/styleguide/merch/index.html
@ -5,8 +5,8 @@
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
-    <link rel="stylesheet" type="text/css" href="assets/style/merch.css">
+    <link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
+    <link rel="stylesheet" type="text/css" href="../assets/style/merch.css">
    <title>EH22 - Merch</title>
 </head>
 <body>
@ -56,6 +56,10 @@
            </g>
        </svg>
    </div>
+    <div class="filterBox">
+        <div id="filterType"></div>
+        <div id="filterFit"></div>
+    </div>
    <table>
        <thead id="th_eh22" class="currentEvent">
            <tr>
@ -79,7 +83,7 @@
                <th data-col="6XL">6XL</th>
            </tr>
        </thead>
-        <tbody class="currentEvent">
+        <tbody class="currentEvent" data-type="tshirt" data-fit="fitted" id="eh22_shirt_fitted">
            <tr>
                <th rowspan="3">Shirt<br>Fitted</th>
                <td rowspan="3">Stanley/Stella</td>
@ -126,7 +130,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody class="currentEvent">
+        <tbody class="currentEvent" data-type="tshirt" data-fit="straight" id="eh22_shirt_straight">
            <tr>
                <th rowspan="3">Shirt<br>Straight</th>
                <td rowspan="3">Stanley/Stella</td>
@ -173,7 +177,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody class="currentEvent">
+        <tbody class="currentEvent" data-type="hoodie" data-fit="unisex" id="eh22_hoodie_unisex">
            <tr>
                <th rowspan="3">Hoodie</th>
                <td rowspan="3">Stanley/Stella</td>
@ -220,7 +224,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody class="currentEvent">
+        <tbody class="currentEvent" data-type="zipper" data-fit="unisex" id="eh22_zipper_unisex">
            <tr>
                <th rowspan="3">Zipper</th>
                <td rowspan="3">Stanley/Stella</td>
@ -289,7 +293,7 @@
                <th data-col="6XL">6XL</th>
            </tr>
        </thead>
-        <tbody>
+        <tbody data-from="eh22_shirt_fitted">
            <tr>
                <th>Shirt<br>Fitted</th>
                <td>Stanley/Stella</td>
@ -297,7 +301,7 @@
                <td colspan="12">same as EH22 Shirt Fitted</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-from="eh22_shirt_straight">
            <tr>
                <th>Shirt<br>Straight<br>Black/Navy/Green</th>
                <td>Stanley/Stella</td>
@ -305,7 +309,7 @@
                <td colspan="12">same as EH22 Shirt Straight</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="tshirt" data-fit="straight" id="38c3_shirt_straight">
            <tr>
                <th rowspan="2">Shirt<br>Straight<br>Burgundy</th>
                <td rowspan="2">stormtextil</td>
@ -338,7 +342,7 @@
                <td class="val">89</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-from="camp23_hoodie">
            <tr>
                <th>Hoodie</th>
                <td>Stanley/Stella</td>
@ -346,7 +350,7 @@
                <td colspan="12">same as camp23 Hoodie</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="zipper" data-fit="unisex" id="38c3_zipper_unisex">
            <tr>
                <th rowspan="3">Zipper</th>
                <td rowspan="3">Stanley/Stella</td>
@ -393,7 +397,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="shirt" data-fit="straight" id="38c3_shirt_heavy">
            <tr>
                <th rowspan="3">Embroidered<br>Heavy Shirt</th>
                <td rowspan="3">Stanley/Stella</td>
@ -440,7 +444,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="sweatshirt" data-fit="straight" id="38c3_sweatshirt_heavy">
            <tr>
                <th rowspan="3">Embroidered<br>Sweatshirt</th>
                <td rowspan="3">Stanley/Stella</td>
@ -487,7 +491,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="dress" data-fit="fitted" id="38c3_dress">
            <tr>
                <th rowspan="3">Dress</th>
                <td rowspan="3">Stanley/Stella</td>
@ -556,7 +560,7 @@
                <th data-col="6XL">6XL</th>
            </tr>
        </thead>
-        <tbody>
+        <tbody data-type="tshirt" data-fit="fitted" id="gpn22_shirt_fitted">
            <tr>
                <th rowspan="2">Shirt<br>Fitted</th>
                <td rowspan="2"> SOL'S Imperial WOMEN</td>
@ -589,7 +593,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="tshirt" data-fit="straight" id="gpn22_shirt_straight">
            <tr>
                <th rowspan="2">Shirt<br>Straight</th>
                <td rowspan="2"> SOL'S Imperial</td>
@ -622,7 +626,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="zipper" data-fit="fitted" id="gpn22_zipper_fitted">
            <tr>
                <th rowspan="2">Zipper<br>Fitted</th>
                <td rowspan="2">Russell Europe</td>
@ -655,7 +659,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="zipper" data-fit="straight" id="gpn22_zipper_straight">
            <tr>
                <th rowspan="2">Zipper<br>Straight</th>
                <td rowspan="2">Russell Europe</td>
@ -710,7 +714,7 @@
                <th data-col="6XL">6XL</th>
            </tr>
        </thead>
-        <tbody>
+        <tbody data-from="camp23_shirt_fitted">
            <tr>
                <th>Angelshirt<br>Fitted</th>
                <td>Stanley/Stella</td>
@ -718,7 +722,7 @@
                <td colspan="12">same as camp23 Shirt Fitted</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-from="camp23_shirt_straight">
            <tr>
                <th>Angelshirt<br>Straight</th>
                <td>Stanley/Stella</td>
@ -726,7 +730,7 @@
                <td colspan="12">same as camp23 Shirt Straight</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-from="camp23_shirt_fitted">
            <tr>
                <th>Shirt<br>Fitted<br>Black</th>
                <td>Stanley/Stella</td>
@ -734,7 +738,7 @@
                <td colspan="12">same as camp23 Shirt Fitted</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-from="camp23_shirt_straight">
            <tr>
                <th>Shirt<br>Straight<br>Black</th>
                <td>Stanley/Stella</td>
@ -742,7 +746,7 @@
                <td colspan="12">same as camp23 Shirt Straight</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-from="camp23_hoodie">
            <tr>
                <th>Hoodie<br>Black</th>
                <td>Stanley/Stella</td>
@ -750,7 +754,7 @@
                <td colspan="12">same as camp23 Hoodie</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-from="camp23_zipper">
            <tr>
                <th>Zipper<br>Black</th>
                <td>Stanley/Stella</td>
@ -758,7 +762,7 @@
                <td colspan="12">same as camp23 Zipper</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="tshirt" data-fit="fitted" id="37c3_shirt_fitted_blue">
            <tr>
                <th rowspan="3">Shirt<br>Fitted<br>Blue</th>
                <td rowspan="3">Kariban</td>
@ -805,7 +809,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="tshirt" data-fit="straight" id="37c3_shirt_straight_black">
            <tr>
                <th rowspan="3">Shirt<br>Straight<br>Blue</th>
                <td rowspan="3">Kariban</td>
@ -852,7 +856,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="hoodie" data-fit="unisex" id="37c3_hoodie_blue">
            <tr>
                <th rowspan="3">Hoodie<br>Blue</th>
                <td rowspan="3">Kariban</td>
@ -899,7 +903,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="zipper" data-fit="unisex" id="37c3_zipper_blue">
            <tr>
                <th rowspan="3">Zipper<br>Blue</th>
                <td rowspan="3">Kariban</td>
@ -968,7 +972,7 @@
                <th data-col="6XL">6XL</th>
            </tr>
        </thead>
-        <tbody>
+        <tbody data-from="camp23_shirt_fitted">
            <tr>
                <th>Angelshirt<br>Fitted</th>
                <td>Stanley/Stella</td>
@ -976,7 +980,7 @@
                <td colspan="12">same as camp23 Shirt Fitted</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-from="camp23_shirt_straight">
            <tr>
                <th>Angelshirt<br>Straight</th>
                <td>Stanley/Stella</td>
@ -984,7 +988,7 @@
                <td colspan="12">same as camp23 Shirt Straight</td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="tshirt" data-fit="fitted" id="camp23_shirt_fitted">
            <tr>
                <th rowspan="3">Shirt<br>Fitted</th>
                <td rowspan="3">Stanley/Stella</td>
@ -1031,7 +1035,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="tshirt" data-fit="straight" id="camp23_shirt_straight">
            <tr>
                <th rowspan="3">Shirt<br>Straight</th>
                <td rowspan="3">Stanley/Stella</td>
@ -1078,7 +1082,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="hoodie" data-fit="unisex" id="camp23_hoodie">
            <tr>
                <th rowspan="3">Hoodie</th>
                <td rowspan="3">Stanley/Stella</td>
@ -1125,7 +1129,7 @@
                <td class="val empty"></td>
            </tr>
        </tbody>
-        <tbody>
+        <tbody data-type="zipper" data-fit="unisex" id="camp23_zipper">
            <tr>
                <th rowspan="3">Zipper</th>
                <td rowspan="3">Stanley/Stella</td>
@ -1175,133 +1179,6 @@
    </table>
 </main>

-<script type="text/javascript">
-    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')
-        });
-    }
-
-    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');
-        });
-    });
-</script>
-
+<script type="text/javascript" src="merch.js"></script>
 </body>
 </html>
--- a/styleguide/merch/merch.js
+++ b/styleguide/merch/merch.js
@ -0,0 +1,197 @@
+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');
+    });
+});