Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Customizing spacing helpers output

Browse Source
This commit is contained in:
Jeremy Thomas
2020-05-11 01:03:16 +01:00
parent ce2c9a2412
commit 1d70a304cf
7 changed files with 181 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
docs/_javascript/main.js
View File

@@ -347,32 +347,34 @@ document.addEventListener('DOMContentLoaded', () => {
// Spacing table
const spacingEl = document.getElementById('spacingTable');
const spacingRows = getAll('tbody tr', spacingEl);
const spacingCells = getAll('tbody td', spacingEl);
const spacingValues = getAll('tfoot th', spacingEl);
const spacingTables = getAll('.bd-spacing-table');
spacingEl.addEventListener('mouseleave', () => {
resetTable();
});
spacingTables.forEach(spacingEl => {
const spacingRows = getAll('tbody tr', spacingEl);
const spacingCells = getAll('tbody td', spacingEl);
const spacingValues = getAll('tfoot th', spacingEl);
spacingCells.forEach(el => {
el.addEventListener('mouseenter', () => {
resetTable();
const row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode);
const column = Array.prototype.indexOf.call(el.parentNode.children, el);
highlightRowAndColumn(row, column);
spacingEl.addEventListener('mouseleave', () => {
resetTable(spacingCells, spacingValues);
});
spacingCells.forEach(el => {
el.addEventListener('mouseenter', () => {
resetTable(spacingCells, spacingValues);
const row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode);
const column = Array.prototype.indexOf.call(el.parentNode.children, el);
highlightRowAndColumn(row, column, spacingRows, spacingValues);
});
});
});
function resetTable() {
// spacingRows.forEach(el => el.classList.remove('bd-current-row'));
spacingCells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
spacingValues.forEach(el => el.classList.remove('bd-current-value'));
function resetTable(cells, values) {
cells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
values.forEach(el => el.classList.remove('bd-current-value'));
}
function highlightRowAndColumn(rowIndex, columnIndex) {
const row = spacingRows[rowIndex];
function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
const row = rows[rowIndex];
let i = columnIndex;
while (i > -1) {
@@ -380,7 +382,7 @@ document.addEventListener('DOMContentLoaded', () => {
i--;
}
const nextRows = spacingRows.slice(rowIndex);
const nextRows = rows.slice(rowIndex);
nextRows.forEach(r => {
r.children[columnIndex].classList.add('bd-current-column');
});
@@ -388,7 +390,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (columnIndex < 2) {
return;
}
spacingValues[columnIndex - 1].classList.add('bd-current-value');
values[columnIndex - 1].classList.add('bd-current-value');
}
// Scroll