openapi-explorer/dist/lib/templates/navbar-template.js

OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console

"use strict";

exports.__esModule = true;
exports.default = navbarTemplate;
exports.expandCollapseAll = expandCollapseAll;
exports.expandCollapseAllComponents = expandCollapseAllComponents;
var _lit = require("lit");
var _marked = require("marked");
var _commonUtils = require("../utils/common-utils.js");
var _index = require("../languages/index.js");
var _endpointTemplate = require("./endpoint-template.js");
var _componentsTemplate = require("./components-template.js");
function onExpandCollapseTag(event, tagId) {
  if (tagId === 'link-overview') {
    this.resolvedSpec.info.expanded = !this.resolvedSpec.info.expanded;
    this.scrollToEventTarget(event, false);
    return;
  }
  const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
  if (!tag) {
    return;
  }
  tag.expanded = !tag.expanded;
  if (tag.expanded && this.operationsCollapsed) {
    this.resolvedSpec.tags.filter(t => t.elementId !== tagId).forEach(t => t.expanded = false);
    this.resolvedSpec.info.expanded = false;
  }

  // Only display the dedicated tag page if the tag has a description, otherwise, it will be an ugly page with nothing on it.
  if (tag.description) {
    this.scrollToEventTarget(event, false);
  }
  this.requestUpdate();
}
function expandCollapseAll() {
  const expand = this.operationsCollapsed;
  this.operationsCollapsed = !expand;
  this.resolvedSpec.tags.forEach(tag => {
    tag.expanded = expand;
  });
  this.requestUpdate();
}
function expandCollapseAllComponents() {
  const expand = this.componentsCollapsed;
  this.componentsCollapsed = !expand;
  this.resolvedSpec.components.forEach(component => {
    component.expanded = expand;
  });
  this.requestUpdate();
}

/* eslint-disable indent */
function navbarTemplate() {
  var _this$resolvedSpec$in, _this$resolvedSpec$co;
  return (0, _lit.html)` <nav class="nav-bar ${this.renderStyle}" part="section-navbar" aria-label="${(0, _index.getI18nText)('menu.menu')}"> <slot name="nav-header"></slot> ${this.hideSearch ? '' : (0, _lit.html)` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px"> <div style="display:flex;flex:1;line-height:22px"> <input id="nav-bar-search" part="textbox textbox-nav-filter" style="width:100%;padding-right:20px;color:var(--nav-hover-text-color);border-color:var(--secondary-color);background-color:var(--nav-hover-bg-color)" type="text" placeholder="${(0, _index.getI18nText)('menu.filter')}" @input="${this.onSearchChange}" spellcheck="false"> </div> <button class="m-btn outline-primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> ${(0, _index.getI18nText)('menu.search')} </button> </div> `} ${(0, _lit.html)`<nav class="nav-scroll" part="navbar-scroll"> ${this.hideInfo || !this.resolvedSpec.info ? '' : (0, _lit.html)` <div class="nav-bar-tag-and-paths ${this.resolvedSpec.info.expanded ? '' : 'collapsed'}"> <div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => {
    onExpandCollapseTag.call(this, e, 'link-overview');
  }}" role="link" tabindex="0" @keydown="${e => {
    if (e.key === 'Enter') {
      e.target.click();
    }
  }}" ; }> ${this.resolvedSpec.info.title || (0, _index.getI18nText)('menu.overview')} </div> <div class="nav-bar-section-wrapper"> <div> ${((_this$resolvedSpec$in = this.resolvedSpec.info.headers) === null || _this$resolvedSpec$in === void 0 ? void 0 : _this$resolvedSpec$in.map(header => (0, _lit.html)` <div class="nav-bar-h${header.depth}" id="link-overview--${new _marked.marked.Slugger().slug(header.text)}" data-content-id="overview--${new _marked.marked.Slugger().slug(header.text)}" @click="${e => this.scrollToEventTarget(e, false)}"> ${header.text} </div>`)) || ''} </div> </div> </div> `} ${this.hideServerSelection ? '' : (0, _lit.html)`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}" role="link" tabindex="0" @keydown="${e => {
    if (e.key === 'Enter') {
      e.target.click();
    }
  }}"> ${(0, _index.getI18nText)('menu.api-servers')} </div>`} ${this.hideAuthentication || !this.resolvedSpec.securitySchemes ? '' : (0, _lit.html)`<div class="nav-bar-info" id="link-auth" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}" role="link" tabindex="0" @keydown="${e => {
    if (e.key === 'Enter') {
      e.target.click();
    }
  }}"> ${(0, _index.getI18nText)('menu.authentication')} </div>`} <slot name="nav-section" class="custom-nav-section" data-content-id="section" @click="${e => this.scrollToCustomNavSectionTarget(e, false)}"></slot> <div class="sticky-scroll-element ${this.operationsCollapsed ? 'collapsed' : ''}" @click="${() => {
    expandCollapseAll.call(this);
  }}"> <div class="nav-bar-section" part="navbar-section-header navbar-operations-header"> <slot name="operations-header"> <div class="nav-bar-section-title">${(0, _index.getI18nText)('menu.operations')}</div> </slot> <div style="" part="navbar-operations-header-collapse"> ${this.resolvedSpec.tags.length > 1 && this.resolvedSpec.tags.some(tag => !tag.paths.length && !this.matchPaths || tag.paths.some(path => (0, _commonUtils.pathIsInSearch)(this.matchPaths, path))) ? (0, _lit.html)` <div class="toggle">▾</div>` : ''} </div> </div> </div> ${this.resolvedSpec.tags.filter(tag => !tag.paths.length && !this.matchPaths || tag.paths.some(path => (0, _commonUtils.pathIsInSearch)(this.matchPaths, path))).map(tag => (0, _lit.html)` <slot name="nav-${tag.elementId}"> <div class="nav-bar-tag-and-paths ${tag.expanded ? '' : 'collapsed'}"> ${tag.name === 'General ⦂' ? (0, _lit.html)`` : (0, _lit.html)` <div class="nav-bar-tag" id="link-${tag.elementId}" data-content-id="${tag.elementId}" role="link" tabindex="0" @click="${e => {
    onExpandCollapseTag.call(this, e, tag.elementId);
  }}" @keydown="${e => {
    if (e.key === 'Enter') {
      e.target.click();
    }
  }}"> <div style="display:flex;justify-content:space-between;width:100%"> <div style="margin-right:.5rem">${tag.name}</div> <div class="toggle">▾</div> </div> </div> `} <div class="nav-bar-section-wrapper"> <div> ${tag.headers.map(header => (0, _lit.html)` <div class="nav-bar-h${header.depth}" id="link-${tag.elementId}--${new _marked.marked.Slugger().slug(header.text)}" data-content-id="${tag.elementId}--${new _marked.marked.Slugger().slug(header.text)}" @click="${e => this.scrollToEventTarget(e, false)}"> ${header.text} </div>`)} </div> <div class="nav-bar-paths-under-tag"> ${tag.paths.filter(v => (0, _commonUtils.pathIsInSearch)(this.matchPaths, v)).map(p => (0, _lit.html)` <div class="nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
    this.scrollToEventTarget(e, false);
  }}" role="link" tabindex="0" @keydown="${e => {
    if (e.key === 'Enter') {
      e.target.click();
    }
  }}"> <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar ? (0, _lit.html)`<div class="mono-font" style="display:flex;align-items:center"> <div class="method ${p.method}"><span style="line-height:1">${p.method}</span></div> <div style="display:flex;flex-wrap:wrap">${p.path.split('/').filter(t => t.trim()).map(t => (0, _lit.html)`<span>/${t}</span>`)}</div> </div>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </div> </slot> `)} ${(_this$resolvedSpec$co = this.resolvedSpec.components) !== null && _this$resolvedSpec$co !== void 0 && _this$resolvedSpec$co.length && !this.hideComponents ? (0, _lit.html)` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section" part="navbar-section-header"> <slot name="components-header"> <div class="nav-bar-section-title">${(0, _index.getI18nText)('menu.components')}</div> </slot> </div> </div> ${this.resolvedSpec.components.filter(c => c.subComponents.some(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s))).map(component => {
    const componentInfo = (0, _componentsTemplate.getComponentInfo)(component.componentKeyId);
    return (0, _lit.html)` <div class="nav-bar-tag-and-paths ${component.expanded ? '' : 'collapsed'}"> <div class="nav-bar-tag" role="link" tabindex="0" data-content-id="cmp--${componentInfo.name.toLowerCase()}" id="link-cmp--${componentInfo.name.toLowerCase()}" @click="${e => {
      _endpointTemplate.expandCollapseComponent.call(this, component);
      this.scrollToEventTarget(e, false);
    }}" @keydown="${e => {
      if (e.key === 'Enter') {
        e.target.click();
      }
    }}"> <div> ${componentInfo.name} </div> <div style="" part="navbar-components-header-collapse"> <div class="toggle">▾</div> </div> </div> <div class="nav-bar-section-wrapper"> <div class="nav-bar-paths-under-tag"> ${component.subComponents.filter(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s)).map(p => (0, _lit.html)` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)} </div> </div> </div>`;
  })}` : ''} </nav>`} </nav> `;
}
/* eslint-enable indent */