Merge pull request #11 from eScholarship/10-table-of-contents-navigation

table of contents navigation

Author: nicktahani

lib/ucpec_static/tei/elements/body.rb

@@ -4,9 +4,85 @@ module UCPECStatic
   module TEI
     module Elements
       class Body < UCPECStatic::TEI::Nodes::Element
+        before_prepare_html :collect_chapters!
+
+        around_render_children :render_with_toc!
+
         matches_tei_tag! "body"
 
         uses_html_tag! :section
+
+        # @return [Array<Hash>]
+        attr_reader :chapters
+
+        # Check if there are any chapters to display in ToC
+        def has_chapters?
+          chapters.any?
+        end
+
+        private
+
+        # Collect all div elements with type="chapter" (div1, div2, etc.)
+        # @return [void]
+        def collect_chapters!
+          @chapters = []
+
+          # Traverse all descendants to find any division element with type="chapter"
+          traverse do |node|
+            next unless node.kind_of?(Elements::Division)
+            next unless node.xml_attributes["type"] == "chapter"
+
+            chapter_id = node.xml_attributes["id"]
+            next if chapter_id.blank?
+
+            # Find the heading within this chapter
+            heading = node.find_first_descendant { |child| child.kind_of?(Elements::Heading) }
+            next unless heading
+
+            # Extract the heading text
+            heading_text = extract_heading_text(heading)
+
+            @chapters << {
+              id: chapter_id,
+              title: heading_text,
+              level: node.level
+            }
+          end
+        end
+
+        # Extract text content from a heading node
+        # @param [UCPECStatic::TEI::Nodes::Element] heading
+        # @return [String]
+        def extract_heading_text(heading)
+          heading.node.text.strip
+        end
+
+        # Render table of contents before children
+        # @return [void]
+        def render_with_toc!
+          render_table_of_contents! if has_chapters?
+          yield
+        end
+
+        # Render the table of contents navigation
+        # @return [void]
+        def render_table_of_contents!
+          wrap_with_tag!("nav", class: "table-of-contents") do
+            wrap_with_tag!("h1", class: "toc-title") do
+              html_builder.text "Table of Contents"
+            end
+
+            wrap_with_tag!("ol", class: "toc-list") do
+              chapters.each do |chapter|
+                wrap_with_tag!("li", class: "toc-item") do
+                  wrap_with_tag!("a", href: "##{chapter[:id]}", class: "toc-link") do
+                    html_builder.text chapter[:title]
+                  end
+                end
+              end
+            end
+          end
+        end
       end
     end
   end

spec/data/sample-tei.html

@@ -7,7 +7,32 @@ <h1>The Hellenistic Settlements in Europe, the Islands, and Asia Minor</h1>
       <div data-tei-tag="docImprint"><span data-tei-tag="publisher">UNIVERSITY OF CALIFORNIA PRESS</span><span data-tei-tag="pubPlace">Berkeley ·  Los Angeles ·  Oxford</span><time data-tei-tag="docDate">1996</time></div>
     </div>
   </header>
-  <section data-tei-tag="body">
+  <section data-tei-tag="body"><nav class="table-of-contents">
+      <h1 class="toc-title">Table of Contents</h1>
+      <ol class="toc-list">
+        <li class="toc-item"><a href="#d0e111" class="toc-link">The Scholarship and the Sources</a></li>
+        <li class="toc-item"><a href="#d0e796" class="toc-link">Introduction</a></li>
+        <li class="toc-item"><a href="#d0e3680" class="toc-link">I Illyria and Epirus</a></li>
+        <li class="toc-item"><a href="#d0e4087" class="toc-link">II Thrace</a></li>
+        <li class="toc-item"><a href="#d0e4913" class="toc-link">III Macedonia and Paeonia</a></li>
+        <li class="toc-item"><a href="#d0e6850" class="toc-link">IV Thessaly, Aetolia, and Boeotia</a></li>
+        <li class="toc-item"><a href="#d0e8237" class="toc-link">V The Peloponnese</a></li>
+        <li class="toc-item"><a href="#d0e9000" class="toc-link">VI The Islands</a></li>
+        <li class="toc-item"><a href="#d0e10071" class="toc-link">VII The Troad</a></li>
+        <li class="toc-item"><a href="#d0e11686" class="toc-link">VIII Mysia and Aeolis</a></li>
+        <li class="toc-item"><a href="#d0e12900" class="toc-link">IX Ionia</a></li>
+        <li class="toc-item"><a href="#d0e14550" class="toc-link">X Lydia</a></li>
+        <li class="toc-item"><a href="#d0e20532" class="toc-link">XI Caria</a></li>
+        <li class="toc-item"><a href="#d0e24224" class="toc-link">XII Phrygia</a></li>
+        <li class="toc-item"><a href="#d0e30625" class="toc-link">XIII Lycia</a></li>
+        <li class="toc-item"><a href="#d0e30899" class="toc-link">XIV Pamphylia</a></li>
+        <li class="toc-item"><a href="#d0e31740" class="toc-link">XV Pisidia and Lycaonia</a></li>
+        <li class="toc-item"><a href="#d0e32521" class="toc-link">XVI Cilicia</a></li>
+        <li class="toc-item"><a href="#d0e35047" class="toc-link">XVII Cappadocia and Galatia</a></li>
+        <li class="toc-item"><a href="#d0e35773" class="toc-link">XVIII Pontus and Paphlagonia</a></li>
+        <li class="toc-item"><a href="#d0e36491" class="toc-link">XIX Bithynia</a></li>
+      </ol>
+    </nav>
     <div id="d0e111" data-tei-tag="div1" data-type="chapter">
       <h1 class="Heading-Heading2B"><a href="#d0e111" class="heading-link">The Scholarship and the Sources</a></h1>
       <div id="d0e115" data-tei-tag="div2" data-type="ss1">

templates/styles.css

@@ -336,6 +336,29 @@ section[data-tei-tag="body"] a[data-tei-tag="ref"]:hover {
   box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
 }
 
+/* Table of Contents Styling */
+.table-of-contents {
+  margin: 2rem 0 3rem 0;
+}
+
+.toc-item {
+  margin: 0.75rem 1rem 0;
+  font-weight: bold;
+}
+
+.toc-link {
+  color: unset;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+}
+
+.toc-link:hover {
+  transform: translateX(5px);
+  text-decoration: underline;
+}
+
 /* Scroll behavior for smooth jumping */
 html {
   scroll-behavior: smooth;