Table of contents menu for wikis

app/assets/stylesheets/wiki.css

@@ -73,6 +73,57 @@ a.navbar-offset {
  visibility: hidden;
 }
 
+#toc-menu:hover, .toc-active {
+ background-color: #cbd5e0;
+}
+
+.js-toc {
+ max-height: 339px;
+ max-width: 298px;
+ top: 40px;
+ overflow: auto;
+ line-height: 2;
+ border: 1px solid #e1e4e8;
+}
+
+.toc-list {
+ list-style: none;
+ background-color: #fff;
+ z-index: 2000;
+ margin-bottom: 0;
+ padding: 0px 15px 15px 15px;
+}
+
+.is-collapsible {
+ padding-left: 20px;
+ padding-bottom: 5px;
+ list-style: none;
+}
+
+.toc-list-item {
+ padding: 0;
+ font-weight: initial;
+ text-align: start;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.toc-list-item a {
+ color: #343a40;
+ text-decoration: none;
+}
+
+.toc-list-item a:hover {
+ color: #0c82c4;
+}
+
+@media (max-width: 606px) {
+ .js-toc {
+ max-width: 260px;
+ }
+}
+
 @media (max-width: 768px) {
  .add-subscriptions {
  margin-top:10px;

app/javascript/packs/application.js

@@ -20,3 +20,4 @@ console.log('Hello World from Webpacker')
 var componentRequireContext = require.context("components", true);
 var ReactRailsUJS = require("react_ujs");
 ReactRailsUJS.useContext(componentRequireContext);
+const tocbot = require('tocbot');

app/views/wiki/_header.html.erb

@@ -42,6 +42,10 @@
  <a aria-label="Practice in a realtime doc" href="/talk/<%= @node.slug_from_path %>" rel="tooltip" title="Practice in a realtime doc." data-placement="top"><i class="fa fa-comment"></i></a> |
  <a aria-label="Link to wiki" href="/n/<%= @node.id %>"><i style="color:#888;" class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
  </span>
+ <details class="d-inline-flex flex-column position-relative">
+ <summary id="toc-menu" class="btn btn-light" role="button" aria-label="Table of Contents" aria-haspopup="menu"><i class="fa fa-list-ul" aria-hidden="true"></i></summary>
+ <span class="js-toc position-absolute shadow p-0 pt-4 rounded" role="menu"></span>
+ </details>
  </div>
  </div>
 </div>

app/views/wiki/show.html.erb

@@ -20,7 +20,7 @@
 
 <div class="row">
 
-<div class="col-lg-9">
+<div class="col-lg-9" id="main-content">
 
  <%= render partial: "wiki/header" %>
 
@@ -75,5 +75,35 @@
  <% end %>
 
  setupWiki(<%= @node.id %>, "<%= @node.title %>", <%= params[:raw] == 'true' %>, <%= current_user.nil? != true %>);
+
+ $('#main-content h1, h2, h3, h4, h5, h6').each(function (){
+ //convert the heading's text to lowercase and remove all spaces
+ let headingId = $(this).text().toLowerCase().replace(/\s/g, '');
+ $(this).attr('id', headingId);
+ });
+
+ tocbot.init({
+ // Where to render the table of contents.
+ tocSelector: '.js-toc',
+ // Where to grab the headings to build the table of contents.
+ contentSelector: '#main-content',
+ // Which headings to grab inside of the contentSelector element.
+ headingSelector: 'h1, h2, h3, h4, h5, h6',
+ // For headings inside relative or absolute positioned containers within content.
+ hasInnerContainers: true,
+ });
+
+ $('.toc-list li').first().css('font-weight', '600');
+
+ $(document).on('click', function (e) {
+ let tocBtn = $('#toc-menu')
+ if(!tocBtn.is(e.target) && tocBtn.has(e.target).length === 0) {
+ //closes the menu when there's a click outside the menu
+ $('details').removeAttr('open');
+ tocBtn.removeClass('toc-active');
+ } else {
+ tocBtn.addClass('toc-active');
+ }
+ });
  });
 </script>

package.json

@@ -62,6 +62,7 @@
  "react_ujs": "^2.6.1",
  "short-code-forms": "jywarren/short-code-forms#~0.0.1",
  "simple-data-grapher": "^2.0.0",
+ "tocbot": "^4.12.3",
  "typeahead.js": "^0.11.1",
  "typeahead.js-browserify": "Javier-Rotelli/typeahead.js-browserify#~1.0.7",
  "urlhash": "^0.1.3",

yarn.lock

@@ -12893,6 +12893,11 @@ to-space-case@0.1.2:
  dependencies:
  to-no-case "0.1.1"
 
+tocbot@^4.12.3:
+ version "4.12.3"
+ resolved "https://registry.yarnpkg.com/tocbot/-/tocbot-4.12.3.tgz#173dd144835d54f4c60cc57b2dbe569e10df0b74"
+ integrity sha512-1uA4rNZgY3a9OjwmIV076ksNr72PdxlLj7DD+0pKXUh1vNf6/GRL8nJT4ZtmhX9NRVPLPOehe0NEmwf2ukDTSg==
+
 toidentifier@1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"