render Toc

lib/views/crowi-plus/base/user_page_nosidebar.html

@@ -46,7 +46,9 @@
 
         {# relocate #revision-toc #}
         <div class="col-lg-2 col-md-3 visible-lg visible-md">
-          <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="50"></div>
+          <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="50">
+            <div id="revision-toc-content" class="revision-toc-content"></div>
+          </div>
         </div> {# /.col- #}
 
       </div>

lib/views/crowi-plus/page.html

@@ -34,7 +34,9 @@
 
       {# relocate #revision-toc #}
       <div class="col-lg-2 col-md-3 visible-lg visible-md">
-        <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="100"></div>
+        <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="100">
+          <div id="revision-toc-content" class="revision-toc-content"></div>
+        </div>
       </div> {# /.col- #}
 
     </div>

lib/views/crowi-plus/page_list.html

@@ -38,7 +38,9 @@
 
       {# relocate #revision-toc #}
       <div class="col-lg-2 col-md-3 visible-lg visible-md">
-        <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="100"></div>
+        <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="100">
+          <div id="revision-toc-content" class="revision-toc-content"></div>
+        </div>
       </div> {# /.col- #}
 
     </div>

lib/views/page.html

@@ -189,7 +189,7 @@
     <div class="tab-pane {% if not req.body.pageForm %}active{% endif %}" id="revision-body">
       <div class="revision-toc" id="revision-toc">
         <a data-toggle="collapse" data-parent="#revision-toc" href="#revision-toc-content" class="revision-toc-head">{{ t('Table of Contents') }}</a>
-
+        <div id="revision-toc-content" class="revision-toc-content collapse in"></div>
       </div>
       <div id="page"></div>
     </div>

resource/js/app.js

@@ -64,7 +64,11 @@ if (isLoggedin) {
   crowi.fetchUsers();
 }
 
-const crowiRenderer = new GrowiRenderer(crowi, {mode: 'page'});
+const crowiRenderer = new GrowiRenderer(crowi, {
+  mode: 'page',
+  // set function for rendering Table Of Contents
+  renderToc: crowi.getCrowiForJquery().renderTocContent,
+});
 window.crowiRenderer = crowiRenderer;
 
 // FIXME

resource/js/legacy/crowi.js

@@ -25,6 +25,14 @@ Crowi.createErrorView = function(msg) {
   $('#main').prepend($('<p class="alert-message error">' + msg + '</p>'));
 };
 
+/**
+ * render Table Of Contents
+ * @param {string} tocHtml
+ */
+Crowi.renderTocContent = (tocHtml) => {
+  $('#revision-toc-content').html(tocHtml);
+}
+
 /**
  * append buttons to section headers
  */

resource/js/util/GrowiRenderer.js

@@ -62,7 +62,7 @@ export default class GrowiRenderer {
       switch (mode) {
         case 'page':
           configurers = configurers.concat([
-            new TocAndAnchorConfigurer(crowi),
+            new TocAndAnchorConfigurer(crowi, option.renderToc),
             new HeaderLineNumberConfigurer(crowi),
           ]);
           break;

resource/js/util/markdown-it/toc-and-anchor.js

@@ -1,7 +1,8 @@
 export default class TocAndAnchorConfigurer {
 
-  constructor(crowi) {
+  constructor(crowi, renderToc) {
     this.crowi = crowi;
+    this.renderToc = renderToc;
   }
 
   configure(md) {
@@ -16,15 +17,14 @@ export default class TocAndAnchorConfigurer {
       })
       ;
 
-    md.set({
-      tocCallback: (tocMarkdown, tocArray, tocHtml) => {
-        // TODO impl
-        // $('#revision-toc').append(`
-        //   <div id="revision-toc-content" class="revision-toc-content collapse in">
-        //     ${tocHtml}
-        //   </div>`);
-      },
-    });
+    // set toc render function
+    if (this.renderToc != null) {
+      md.set({
+        tocCallback: (tocMarkdown, tocArray, tocHtml) => {
+          this.renderToc(tocHtml);
+        },
+      });
+    }
   }
 
   /**