EWPP-2149: Fix collecting of headers for Content row paragraph with inpage navigation variant.

js/inpage_navigation.js

@@ -19,9 +19,16 @@
    */
   Drupal.behaviors.eclInPageNavigation = {
     attach: function attach(context, settings) {
+      var items_markup = {};
       // Loop through all the elements marked as source areas.
       Array.prototype.forEach.call(document.querySelectorAll('[data-inpage-navigation-source-area]'), function (area) {
         var selectors = area.getAttribute('data-inpage-navigation-source-area');
+        // Prepare items_markup variable for future grouping of source elements by target inpage navigation block.
+        var target_id = '';
+        if (area.hasAttribute('data-inpage-navigation-target-block')) {
+          target_id = area.getAttribute('data-inpage-navigation-target-block');
+        }
+        items_markup[target_id] = '';
 
         // Loop through all the elements that are referenced by the specified selector(s), and mark them as source
         // elements. We cannot collect the elements at this stage, as multiple nested areas can be present in the page.
@@ -30,11 +37,13 @@
         // The :scope pseudo-class is needed to make sure that the selectors are applied inside the parent.
         // @see https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#user_notes
         Array.prototype.forEach.call(area.querySelectorAll(':scope ' + selectors), function (element) {
+          if (target_id) {
+            element.setAttribute('data-inpage-navigation-target-block', target_id)
+          }
           element.setAttribute('data-inpage-navigation-source-element', '');
         });
       });
 
-      var items_markup = '';
       // Collect all the elements marked as source. Now the elements will be unique and ordered correctly.
       Array.prototype.forEach.call(document.querySelectorAll('[data-inpage-navigation-source-element]'), function (element) {
         var title = element.textContent.trim();
@@ -58,20 +67,34 @@
         // Cleanup the markup from the helper attribute added above.
         element.removeAttribute('data-inpage-navigation-source-element');
 
-        items_markup += Drupal.theme('oe_theme_inpage_navigation_item', element.getAttribute('id'), title);
+        if (element.hasAttribute('data-inpage-navigation-target-block')) {
+          items_markup[element.getAttribute('data-inpage-navigation-target-block')] += Drupal.theme('oe_theme_inpage_navigation_item', element.getAttribute('id'), title);
+        }
+        else {
+          items_markup[''] += Drupal.theme('oe_theme_inpage_navigation_item', element.getAttribute('id'), title);
+        }
       });
 
       // Loop through all the inpage navigation marked with our special class. The auto-initialisation is disabled on
       // them, as initialisation should be run only after the items are added. Otherwise JS callbacks won't be applied
       // correctly.
       Array.prototype.forEach.call(document.querySelectorAll('.oe-theme-ecl-inpage-navigation'), function (block) {
-        if (items_markup.length === 0) {
+        var block_items = '';
+        // Get block items from collected links by block ID.
+        if (block.hasAttribute('id')) {
+          block_items = items_markup[block.getAttribute('id')];
+        }
+        else {
+          block_items = items_markup[''];
+        }
+
+        if (block_items.length === 0) {
           // When there are no items, execute the callback to handle the block.
           Drupal.eclInPageNavigation.handleEmptyInpageNavigation(block);
           return;
         }
 
-        block.querySelector('ul').innerHTML = items_markup;
+        block.querySelector('ul').innerHTML = block_items;
         var instance = new ECL.InpageNavigation(block);
         instance.init();
         Drupal.eclInPageNavigation.instances.push(instance);

modules/oe_theme_helper/oe_theme_helper.module

@@ -112,6 +112,7 @@ function oe_theme_helper_theme($existing, $type, $theme, $path) {
     'oe_theme_helper_inpage_navigation_block' => [
       'variables' => [
         'title' => NULL,
+        'id' => NULL,
       ],
     ],
   ];

modules/oe_theme_helper/templates/oe-theme-helper-inpage-navigation-block.html.twig

@@ -14,6 +14,10 @@
       {
         'name': 'data-ecl-auto-initialized',
         'value': 'true'
+      },
+      {
+        'name': 'id',
+        'value': id
       }
     ]
   } %}

modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationParagraphTest.php

@@ -77,11 +77,23 @@ public function testInpageNavigationInParagraphContentRow(): void {
     ]);
     $content_row->save();
 
+    // Create standalone a rich text paragraph with headings not used
+    // by inpage navigation block.
+    $paragraph2 = Paragraph::create([
+      'type' => 'oe_rich_text',
+      'field_oe_title' => 'Rich text title',
+      'field_oe_text_long' => [
+        'value' => 'The rich text body. <h2>Here is a heading</h2>',
+        'format' => 'full_html',
+      ],
+    ]);
+    $paragraph2->save();
+
     // Create a landing page that uses this paragraph.
     $node = $this->drupalCreateNode([
       'title' => 'The node title',
       'type' => 'oe_demo_landing_page',
-      'field_oe_demo_body' => [$content_row],
+      'field_oe_demo_body' => [$content_row, $paragraph2],
     ]);
 
     $this->drupalGet($node->toUrl());

oe_theme.theme

@@ -890,10 +890,13 @@ function oe_theme_preprocess_paragraph__oe_content_row__variant_inpage_navigatio
     $title = $paragraph->get('field_oe_title')->value;
   }
 
+  $variables['inpage_id'] = Html::getUniqueId('inpage-navigation-target-block');
+
   // Add the inpage nav library.
   $variables['inpage'] = [
     '#theme' => 'oe_theme_helper_inpage_navigation_block',
     '#title' => $title,
+    '#id' => $variables['inpage_id'],
     '#attached' => [
       'library' => [
         'oe_theme/inpage_navigation',

templates/paragraphs/paragraph--oe-content-row--variant-inpage_navigation.html.twig

@@ -10,7 +10,7 @@
   <div class="ecl-col-l-3 ecl-u-z-navigation">
     {{ inpage }}
   </div>
-  <div class="ecl-col-l-9">
+  <div class="ecl-col-l-9" data-inpage-navigation-target-block="{{ inpage_id }}" data-inpage-navigation-source-area="h2">
     {{ content.field_oe_paragraphs }}
   </div>
 </div>