Merge pull request #20 from psu-libraries/19-views-accordion-not-displaying-row-classes-and-are-showing-hidden-fields

19 views accordion not displaying row classes and are showing hidden fields

Author: zipymonkey

psulib_base_helper.module

@@ -25,11 +25,16 @@ function psulib_base_helper_theme($existing, $type, $theme, $path): array {
         'options' => [],
       ],
     ],
-    'views_psulib_base_helper_accordion_content_item' => [
+    'views_view_fields__accordion_content' => [
+      'base hook' => 'views_view_fields',
+      'template' => 'views-view-fields--accordion-content',
+
       'variables' => [
-        'label' => '',
+        'view' => NULL,
+        'field' => NULL,
+        'row' => NULL,
+        'title_field' => 'title',
         'options' => [],
-        'content' => [],
       ],
     ],
   ];
@@ -47,7 +52,7 @@ function psulib_base_helper_preprocess_views_psulib_base_helper_card_grid(&$vari
 }
 
 /**
- * Prepares variables for views table templates.
+ * Prepares variables for views accordion template..
  *
  * Default template: views-view-table.html.twig.
  *
@@ -61,24 +66,26 @@ function template_preprocess_views_psulib_base_helper_accordion(&$variables) {
   $view = $variables['view'];
   $options = $view->style_plugin->options;
   $variables['options'] = $options;
+  $variables['display_class'] = $view->display_handler->getOption('css_class');
   $items = [];
 
+  $renderer = \Drupal::service('renderer');
+
   foreach ($view->result as $id => $row) {
-    $item = [];
-    foreach ($view->field as $field_id => $field) {
-      if ($field_id == $options['title_field']) {
-        $item['title'] = $view->style_plugin->getField($id, $field_id);
-      }
-      else {
-        $item['content'][$field_id] = [
-          '#theme' => 'views_psulib_base_helper_accordion_content_item',
-          '#label' => $field->label(),
-          '#options' => $field->options,
-          '#content' => $view->style_plugin->getField($id, $field_id),
-        ];
-      }
-    }
-    $items[] = $item;
+    // Build the content array.  We're extending the views_view_fields theme
+    // function so we can remove the title field from the content area.
+    $content = [
+      '#theme' => 'views_view_fields__accordion_content',
+      '#view' => $view,
+      '#options' => $view->rowPlugin->options,
+      '#title_field' => $options['title_field'],
+      '#row' => $row,
+    ];
+
+    $items[] = [
+      'title' => $view->style_plugin->getField($id, $options['title_field']),
+      'content' => $renderer->render($content),
+    ];
   }
   $variables['items'] = $items;
 

templates/views-psulib-base-helper-accordion-content-item.html.twig

@@ -24,5 +24,7 @@
   title: '',
   default_item_tag: options.heading_level ?? 'h3',
   open_item_id: options.collapse_initial ? 0 : 1,
-  items: items ?? []
+  items: items ?? [],
+  accordion_item_utility_classes: [options.row_class ?? ''],
+  accordion_utility_classes: [display_class ?? ''],
 } %}

templates/views-psulib-base-helper-accordion.html.twig

@@ -0,0 +1,53 @@
+{#
+/**
+ * @file
+ * Theme override to display all the fields in a row.
+ *
+ * Available variables:
+ * - view: The view in use.
+ * - fields: A list of fields, each one contains:
+ *   - content: The output of the field.
+ *   - raw: The raw data for the field, if it exists. This is NOT output safe.
+ *   - class: The safe class ID to use.
+ *   - handler: The Views field handler controlling this field.
+ *   - inline: Whether or not the field should be inline.
+ *   - wrapper_element: An HTML element for a wrapper.
+ *   - wrapper_attributes: List of attributes for wrapper element.
+ *   - separator: An optional separator that may appear before a field.
+ *   - label: The field's label text.
+ *   - label_element: An HTML element for a label wrapper.
+ *   - label_attributes: List of attributes for label wrapper.
+ *   - label_suffix: Colon after the label.
+ *   - element_type: An HTML element for the field content.
+ *   - element_attributes: List of attributes for HTML element for field content.
+ *   - has_label_colon: A boolean indicating whether to display a colon after
+ *     the label.
+ *   - element_type: An HTML element for the field content.
+ *   - element_attributes: List of attributes for HTML element for field content.
+ * - row: The raw result from the query, with all data it fetched.
+ *
+ * @see template_preprocess_views_view_fields()
+ */
+#}
+
+{% for id, field in fields| filter((v, k) => k != title_field) -%}
+  {{ field.separator }}
+  {%- if field.wrapper_element -%}
+    <{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
+  {%- endif %}
+  {%- if field.label -%}
+    {%- if field.label_element -%}
+      <{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
+    {%- else -%}
+      {{ field.label }}{{ field.label_suffix }}
+    {%- endif %}
+  {%- endif %}
+  {%- if field.element_type -%}
+    <{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
+  {%- else -%}
+    {{ field.content }}
+  {%- endif %}
+  {%- if field.wrapper_element -%}
+    </{{ field.wrapper_element }}>
+  {%- endif %}
+{%- endfor %}