diff --git a/config/install/localgov_base.settings.yml b/config/install/localgov_base.settings.yml index 735191d1..f8942bb3 100644 --- a/config/install/localgov_base.settings.yml +++ b/config/install/localgov_base.settings.yml @@ -7,3 +7,4 @@ localgov_base_header_behaviour: 'default' localgov_base_localgov_guides_stacked_heading: FALSE localgov_base_localgov_guides_vertical_navigation: TRUE localgov_base_mobile_breakpoint_js: '768' +localgov_base_responsive_wysiwyg_tables: TRUE diff --git a/config/schema/localgov_base.schema.yml b/config/schema/localgov_base.schema.yml index 0cc12eb2..530c92bc 100644 --- a/config/schema/localgov_base.schema.yml +++ b/config/schema/localgov_base.schema.yml @@ -36,3 +36,8 @@ localgov_base.settings: label: 'Mobile breakpoint for JS' description: 'The mobile breakpoint for JS. This is used to determine when to apply mobile styles.' default_value: '768' + localgov_base_responsive_wysiwyg_tables: + type: boolean + label: 'Responsive WYSIWYG tables' + description: 'Choose whether to make WYSIWYG tables responsive or not.' + default_value: TRUE diff --git a/css/components/responsive-tables.css b/css/components/responsive-tables.css new file mode 100644 index 00000000..a97823a0 --- /dev/null +++ b/css/components/responsive-tables.css @@ -0,0 +1,3 @@ +.lgd-responsive-table { + overflow-y: auto; +} diff --git a/js/responsive-tables.js b/js/responsive-tables.js new file mode 100644 index 00000000..f83ed9f3 --- /dev/null +++ b/js/responsive-tables.js @@ -0,0 +1,35 @@ +/** + * @file JS file for the responsive tables component. + */ + +(function responsiveTablesScript(Drupal, once) { + Drupal.behaviors.responsiveTables = { + attach(context) { + const tables = []; + const tablesInTextWithSummaryFields = once( + 'allResponsiveTables', + '.field--type-text-with-summary table', + context, + ); + const tablesInTextLongFields = once( + 'responsiveTables', + '.field--type-text-long table', + context, + ); + + // Push all tables into the tables array. + tables.push(...tablesInTextWithSummaryFields); + tables.push(...tablesInTextLongFields); + tables.forEach((table) => { + // Clone the table to avoid modifying the original. + const clonedTable = table.cloneNode(true); + // Add a div around the cloned table. + const wrapper = document.createElement('div'); + wrapper.classList.add('lgd-responsive-table'); + wrapper.appendChild(clonedTable); + // Replace the original table with the wrapper. + table.parentNode.replaceChild(wrapper, table); + }); + }, + }; +})(Drupal, once); diff --git a/localgov_base.libraries.yml b/localgov_base.libraries.yml index 8b93b4c0..50cfd75f 100644 --- a/localgov_base.libraries.yml +++ b/localgov_base.libraries.yml @@ -365,9 +365,17 @@ accordion: theme: css/components/accordion.css: {} +responsive-tables: + css: + theme: + css/components/responsive-tables.css: {} + js: + js/responsive-tables.js: {} + images: js: js/images.js: {} + dependencies: - core/drupal - core/once diff --git a/localgov_base.theme b/localgov_base.theme index 202ad760..445a0e06 100644 --- a/localgov_base.theme +++ b/localgov_base.theme @@ -99,6 +99,13 @@ function localgov_base_form_system_theme_settings_alter(&$form, FormStateInterfa ], ]; + $form['localgov_base_responsive_wysiwyg_tables'] = [ + '#type' => 'checkbox', + '#title' => t('Make WYSIWYG tables responsive.'), + '#description' => t('Places tables inserted via WYSIWYG into a responsive container, so they can scroll horizontally on small screens.'), + '#default_value' => theme_get_setting('localgov_base_responsive_wysiwyg_tables') ? theme_get_setting('localgov_base_responsive_wysiwyg_tables') : FALSE, + ]; + $form['#validate'][] = 'localgov_base_theme_settings_validate'; } @@ -147,6 +154,13 @@ function localgov_base_preprocess_html(&$variables): void { } } } + + // Add the 'localgov_base_responsive_wysiwyg_tables' value to drupalSettings. + if (!empty(theme_get_setting('localgov_base_responsive_wysiwyg_tables'))) { + if (theme_get_setting('localgov_base_responsive_wysiwyg_tables') === TRUE || 1) { + $variables['#attached']['library'][] = 'localgov_base/responsive-tables'; + } + } } /**