Home Explore Help
Register Sign In
wangjunyun
/
scribe
mirror of https://github.com/knuckleswtf/scribe.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Add interactivity to sidebar

shalvah 2 years ago
parent
1317b99cc9
commit
21ba5cdd2d
2 changed files with 61 additions and 56 deletions
Split View Show Diff Stats
  1. 38 35
      resources/views/themes/elements/index.blade.php
  2. 23 21
      resources/views/themes/elements/sidebar.blade.php

+ 38 - 35
resources/views/themes/elements/index.blade.php
View File 

@@ -1,7 +1,8 @@
 
 @php
 
     use Knuckles\Scribe\Tools\WritingUtils as u;
 
 @endphp
 
-        <!doctype html>
 
+
 
+<!doctype html>
 
 <html lang="en">
 
 <head>
 
     <meta charset="utf-8">
 
@@ -26,22 +27,6 @@
 
         }
 
     </style>
 
 
-    @if($metadata['example_languages'])
 
-        <script>
 
-            function switchExampleLanguage(lang) {
 
-                document.querySelectorAll(`.example-request`).forEach(el => el.style.display = 'none');
 
-                document.querySelectorAll(`.example-request-${lang}`).forEach(el => el.style.display = 'initial');
 
-                document.querySelectorAll(`.example-request-lang-toggle`).forEach(el => el.value = lang);
 
-            }
 
-        </script>
 
-    @endif
 
-    <script>
 
-        function switchExampleResponse(endpointId, index) {
 
-            document.querySelectorAll(`.example-response-${endpointId}`).forEach(el => el.style.display = 'none');
 
-            document.querySelectorAll(`.example-response-${endpointId}-${index}`).forEach(el => el.style.display = 'initial');
 
-            document.querySelectorAll(`.example-response-${endpointId}-toggle`).forEach(el => el.value = index);
 
-        }
 
-    </script>
 
 
     @if($tryItOut['enabled'] ?? true)
 
         <script>
 
@@ -58,6 +43,40 @@
 
 
 <body data-languages="{{ json_encode($metadata['example_languages'] ?? []) }}">
 
 
+@if($metadata['example_languages'])
 
+    <script>
 
+        function switchExampleLanguage(lang) {
 
+            document.querySelectorAll(`.example-request`).forEach(el => el.style.display = 'none');
 
+            document.querySelectorAll(`.example-request-${lang}`).forEach(el => el.style.display = 'initial');
 
+            document.querySelectorAll(`.example-request-lang-toggle`).forEach(el => el.value = lang);
 
+        }
 
+    </script>
 
+@endif
 
+
 
+<script>
 
+    function switchExampleResponse(endpointId, index) {
 
+        document.querySelectorAll(`.example-response-${endpointId}`).forEach(el => el.style.display = 'none');
 
+        document.querySelectorAll(`.example-response-${endpointId}-${index}`).forEach(el => el.style.display = 'initial');
 
+        document.querySelectorAll(`.example-response-${endpointId}-toggle`).forEach(el => el.value = index);
 
+    }
 
+
 
+    function toggleSidebarChildren(elem, heading) {
 
+        let children = document.querySelectorAll(`.children-${heading}`)
 
+        if (!children.length) return;
 
+
 
+        let oldState = children[0].style.display
 
+        if (oldState == 'none') {
 
+            children.forEach(el => el.style.removeProperty('display'));
 
+            elem.querySelector('.expand-chevron').style.display = 'none'
 
+            elem.querySelector('.expanded-chevron').style.removeProperty('display')
 
+        } else {
 
+            children.forEach(el => el.style.display = 'none');
 
+            elem.querySelector('.expand-chevron').style.removeProperty('display')
 
+            elem.querySelector('.expanded-chevron').style.display = 'none'
 
+        }
 
+
 
+    }
 
+</script>
 
 
 <div style="height: 100%;">
 
     <div data-overlay-container="true" class="" style="height: 100%;">
 
@@ -80,6 +99,7 @@
 
                                     <div>
 
                                         <button type="button" aria-label="Download" aria-haspopup="true"
 
                                                 aria-expanded="false"
 
+                                                onclick="let oldState = window['download-menu'].style.display; window['download-menu'].style.display= oldState == 'none' ? 'initial' : 'none';"
 
                                                 class="sl-button sl-h-sm sl-text-base sl-font-medium sl-ml-2 sl-px-1.5 sl-bg-canvas hover:sl-bg-canvas-50 active:sl-bg-canvas-100 sl-rounded sl-border-button sl-border disabled:sl-opacity-60">
 
                                             Download
 
                                             <span class="sl-text-xs sl--mr-0.5 sl-ml-1">
 
@@ -93,10 +113,7 @@
 
                                             </span>
 
                                         </button>
 
 
-                                        <div class="sl-bg-transparent"><span hidden=""></span>
 
-                                            <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;">
 
-                                                <button tabindex="-1" aria-label="Dismiss"></button>
 
-                                            </div>
 
+                                        <div class="sl-bg-transparent" id="download-menu" style="display: none;">
 
                                             <div data-ismodal="false" tabindex="-1"
 
                                                  data-testid="popover" data-ispopover="true"
 
                                                  class="sl-popover sl-inline-flex" role="presentation"
 
@@ -126,21 +143,7 @@
 
                                                         </div>
 
                                                     @endif
 
                                                 </div>
 
-                                                <div class="sl-popover__tip sl-absolute sl-text-canvas-pure"
 
-                                                     style="top: -10px; font-size: 16px; line-height: 0; margin-left: -5px; left: 117.888px;">
 
-                                                    <svg aria-hidden="true" focusable="false" data-prefix="fas"
 
-                                                         data-icon="caret-up" class="svg-inline--fa fa-caret-up sl-icon"
 
-                                                         role="img" xmlns="http://www.w3.org/2000/svg"
 
-                                                         viewBox="0 0 320 512">
 
-                                                        <path fill="currentColor"
 
-                                                              d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"></path>
 
-                                                    </svg>
 
-                                                </div>
 
-                                            </div>
 
-                                            <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;">
 
-                                                <button tabindex="-1" aria-label="Dismiss"></button>
 
                                             </div>
 
-                                            <span hidden=""></span>
 
                                         </div>
 
                                     </div>
 
                                 @endif

+ 23 - 21
resources/views/themes/elements/sidebar.blade.php
View File 

@@ -1,5 +1,5 @@
 
 <div class="sl-flex sl-overflow-y-auto sl-flex-col sl-sticky sl-inset-y-0 sl-pt-8 sl-bg-canvas-100 sl-border-r"
 
-     style="width: calc((100% - 1800px) / 2 + 300px); padding-left: calc((100% - 1800px) / 2); min-width: 300px;">
 
+     style="width: calc((100% - 1800px) / 2 + 300px); padding-left: calc((100% - 1800px) / 2); min-width: 300px; max-height: 100vh">
 
     <div class="sl-flex sl-items-center sl-mb-5 sl-ml-4">
 
         @if($metadata['logo'] != false)
 
             <div class="sl-inline sl-overflow-x-hidden sl-overflow-y-hidden sl-mr-3 sl-rounded-lg"
 
@@ -18,14 +18,13 @@
 
                 @foreach($headings as $h1)
 
                     <div title="{!! $h1['name'] !!}"
 
                          class="sl-flex sl-items-center sl-h-md sl-pr-4 sl-pl-4 sl-bg-canvas-100 hover:sl-bg-canvas-200 sl-cursor-pointer sl-select-none">
 
-                        <div class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5">
 
-                            <a href="#{!! $h1['slug'] !!}">{!! $h1['name'] !!}</a>
 
-                        </div>
 
+                        <a href="#{!! $h1['slug'] !!}" class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5 sl-p-0" onclick="toggleSidebarChildren(event.target.parentElement, '{{ $h1['slug'] }}')">{!! $h1['name'] !!}</a>
 
                         @if(count($h1['subheadings']) > 0)
 
                             <div class="sl-flex sl-items-center sl-text-xs">
 
                                 <div class="sl-flex sl-items-center">
 
-                                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down"
 
-                                         class="svg-inline--fa fa-chevron-down fa-fw sl-icon sl-text-muted"
 
+                                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="expand-chevron svg-inline--fa fa-chevron-right fa-fw sl-icon sl-text-muted" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path></svg>
 
+                                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" style="display: none;"
 
+                                         class="expanded-chevron svg-inline--fa fa-chevron-down fa-fw sl-icon sl-text-muted"
 
                                          xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
 
                                         <path fill="currentColor"
 
                                               d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"></path>
 
@@ -36,21 +35,22 @@
 
                     </div>
 
 
                     @foreach($h1['subheadings'] as $h2)
 
-                        <div class="sl-flex sl-items-center sl-h-md sl-pr-4 sl-pl-8 sl-bg-canvas-100 hover:sl-bg-canvas-200 sl-cursor-pointer sl-select-none">
 
-                            <div class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5">
 
-                                <div id="sl-toc-{!! $h2['slug'] !!}" title="{!! $h2['slug'] !!}">
 
-
 
-                                    <a class="ElementsTableOfContentsItem sl-block sl-no-underline" href="#{!! $h2['slug'] !!}">
 
+                        <div class="children-{{ $h1['slug'] }} sl-flex sl-items-center sl-h-md sl-pr-4 sl-pl-8 sl-bg-canvas-100 hover:sl-bg-canvas-200 sl-cursor-pointer sl-select-none"
 
+                                style="display: none;"
 
+                        >
 
+                            <div class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5 sl-p-0" id="sl-toc-{!! $h2['slug'] !!}" title="{!! $h2['slug'] !!}">
 
+                                    <a class="ElementsTableOfContentsItem sl-block sl-no-underline" href="#{!! $h2['slug'] !!}" onclick="toggleSidebarChildren(event.target.parentElement.parentElement, '{{ $h2['slug'] }}')">
 
                                     {!! $h2['name'] !!}
 
                                     </a>
 
-                                </div>
 
-                                </div>
 
+                            </div>
 
                             @if(count($h2['subheadings']) > 0)
 
                                 <div class="sl-flex sl-items-center sl-text-xs">
 
                                     <div class="sl-flex sl-items-center">
 
+                                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="expand-chevron svg-inline--fa fa-chevron-right fa-fw sl-icon sl-text-muted" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path></svg>
 
                                         <svg aria-hidden="true" focusable="false" data-prefix="fas"
 
                                              data-icon="chevron-down"
 
-                                             class="svg-inline--fa fa-chevron-down fa-fw sl-icon sl-text-muted"
 
+                                             class="expanded-chevron svg-inline--fa fa-chevron-down fa-fw sl-icon sl-text-muted"
 
+                                             style="display: none;"
 
                                              xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
 
                                             <path fill="currentColor"
 
                                                   d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"></path>
 
@@ -61,7 +61,9 @@
 
                         </div>
 
 
                         @foreach($h2['subheadings'] as $h3)
 
-                            <a class="ElementsTableOfContentsItem sl-block sl-no-underline" href="#{!! $h3['slug'] !!}">
 
+                            <a class="children-{{ $h2['slug'] }} ElementsTableOfContentsItem sl-block sl-no-underline"
 
+                               href="#{!! $h3['slug'] !!}"
 
+                               style="display: none;">
 
                                 <div id="sl-toc-{!! $h3['slug'] !!}" title="{!! $h3['slug'] !!}"
 
                                      class="sl-flex sl-items-center sl-h-md sl-pr-4 sl-pl-12 sl-bg-canvas-100 hover:sl-bg-canvas-200 sl-cursor-pointer sl-select-none">
 
                                     <div class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5">{!! $h3['name'] !!}</div>
 
@@ -72,13 +74,13 @@
 
                 @endforeach
 
             </div>
 
 
-            <div class="sl-flex sl-items-center sl-px-4 sl-py-3 sl-border-t">
 
-                {{ $metadata['last_updated'] }}
 
-            </div>
 
+        </div>
 
+        <div class="sl-flex sl-items-center sl-px-4 sl-py-3 sl-border-t">
 
+            {{ $metadata['last_updated'] }}
 
+        </div>
 
 
-            <div class="sl-flex sl-items-center sl-px-4 sl-py-3 sl-border-t">
 
-                <a href="http://github.com/knuckleswtf/scribe">Documentation powered by Scribe ✍</a>
 
-            </div>
 
+        <div class="sl-flex sl-items-center sl-px-4 sl-py-3 sl-border-t">
 
+            <a href="http://github.com/knuckleswtf/scribe">Documentation powered by Scribe ✍</a>
 
         </div>
 
     </div>
 
 </div>