Add TOC

Allow to add TOC using shortcode (<!--toc-->). TOC add button in text editor.

system/admin/editor/js/Markdown.Editor.js

@@ -52,6 +52,8 @@
 		
         readmore: "Read More <!--more--> Ctrl+M",
 		
+        toc: "TOC <!--toc-->",
+		
         table: "Table - Ctrl+J",
 
         undo: "Undo - Ctrl+Z",
@@ -1520,6 +1522,7 @@
             }));
             buttons.hr = makeButton("wmd-hr-button", getString("hr"), "fa fa-ellipsis-h", bindCommand("doHorizontalRule"));
             buttons.readmore = makeButton("wmd-readmore-button", getString("readmore"), "fa fa-arrow-right", bindCommand("doReadMore"));
+            buttons.toc = makeButton("wmd-toc-button", getString("toc"), "fa fa-list-alt", bindCommand("doTOC"));
             //makeSpacer(3);
             buttons.undo = makeButton("wmd-undo-button", getString("undo"), "fa fa-undo", null);
             buttons.undo.execute = function (manager) {
@@ -2256,6 +2259,12 @@
         chunk.skipLines(0, 1, true);
     }
 	
+    commandProto.doTOC = function (chunk, postProcessing) {
+        chunk.startTag = "<!--toc-->";
+        chunk.selection = "";
+        chunk.skipLines(0, 1, true);
+    }
+	
 	commandProto.doStrikethrough = function (chunk, postProcessing) {
 
 		// Get rid of whitespace and fixup newlines.

system/includes/functions.php

@@ -518,6 +518,13 @@ function get_posts($posts, $page = 1, $perpage = 0)
 
         // Get the contents and convert it to HTML
         $post->body = MarkdownExtra::defaultTransform(remove_html_comments($content));
+        $toc = explode('<!--toc-->', $post->body);
+        if (isset($toc['1'])) { 
+            $load = <<<EOF
+            <script>window.onload = 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'];
+        }
 
         // Convert image tags to figures
         if (config('fig.captions') == 'true') {

system/resources/js/toc.js

@@ -0,0 +1,76 @@
+/*jslint
+    white: true,
+    browser: true,
+    vars: true
+*/
+
+/**
+ * Generates a table of contents for your document based on the headings
+ *  present. Anchors are injected into the document and the
+ *  entries in the table of contents are linked to them. The table of
+ *  contents will be generated inside of the first element with the id `toc`.
+ * @param {HTMLDOMDocument} documentRef Optional A reference to the document
+ *  object. Defaults to `document`.
+ * @author Matthew Christopher Kastor-Inare III
+ * @version 20130726
+ * @example
+ * // call this after the page has loaded
+ * generateTOC();
+ */
+ 
+ /**
+ * Modified by @danpros
+ * select only in selector ID
+ * using the heading title as the slug IDs
+ * insert the anchor inside the heading 
+ * fix browser not scrolling to the hash
+ */
+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));
+    if (headings && headings.length) {
+        headings.forEach(function (heading, index) {
+            heading.setAttribute('id', 'toc-' + heading.textContent.replace(/\s+/g, '-').toLowerCase());
+            heading.setAttribute('class', 'toc-link');
+
+            var anchor = documentRef.createElement('a');
+            anchor.setAttribute('href', '#toc-' + heading.textContent.replace(/\s+/g, '-').toLowerCase());
+            anchor.setAttribute('class', 'anchor');
+            anchor.innerHTML = '<svg fill="currentColor" viewBox="0 0 24 24" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>';
+
+            var link = documentRef.createElement('a');
+            link.setAttribute('href', '#toc-' + heading.textContent.replace(/\s+/g, '-').toLowerCase());
+            link.textContent = heading.textContent;
+
+            var div = documentRef.createElement('div');
+            div.setAttribute('class', heading.tagName.toLowerCase() + '-toc');
+
+			heading.appendChild(anchor);
+			div.appendChild(link);
+			toc.appendChild(div);
+        });
+        documentRef.getElementById('toc-wrapper').style.display = 'inline-block';
+    }
+    
+    if (window.location.hash) {
+        var hash = window.location.hash;
+        scrollToHash(hash);
+    }
+}
+
+// fix browser not scrolling to the hash
+function scrollToHash (hash) {
+    setTimeout(function() {
+        hashtag = hash; 
+        location.hash = '';
+        location.hash = hashtag;
+    }, 300);    
+}
+
+try {
+     module.exports = generateTOC;
+} catch (e) {
+    // module.exports is not defined
+}

themes/blog/post.html.php

@@ -39,7 +39,7 @@
                         <span itemprop="author"><a href="<?php echo $p->authorUrl;?>"><?php echo $p->authorName;?></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 $p->body; ?>
                 </div><!--//desc-->
                 <div style="margin-top:30px;position:relative;">

themes/clean/post.html.php

@@ -38,7 +38,7 @@
                 <blockquote><?php echo $p->quote ?></blockquote>
             </div>
         <?php } ?>
-        <div class="post-body" itemprop="articleBody">
+        <div class="post-body post-<?php echo $p->date;?>" itemprop="articleBody">
             <?php echo $p->body; ?>
         </div>
         <div class="tags"><strong><?php echo i18n('Tags'); ?>:</strong> <?php echo $p->tag;?></div>

themes/doks/post.html.php

@@ -45,7 +45,7 @@
 
     </div>
 
-    <div class="content-body" id="content">
+    <div class="content-body post-<?php echo $p->date;?>" id="content">
 
         <?php echo $post->body;?>
         <p class="post-footer">

themes/logs/post.html.php

@@ -38,7 +38,7 @@
                 <blockquote><?php echo $p->quote ?></blockquote>
             </div>
         <?php } ?>
-        <div class="post-body" itemprop="articleBody">
+        <div class="post-body post-<?php echo $p->date;?>" itemprop="articleBody">
             <?php echo $p->body; ?>
         </div>
         <div class="tags"><strong><?php echo i18n('Tags');?></strong> <?php echo $p->tag;?></div>

themes/readable/post.html.php

@@ -38,7 +38,7 @@
                 <blockquote><?php echo $p->quote ?></blockquote>
             </div>
         <?php } ?>
-        <div class="post-body" itemprop="articleBody">
+        <div class="post-body post-<?php echo $p->date;?>" itemprop="articleBody">
             <?php echo $p->body; ?>
         </div>
         <div class="tags"><strong><?php echo i18n('Tags');?>:</strong> <?php echo $p->tag;?></div>

themes/twentyfifteen/post.html.php

@@ -28,7 +28,7 @@
             <h1 class="entry-title"><?php echo $p->title; ?></h1>
         <?php } ?>
     </header>
-    <div class="entry-content">
+    <div class="entry-content post-<?php echo $p->date;?>">
         <?php echo $p->body; ?>
     </div>
     <style>.related {padding-bottom:2em;}.related p {margin-top:0;margin-bottom:0.5em;} .related ul {margin-left:1em;}</style>

themes/twentysixteen/post.html.php

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