Enhance Entry TOC plugin: childrens, numbering, and blockTitleFields

entry-toc.php

@@ -6,7 +6,9 @@
     'fieldsToIndex' => [
         [
             'fieldHandle' => 'exampleNeoField', 
-            'fieldTitles' => ['exampleHeading']
+            'fieldTitles' => ['exampleHeading'],
+            'numbering' => false,
+            'blockTitleFields' => ['exampleBlockField', 'exampleBlockField']
         ],
         [
             'fieldHandle' => 'exampleMatrixField',

src/assetbundles/dist/css/SidebarCss.css

@@ -1,20 +1,43 @@
 .accordion-item-body > ul {
-    padding: 0 1rem 1rem 2.1rem;
+    padding: 1rem 1rem 1rem 2.1rem;
+}
+
+.accordion-item-body > ol {
+    padding: 1rem 1rem 1rem 2.1rem;
 }
 
 .accordion-item-body > ul > li {
     list-style-type: circle;
     padding-bottom: 0.25rem;
 }
 
+.accordion-item-body-content ul {
+    padding-left: 1.5rem;
+}
+
+.accordion-item-body-content ol {
+    list-style-type: none;
+}
+
+.accordion-item-body > ol > li {
+    list-style-type: none;
+}
+
+.accordion-item-body > ol > li {
+    padding-bottom: 0.25rem;
+}
+
+.accordion-item-body-content ul li {
+    list-style-type: circle;
+}
+
 .accordion {
     margin: auto auto 1rem auto;
     max-width: 1000px;
 }
 .accordion-item {
-    background-color: #fff;
+    background-color: #f3f7fc;
     border-radius: 0.5rem;
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
     color: #111;
     margin: 1rem 0;
 }
@@ -27,6 +50,10 @@
     min-height: 3.5rem;
     padding: 0.5rem 3rem 0.5rem 1rem;
     position: relative;
+    box-shadow:
+    0 0 0 1px #cdd8e4,
+    0 2px 12px rgba(205, 216, 228, 0.5);
+    border-radius: 0.5rem;
 }
 .accordion-item-header::after {
     color: var(--medium-text-color);
@@ -41,13 +68,9 @@
 }
 .accordion-item-body {
     max-height: 0;
-    overflow: hidden;
+    overflow-y: auto;
     transition: max-height 0.2s ease-out;
 }
 .accordion-item-body-content {
-
-
     line-height: 1.5rem;
-    border-top: 1px solid;
-    border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
 }

src/assetbundles/dist/js/SidebarJs.js

@@ -25,23 +25,27 @@ function toggleToc(hideAll) {
     })
 }
 
-const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");
+const accordionItemHeaders = document.querySelectorAll(
+  ".accordion-item-header",
+);
 
-accordionItemHeaders.forEach(accordionItemHeader => {
-  accordionItemHeader.addEventListener("click", event => {
-
-    accordionItemHeader.classList.toggle("active");
-    const accordionItemBody = accordionItemHeader.nextElementSibling;
-    if(accordionItemHeader.classList.contains("active")) {
-      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
-    }
-    else {
-      accordionItemBody.style.maxHeight = 0;
+accordionItemHeaders.forEach((header) => {
+  header.addEventListener("click", () => {
+    header.classList.toggle("active");
+    const body = header.nextElementSibling;
+
+    if (header.classList.contains("active")) {
+      const maxHeight = window.innerHeight * 0.8;
+      const contentHeight = body.scrollHeight;
+
+      body.style.maxHeight = Math.min(contentHeight, maxHeight) + "px";
+    } else {
+      body.style.maxHeight = 0;
     }
-
   });
 });
 
+
 let tocs = document.querySelectorAll(".toc");
 if (tocs[0].closest(".slideout-container")) {
     toggleToc(true)

src/templates/_sidebar.twig

@@ -19,19 +19,58 @@
                             <h4>{{ fieldObj.name }} Table of Contents</h4>
                         </div>
                         {% if fieldObj.className == "benf\\neo\\Field" %}
-                            <div class="accordion-item-body">
-                                <ul class="accorion-item-body-content">
-                                    {% for block in indexField.level(1).all() %}
-                                        {% set itemTitle = macros.getTitle(block, field) %}
+                           <div class="accordion-item-body">
+
+                                {% macro renderBlocks(blocks, field, prefix) %}
+                                    {% set numbering = field.numbering|default(false) %}
+
+                                    {% if numbering %}
+                                        <ol class="accordion-item-body-content">
+                                    {% else %}
+                                        <ul class="accordion-item-body-content">
+                                    {% endif %}
+
+                                    {% for block in blocks %}
+                                        {% set itemTitle = block.type.name %}
+
+                                        {% set titleFound = false %}
+                                        {% if field.blockTitleFields is defined %}
+                                            {% for f in field.blockTitleFields %}
+                                                {% if not titleFound and block[f] is defined and block[f] %}
+                                                    {% set itemTitle = itemTitle ~ ' (' ~ block[f]|striptags ~ ')' %}
+                                                    {% set titleFound = true %}
+                                                {% endif %}
+                                            {% endfor %}
+                                        {% endif %}
+
+                                        {% set number = numbering ? (prefix ? prefix ~ '.' ~ loop.index : loop.index) : '' %}
+
                                         <li>
-                                            <a href="#{{ block.id }}" class="tocitem" id="toc{{ block.id }}">{{ itemTitle }}</a>
+                                            <a href="#{{ block.id }}" class="tocitem" id="toc{{ block.id }}">
+                                                {% if numbering %}{{ number }}. {% endif %}
+                                                {{ itemTitle }}
+                                            </a>
+
+                                            {% if block.children|length %}
+                                                {{ _self.renderBlocks(block.children.all(), field, number) }}
+                                            {% endif %}
                                         </li>
+
                                     {% endfor %}
-                                </ul>
+
+                                    {% if numbering %}
+                                        </ol>
+                                    {% else %}
+                                        </ul>
+                                    {% endif %}
+                                {% endmacro %}
+
+                                {{ macros.renderBlocks(indexField.level(1).all(), field, '') }}
+
                             </div>
                         {% elseif fieldObj.className == "craft\\fields\\Matrix" %}
                             <div class="accordion-item-body">
-                                <ul class="accorion-item-body-content">
+                                <ul class="accordion-item-body-content">
                                     {% for block in indexField.all() %}
                                         {% set itemTitle = macros.getTitle(block, field) %}
                                         <li>