From 04c9068a247fdc9df6611488ac511bcf387ef973 Mon Sep 17 00:00:00 2001 From: Oscar Merida Date: Tue, 31 Dec 2024 11:22:09 -0500 Subject: [PATCH] DIGITAL-48: Migrate Glossary Templates * Creates view to display glossary terms. * Render glossary terms view on guide node templates. * Update glossary JavaScript to work with pre-rendered terms in the DOM --- config/sync/views.view.glossary_sidebar.yml | 292 ++++++++++++++++++ web/themes/custom/digital_gov/js/glossary.js | 15 +- .../templates/node/node--guides.html.twig | 3 +- ...ew--glossary-sidebar--accordion.html.twig} | 0 ...--accordion--description--value.html.twig} | 0 ...ossary-sidebar--accordion--name.html.twig} | 0 6 files changed, 296 insertions(+), 14 deletions(-) create mode 100644 config/sync/views.view.glossary_sidebar.yml rename web/themes/custom/digital_gov/templates/views/{views-view--glossary-accordion--guide-overlay.html.twig => views-view--glossary-sidebar--accordion.html.twig} (100%) rename web/themes/custom/digital_gov/templates/views/{views-view-field--glossary-accordion--guide-overlay--description--value.html.twig => views-view-field--glossary-sidebar--accordion--description--value.html.twig} (100%) rename web/themes/custom/digital_gov/templates/views/{views-view-field--glossary-accordion--guide-overlay--name.html.twig => views-view-field--glossary-sidebar--accordion--name.html.twig} (100%) diff --git a/config/sync/views.view.glossary_sidebar.yml b/config/sync/views.view.glossary_sidebar.yml new file mode 100644 index 00000000..c95766a2 --- /dev/null +++ b/config/sync/views.view.glossary_sidebar.yml @@ -0,0 +1,292 @@ +uuid: 17ad27ed-f685-421e-a8bb-5fae6f7c0146 +langcode: en +status: true +dependencies: + module: + - taxonomy + - text + - user +id: glossary_sidebar +label: 'Glossary Sidebar' +module: views +description: '' +tag: '' +base_table: taxonomy_term_field_data +base_field: tid +display: + default: + id: default + display_title: Default + display_plugin: default + position: 0 + display_options: + title: '' + fields: + name: + id: name + table: taxonomy_term_field_data + field: name + relationship: none + group_type: group + admin_label: '' + entity_type: taxonomy_term + entity_field: name + plugin_id: term_name + label: '' + exclude: false + alter: + alter_text: false + text: '' + make_link: false + path: '' + absolute: false + external: false + replace_spaces: false + path_case: none + trim_whitespace: false + alt: '' + rel: '' + link_class: '' + prefix: '' + suffix: '' + target: '' + nl2br: false + max_length: 0 + word_boundary: false + ellipsis: false + more_link: false + more_link_text: '' + more_link_path: '' + strip_tags: false + trim: false + preserve_tags: '' + html: false + element_type: '' + element_class: '' + element_label_type: '' + element_label_class: '' + element_label_colon: false + element_wrapper_type: '' + element_wrapper_class: '' + element_default_classes: false + empty: '' + hide_empty: false + empty_zero: false + hide_alter_empty: true + click_sort_column: value + type: string + settings: + link_to_entity: false + group_column: value + group_columns: { } + group_rows: true + delta_limit: 0 + delta_offset: 0 + delta_reversed: false + delta_first_last: false + multi_type: separator + separator: ', ' + field_api_classes: false + convert_spaces: false + description__value: + id: description__value + table: taxonomy_term_field_data + field: description__value + relationship: none + group_type: group + admin_label: '' + entity_type: taxonomy_term + entity_field: description + plugin_id: field + label: '' + exclude: false + alter: + alter_text: false + text: '' + make_link: false + path: '' + absolute: false + external: false + replace_spaces: false + path_case: none + trim_whitespace: false + alt: '' + rel: '' + link_class: '' + prefix: '' + suffix: '' + target: '' + nl2br: false + max_length: 0 + word_boundary: true + ellipsis: true + more_link: false + more_link_text: '' + more_link_path: '' + strip_tags: false + trim: false + preserve_tags: '' + html: false + element_type: '' + element_class: '' + element_label_type: '' + element_label_class: '' + element_label_colon: false + element_wrapper_type: '' + element_wrapper_class: '' + element_default_classes: false + empty: '' + hide_empty: false + empty_zero: false + hide_alter_empty: true + click_sort_column: value + type: text_default + settings: { } + group_column: value + group_columns: { } + group_rows: true + delta_limit: 0 + delta_offset: 0 + delta_reversed: false + delta_first_last: false + multi_type: separator + separator: ', ' + field_api_classes: false + pager: + type: none + options: + offset: 0 + exposed_form: + type: basic + options: + submit_button: Apply + reset_button: false + reset_button_label: Reset + exposed_sorts_label: 'Sort by' + expose_sort_order: true + sort_asc_label: Asc + sort_desc_label: Desc + access: + type: perm + options: + perm: 'access content' + cache: + type: tag + options: { } + empty: { } + sorts: + name: + id: name + table: taxonomy_term_field_revision + field: name + relationship: none + group_type: group + admin_label: '' + entity_type: taxonomy_term + entity_field: name + plugin_id: standard + order: ASC + expose: + label: '' + field_identifier: '' + exposed: false + arguments: + vid: + id: vid + table: taxonomy_term_field_data + field: vid + relationship: none + group_type: group + admin_label: '' + entity_type: taxonomy_term + entity_field: vid + plugin_id: vocabulary_vid + default_action: 'not found' + exception: + value: all + title_enable: false + title: All + title_enable: false + title: '' + default_argument_type: fixed + default_argument_options: + argument: '' + summary_options: + base_path: '' + count: true + override: false + items_per_page: 25 + summary: + sort_order: asc + number_of_records: 0 + format: default_summary + specify_validation: true + validate: + type: 'entity:taxonomy_vocabulary' + fail: 'not found' + validate_options: + bundles: { } + access: true + operation: view + multiple: 0 + break_phrase: false + not: false + filters: + status: + id: status + table: taxonomy_term_field_data + field: status + entity_type: taxonomy_term + entity_field: status + plugin_id: boolean + value: '1' + group: 1 + expose: + operator: '' + style: + type: html_list + options: + grouping: { } + row_class: '' + default_row_class: false + type: ul + wrapper_class: '' + class: 'dg-glossary__list add-list-reset' + row: + type: fields + query: + type: views_query + options: + query_comment: '' + disable_sql_rewrite: false + distinct: false + replica: false + query_tags: { } + relationships: { } + header: { } + footer: { } + display_extenders: { } + cache_metadata: + max-age: -1 + contexts: + - 'languages:language_content' + - 'languages:language_interface' + - url + - user.permissions + tags: { } + accordion: + id: accordion + display_title: Accordion + display_plugin: block + position: 1 + display_options: + display_description: '' + display_extenders: { } + cache_metadata: + max-age: -1 + contexts: + - 'languages:language_content' + - 'languages:language_interface' + - url + - user.permissions + tags: { } diff --git a/web/themes/custom/digital_gov/js/glossary.js b/web/themes/custom/digital_gov/js/glossary.js index 8acea3ed..0cbb2c3d 100644 --- a/web/themes/custom/digital_gov/js/glossary.js +++ b/web/themes/custom/digital_gov/js/glossary.js @@ -1,6 +1,5 @@ // This code was adapted from the 18F glossary component // https://github.com/18F/glossary/tree/master - const List = require("list.js"); const cssClasses = { @@ -222,21 +221,13 @@ function initializeEventListeners() { * @param {string} path relative path to the json file with terms */ -async function initializeGlossary(path) { +async function initializeGlossary() { initializeElements(); - - const response = await fetch(path); - if (!response.ok) return; - const terms = await response.json(); - - generateListMarkup(terms); - initializeList(); - initializeEventListeners(); } /* eslint-disable no-undef */ -if (glossaryBody && glossaryPath) { - initializeGlossary(glossaryPath); +if (glossaryBody) { + initializeGlossary(); } diff --git a/web/themes/custom/digital_gov/templates/node/node--guides.html.twig b/web/themes/custom/digital_gov/templates/node/node--guides.html.twig index 95e19ae6..c96be1c2 100644 --- a/web/themes/custom/digital_gov/templates/node/node--guides.html.twig +++ b/web/themes/custom/digital_gov/templates/node/node--guides.html.twig @@ -88,10 +88,9 @@ {% else %} {{ include('@digital_gov/partials/guides/guide-content.html.twig') }} {% endif %} - {# NOT-MIGRATED #} {% if node.field_glossary.target_id %} - {{ drupal_view('glossary_accordion', 'guide_overlay', node.field_glossary.target_id) }} + {{ drupal_view('glossary_sidebar', 'accordion', node.field_glossary.target_id) }} {% endif %} diff --git a/web/themes/custom/digital_gov/templates/views/views-view--glossary-accordion--guide-overlay.html.twig b/web/themes/custom/digital_gov/templates/views/views-view--glossary-sidebar--accordion.html.twig similarity index 100% rename from web/themes/custom/digital_gov/templates/views/views-view--glossary-accordion--guide-overlay.html.twig rename to web/themes/custom/digital_gov/templates/views/views-view--glossary-sidebar--accordion.html.twig diff --git a/web/themes/custom/digital_gov/templates/views/views-view-field--glossary-accordion--guide-overlay--description--value.html.twig b/web/themes/custom/digital_gov/templates/views/views-view-field--glossary-sidebar--accordion--description--value.html.twig similarity index 100% rename from web/themes/custom/digital_gov/templates/views/views-view-field--glossary-accordion--guide-overlay--description--value.html.twig rename to web/themes/custom/digital_gov/templates/views/views-view-field--glossary-sidebar--accordion--description--value.html.twig diff --git a/web/themes/custom/digital_gov/templates/views/views-view-field--glossary-accordion--guide-overlay--name.html.twig b/web/themes/custom/digital_gov/templates/views/views-view-field--glossary-sidebar--accordion--name.html.twig similarity index 100% rename from web/themes/custom/digital_gov/templates/views/views-view-field--glossary-accordion--guide-overlay--name.html.twig rename to web/themes/custom/digital_gov/templates/views/views-view-field--glossary-sidebar--accordion--name.html.twig