Merge pull request #980 from StadGent/feature/SGD8-2720

SGD8-2720: Fix timeline wrappers and modifiers
StadGent · Feb 14, 2024 · 984d22d · 984d22d
2 parents 2d29a87 + 66f6c4d
commit 984d22d
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 48 deletions.
diff --git a/gent_base.theme b/gent_base.theme
@@ -435,9 +435,9 @@ function gent_base_preprocess_menu_local_task(&$variables) {
  * Implements hook_preprocess_field().
  */
 function gent_base_preprocess_field(&$variables) {
-    if ($variables["element"]["#field_name"] == 'field_event_subscription_link') {
-        $variables['items'][0]['content']['#options']['attributes']['class'] = 'button button-secondary';
-    }
+  if ($variables["element"]["#field_name"] == 'field_event_subscription_link') {
+    $variables['items'][0]['content']['#options']['attributes']['class'] = 'button button-secondary';
+  }
 
   if ($variables["element"]["#field_name"] == 'field_tags' && count($variables["items"]) > 0) {
 
@@ -467,10 +467,10 @@ function gent_base_preprocess_field(&$variables) {
         $type = $entity->get('type')->getString();
 
         if ($type === 'timeline_frame') {
-          $display = _gent_base_get_timeline_display($entity);
-
           $timelineItems = count($entity->get('timeline_items')->referencedEntities());
           $variables['items'][$key]['content']['counter'][0] = $timelineItemTotal;
+          $variables['items'][$key]['content']['first_timeframe'][0] = FALSE;
+          $variables['items'][$key]['content']['last_timeframe'][0] = FALSE;
           $timelineItemTotal += $timelineItems;
 
           if ($timelineOdd) {
@@ -483,36 +483,15 @@ function gent_base_preprocess_field(&$variables) {
           // It's the first timeline frame.
           if ($firstTimeline === FALSE) {
             $firstTimeline = TRUE;
-
-            switch ($display) {
-              case 'timeline':
-                $variables['items'][$key]['content']['#prefix'] =
-                  '<div class="timeline-wrapper"><h2 class="visually-hidden">' . t('timeline') . '</h2>' .
-                  '<dl class="timeline accordion">';
-                break;
-              case 'program':
-                $isProgram = TRUE;
-                $variables['items'][$key]['content']['#prefix'] =
-                  '<div class="programme-wrapper"><h2 class="visually-hidden">' . t('programme') . '</h2>' .
-                  '<dl class="programme"><div class="programme__inner">';
-                break;
-              case 'roadmap':
-                $variables['items'][$key]['content']['#prefix'] =
-                  '<div class="roadmap-wrapper">' .
-                  '<dl class="roadmap">';
-                break;
-            }
+            $variables['items'][$key]['content']['first_timeframe'][0] = TRUE;
+          }
+          if (count($paragraphs) === $key+1) {
+            $variables['items'][$key]['content']['last_timeframe'][0] = TRUE;
           }
         }
         elseif ($firstTimeline === TRUE) {
           $firstTimeline = FALSE;
-
-          if ($isProgram) {
-            $variables['items'][$key - 1]['content']['#suffix'] = '</div></dl></div>';
-          }
-          else {
-            $variables['items'][$key - 1]['content']['#suffix'] = '</dl></div>';
-          }
+          $variables['items'][$key-1]['content']['last_timeframe'][0] = TRUE;
         }
       }
     }

diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--program.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--program.html.twig
@@ -39,19 +39,20 @@
  */
 #}
 
-{% set items_total = content.counter.0 %}
-{% set reversed = content.reversed.0 %}
-
-{% set classes = [
-    'programme-slot',
-    items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even',
-    reversed ? 'timeline-slot-reverse' : ''
-] %}
 {{ attach_library('gent_base/modal') }}
 
+{% set first_timeframe = content.first_timeframe.0 %}
+{% set last_timeframe = content.last_timeframe.0 %}
+
 {% block paragraph %}
   {% block content %}
-    <div{{ attributes.addClass(classes) }} role="listitem">
+    {% if first_timeframe == TRUE %}
+      <div{{ attributes.addClass('programme-wrapper') }}>
+        <h2 class="visually-hidden">programme</h2>
+        <dl class="programme">
+          <div class="programme__inner">
+    {% endif %}
+    <div class="programme-slot" role="listitem">
       <dt class="programme-slot-title">
         <h2>{{ content.title }}</h2>
       </dt>
@@ -63,5 +64,10 @@
         </div>
       </dd>
     </div>
+    {% if last_timeframe == TRUE %}
+        </div>
+      </dl>
+    </div>
+    {% endif %}
   {% endblock %}
 {% endblock paragraph %}
diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--roadmap.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--roadmap.html.twig
@@ -39,9 +39,23 @@
  */
 #}
 
+{% set first_timeframe = content.first_timeframe.0 %}
+{% set last_timeframe = content.last_timeframe.0 %}
+
 {% block paragraph %}
     {% block content %}
+        {% if first_timeframe == TRUE %}
+        <div {{ attributes.addClass('roadmap-wrapper') }}>
+            <dl class="roadmap">
+        {% endif %}
+
         <h2 class="visually-hidden">{{ content.title }}</h2>
+
         {{ content.timeline_items }}
+
+        {% if last_timeframe == TRUE %}
+            </dl>
+        </div>
+        {% endif %}
     {% endblock %}
 {% endblock paragraph %}
diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--timeline.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--timeline.html.twig
@@ -41,16 +41,17 @@
 
 {% set items_total = content.counter.0 %}
 {% set reversed = content.reversed.0 %}
-
-{% set classes = [
-    'timeline-slot',
-    items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even',
-    reversed ? 'timeline-slot-reverse' : ''
-] %}
+{% set first_timeframe = content.first_timeframe.0 %}
+{% set last_timeframe = content.last_timeframe.0 %}
 
 {% block paragraph %}
     {% block content %}
-        <div{{ attributes.addClass(classes) }} role="listitem">
+        {% if first_timeframe == TRUE %}
+        <div{{ attributes.addClass('timeline-wrapper') }}>
+            <h2 class="visually-hidden">timeline</h2>
+            <dl class="timeline accordion">
+        {% endif %}
+        <div class="timeline-slot {{ items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even'}} {{ reversed ? 'timeline-slot-reverse' : '' }}" role="listitem">
             {% if content.title %}
                 <dt>
                     <h3 class="dt-title">{{ content.title }}</h3>
@@ -59,5 +60,9 @@
 
             {{ content.timeline_items }}
         </div>
+        {% if last_timeframe == TRUE %}
+            </dl>
+        </div>
+        {% endif %}
     {% endblock %}
 {% endblock paragraph %}
diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-item--program.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-item--program.html.twig
@@ -52,7 +52,7 @@
       <div class="modal-content">
         <h3>{{ content.title }}</h3>
 
-        {% if content.subtitle %}
+        {% if content.subtitle|render is not empty %}
           <p>{{ content.subtitle }}</p>
         {% endif %}
 

diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-item--timeline.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-item--timeline.html.twig
@@ -56,7 +56,9 @@
                         data-controls-img="timeline-slot-img--{{ paragraph.id() }}"
                         class="accordion--button">{{ content.title }}</button>
             </h4>
+            {% if content.subtitle|render is not empty %}
             <h5 class="timeline-slot-date">{{ content.subtitle }}</h5>
+            {% endif %}
         </div>
         <div class="timeline-slot-content accordion--content" id="timeline-slot-content--{{ paragraph.id() }}" aria-hidden="{{ hidden }}" style="min-height: 100%;">
             <div class="content-image hidden-desktop">