Revert "Refactor sidebar and external JS to improve usability and performance. Closes #351"

resources/css/theme-default.style.css

@@ -475,7 +475,7 @@ html {
     line-height: 1
 }
 
-.tocify-wrapper a {
+.tocify-wrapper .search-results a {
     color: #fff;
     text-decoration: none
 }
@@ -511,8 +511,7 @@ html {
 .tocify-wrapper .tocify-focus {
     box-shadow: 0 1px 0 #000;
     background-color: #2467af;
-    color: #fff;
-    font-weight: bold;
+    color: #fff
 }
 
 .tocify-wrapper .tocify-subheader {
@@ -522,11 +521,6 @@ html {
     background: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 8px), linear-gradient(0deg, rgba(0, 0, 0, .2), transparent 8px), linear-gradient(180deg, #000, transparent 1.5px), linear-gradient(0deg, #939393, hsla(0, 0%, 58%, 0) 1.5px), #262626
 }
 
-.tocify-wrapper .jets-searching .tocify-subheader,
-.tocify-wrapper .tocify-subheader.visible {
-    display: block;
-}
-
 .tocify-wrapper .tocify-subheader .tocify-item>a {
     padding-left: 25px;
     font-size: 12px
@@ -627,26 +621,23 @@ html {
     font-weight: 700
 }
 
-.lang-selector button {
+.lang-selector a {
     display: block;
     float: left;
     color: #fff;
     text-decoration: none;
     padding: 0 10px;
     line-height: 30px;
-    outline: 0;
-    background: transparent;
-    border: none;
+    outline: 0
 }
 
-.lang-selector button:active,
-.lang-selector button:hover,
-.lang-selector button:focus {
+.lang-selector a:active,
+.lang-selector a:focus {
     background-color: #111;
     color: #fff
 }
 
-.lang-selector button.active {
+.lang-selector a.active {
     background-color: #393939;
     color: #fff
 }
@@ -1058,4 +1049,4 @@ html {
         width: 95%;
     }
 
-}
+}

resources/views/themes/default/endpoint.blade.php

@@ -16,9 +16,7 @@
 
 @foreach($metadata['example_languages'] as $language)
 
-<div class="{{ $language }}-example">
-    @include("scribe::partials.example-requests.$language")
-</div>
+@include("scribe::partials.example-requests.$language")
 
 @endforeach
 </span>
@@ -80,7 +78,7 @@
             <button type="button"
                     style="background-color: #c97a7e; padding: 5px 10px; border-radius: 5px; border-width: thin;"
                     id="btn-canceltryout-{{ $endpoint->endpointId() }}"
-                    onclick="cancelTryOut('{{ $endpoint->endpointId() }}');" hidden>Cancel 🛑
+                    onclick="cancelTryOut('{{ $endpoint->endpointId() }}');" hidden>Cancel
             </button>&nbsp;&nbsp;
             <button type="submit"
                     style="background-color: #6ac174; padding: 5px 10px; border-radius: 5px; border-width: thin;"

resources/views/themes/default/index.blade.php

@@ -13,25 +13,15 @@
 
     <link rel="stylesheet" href="{!! $assetPathPrefix !!}css/theme-default.style.css" media="screen">
     <link rel="stylesheet" href="{!! $assetPathPrefix !!}css/theme-default.print.css" media="print">
-
-    <script src="//cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
+    <script src="{{ u::getVersionedAsset($assetPathPrefix.'js/theme-default.js') }}"></script>
 
     <link rel="stylesheet"
           href="//unpkg.com/@highlightjs/cdn-assets@10.7.2/styles/obsidian.min.css">
     <script src="//unpkg.com/@highlightjs/cdn-assets@10.7.2/highlight.min.js"></script>
-
-    <script src="//cdnjs.cloudflare.com/ajax/libs/jets/0.14.1/jets.min.js"></script>
-
-@if(isset($metadata['example_languages']))
-    <style id="language-style">
-        /* starts out as display none and is replaced with js later  */
-        @foreach($metadata['example_languages'] as $lang)
-            body .content .{{ $lang }}-example code { display: none; }
-        @endforeach
-    </style>
-@endif
+    <script>hljs.highlightAll();</script>
 
 @if($tryItOut['enabled'] ?? true)
+    <script src="//cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
     <script>
         var baseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
         var useCsrf = Boolean({{ $tryItOut['use_csrf'] ?? null }});
@@ -40,14 +30,45 @@
     <script src="{{ u::getVersionedAsset($assetPathPrefix.'js/tryitout.js') }}"></script>
 @endif
 
-    <script src="{{ u::getVersionedAsset($assetPathPrefix.'js/theme-default.js') }}"></script>
-
 </head>
 
 <body data-languages="{{ json_encode($metadata['example_languages'] ?? []) }}">
+<a href="#" id="nav-button">
+      <span>
+        MENU
+        <img src="{!! $assetPathPrefix !!}images/navbar.png" alt="navbar-image" />
+      </span>
+</a>
+<div class="tocify-wrapper">
+    @if($metadata['logo'] != false)
+    <img src="{{ $metadata['logo'] }}" alt="logo" class="logo" style="padding-top: 10px;" width="230px"/>
+    @endif
+    @isset($metadata['example_languages'])
+        <div class="lang-selector">
+            @foreach($metadata['example_languages'] as $lang)
+                <a href="#" data-language-name="{{ $lang }}">{{ $lang }}</a>
+            @endforeach
+        </div>
+    @endisset
+    <div class="search">
+        <input type="text" class="search" id="input-search" placeholder="Search">
+    </div>
+    <ul class="search-results"></ul>
 
-@include("scribe::themes.default.sidebar")
+    <ul id="toc">
+    </ul>
 
+    @if(isset($metadata['links']))
+        <ul class="toc-footer" id="toc-footer">
+            @foreach($metadata['links'] as $link)
+                <li>{!! $link !!}</li>
+            @endforeach
+        </ul>
+    @endif
+        <ul class="toc-footer" id="last-updated">
+            <li>Last updated: {{ $metadata['last_updated'] }}</li>
+        </ul>
+</div>
 <div class="page-wrapper">
     <div class="dark-box"></div>
     <div class="content">
@@ -63,11 +84,19 @@
         @if(isset($metadata['example_languages']))
             <div class="lang-selector">
                 @foreach($metadata['example_languages'] as $lang)
-                    <button type="button" class="lang-button" data-language-name="{{$lang}}">{{$lang}}</button>
+                    <a href="#" data-language-name="{{$lang}}">{{$lang}}</a>
                 @endforeach
             </div>
         @endif
     </div>
 </div>
+@isset($metadata['example_languages'])
+<script>
+    $(function () {
+        var exampleLanguages = @json($metadata['example_languages']);
+        setupLanguages(exampleLanguages);
+    });
+</script>
+@endisset
 </body>
-</html>
+</html>

resources/views/themes/default/sidebar.blade.php

@@ -1,55 +0,0 @@
-<a href="#" id="nav-button">
-    <span>
-        MENU
-        <img src="{!! $assetPathPrefix !!}images/navbar.png" alt="navbar-image" />
-    </span>
-</a>
-<div class="tocify-wrapper">
-    @if($metadata['logo'] != false)
-        <img src="{{ $metadata['logo'] }}" alt="logo" class="logo" style="padding-top: 10px;" width="230px"/>
-    @endif
-
-    @isset($metadata['example_languages'])
-        <div class="lang-selector">
-            @foreach($metadata['example_languages'] as $lang)
-                <a href="#" data-language-name="{{ $lang }}">{{ $lang }}</a>
-            @endforeach
-        </div>
-    @endisset
-
-    <div class="search">
-        <input type="text" class="search" id="input-search" placeholder="Search">
-    </div>
-
-    <div id="toc">
-        @foreach($groupedEndpoints as $group)
-            <ul id="tocify-header-{{ $loop->index }}" class="tocify-header">
-                <li class="tocify-item level-1" data-unique="{!! Str::slug($group['name']) !!}">
-                    <a href="#{!! Str::slug($group['name']) !!}">{!! $group['name'] !!}</a>
-                </li>
-                @if (count($group['endpoints']) > 0)
-                    <ul id="tocify-subheader-{!! Str::slug($group['name']) !!}" class="tocify-subheader">
-                @endif
-                @foreach($group['endpoints'] as $endpoint)
-                    <li class="tocify-item level-2" data-unique="{!! Str::slug($group['name']) !!}-{!! $endpoint->endpointId() !!}">
-                        <a href="#{!! Str::slug($group['name']) !!}-{!! $endpoint->endpointId() !!}">{{ $endpoint->metadata->title ?: ($endpoint->httpMethods[0]." ".$endpoint->uri)}}</a>
-                    </li>
-                @endforeach
-                @if (count($group['endpoints']) > 0)
-                    </ul>
-                @endif
-            </ul>
-        @endforeach
-    </div>
-
-    @if(isset($metadata['links']))
-        <ul class="toc-footer" id="toc-footer">
-            @foreach($metadata['links'] as $link)
-                <li>{!! $link !!}</li>
-            @endforeach
-        </ul>
-    @endif
-    <ul class="toc-footer" id="last-updated">
-        <li>Last updated: {{ $metadata['last_updated'] }}</li>
-    </ul>
-</div>