rapidoc/src/templates/main-body-template.js

RapiDoc - Open API spec viewer with built in console

/**
 * Renders the top-level main layout shell, orchestrating header, navbar, content panels, and modal dialogs based on renderStyle.
 */
import { html } from "lit";

// Templates
import expandedEndpointTemplate from "~/templates/expanded-endpoint-template";
import focusedEndpointTemplate from "~/templates/focused-endpoint-template";
import overviewTemplate from "~/templates/overview-template";
import endpointTemplate from "~/templates/endpoint-template";
import serverTemplate from "~/templates/server-template";
import securitySchemeTemplate, {
  recoverPersistedApiKeys,
} from "~/templates/security-scheme-template";
import headerTemplate from "~/templates/header-template";
import navbarTemplate from "~/templates/navbar-template";
import advancedSearchDialogTemplate from "~/templates/advanced-search-dialog-template";
import componentsTemplate from "~/templates/components-template";
import downloadsTemplate from "~/templates/downloads-template";

export default function mainBodyTemplate(isMini = false, pathsExpanded = false) {
  if (!this.resolvedSpec) {
    return "";
  }
  if (this.persistAuth === "true") {
    recoverPersistedApiKeys.call(this);
  }

  if (this.resolvedSpec.specLoadError) {
    return html` <div id="spec-not-found">${this.resolvedSpec.info.description}</div>`;
  }

  if (this.resolvedSpec.isSpecLoading) {
    return html` <main class="main-content regular-font" part="section-main-content">
      <slot></slot>
      <div class="main-content-inner--${this.renderStyle}-mode">
        <div class="loader"></div>
      </div>
    </main>`;
  }

  return html` <slot name="fixed-header"></slot>
    <!-- Header -->
    ${this.showHeader === "false" ? "" : headerTemplate.call(this)}

    <!-- Advanced Search -->
    ${this.allowAdvancedSearch === "false" ? "" : advancedSearchDialogTemplate.call(this)}

    <div id="the-main-body" class="body ${this.cssClasses}" dir="${this.pageDirection}">
      <!-- Side Nav -->
      ${
        (this.renderStyle === "read" || this.renderStyle === "focused") &&
        this.showSideNav === "true" &&
        this.resolvedSpec
          ? navbarTemplate.call(this)
          : ""
      }

      <!-- Main Content -->
      <main class="main-content regular-font" tabindex="-1" part="section-main-content">
        <slot></slot>
        <div class="main-content-inner--${this.renderStyle}-mode">
          ${
            this.loading === true
              ? html`<div class="loader"></div>`
              : html` ${
                  this.loadFailed === true
                    ? html`<div style="text-align: center;margin: 16px;">Unable to load the Spec</div>`
                    : html`
                        <div
                          class="operations-root"
                          @click="${(e) => {
                            this.handleHref(e);
                          }}"
                        >
                          ${
                            this.renderStyle === "focused"
                              ? html`${this.showInfo === "false" ? downloadsTemplate.call(this) : ""}${focusedEndpointTemplate.call(this)}`
                              : html`
                                  ${this.showInfo === "true" ? overviewTemplate.call(this) : ""} ${downloadsTemplate.call(this)}
                                  ${this.allowServerSelection === "true" ? serverTemplate.call(this) : ""}
                                  ${this.allowAuthentication === "true" ? securitySchemeTemplate.call(this, this.allowTry) : ""}
                                  <div id="operations-top" class="observe-me">
                                    <slot name="operations-top"></slot>
                                  </div>
                                  ${
                                    this.renderStyle === "read"
                                      ? expandedEndpointTemplate.call(this)
                                      : endpointTemplate.call(this, isMini, pathsExpanded)
                                  }
                                  ${this.showComponents === "true" ? componentsTemplate.call(this) : ""}
                                `
                          }
                        </div>
                      `
                }`
          }
        </div>
        <slot name="footer"></slot>
      </main>
    </div>`;
}