WIP Add table of contents to articles (#5)

.eslintrc

@@ -4,7 +4,8 @@
     "browser": true
   },
   "globals": {
-    "gtag": false
+    "gtag": false,
+    "tocbot": false
   },
   "parserOptions": {
     "ecmaVersion": 10,

assets/js/table-of-contents.js

@@ -0,0 +1,38 @@
+const TOC_ID = 'obsah';
+
+const generateToc = () => {
+  tocbot.init({
+    activeLinkClass: 'is-active',
+    collapsibleClass: 'is-collapsible',
+    contentSelector: '.js-table-of-contents-source',
+    headingSelector: 'h1, h2, h3',
+    isCollapsedClass: 'is-collapsed',
+    linkClass: 'table-of-contents__link',
+    listClass: 'table-of-contents__list',
+    listItemClass: 'table-of-contents__list__item',
+    scrollSmooth: false,
+    tocSelector: `#${TOC_ID}`,
+  });
+
+  document.getElementById(TOC_ID).classList.add('table-of-contents--active');
+};
+
+const destroyToc = () => {
+  document.getElementById(TOC_ID).classList.remove('table-of-contents--active');
+  tocbot.destroy();
+};
+
+const updateToc = () => {
+  const tocEl = document.getElementById(TOC_ID);
+
+  if (window.getComputedStyle(tocEl).display !== 'none') {
+    if (!tocEl.innerHTML) {
+      generateToc();
+    }
+  } else if (tocEl.innerHTML) {
+    destroyToc();
+  }
+};
+
+window.addEventListener('load', () => updateToc());
+window.addEventListener('resize', () => updateToc());

assets/scss/main.scss

@@ -53,6 +53,7 @@
 @use 'styles/04-components/navigation';
 @use 'styles/04-components/post-card';
 @use 'styles/04-components/share';
+@use 'styles/04-components/table-of-contents';
 @use 'styles/04-components/text-field';
 
 // 5. Editor

assets/scss/styles/04-components/_table-of-contents.scss

@@ -0,0 +1,42 @@
+@use '../../settings/container';
+@use '../../tools/breakpoint';
+@use '../../tools/spacing';
+@use '../../tools/transition';
+@use '../../tools/typography';
+
+$_breakpoint: xl;
+
+.table-of-contents {
+    @include breakpoint.up($_breakpoint) {
+        @include transition.add('visibility, opacity');
+
+        position: sticky;
+        top: 0;
+        right: 0;
+        display: block;
+        //visibility: hidden;
+        //opacity: 0;
+        width: calc((100vw - #{container.$article-width}) / 2);
+        height: 0;
+        padding: spacing.of(2) container.$padding-sm;
+        line-height: typography.line-height(dense);
+        will-change: visibility, opacity;
+    }
+}
+
+.table-of-contents__list {
+    //@include breakpoint.up($_breakpoint) {
+    @include typography.style(small);
+    //}
+}
+
+.table-of-contents__list .table-of-contents__list {
+    font-size: inherit;
+}
+
+.table-of-contents--active {
+    //@include breakpoint.up($_breakpoint) {
+    //    visibility: visible;
+    //    opacity: 1;
+    //}
+}

partials/external/tocbot.hbs

@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.min.js"></script>

post.hbs

@@ -82,10 +82,16 @@
 
             </header>
 
+            {{^has tag="galerie"}}
+                <div> {{!-- TOC holder for `position: sticky` --}}
+                    <div id="obsah" class="table-of-contents" hidden></div>
+                </div>
+            {{/has}}
+
             <div class="section section--roomy-bottom">
                 <div class="container container--article">
 
-                    <div class="editor editor--long-text js-nbsp js-external-links js-heading-anchors">
+                    <div class="editor editor--long-text js-nbsp js-external-links js-heading-anchors js-table-of-contents-source">
                         {{content}}
                     </div>
 
@@ -161,6 +167,10 @@
 {{/contentFor}}
 
 {{#contentFor "scripts"}}
+    {{> "external/tocbot"}}
+
+    <script src="{{asset "js/table-of-contents.js"}}"></script>
+
     {{> "external/prism-js"}}
     {{> "external/facebook-comments"}}
 {{/contentFor}}