rapi-doc · mrin9 · Oct 12, 2020 · Oct 8, 2020
diff --git a/docs/examples/search-by-params.html b/docs/examples/search-by-params.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+    <head>
+        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
+        <script>
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'UA-132775238-1');
+        </script>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">
+        <link href='../index.css' rel='stylesheet'>
+        <script type="text/javascript" src="../rapidoc-min.js"></script>
+    </head>
+    <body>
+        <rapi-doc
+            id = "thedoc"
+            show-info = "true"
+            spec-url = "../specs/temp.json"
+            show-header="false"
+            allow-search-by-params="true"
+            render-style="focused"
+            allow-try="false"
+            regular-font="Open Sans"
+            mono-font = "Roboto Mono"
+            use-path-in-nav-bar="true">
+            <div slot="nav-logo">
+                <div style="text-align: center; padding: 0 0 12px 0; color:#47AFE8"> Search by Parameters </div>
+                <div style="width:100%; display: flex;justify-content: center;">
+                    <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('allow-search-by-params', 'true')" >Allow</button>
+                    <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('allow-search-by-params', 'false')" >Disallow</button>
+                </div>
+            </div>
+        </rapi-doc>
+    </body>
+</html>
diff --git a/docs/list.html b/docs/list.html
@@ -107,8 +107,8 @@
     <!--Waves end-->
   </div>
   <div style="display:flex; width:100%; flex-wrap:wrap; justify-content:center;">
-    
-    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./quickstart.html';"> 
+
+    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./quickstart.html';">
       <h2 style="font-weight:700">  How To Use </h2>
       <div class="row">
         <img style="width:32px" src="./images/html5-logo.png"/>
@@ -181,7 +181,7 @@ <h2 style="font-weight:700">  How To Use </h2>
       </div>
     </div>
 
-    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-branding.html';"> 
+    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-branding.html';">
       <h2 style="font-weight:700"> Branding Ideas </h2>
     </div>
 
@@ -236,7 +236,7 @@ <h2 style="font-weight:700"> Branding Ideas </h2>
     <div class = "container" >
       <a href="./examples/markdown-headings.html">Markdown headings in Navigation</a>
       <div class = "c-description">
-        Optionally include markdown headings to navigation bar 
+        Optionally include markdown headings to navigation bar
       </div>
     </div>
 
@@ -266,7 +266,7 @@ <h2 style="font-weight:700"> Branding Ideas </h2>
     <div class = "container">
       <a href="./examples/code-samples.html"> Code Samples </a>
       <div class = "c-description" >
-        Support for x-code-samples (vendor extension) in endpoint definition 
+        Support for x-code-samples (vendor extension) in endpoint definition
       </div>
     </div>
 
@@ -319,7 +319,14 @@ <h2 style="font-weight:700"> Branding Ideas </h2>
       <a href="./examples/dynamic-form-params.html"> Form Parameters - Dynamic </a>
     </div>
 
-    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./oauth_instructions.html';"> 
+    <div class = "container" >
+      <a href="./examples/search-by-params.html">Search by Parameters</a>
+      <div class = "c-description" >
+        true / false
+      </div>
+    </div>
+
+    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./oauth_instructions.html';">
       <h2 style="font-weight:700"> OAuth Setup </h2>
     </div>
 
@@ -366,7 +373,7 @@ <h2 style="font-weight:700"> OAuth Setup </h2>
       </div>
     </div>
 
-    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-performance.html';"> 
+    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-performance.html';">
       <h2 style="font-weight:700"> Performance Tips </h2>
     </div>
 
@@ -384,7 +391,7 @@ <h2 style="font-weight:700"> Performance Tips </h2>
       </div>
     </div>
 
-    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-html-content.html';"> 
+    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-html-content.html';">
       <h2 style="font-weight:700"> Mix HTML content </h2>
     </div>
 
@@ -418,8 +425,8 @@ <h2 style="font-weight:700"> Mix HTML content </h2>
       <div class = "c-description" >
         Collapsable tags with possibility to change load state (open/closed)
       </div>
-    </div>  
-    
+    </div>
+
 
     <div class = "container" >
       <a href="./examples/example100.html"> Play Ground </a>

diff --git a/src/components/dialog-box.js b/src/components/dialog-box.js
@@ -0,0 +1,65 @@
+import { html } from 'lit-html';
+import { LitElement } from 'lit-element';
+
+import DialogBoxStyles from '@/styles/dialog-box-styles';
+
+export default class DialogBox extends LitElement {
+  static get properties() {
+    return {
+      title: { type: String, attribute: 'title' },
+      show: { type: Boolean, attribute: 'show' },
+    };
+  }
+
+  static get styles() {
+    return [DialogBoxStyles];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.title) { this.title = 'Modal title'; }
+
+    document.addEventListener('keydown', (e) => {
+      if (e.code === 'Escape') {
+        this.onClose();
+      }
+    });
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal !== newVal) {
+      if (name === 'title') {
+        this.title = newVal;
+      }
+
+      if (name === 'show') {
+        this.show = newVal;
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="dialog-box-overlay" style="display: ${this.show === 'true' ? 'block' : 'none'};">
+        <div class="dialog-box">
+          <header class="dialog-box-header">
+            <h4 class="dialog-box-title">${this.title}</h4>
+            <button type="button" @click="${this.onClose}">&times;</button>
+          </header>
+          <div class="dialog-box-content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  onClose() {
+    document.dispatchEvent(new CustomEvent('ondialogboxclose', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+}
+
+customElements.define('dialog-box', DialogBox);
diff --git a/src/rapidoc.js b/src/rapidoc.js
@@ -22,7 +22,7 @@ import TabStyles from '@/styles/tab-styles';
 import NavStyles from '@/styles/nav-styles';
 
 import {
-  pathIsInSearch, invalidCharsRegEx, sleep, rapidocApiKey,
+  pathIsInSearch, findProperties, invalidCharsRegEx, sleep, rapidocApiKey,
 } from '@/utils/common-utils';
 import ProcessSpec from '@/utils/spec-parser';
 import mainBodyTemplate from '@/templates/main-body-template';
@@ -76,6 +76,7 @@ export default class RapiDoc extends LitElement {
       allowSpecUrlLoad: { type: String, attribute: 'allow-spec-url-load' },
       allowSpecFileLoad: { type: String, attribute: 'allow-spec-file-load' },
       allowSearch: { type: String, attribute: 'allow-search' },
+      allowSearchByParams: { type: String, attribute: 'allow-search-by-params' },
       allowServerSelection: { type: String, attribute: 'allow-server-selection' },
       showComponents: { type: String, attribute: 'show-components' },
 
@@ -108,6 +109,7 @@ export default class RapiDoc extends LitElement {
       // Internal Attributes
       selectedContentId: { type: String },
 
+      isSearchByPropertiesModalShow: { type: Boolean },
     };
   }
 
@@ -349,6 +351,7 @@ export default class RapiDoc extends LitElement {
       this.responseAreaHeight = '300px';
     }
     if (!this.allowTry || !'true, false,'.includes(`${this.allowTry},`)) { this.allowTry = 'true'; }
+    if (!this.allowSearchByParams || !'true, false,'.includes(`${this.allowSearchByParams},`)) { this.allowSearchByParams = 'false'; }
     if (!this.apiKeyValue) { this.apiKeyValue = '-'; }
     if (!this.apiKeyLocation) { this.apiKeyLocation = 'header'; }
     if (!this.apiKeyName) { this.apiKeyName = ''; }
@@ -363,6 +366,7 @@ export default class RapiDoc extends LitElement {
     if (!this.showInfo || !'true, false,'.includes(`${this.showInfo},`)) { this.showInfo = 'true'; }
     if (!this.showComponents || !'true false'.includes(this.showComponents)) { this.showComponents = 'false'; }
     if (!this.infoDescriptionHeadingsInNavBar || !'true, false,'.includes(`${this.infoDescriptionHeadingsInNavBar},`)) { this.infoDescriptionHeadingsInNavBar = 'false'; }
+    if (!this.isSearchByPropertiesModalShow) { this.isSearchByPropertiesModalShow = false; }
 
     marked.setOptions({
       highlight: (code, lang) => {
@@ -538,6 +542,23 @@ export default class RapiDoc extends LitElement {
     this.matchPaths = '';
   }
 
+  onSearchByPropertiesChange(e) {
+    this.matchProperties = findProperties(e.target.value.toLowerCase(), this.resolvedSpec.tags);
+    if (this.matchProperties) {
+      this.requestUpdate();
+    }
+  }
+
+  showSearchModal() {
+    this.isSearchByPropertiesModalShow = true;
+    this.requestUpdate();
+  }
+
+  hideSearchModal() {
+    this.isSearchByPropertiesModalShow = false;
+    this.requestUpdate();
+  }
+
   // Public Method
   async loadSpec(specUrl) {
     if (!specUrl) {
@@ -691,6 +712,7 @@ export default class RapiDoc extends LitElement {
       }
       navEl.classList.add('active');
       window.history.replaceState(null, null, `${window.location.href.split('#')[0]}#${targetElId}`);
+      this.hideSearchModal();
       setTimeout(() => {
         this.isIntersectionObserverActive = true;
       }, 300);

diff --git a/src/styles/dialog-box-styles.js b/src/styles/dialog-box-styles.js
@@ -0,0 +1,62 @@
+import { css } from 'lit-element';
+
+export default css`
+  .dialog-box-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    position: fixed;
+    z-index: 999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+  
+  .dialog-box {
+    background-color: white;
+    margin: 5% auto;
+    border: 1px solid #888;
+    width: 60vw;
+    border-radius: 5px;
+  }
+  
+  .dialog-box-header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #e4e4e4;
+    padding: 1rem;
+  }
+  
+  .dialog-box-header button {
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: .5;
+    border: none;
+    background-color: white;
+    transition: all .2s;
+    border-radius: 2px;
+  }
+  
+  .dialog-box-header button:hover {
+    color: white;
+    background-color: var(--primary-color);
+  }
+  
+  .dialog-box-title {
+    flex-grow: 1;
+  }
+  
+  h4.dialog-box-title {
+    margin: 0;
+    padding: 0;
+  }
+  
+  .dialog-box-content {
+    padding: 1rem;
+    max-height: 80vh;
+    overflow: auto;
+  }
+`;
diff --git a/src/styles/input-styles.js b/src/styles/input-styles.js
@@ -27,11 +27,16 @@ export default css`
 .m-btn.thin-border { border-width: 1px; }
 .m-btn.large { padding:8px 14px; }
 .m-btn.small { padding:5px 12px; }
+.m-btn.tiny { padding:5px 6px; }
 .m-btn.circle { border-radius: 50%; }
 .m-btn:hover { 
   background-color: var(--primary-color);
   color: var(--primary-color-invert);
 }
+.m-btn.nav { border: 2px solid var(--nav-accent-color); }
+.m-btn.nav:hover { 
+  background-color: var(--nav-accent-color);
+}
 .m-btn:disabled{ 
   background-color: var(--bg3);
   color: var(--fg3);

diff --git a/src/templates/header-template.js b/src/templates/header-template.js
@@ -49,6 +49,15 @@ export default function headerTemplate() {
           <div style="margin: 6px 5px 0 -24px; font-size:var(--title-font-size); cursor:pointer;">&#x2b90;</div>
         `
       }
+      
+      ${(this.allowSearch === 'false' || this.allowSearchByParams === 'false' || 'read focused'.includes(this.renderStyle))
+        ? ''
+        : html`
+          <button class="m-btn" style="color: white; margin-left: 10px;" @click="${this.showSearchModal}">
+            Search by parameters
+          </button>
+        `
+      }
     </div>
     </header>`;
   }

diff --git a/src/templates/main-body-template.js b/src/templates/main-body-template.js
@@ -13,6 +13,7 @@ import componentsTemplate from '@/templates/components-template';
 import contactInfoTemplate from '@/templates/contact-info-template';
 import headerTemplate from '@/templates/header-template';
 import navbarTemplate from '@/templates/navbar-template';
+import searchByPropertiesModalTemplate from '@/templates/search-by-properties-modal-template';
 
 import SetTheme from '@/utils/theme';
 import { isValidHexColor } from '@/utils/color-utils';
@@ -121,6 +122,8 @@ export default function mainBodyTemplate() {
           }
         </div>  
         <slot name="footer"></slot>
+        
+        ${this.allowSearchByParams === 'true' ? searchByPropertiesModalTemplate.call(this) : ''}
       </main>
     </div>  
   `;