new feature: added ability to programmatically set the API server

Author: mrin9

src/rapidoc.js

@@ -27,6 +27,7 @@ import { advancedSearch, pathIsInSearch, componentIsInSearch, rapidocApiKey, sle
 import ProcessSpec from '~/utils/spec-parser';
 import mainBodyTemplate from '~/templates/main-body-template';
 import { applyApiKey, onClearAllApiKeys } from '~/templates/security-scheme-template';
+import { setApiServer } from '~/templates/server-template';
 
 export default class RapiDoc extends LitElement {
   constructor() {
@@ -923,6 +924,12 @@ export default class RapiDoc extends LitElement {
     return onClearAllApiKeys.call(this);
   }
 
+  // Public Method
+  setApiServer(apiServerUrl) {
+    // return apiServerUrl;
+    return setApiServer.call(this, apiServerUrl);
+  }
+
   // Event handler for Advanced Search text-inputs and checkboxes
   onAdvancedSearch(ev, delay) {
     const eventTargetEl = ev.target;

src/styles/font-styles.js

@@ -84,9 +84,11 @@ export default css`
   }
 
   .m-markdown p,
-  .m-markdown span,
-  .m-markdown li {
+  .m-markdown span {
     font-size: var(--font-size-regular);
+    line-height:calc(var(--font-size-regular) + 8px);
+  }
+  .m-markdown li{
     line-height:calc(var(--font-size-regular) + 12px);
   }
   

src/styles/nav-styles.js

@@ -15,6 +15,9 @@ export default css`
   flex-wrap:nowrap;
   word-break:break-word;
 }
+::slotted(*){
+  padding:16px 30px 0 16px;
+}
 .nav-scroll {
   overflow-x: hidden;
   overflow-y: auto;
@@ -73,7 +76,7 @@ export default css`
   color: var(--nav-accent-color);
   border-left:4px solid transparent;
   font-weight:bold;
-  padding: 15px calc(var(--scroll-bar-width) + 5px) 15px 10px;
+  padding: 15px 15px 15px 10px;
   text-transform: capitalize;
 }
 
@@ -110,9 +113,7 @@ export default css`
   font-size: var(--font-size-small);
   color: var(--nav-text-color);
   padding: var(--nav-item-padding);
-  filter:opacity(0.5);
   font-weight:bold;
-  border-bottom: 1px solid var(--nav-text-color);
 }
 .nav-bar-section.operations {
   cursor:pointer;

src/templates/navbar-template.js

@@ -40,17 +40,13 @@ export default function navbarTemplate() {
   if (!this.resolvedSpec || this.resolvedSpec.specLoadError) {
     return html`
       <nav class='nav-bar' part="section-navbar">
-        <div style="padding:16px 30px 0 16px;">
-          <slot name="nav-logo" class="logo"></slot>
-        </div>
+        <slot name="nav-logo" class="logo"></slot>
       </nav>
     `;
   }
   return html`
   <nav class='nav-bar ${this.renderStyle}' part="section-navbar">
-    <div style="padding:16px 30px 0 16px;">
-      <slot name="nav-logo" class="logo"></slot>
-    </div>
+    <slot name="nav-logo" class="logo"></slot>
     ${(this.allowSearch === 'false' && this.allowAdvancedSearch === 'false')
       ? ''
       : html`

src/templates/server-template.js

@@ -2,18 +2,21 @@ import { html } from 'lit-element';
 import marked from 'marked';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 
-function onApiServerChange(e, server) {
-  if (e && e.target.checked) {
-    this.selectedServer = server;
-    this.requestUpdate();
-    this.dispatchEvent(new CustomEvent('api-server-change', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        selectedServer: server,
-      },
-    }));
+export function setApiServer(serverUrl) {
+  const serverObj = this.resolvedSpec?.servers.find((s) => s.url === serverUrl);
+  if (!serverObj) {
+    return false;
   }
+  this.selectedServer = serverObj;
+  this.requestUpdate();
+  this.dispatchEvent(new CustomEvent('api-server-change', {
+    bubbles: true,
+    composed: true,
+    detail: {
+      selectedServer: serverObj,
+    },
+  }));
+  return true;
 }
 
 function onApiServerVarChange(e, serverObj) {
@@ -93,7 +96,7 @@ export default function serverTemplate() {
               name = 'api_server'
               id = 'srvr-opt-${i}'
               value = '${server.url}'
-              @change = ${(e) => { onApiServerChange.call(this, e, server); }}
+              @change = ${() => { setApiServer.call(this, server.url); }}
               .checked = '${this.selectedServer.url === server.url}'
               style = 'margin:4px 0; cursor:pointer'
             />

src/utils/theme.js

@@ -200,10 +200,10 @@ export default function setTheme(baseTheme, theme = {}) {
     --font-regular: ${this.regularFont || '"Open Sans", Avenir, "Segoe UI", Arial, sans-serif'};
     --scroll-bar-width: 8px;
     --nav-item-padding: ${this.navItemSpacing === 'relaxed'
-    ? '10px calc(var(--scroll-bar-width, 8px) + 5px) 10px 10px'
+    ? '10px 16px 10px 10px'
     : (this.navItemSpacing === 'compact'
-      ? '5px calc(var(--scroll-bar-width, 8px) + 5px) 5px 10px'
-      : '7px calc(var(--scroll-bar-width, 8px) + 5px) 7px 10px')};
+      ? '5px 16px 5px 10px'
+      : '7px 16px 7px 10px')};
     
     --resp-area-height: ${this.responseAreaHeight};
     --font-size-small:  ${this.fontSize === 'default' ? '12px' : (this.fontSize === 'large' ? '13px' : '14px')};