| 1 |
document.addEventListener("DOMContentLoaded", () => { |
| 2 |
const tabBlocks = document.querySelectorAll<HTMLElement>(".tab-block"); |
| 3 |
|
| 4 |
tabBlocks.forEach(tabBlock => { |
| 5 |
const activeBackground = tabBlock.dataset.activeBackgroundColor; |
| 6 |
const activeColor = tabBlock.dataset.activeColor; |
| 7 |
const inactiveBackground = tabBlock.dataset.backgroundColor; |
| 8 |
const inactiveColor = tabBlock.dataset.color; |
| 9 |
|
| 10 |
const tables = tabBlock.querySelectorAll<HTMLElement>( |
| 11 |
".wp-block-tableberg-toggle > .wp-block-tableberg" |
| 12 |
); |
| 13 |
const headings = tabBlock.querySelectorAll<HTMLElement>(".tab-heading"); |
| 14 |
|
| 15 |
tables.forEach(table => { |
| 16 |
table.style.display = "none"; |
| 17 |
}); |
| 18 |
|
| 19 |
headings.forEach((heading, index) => { |
| 20 |
heading.style.setProperty("color", inactiveColor ?? null); |
| 21 |
heading.style.setProperty( |
| 22 |
"background-color", |
| 23 |
inactiveBackground ?? null |
| 24 |
); |
| 25 |
|
| 26 |
if (heading.classList.contains("active")) { |
| 27 |
tables[index].style.display = "block"; |
| 28 |
heading.style.setProperty("color", activeColor ?? null); |
| 29 |
heading.style.setProperty( |
| 30 |
"background-color", |
| 31 |
activeBackground ?? null |
| 32 |
); |
| 33 |
} |
| 34 |
|
| 35 |
heading.addEventListener("click", () => { |
| 36 |
tables.forEach(tab => { |
| 37 |
tab.style.display = "none"; |
| 38 |
}); |
| 39 |
|
| 40 |
tables[index].style.display = "block"; |
| 41 |
|
| 42 |
headings.forEach(heading => { |
| 43 |
heading.classList.remove("active"); |
| 44 |
heading.style.setProperty("color", inactiveColor ?? null); |
| 45 |
heading.style.setProperty( |
| 46 |
"background-color", |
| 47 |
inactiveBackground ?? null |
| 48 |
); |
| 49 |
}); |
| 50 |
|
| 51 |
heading.classList.add("active"); |
| 52 |
heading.style.setProperty("color", activeColor ?? null); |
| 53 |
heading.style.setProperty( |
| 54 |
"background-color", |
| 55 |
activeBackground ?? null |
| 56 |
); |
| 57 |
}); |
| 58 |
}); |
| 59 |
}); |
| 60 |
}); |
| 61 |
|
