openapi-explorer 0.8.294 → 0.8.297

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "0.8.294",
+  "version": "0.8.297",
   "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
   "author": "Rhosys Developers <developers@rhosys.ch>",
   "repository": {

package/src/openapi-explorer.js

@@ -515,7 +515,7 @@ export default class OpenApiExplorer extends LitElement {
         return;
       }
       if (!this.serverUrl) {
-        this.serverUrl = spec.servers[0].url;
+        this.serverUrl = spec.servers[0].computedUrl || spec.servers[0].url;
       }
       this.afterSpecParsedAndValidated(spec);
     } catch (err) {
@@ -558,62 +558,45 @@ export default class OpenApiExplorer extends LitElement {
     this.resolvedSpec = spec;
     this.selectedServer = this.resolvedSpec.servers.find((s) => s.url === this.serverUrl || !this.serverUrl);
     this.dispatchEvent(new CustomEvent('spec-loaded', { detail: spec }));
+    // Wait for 10 milliseconds to account for any changes to the spec via spec-loaded
+    await sleep(10);
     this.requestUpdate();
 
     // Initiate IntersectionObserver and put it at the end of event loop, to allow loading all the child elements (must for larger specs)
     this.intersectionObserver.disconnect();
-    if (this.renderStyle === 'read') {
-      await sleep(100);
-      this.observeExpandedContent(); // This will auto-highlight the selected nav-item in read-mode
+
+    if (this.renderStyle === 'focused') {
+      const defaultElementId = this.showInfo ? 'overview' : this.resolvedSpec.tags && this.resolvedSpec.tags[0] && this.resolvedSpec.tags[0].paths[0];
+      this.scrollTo(this.explorerLocation || defaultElementId);
     }
 
-    // On first time Spec load, try to navigate to location hash if provided
-    const locationHash = this.explorerLocation;
-    if (locationHash) {
-      if (this.renderStyle === 'view') {
-        this.expandAndGotoOperation(locationHash, true, true);
-      } else if (this.renderStyle === 'focused') {
-        this.scrollTo(locationHash);
-      }
-    } else if (this.renderStyle === 'focused') {
-      const defaultElementId = this.showInfo ? 'overview' : this.resolvedSpec.tags[0] && this.resolvedSpec.tags[0].paths[0];
-      this.scrollTo(defaultElementId);
+    if (this.renderStyle === 'view' && this.explorerLocation) {
+      this.expandAndGotoOperation(this.explorerLocation);
     }
   }
 
-  expandAndGotoOperation(elementId, scrollToElement = true) {
+  expandAndGotoOperation(elementId) {
     // Expand full operation and tag
-    let isExpandingNeeded = true;
-    const tmpElementId = elementId.indexOf('#') === -1 ? elementId : elementId.substring(1);
-    if (tmpElementId.startsWith('overview') || tmpElementId === 'servers' || tmpElementId === 'auth') {
-      isExpandingNeeded = false;
-    } else {
-      for (let i = 0; i < this.resolvedSpec.tags && this.resolvedSpec.tags.length; i++) {
-        const tag = this.resolvedSpec.tags[i];
-        const path = tag.paths && tag.paths.find((p) => p.elementId === elementId);
-        if (path) {
-          if (path.expanded && tag.expanded) {
-            isExpandingNeeded = false;
-          } else {
-            path.expanded = true;
-            tag.expanded = true;
-          }
-        }
-      }
+    let isExpandingNeeded = false;
+    
+    const tag = this.resolvedSpec.tags.find(t => t.paths && t.paths.find(p => p.elementId === elementId));
+    const path = tag && tag.paths && tag.paths.find((p) => p.elementId === elementId);
+    if (path && (!path.expanded || !tag.expanded)) {
+      isExpandingNeeded = true;
+      path.expanded = true;
+      tag.expanded = true;
+      this.requestUpdate();
     }
-    if (scrollToElement) {
-      // requestUpdate() and delay required, else we cant find element
-      if (isExpandingNeeded) {
-        this.requestUpdate();
+
+    // requestUpdate() and delay required, else we cant find element because it won't exist immediately
+    const tmpElementId = elementId.indexOf('#') === -1 ? elementId : elementId.substring(1);
+    window.setTimeout(() => {
+      const gotoEl = this.shadowRoot.getElementById(tmpElementId);
+      if (gotoEl) {
+        gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });
+        replaceState(tmpElementId);
       }
-      window.setTimeout(() => {
-        const gotoEl = this.shadowRoot.getElementById(tmpElementId);
-        if (gotoEl) {
-          gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });
-          replaceState(tmpElementId);
-        }
-      }, isExpandingNeeded ? 150 : 0);
-    }
+    }, isExpandingNeeded ? 150 : 0);
   }
 
   isValidTopId(id) {
@@ -696,28 +679,26 @@ export default class OpenApiExplorer extends LitElement {
       repeatedElementIndex = assignedNodes && [].findIndex.call(assignedNodes, (slot) => slot === event.target);
     }
     this.isIntersectionObserverActive = false;
-    this.scrollTo(navEl.dataset.contentId, true, scrollNavItemToView, repeatedElementIndex);
+    this.scrollTo(navEl.dataset.contentId, scrollNavItemToView, repeatedElementIndex);
     setTimeout(() => {
       this.isIntersectionObserverActive = true;
     }, 300);
   }
 
   // Public Method (scrolls to a given path and highlights the left-nav selection)
-  async scrollTo(elementId, expandPath = true, scrollNavItemToView = true, repeatedElementIndex) {
+  async scrollTo(elementId, scrollNavItemToView = true, repeatedElementIndex) {
     if (!this.resolvedSpec) {
       return;
     }
 
     if (this.renderStyle === 'view') {
-      this.expandAndGotoOperation(elementId, expandPath, true);
+      this.expandAndGotoOperation(elementId);
       return;
     }
 
-    if (this.renderStyle === 'focused') {
-      // explorerLocation will get validated in the focused-endpoint-template
-      this.explorerLocation = elementId;
-      await sleep(0);
-    }
+    // explorerLocation will get validated in the focused-endpoint-template
+    this.explorerLocation = elementId;
+    await sleep(0);
 
     const contentEl = this.shadowRoot.getElementById(elementId);
     if (!contentEl) {
@@ -725,22 +706,20 @@ export default class OpenApiExplorer extends LitElement {
     }
 
     // For focused APIs, always scroll to the top of the component
-    if (this.renderStyle === 'focused' && !elementId.match('cmp--')) {
+    if (!elementId.match('cmp--')) {
       this.shadowRoot.getElementById('operations-root').scrollIntoView({ behavior: 'auto', block: 'start' });
     } else {
       contentEl.scrollIntoView({ behavior: 'auto', block: 'start' });
     }
 
     // for focused style it is important to reset request-body-selection and response selection which maintains the state for in case of multiple req-body or multiple response mime-type
-    if (this.renderStyle === 'focused') {
-      const requestEl = this.shadowRoot.querySelector('api-request');
-      if (requestEl) {
-        requestEl.resetRequestBodySelection();
-      }
-      const responseEl = this.shadowRoot.querySelector('api-response');
-      if (responseEl) {
-        responseEl.resetSelection();
-      }
+    const requestEl = this.shadowRoot.querySelector('api-request');
+    if (requestEl) {
+      requestEl.resetRequestBodySelection();
+    }
+    const responseEl = this.shadowRoot.querySelector('api-response');
+    if (responseEl) {
+      responseEl.resetSelection();
     }
 
     // Update Location Hash
@@ -772,7 +751,7 @@ export default class OpenApiExplorer extends LitElement {
       node.classList.remove('active');
     });
     newNavEl.classList.add('active'); // must add the class after scrolling
-    // this.requestUpdate();
+    this.requestUpdate();
   }
 
   // Event handler for Advanced Search text-inputs and checkboxes

package/src/styles/nav-styles.js

@@ -68,8 +68,7 @@ export default css`
   color: var(--secondary-color);
   border-left:4px solid transparent;
   font-weight:bold;
-  padding: 15px 15px 15px 10px;
-  text-transform: capitalize;
+  padding: 15px 15px 15px 10px; 
 }
 
 .nav-bar-components,

package/src/templates/endpoint-template.js

@@ -14,7 +14,7 @@ function toggleExpand(path) {
     replaceState(null);
   } else {
     path.expanded = true; // Expand
-    if (path.elementId === getCurrentElement()) {
+    if (path.elementId !== getCurrentElement()) {
       replaceState(path.elementId);
     }
   }

package/src/templates/focused-endpoint-template.js

@@ -6,7 +6,6 @@ import componentsTemplate from './components-template';
 import overviewTemplate from './overview-template';
 import serverTemplate from './server-template';
 import securitySchemeTemplate from './security-scheme-template';
-import { expandCollapseNavBarTag } from './navbar-template';
 
 function wrapFocusedTemplate(templateToWrap) {
   return html`
@@ -71,9 +70,6 @@ export default function focusedEndpointTemplate() {
       }
     }
     if (selectedPathObj) {
-      // In focused mode we must expand the nav-bar tag element if it is collapsed
-      const newNavEl = this.shadowRoot.getElementById(`link-${focusElId}`);
-      expandCollapseNavBarTag(newNavEl, 'expand');
       focusedTemplate = wrapFocusedTemplate.call(this, expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj.name));
     } else {
       // if explorerLocation is not found then show the default content (overview or first-path)

package/src/templates/responsiveViewMainBodyTemplate.js

@@ -1,7 +1,6 @@
 import { html } from 'lit-element';
 
 // Templates
-import expandedEndpointTemplate from './expanded-endpoint-template';
 import focusedEndpointTemplate from './focused-endpoint-template';
 import overviewTemplate from './overview-template';
 import endpointTemplate from './endpoint-template';
@@ -61,11 +60,7 @@ export default function responsiveViewMainBodyTemplate() {
                       class='observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}'>
                       <slot name="custom-section"></slot>
                     </section>
-                    ${this.renderStyle === 'read'
-                      ? expandedEndpointTemplate.call(this)
-                      : endpointTemplate.call(this)
-                    }
-                  `
+                    ${endpointTemplate.call(this)}`
                 }
                 </div>
               `

package/src/utils/spec-parser.js

@@ -4,7 +4,7 @@ import yaml from 'js-yaml';
 import { invalidCharsRegEx } from './common-utils';
 
 export default async function ProcessSpec(specUrlOrObject, serverUrl = '') {
-  const inputSpecIsAUrl = typeof specUrlOrObject === 'string' && specUrlOrObject.match(/^http/);
+  const inputSpecIsAUrl = typeof specUrlOrObject === 'string' && specUrlOrObject.match(/^http/) || typeof specUrlOrObject === 'object' && typeof specUrlOrObject.href === 'string';
   let specMeta;
 
   // Dynamically resolve non yaml or json files and insert their descriptions where necessary
@@ -16,7 +16,7 @@ export default async function ProcessSpec(specUrlOrObject, serverUrl = '') {
   }
 
   if (inputSpecIsAUrl) {
-    specMeta = await SwaggerClient({ allowMetaPatches: false, url: specUrlOrObject, responseInterceptor });
+    specMeta = await SwaggerClient({ allowMetaPatches: false, url: specUrlOrObject.toString(), responseInterceptor });
   } else if (typeof specUrlOrObject === 'string') {
     specMeta = await SwaggerClient({ allowMetaPatches: false, spec: yaml.load(specUrlOrObject), responseInterceptor });
   } else {