diff --git a/js/inpage_navigation.js b/js/inpage_navigation.js index d5f5ae958..24d0346b2 100644 --- a/js/inpage_navigation.js +++ b/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); diff --git a/modules/oe_theme_helper/oe_theme_helper.module b/modules/oe_theme_helper/oe_theme_helper.module index 0f409b634..878194117 100644 --- a/modules/oe_theme_helper/oe_theme_helper.module +++ b/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, ], ], ]; diff --git a/modules/oe_theme_helper/templates/oe-theme-helper-inpage-navigation-block.html.twig b/modules/oe_theme_helper/templates/oe-theme-helper-inpage-navigation-block.html.twig index 2eca1afbd..93a9c13a0 100644 --- a/modules/oe_theme_helper/templates/oe-theme-helper-inpage-navigation-block.html.twig +++ b/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 } ] } %} diff --git a/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationParagraphTest.php b/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationParagraphTest.php index 77477f56f..81e9b7a75 100644 --- a/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationParagraphTest.php +++ b/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.

Here is a heading

', + '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()); diff --git a/oe_theme.theme b/oe_theme.theme index 337138be6..762c2b49c 100644 --- a/oe_theme.theme +++ b/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', diff --git a/templates/paragraphs/paragraph--oe-content-row--variant-inpage_navigation.html.twig b/templates/paragraphs/paragraph--oe-content-row--variant-inpage_navigation.html.twig index 6c96a6028..8c53efc5b 100644 --- a/templates/paragraphs/paragraph--oe-content-row--variant-inpage_navigation.html.twig +++ b/templates/paragraphs/paragraph--oe-content-row--variant-inpage_navigation.html.twig @@ -10,7 +10,7 @@
{{ inpage }}
-
+
{{ content.field_oe_paragraphs }}