From 2c89a510f78d6c792e37d019ae449f5108656c38 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Mon, 9 Nov 2020 23:54:07 +0100
Subject: [PATCH] Show table of contents on large viewports (#5)

---
 .eslintrc                           |  3 ++-
 assets/js/table-of-contents.js      | 38 +++++++++++++++++++++++++++++
 assets/scss/02-settings/_toc.scss   |  1 +
 assets/scss/07-components/_toc.scss | 36 +++++++++++++++++++++++++++
 assets/scss/main.scss               |  2 ++
 post.hbs                            | 13 +++++++++-
 6 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/table-of-contents.js
 create mode 100644 assets/scss/02-settings/_toc.scss
 create mode 100644 assets/scss/07-components/_toc.scss

diff --git a/.eslintrc b/.eslintrc
index c31d933..ee963ca 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -4,7 +4,8 @@
     "browser": true
   },
   "globals": {
-    "gtag": false
+    "gtag": false,
+    "tocbot": false
   },
   "parserOptions": {
     "ecmaVersion": 10,
diff --git a/assets/js/table-of-contents.js b/assets/js/table-of-contents.js
new file mode 100644
index 0000000..cd87a55
--- /dev/null
+++ b/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: 'toc__link',
+    listClass: 'toc__list',
+    listItemClass: 'toc__list__item',
+    scrollSmooth: false,
+    tocSelector: `#${TOC_ID}`,
+  });
+
+  document.getElementById(TOC_ID).classList.add('toc--active');
+};
+
+const destroyToc = () => {
+  document.getElementById(TOC_ID).classList.remove('toc--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());
diff --git a/assets/scss/02-settings/_toc.scss b/assets/scss/02-settings/_toc.scss
new file mode 100644
index 0000000..a82f263
--- /dev/null
+++ b/assets/scss/02-settings/_toc.scss
@@ -0,0 +1 @@
+$toc-breakpoint: xl;
diff --git a/assets/scss/07-components/_toc.scss b/assets/scss/07-components/_toc.scss
new file mode 100644
index 0000000..30cba3d
--- /dev/null
+++ b/assets/scss/07-components/_toc.scss
@@ -0,0 +1,36 @@
+.toc {
+    display: none;
+
+    @include breakpoint-up($toc-breakpoint) {
+        @include transition('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(2) $container-padding-sm;
+        line-height: map-get($typography-line-height-values, dense);
+        will-change: visibility, opacity;
+    }
+}
+
+.toc__list {
+    @include breakpoint-up($toc-breakpoint) {
+        @include typography(small);
+    }
+}
+
+.toc__list .toc__list {
+    font-size: inherit;
+}
+
+.toc--active {
+    @include breakpoint-up($toc-breakpoint) {
+        visibility: visible;
+        opacity: 1;
+    }
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 9057219..18845b6 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -12,6 +12,7 @@
 @import "02-settings/grid";
 @import "02-settings/modularscale";
 @import "02-settings/tables";
+@import "02-settings/toc";
 @import "02-settings/typography";
 
 // 3. Tools
@@ -75,6 +76,7 @@
 @import "07-components/post-card";
 @import "07-components/share";
 @import "07-components/text-field";
+@import "07-components/toc";
 
 // 8. Editor
 // User content from CMS.
diff --git a/post.hbs b/post.hbs
index 9bc2e81..c7239bb 100644
--- a/post.hbs
+++ b/post.hbs
@@ -76,10 +76,16 @@
 
             </header>
 
+            {{^has tag="galerie"}}
+                <div class="toc__holder">
+                    <div id="obsah" class="toc" hidden></div>
+                </div>
+            {{/has}}
+
             <section class="section section--dense">
                 <div class="container container--article">
 
-                    <div class="editor js-nbsp js-external-links js-heading-anchors">
+                    <div class="editor js-nbsp js-external-links js-heading-anchors js-table-of-contents-source">
                         {{content}}
                     </div>
 
@@ -156,6 +162,11 @@
 {{/contentFor}}
 
 {{#contentFor "scripts"}}
+    {{!-- Table of Contents --}}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.min.js"></script>
+    <script src="{{asset "js/table-of-contents.js"}}"></script>
+
+    {{!-- Code syntax highlighting with Prism.js --}}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/autoloader/prism-autoloader.min.js"></script>