From ec8b5a71fafacea0188a56967af448d7ccdf9fad Mon Sep 17 00:00:00 2001
From: Artem Kosulin <artem.kosulin@flant.com>
Date: Thu, 5 Dec 2024 16:55:11 +0300
Subject: [PATCH] Remove tabs and add toc

Signed-off-by: Artem Kosulin <artem.kosulin@flant.com>
---
 assets/css/configurator.css                   | 44 ++++++++++++++++---
 assets/js/configurator/tabs.js                | 18 --------
 .../static/_data/_common/configurator.yaml    |  5 +++
 bin/configurator/templates/includes/tabs.html | 10 +----
 .../templates/pages/configurator.html         | 25 +++++++++++
 5 files changed, 69 insertions(+), 33 deletions(-)

diff --git a/assets/css/configurator.css b/assets/css/configurator.css
index bbe2b864c..e72f73c3a 100644
--- a/assets/css/configurator.css
+++ b/assets/css/configurator.css
@@ -86,19 +86,12 @@
 }
 
 .view__item {
-    display: none;
-    opacity: 0;
-    height: 0;
     position: relative;
-    z-index: -1;
 }
 
 .view__item.active {
-    display: inherit;
-    opacity: 1;
     min-height: 500px;
     height: fit-content;
-    z-index: 1;
 }
 
 .configurator span.tooltip-text {
@@ -135,6 +128,43 @@ https://github.com/codesandbox/codesandbox-client/blob/389073613e06eee944231f4ae
     overflow: hidden;
 }
 
+.configurator-toc {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 24px;
+    width: 680px;
+    padding: 32px 64px 32px 40px;
+    border-radius: 16px;
+    background: #F6F8FE;
+
+    #toc {
+        margin-bottom: 0;
+    }
+}
+
+.configurator-toc #toc > ul > li::before {
+    content: '';
+    display: block;
+    background: var(--main-color);
+    width: 6px;
+    height: 6px;
+    border: 1px solid var(--main-color);
+    border-radius: 50%;
+}
+
+.configurator-toc #toc ul ul > li::before {
+    content: '';
+    display: block;
+    top: 12px;
+    background: transparent;
+    width: 6px;
+    height: 6px;
+    border: 1px solid var(--main-color);
+    border-radius: 50%;
+}
+
 .view__item:not(.active) .codesandbox__wrap iframe {
     position: absolute;
     left: -5000px;
diff --git a/assets/js/configurator/tabs.js b/assets/js/configurator/tabs.js
index 879999634..f42b7fb06 100644
--- a/assets/js/configurator/tabs.js
+++ b/assets/js/configurator/tabs.js
@@ -1,23 +1,5 @@
 $(document).ready(() => {
 
-    // Handle tab switches.
-    $(document).on('click tap', '.configurator__views-buttons', (e) => {
-        e.preventDefault();
-        const target = $(e.target);
-        setOffsetElements();
-
-        // Handle only clicks on non-active buttons.
-        if (target.hasClass('btn') && !target.hasClass('active')) {
-            // Activate clicked button.
-            target.parent().find('[data-view-button]').removeClass('active');
-            target.addClass('active');
-            // Activate tab content.
-            $('#view__wrap').find('[data-view-content]').removeClass('active');
-            const btnAttr = target.attr('data-view-button');
-            $(`[data-view-content = ${btnAttr}]`).addClass('active');
-        }
-    });
-
     $(document).on('click tap', '.directory-structure', (e) => {
         const structure = $('.directory-structure');
         const filesView = $('.files-view__wrap');
diff --git a/bin/configurator/static/_data/_common/configurator.yaml b/bin/configurator/static/_data/_common/configurator.yaml
index 2d41d6038..1a3a2f22d 100644
--- a/bin/configurator/static/_data/_common/configurator.yaml
+++ b/bin/configurator/static/_data/_common/configurator.yaml
@@ -211,3 +211,8 @@ tabs:
     title:
       en: "Run"
       ru: "Запуск"
+toc:
+  - name: "tableOfContent"
+    title:
+      en: "Content"
+      ru: "Содержание"
diff --git a/bin/configurator/templates/includes/tabs.html b/bin/configurator/templates/includes/tabs.html
index f05820b25..fac652b87 100644
--- a/bin/configurator/templates/includes/tabs.html
+++ b/bin/configurator/templates/includes/tabs.html
@@ -1,15 +1,9 @@
 
 <div class="configurator__views docs">
-    <div class="configurator__views-buttons">
-        {{- range $i, $tab := .Tabs }}
-        {% assign tab_info = site.data.common.configurator.tabs | find: "name", "{{ $tab.Name }}" %}
-        {% assign tab_title = tab_info.title[page.lang] | default: "{{ $tab.Name }}" %}
-        <a href="#" id="{{ $tab.Name }}" class="btn btn_o{{ if eq $i 0}} active{{ end }}" data-view-button="{{ $tab.Name }}">{{`{{tab_title}}`}}</a>
-        {{ end }}
-    </div>
     <div id="view__wrap">
         {{- range $i, $tab := .Tabs }}
-<div id="partial-{{ $tab.Name }}" class="view__item{{ if eq $i 0 }} active{{ end }}" data-view-content="{{ $tab.Name }}" markdown="1">
+        <h2>{{ $tab.Name }}</h2>
+<div id="partial-{{ $tab.Name }}" class="view__item" data-view-content="{{ $tab.Name }}" markdown="1">
 {% include {{ $tab.IncludePath }} {{ range $option := $.Options }}{{ $option.Name }}='{{ $option.Value }}' {{ end }} {{ range $k, $v := $tab.Params }}{{ $k }}='{{ $v }}' {{ end -}} %}
 </div>
         {{- end }}
diff --git a/bin/configurator/templates/pages/configurator.html b/bin/configurator/templates/pages/configurator.html
index ca112a693..1d708b391 100644
--- a/bin/configurator/templates/pages/configurator.html
+++ b/bin/configurator/templates/pages/configurator.html
@@ -34,6 +34,31 @@ <h1 class="docs__title">{{ .Title }}</h1>
         {{- end }}
     </div>
 
+    <div class="configurator-toc">
+        <div>Содержание</div>
+        <script>
+            $( document ).ready(function() {
+                // Handler for .ready() called.
+
+                $('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2, h3:not(.tabs__content>h3), h4' });
+
+                if ($('#toc').is(':empty')) { $('#toc').hide(); }
+
+                /* this offset helps account for the space taken up by the floating toolbar. */
+                $('#toc').on('click tap', 'a', function() {
+                    var target = $(this.getAttribute('href'))
+                        , scroll_target = target.offset().top;
+
+                    $(window).scrollTop(scroll_target - 110);
+                    return false
+                })
+
+            });
+        </script>
+
+        <div id="toc"></div>
+    </div>
+
 <div id="configurator-content" markdown="1">
 {{ if .PageTab }} {% include {{ .IncludePath }} %} {{ else }} {% include {{ .DefaultIncludePath }} %} {{ end }}
 </div>