Merge pull request #354 from james2doyle/feature/sidebar

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 .search-results a {
+.tocify-wrapper a {
     color: #fff;
     text-decoration: none
 }
@@ -511,7 +511,8 @@ html {
 .tocify-wrapper .tocify-focus {
     box-shadow: 0 1px 0 #000;
     background-color: #2467af;
-    color: #fff
+    color: #fff;
+    font-weight: bold;
 }
 
 .tocify-wrapper .tocify-subheader {
@@ -521,6 +522,11 @@ 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
@@ -621,23 +627,26 @@ html {
     font-weight: 700
 }
 
-.lang-selector a {
+.lang-selector button {
     display: block;
     float: left;
     color: #fff;
     text-decoration: none;
     padding: 0 10px;
     line-height: 30px;
-    outline: 0
+    outline: 0;
+    background: transparent;
+    border: none;
 }
 
-.lang-selector a:active,
-.lang-selector a:focus {
+.lang-selector button:active,
+.lang-selector button:hover,
+.lang-selector button:focus {
     background-color: #111;
     color: #fff
 }
 
-.lang-selector a.active {
+.lang-selector button.active {
     background-color: #393939;
     color: #fff
 }
@@ -1049,4 +1058,4 @@ html {
         width: 95%;
     }
 
-}
+}

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

@@ -16,7 +16,9 @@
 
 @foreach($metadata['example_languages'] as $language)
 
-@include("scribe::partials.example-requests.$language")
+<div class="{{ $language }}-example">
+    @include("scribe::partials.example-requests.$language")
+</div>
 
 @endforeach
 </span>
@@ -78,7 +80,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,15 +13,25 @@
 
     <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="{{ u::getVersionedAsset($assetPathPrefix.'js/theme-default.js') }}"></script>
+
+    <script src="//cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.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>hljs.highlightAll();</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
 
 @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 }});
@@ -30,45 +40,14 @@
     <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>
 
-    <ul id="toc">
-    </ul>
+@include("scribe::themes.default.sidebar")
 
-    @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">
@@ -84,19 +63,11 @@
         @if(isset($metadata['example_languages']))
             <div class="lang-selector">
                 @foreach($metadata['example_languages'] as $lang)
-                    <a href="#" data-language-name="{{$lang}}">{{$lang}}</a>
+                    <button type="button" class="lang-button" data-language-name="{{$lang}}">{{$lang}}</button>
                 @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

@@ -0,0 +1,55 @@
+<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>