From 06404ad4f81e9263fcdf14208d05cf9c0cb55600 Mon Sep 17 00:00:00 2001 From: Code Code Date: Fri, 14 Jun 2024 14:57:41 -0400 Subject: [PATCH] 316 add table block (#317) * Default AEM table block. * style table links like the rest of the site. * enable content sized tables. --- cigaradvisor/blocks/table/table.css | 75 +++++++++++++++++++++++++++++ cigaradvisor/blocks/table/table.js | 38 +++++++++++++++ 2 files changed, 113 insertions(+) create mode 100644 cigaradvisor/blocks/table/table.css create mode 100644 cigaradvisor/blocks/table/table.js diff --git a/cigaradvisor/blocks/table/table.css b/cigaradvisor/blocks/table/table.css new file mode 100644 index 0000000..0afe334 --- /dev/null +++ b/cigaradvisor/blocks/table/table.css @@ -0,0 +1,75 @@ +.table { + width: 100%; + overflow-x: auto; +} + +.table table { + width: 100%; + max-width: 100%; + border-collapse: collapse; + font-size: var(--body-font-size-xs); +} + +@media (width >= 600px) { + .table table { + font-size: var(--body-font-size-s); + } +} + +@media (width >= 900px) { + .table table { + font-size: var(--body-font-size-m); + } +} + +.table table thead tr { + border-top: 2px solid; + border-bottom: 2px solid; +} + +.table table tbody tr { + border-bottom: 1px solid; +} + +.table table th { + font-weight: 700; +} + +.table table th, +.table table td { + padding: 8px 16px; + text-align: left; +} + +/* no header variant */ +.table.no-header table tbody tr { + border-top: 1px solid; +} + +/* striped variant */ +.table.striped tbody tr:nth-child(odd) { + background-color: var(--overlay-background-color); +} + +/* bordered variant */ +.table.bordered table th, +.table.bordered table td { + border: 1px solid; +} + +/* new styles for anchors */ +.table a { + text-decoration: underline; + color: var(--subdued-gold); +} + +/* content-sized table */ +.table.contentsized { + display: table; + width: auto; +} + +.table.contentsized table { + width: auto; + max-width: none; +} diff --git a/cigaradvisor/blocks/table/table.js b/cigaradvisor/blocks/table/table.js new file mode 100644 index 0000000..3091505 --- /dev/null +++ b/cigaradvisor/blocks/table/table.js @@ -0,0 +1,38 @@ +/* + * Table Block + * Recreate a table + * https://www.hlx.live/developer/block-collection/table + */ + +function buildCell(rowIndex) { + const cell = rowIndex + ? document.createElement('td') + : document.createElement('th'); + if (!rowIndex) cell.setAttribute('scope', 'col'); + return cell; +} + +export default async function decorate(block) { + const table = document.createElement('table'); + const thead = document.createElement('thead'); + const tbody = document.createElement('tbody'); + + const header = !block.classList.contains('no-header'); + if (header) { + table.append(thead); + } + table.append(tbody); + + [...block.children].forEach((child, i) => { + const row = document.createElement('tr'); + if (header && i === 0) thead.append(row); + else tbody.append(row); + [...child.children].forEach((col) => { + const cell = buildCell(header ? i : i + 1); + cell.innerHTML = col.innerHTML; + row.append(cell); + }); + }); + block.innerHTML = ''; + block.append(table); +}