diff --git a/src/js/classes/TableBlock.js b/src/js/classes/TableBlock.js new file mode 100644 index 00000000..af38c824 --- /dev/null +++ b/src/js/classes/TableBlock.js @@ -0,0 +1,54 @@ +import AbstractDomElement from './AbstractDomElement' +import each from '../utils/each' + +// ---- +// class +// ---- +class TableBlock extends AbstractDomElement { + constructor(element, options) { + const instance = super(element, options) + + // avoid double init : + if (!instance.isNewInstance()) { + return instance + } + + const el = this._element + const table = el.querySelector('table') + const thead = table.querySelector('thead') + const legend = el.querySelector('figcaption') + + // Tableau de données + if (thead) { + const ths = thead.querySelectorAll('th') + + each(ths, function (th) { + th.setAttribute('scope', 'col') + }) + + // Fix de la légende / titre du tableau. figcaption n'est pas supporté : https://accessibilite.numerique.gouv.fr/methode/glossaire/#tableau-de-donnees-ayant-un-titre + if (legend) { + const caption = document.createElement('caption') + caption.className = legend.className + caption.innerHTML = legend.innerHTML + table.insertBefore(caption, table.firstChild) + legend.remove() + } + } + + // Tableau de mise en forme + if (!thead) { + table.setAttribute('role', 'presentation') + } + } +} + +// ---- +// init +// ---- +TableBlock.init('.wp-block-table') + +// ---- +// export +// ---- +export default TableBlock diff --git a/src/js/index.js b/src/js/index.js index 7a6f043e..9b3eb47d 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -5,3 +5,4 @@ import './classes/ButtonSeoClick' import './classes/Header' import './classes/Animation' import './classes/ImageBlock' +import './classes/TableBlock' diff --git a/src/scss/06-blocks/core/_table.scss b/src/scss/06-blocks/core/_table.scss index f0b6b714..a0df7c48 100644 --- a/src/scss/06-blocks/core/_table.scss +++ b/src/scss/06-blocks/core/_table.scss @@ -2,10 +2,27 @@ width: 100%; min-width: 240px; border-collapse: collapse; + + th { + font-weight: 700; + } + + figcaption, + caption { + margin-bottom: var(--spacing--block-1); + font-size: var(--paragraph--font-size-default); + font-weight: 700; + line-height: var(--paragraph--line-height-default); + text-align: left; + } } .wp-block-table { @extend %table; + + display: flex; + flex-direction: column-reverse; + align-items: flex-start; } // Not apply style to ACF fields