From 5328dc159b45aabff3465bebd976c1b7d8202dfc Mon Sep 17 00:00:00 2001
From: Michael Van De Walle <michael.vdwalle@dropsolid.com>
Date: Fri, 9 Feb 2024 09:46:41 +0100
Subject: [PATCH 1/2] SGD8-2720: Fix timeline wrappers and modifiers

---
 gent_base.theme                               | 41 +++++--------------
 ...ragraph--timeline-frame--program.html.twig | 19 +++++++--
 ...ragraph--timeline-frame--roadmap.html.twig | 11 +++++
 ...agraph--timeline-frame--timeline.html.twig | 11 +++++
 4 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/gent_base.theme b/gent_base.theme
index 32b072cf4..1c1ab8798 100644
--- 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
index d991a76e9..a47a7c1f8 100644
--- a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--program.html.twig
+++ b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--program.html.twig
@@ -41,16 +41,24 @@
 
 {% set items_total = content.counter.0 %}
 {% set reversed = content.reversed.0 %}
+{% set first_timeframe = content.first_timeframe.0 %}
+{% set last_timeframe = content.last_timeframe.0 %}
 
 {% set classes = [
-    'programme-slot',
-    items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even',
-    reversed ? 'timeline-slot-reverse' : ''
+  'programme-slot',
+  items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even',
+  reversed ? 'timeline-slot-reverse' : ''
 ] %}
 {{ attach_library('gent_base/modal') }}
 
 {% block paragraph %}
   {% block content %}
+    {% if first_timeframe == TRUE %}
+      <div class="programme-wrapper">
+        <h2 class="visually-hidden">programme</h2>
+        <dl class="programme">
+          <div class="programme__inner">
+    {% endif %}
     <div{{ attributes.addClass(classes) }} role="listitem">
       <dt class="programme-slot-title">
         <h2>{{ content.title }}</h2>
@@ -63,5 +71,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
index 6a1888407..cbc9aaa1d 100644
--- 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,20 @@
  */
 #}
 
+{% set first_timeframe = content.first_timeframe.0 %}
+{% set last_timeframe = content.last_timeframe.0 %}
+
 {% block paragraph %}
     {% block content %}
+        {% if first_timeframe == TRUE %}
+        <div class="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
index c088186cc..68ebd5b5c 100644
--- a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--timeline.html.twig
+++ b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--timeline.html.twig
@@ -41,6 +41,8 @@
 
 {% set items_total = content.counter.0 %}
 {% set reversed = content.reversed.0 %}
+{% set first_timeframe = content.first_timeframe.0 %}
+{% set last_timeframe = content.last_timeframe.0 %}
 
 {% set classes = [
     'timeline-slot',
@@ -50,6 +52,11 @@
 
 {% block paragraph %}
     {% block content %}
+        {% if first_timeframe == TRUE %}
+        <div class="timeline-wrapper">
+            <h2 class="visually-hidden">timeline</h2>
+            <dl class="timeline accordion">
+        {% endif %}
         <div{{ attributes.addClass(classes) }} role="listitem">
             {% if content.title %}
                 <dt>
@@ -59,5 +66,9 @@
 
             {{ content.timeline_items }}
         </div>
+        {% if last_timeframe == TRUE %}
+            </dl>
+        </div>
+        {% endif %}
     {% endblock %}
 {% endblock paragraph %}

From 66f6c4d1e1bb47ea3813f61dbda8dbcf6e0790cc Mon Sep 17 00:00:00 2001
From: SvenV <sven.vandevenne@gmail.com>
Date: Wed, 14 Feb 2024 11:58:10 +0100
Subject: [PATCH 2/2] SGD8-2720: Fix timeline paragraph modifiers

---
 .../paragraph--timeline-frame--program.html.twig  | 15 ++++-----------
 .../paragraph--timeline-frame--roadmap.html.twig  |  5 ++++-
 .../paragraph--timeline-frame--timeline.html.twig | 10 ++--------
 .../paragraph--timeline-item--program.html.twig   |  2 +-
 .../paragraph--timeline-item--timeline.html.twig  |  2 ++
 5 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--program.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--program.html.twig
index a47a7c1f8..5b5417d3f 100644
--- a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--program.html.twig
+++ b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--program.html.twig
@@ -39,27 +39,20 @@
  */
 #}
 
-{% set items_total = content.counter.0 %}
-{% set reversed = content.reversed.0 %}
+{{ attach_library('gent_base/modal') }}
+
 {% set first_timeframe = content.first_timeframe.0 %}
 {% set last_timeframe = content.last_timeframe.0 %}
 
-{% set classes = [
-  'programme-slot',
-  items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even',
-  reversed ? 'timeline-slot-reverse' : ''
-] %}
-{{ attach_library('gent_base/modal') }}
-
 {% block paragraph %}
   {% block content %}
     {% if first_timeframe == TRUE %}
-      <div class="programme-wrapper">
+      <div{{ attributes.addClass('programme-wrapper') }}>
         <h2 class="visually-hidden">programme</h2>
         <dl class="programme">
           <div class="programme__inner">
     {% endif %}
-    <div{{ attributes.addClass(classes) }} role="listitem">
+    <div class="programme-slot" role="listitem">
       <dt class="programme-slot-title">
         <h2>{{ content.title }}</h2>
       </dt>
diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--roadmap.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--roadmap.html.twig
index cbc9aaa1d..6e8793f61 100644
--- a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--roadmap.html.twig
+++ b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--roadmap.html.twig
@@ -45,11 +45,14 @@
 {% block paragraph %}
     {% block content %}
         {% if first_timeframe == TRUE %}
-        <div class="roadmap-wrapper">
+        <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>
diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--timeline.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--timeline.html.twig
index 68ebd5b5c..f23ea168d 100644
--- a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--timeline.html.twig
+++ b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--timeline.html.twig
@@ -44,20 +44,14 @@
 {% set first_timeframe = content.first_timeframe.0 %}
 {% set last_timeframe = content.last_timeframe.0 %}
 
-{% set classes = [
-    'timeline-slot',
-    items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even',
-    reversed ? 'timeline-slot-reverse' : ''
-] %}
-
 {% block paragraph %}
     {% block content %}
         {% if first_timeframe == TRUE %}
-        <div class="timeline-wrapper">
+        <div{{ attributes.addClass('timeline-wrapper') }}>
             <h2 class="visually-hidden">timeline</h2>
             <dl class="timeline accordion">
         {% endif %}
-        <div{{ attributes.addClass(classes) }} role="listitem">
+        <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>
diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-item--program.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-item--program.html.twig
index c0c9e9f75..ab480b163 100644
--- 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
index 7b041623f..b2ec508fc 100644
--- 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">