Improve the TOC

Even in posts collections page, create the TOC as long as its in full post mode.

system/includes/functions.php

@@ -521,9 +521,13 @@ function get_posts($posts, $page = 1, $perpage = 0)
         $toc = explode('<!--toc-->', $post->body);
         if (isset($toc['1'])) { 
             $load = <<<EOF
-            <script>window.onload = function () {generateTOC('.post-{$post->date}');};</script>
+            <script>
+            document.addEventListener("DOMContentLoaded", function() {
+                generateTOC('.post-{$post->date}');
+            });
+            </script>
             EOF;
-            $post->body = $toc['0'] . $load . '<div class="toc" id="toc-wrapper" style="display:none;" ><details><summary title="TOC"><span class="details">Table of Contents</span></summary><div class="inner"><div id="toc"></div></div></details></div><script src="'. site_url().'system/resources/js/toc.js"></script>' . $toc['1'];
+            $post->body = $toc['0'] . $load . '<div class="toc" id="toc-wrapper.post-'.$post->date.'" style="display:none;" ><details><summary title="TOC"><span class="details">Table of Contents</span></summary><div class="inner"><div id="toc.post-'.$post->date.'"></div></div></details></div><script src="'. site_url().'system/resources/js/toc.js"></script>' . $toc['1'];
         }
 
         // Convert image tags to figures

system/resources/js/toc.js

@@ -27,9 +27,9 @@
  */
 function generateTOC (id) {
     var documentRef = document;
-	var selector = id + ' h1,' + id + ' h2,' + id + ' h3,' + id + ' h4,' + id + ' h5,' + id + ' h6';
-    var toc = documentRef.getElementById('toc');
-	var headings = [].slice.call(documentRef.body.querySelectorAll(selector));
+    var selector = id + ' h1,' + id + ' h2,' + id + ' h3,' + id + ' h4,' + id + ' h5,' + id + ' h6';
+    var toc = documentRef.getElementById('toc' + id);
+    var headings = [].slice.call(documentRef.body.querySelectorAll(selector));
     if (headings && headings.length) {
         headings.forEach(function (heading, index) {
             heading.setAttribute('id', 'toc-' + heading.textContent.replace(/\s+/g, '-').toLowerCase());
@@ -47,11 +47,11 @@ function generateTOC (id) {
             var div = documentRef.createElement('div');
             div.setAttribute('class', heading.tagName.toLowerCase() + '-toc');
 
-			heading.appendChild(anchor);
-			div.appendChild(link);
-			toc.appendChild(div);
+            heading.appendChild(anchor);
+            div.appendChild(link);
+            toc.appendChild(div);
         });
-        documentRef.getElementById('toc-wrapper').style.display = 'inline-block';
+        documentRef.getElementById('toc-wrapper' + id).style.display = 'inline-block';
     }
     
     if (window.location.hash) {

themes/blog/main.html.php

@@ -60,7 +60,7 @@
                         <?php if (login()) { echo ' - <span><a href="'. $p->url .'/edit?destination=post">Edit</a></span>'; } ?>
                     </p>
                 </div>
-                <div class="desc text-left" itemprop="articleBody">                                    
+                <div class="desc text-left post-<?php echo $p->date;?>" itemprop="articleBody">                                    
                     <?php echo get_teaser($p->body, $p->url) ?>
                 </div><!--//desc-->
                 <div style="position:relative;">

themes/clean/main.html.php

@@ -49,7 +49,7 @@
                     <blockquote><?php echo $p->quote ?></blockquote>
                 </div>
             <?php } ?>
-            <div class="teaser-body" itemprop="articleBody">
+            <div class="teaser-body post-<?php echo $p->date;?>" itemprop="articleBody">
                 <?php echo get_thumbnail($p->body) ?>
                 <?php echo get_teaser($p->body, $p->url) ?>
                 <?php if (config('teaser.type') === 'trimmed'):?><a href="<?php echo $p->url;?>"><?php echo config('read.more'); ?></a><?php endif;?>

themes/logs/main.html.php

@@ -49,7 +49,7 @@
                     <blockquote><?php echo $p->quote ?></blockquote>
                 </div>
             <?php } ?>
-            <div class="teaser-body" itemprop="articleBody">
+            <div class="teaser-body post-<?php echo $p->date;?>" itemprop="articleBody">
                 <?php echo get_thumbnail($p->body) ?>
                 <?php echo get_teaser($p->body, $p->url) ?>
                 <?php if (config('teaser.type') === 'trimmed'):?><a href="<?php echo $p->url;?>"><?php echo config('read.more'); ?></a><?php endif;?>

themes/readable/main.html.php

@@ -49,7 +49,7 @@
                     <blockquote><?php echo $p->quote ?></blockquote>
                 </div>
             <?php } ?>
-            <div class="teaser-body" itemprop="articleBody">
+            <div class="teaser-body post-<?php echo $p->date;?>" itemprop="articleBody">
                 <?php echo get_thumbnail($p->body) ?>
                 <?php echo get_teaser($p->body, $p->url) ?>
                 <?php if (config('teaser.type') === 'trimmed'):?><a href="<?php echo $p->url;?>"><?php echo config('read.more'); ?></a><?php endif;?>

themes/twentyfifteen/main.html.php

@@ -61,7 +61,7 @@
         <h2 class="entry-title"><a href="<?php echo $p->url; ?>"><?php echo $p->title; ?></a></h2>
     </header>
 	<?php } ?>
-    <div class="entry-content">
+    <div class="entry-content post-<?php echo $p->date;?>">
         <?php echo get_teaser($p->body, $p->url); ?>
         <?php if (config('teaser.type') === 'trimmed'):?><a class="more-link" href="<?php echo $p->url; ?>"><?php echo config('read.more'); ?></a><?php endif;?>
     </div>

themes/twentysixteen/main.html.php

@@ -46,7 +46,7 @@
     <?php endif;?>
         
     <div class="entry-content">
-        <div class="content">
+        <div class="content post-<?php echo $p->date;?>">
             <div class="clearfix text-formatted field field--name-body">
                 <div class="content">
                     <?php if (!empty($p->quote)):?>