Only highlight relevant cells

This commit is contained in:
Jeremy Thomas 2020-05-11 00:40:11 +01:00
parent f79d8c09e2
commit 64bb3085b5
4 changed files with 39 additions and 16 deletions

View File

@ -366,16 +366,22 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
function resetTable() { function resetTable() {
spacingRows.forEach(el => el.classList.remove('bd-current-row')); // spacingRows.forEach(el => el.classList.remove('bd-current-row'));
spacingCells.forEach(el => el.classList.remove('bd-current-column')); spacingCells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
spacingValues.forEach(el => el.classList.remove('bd-current-value')); spacingValues.forEach(el => el.classList.remove('bd-current-value'));
} }
function highlightRowAndColumn(rowIndex, columnIndex) { function highlightRowAndColumn(rowIndex, columnIndex) {
const row = spacingRows[rowIndex]; const row = spacingRows[rowIndex];
row.classList.add('bd-current-row'); let i = columnIndex;
spacingRows.forEach(r => { while (i > -1) {
row.children[i].classList.add('bd-current-row');
i--;
}
const nextRows = spacingRows.slice(rowIndex);
nextRows.forEach(r => {
r.children[columnIndex].classList.add('bd-current-column'); r.children[columnIndex].classList.add('bd-current-column');
}); });

View File

@ -6,13 +6,18 @@
color: $border color: $border
.bd-current-row .bd-current-row
background-color: $background background-color: $background
td:first-child, &:first-child
.bd-current-column:not(:first-child)
background-color: $danger-light background-color: $danger-light
color: $text-strong color: $text-strong
code code
background-color: $danger background-color: $danger
color: $danger-invert color: $danger-invert
&.bd-current-column
background-color: $primary-light
color: $text-strong
code
background-color: $primary
color: $primary-invert
.bd-current-column .bd-current-column
background-color: $background background-color: $background
.bd-current-value .bd-current-value

View File

@ -13176,18 +13176,26 @@ svg {
background-color: whitesmoke; background-color: whitesmoke;
} }
#spacingTable .bd-current-row td:first-child, #spacingTable .bd-current-row:first-child {
#spacingTable .bd-current-row .bd-current-column:not(:first-child) {
background-color: #feecf0; background-color: #feecf0;
color: #363636; color: #363636;
} }
#spacingTable .bd-current-row td:first-child code, #spacingTable .bd-current-row:first-child code {
#spacingTable .bd-current-row .bd-current-column:not(:first-child) code {
background-color: #f14668; background-color: #f14668;
color: #fff; color: #fff;
} }
#spacingTable .bd-current-row.bd-current-column {
background-color: #ebfffc;
color: #363636;
}
#spacingTable .bd-current-row.bd-current-column code {
background-color: #00d1b2;
color: #fff;
}
#spacingTable .bd-current-column { #spacingTable .bd-current-column {
background-color: whitesmoke; background-color: whitesmoke;
} }

View File

@ -370,11 +370,9 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
function resetTable() { function resetTable() {
spacingRows.forEach(function (el) { // spacingRows.forEach(el => el.classList.remove('bd-current-row'));
return el.classList.remove('bd-current-row');
});
spacingCells.forEach(function (el) { spacingCells.forEach(function (el) {
return el.classList.remove('bd-current-column'); return el.classList.remove('bd-current-row', 'bd-current-column');
}); });
spacingValues.forEach(function (el) { spacingValues.forEach(function (el) {
return el.classList.remove('bd-current-value'); return el.classList.remove('bd-current-value');
@ -383,9 +381,15 @@ document.addEventListener('DOMContentLoaded', function () {
function highlightRowAndColumn(rowIndex, columnIndex) { function highlightRowAndColumn(rowIndex, columnIndex) {
var row = spacingRows[rowIndex]; var row = spacingRows[rowIndex];
row.classList.add('bd-current-row'); var i = columnIndex;
spacingRows.forEach(function (r) { while (i > -1) {
row.children[i].classList.add('bd-current-row');
i--;
}
var nextRows = spacingRows.slice(rowIndex);
nextRows.forEach(function (r) {
r.children[columnIndex].classList.add('bd-current-column'); r.children[columnIndex].classList.add('bd-current-column');
}); });