Skip to content

Commit 361bd5a

Browse files
Serhii BohoslavskyiSerhii Bohoslavskyi
Serhii Bohoslavskyi
authored and
Serhii Bohoslavskyi
committed
Add search by parameters
1 parent b9699e8 commit 361bd5a

File tree

11 files changed

+381
-12
lines changed

11 files changed

+381
-12
lines changed

‎docs/examples/search-by-params.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<!-- Global site tag (gtag.js) - Google Analytics -->
5+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
6+
<script>
7+
window.dataLayer = window.dataLayer || [];
8+
function gtag(){dataLayer.push(arguments);}
9+
gtag('js', new Date());
10+
11+
gtag('config', 'UA-132775238-1');
12+
</script>
13+
<meta charset="utf-8">
14+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
15+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">
16+
<link href='../index.css' rel='stylesheet'>
17+
<script type="text/javascript" src="../rapidoc-min.js"></script>
18+
</head>
19+
<body>
20+
<rapi-doc
21+
id = "thedoc"
22+
show-info = "true"
23+
spec-url = "../specs/temp.json"
24+
show-header="false"
25+
allow-search-by-params="true"
26+
render-style="focused"
27+
allow-try="false"
28+
regular-font="Open Sans"
29+
mono-font = "Roboto Mono"
30+
use-path-in-nav-bar="true">
31+
<div slot="nav-logo">
32+
<div style="text-align: center; padding: 0 0 12px 0; color:#47AFE8"> Search by Parameters </div>
33+
<div style="width:100%; display: flex;justify-content: center;">
34+
<button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('allow-search-by-params', 'true')" >Allow</button>
35+
<button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('allow-search-by-params', 'false')" >Disallow</button>
36+
</div>
37+
</div>
38+
</rapi-doc>
39+
</body>
40+
</html>

‎docs/list.html‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,8 @@
107107
<!--Waves end-->
108108
</div>
109109
<div style="display:flex; width:100%; flex-wrap:wrap; justify-content:center;">
110-
111-
<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./quickstart.html';">
110+
111+
<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./quickstart.html';">
112112
<h2 style="font-weight:700"> How To Use </h2>
113113
<div class="row">
114114
<img style="width:32px" src="./images/html5-logo.png"/>
@@ -181,7 +181,7 @@ <h2 style="font-weight:700"> How To Use </h2>
181181
</div>
182182
</div>
183183

184-
<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-branding.html';">
184+
<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-branding.html';">
185185
<h2 style="font-weight:700"> Branding Ideas </h2>
186186
</div>
187187

@@ -236,7 +236,7 @@ <h2 style="font-weight:700"> Branding Ideas </h2>
236236
<div class = "container" >
237237
<a href="./examples/markdown-headings.html">Markdown headings in Navigation</a>
238238
<div class = "c-description">
239-
Optionally include markdown headings to navigation bar
239+
Optionally include markdown headings to navigation bar
240240
</div>
241241
</div>
242242

@@ -266,7 +266,7 @@ <h2 style="font-weight:700"> Branding Ideas </h2>
266266
<div class = "container">
267267
<a href="./examples/code-samples.html"> Code Samples </a>
268268
<div class = "c-description" >
269-
Support for x-code-samples (vendor extension) in endpoint definition
269+
Support for x-code-samples (vendor extension) in endpoint definition
270270
</div>
271271
</div>
272272

@@ -319,7 +319,14 @@ <h2 style="font-weight:700"> Branding Ideas </h2>
319319
<a href="./examples/dynamic-form-params.html"> Form Parameters - Dynamic </a>
320320
</div>
321321

322-
<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./oauth_instructions.html';">
322+
<div class = "container" >
323+
<a href="./examples/search-by-params.html">Search by Parameters</a>
324+
<div class = "c-description" >
325+
true / false
326+
</div>
327+
</div>
328+
329+
<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./oauth_instructions.html';">
323330
<h2 style="font-weight:700"> OAuth Setup </h2>
324331
</div>
325332

@@ -366,7 +373,7 @@ <h2 style="font-weight:700"> OAuth Setup </h2>
366373
</div>
367374
</div>
368375

369-
<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-performance.html';">
376+
<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-performance.html';">
370377
<h2 style="font-weight:700"> Performance Tips </h2>
371378
</div>
372379

@@ -384,7 +391,7 @@ <h2 style="font-weight:700"> Performance Tips </h2>
384391
</div>
385392
</div>
386393

387-
<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-html-content.html';">
394+
<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-html-content.html';">
388395
<h2 style="font-weight:700"> Mix HTML content </h2>
389396
</div>
390397

@@ -418,8 +425,8 @@ <h2 style="font-weight:700"> Mix HTML content </h2>
418425
<div class = "c-description" >
419426
Collapsable tags with possibility to change load state (open/closed)
420427
</div>
421-
</div>
422-
428+
</div>
429+
423430

424431
<div class = "container" >
425432
<a href="./examples/example100.html"> Play Ground </a>

‎src/components/dialog-box.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { html } from 'lit-html';
2+
import { LitElement } from 'lit-element';
3+
4+
import DialogBoxStyles from '@/styles/dialog-box-styles';
5+
6+
export default class DialogBox extends LitElement {
7+
static get properties() {
8+
return {
9+
title: { type: String, attribute: 'title' },
10+
show: { type: Boolean, attribute: 'show' },
11+
};
12+
}
13+
14+
static get styles() {
15+
return [DialogBoxStyles];
16+
}
17+
18+
connectedCallback() {
19+
super.connectedCallback();
20+
if (!this.title) { this.title = 'Modal title'; }
21+
22+
document.addEventListener('keydown', (e) => {
23+
if (e.code === 'Escape') {
24+
this.onClose();
25+
}
26+
});
27+
}
28+
29+
attributeChangedCallback(name, oldVal, newVal) {
30+
if (oldVal !== newVal) {
31+
if (name === 'title') {
32+
this.title = newVal;
33+
}
34+
35+
if (name === 'show') {
36+
this.show = newVal;
37+
}
38+
}
39+
}
40+
41+
render() {
42+
return html`
43+
<div class="dialog-box-overlay" style="display: ${this.show === 'true' ? 'block' : 'none'};">
44+
<div class="dialog-box">
45+
<header class="dialog-box-header">
46+
<h4 class="dialog-box-title">${this.title}</h4>
47+
<button type="button" @click="${this.onClose}">&times;</button>
48+
</header>
49+
<div class="dialog-box-content">
50+
<slot></slot>
51+
</div>
52+
</div>
53+
</div>
54+
`;
55+
}
56+
57+
onClose() {
58+
document.dispatchEvent(new CustomEvent('ondialogboxclose', {
59+
bubbles: true,
60+
composed: true,
61+
}));
62+
}
63+
}
64+
65+
customElements.define('dialog-box', DialogBox);

‎src/rapidoc.js‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import TabStyles from '@/styles/tab-styles';
2222
import NavStyles from '@/styles/nav-styles';
2323

2424
import {
25-
pathIsInSearch, invalidCharsRegEx, sleep, rapidocApiKey,
25+
pathIsInSearch, findProperties, invalidCharsRegEx, sleep, rapidocApiKey,
2626
} from '@/utils/common-utils';
2727
import ProcessSpec from '@/utils/spec-parser';
2828
import mainBodyTemplate from '@/templates/main-body-template';
@@ -76,6 +76,7 @@ export default class RapiDoc extends LitElement {
7676
allowSpecUrlLoad: { type: String, attribute: 'allow-spec-url-load' },
7777
allowSpecFileLoad: { type: String, attribute: 'allow-spec-file-load' },
7878
allowSearch: { type: String, attribute: 'allow-search' },
79+
allowSearchByParams: { type: String, attribute: 'allow-search-by-params' },
7980
allowServerSelection: { type: String, attribute: 'allow-server-selection' },
8081
showComponents: { type: String, attribute: 'show-components' },
8182

@@ -108,6 +109,7 @@ export default class RapiDoc extends LitElement {
108109
// Internal Attributes
109110
selectedContentId: { type: String },
110111

112+
isSearchByPropertiesModalShow: { type: Boolean },
111113
};
112114
}
113115

@@ -349,6 +351,7 @@ export default class RapiDoc extends LitElement {
349351
this.responseAreaHeight = '300px';
350352
}
351353
if (!this.allowTry || !'true, false,'.includes(`${this.allowTry},`)) { this.allowTry = 'true'; }
354+
if (!this.allowSearchByParams || !'true, false,'.includes(`${this.allowSearchByParams},`)) { this.allowSearchByParams = 'false'; }
352355
if (!this.apiKeyValue) { this.apiKeyValue = '-'; }
353356
if (!this.apiKeyLocation) { this.apiKeyLocation = 'header'; }
354357
if (!this.apiKeyName) { this.apiKeyName = ''; }
@@ -363,6 +366,7 @@ export default class RapiDoc extends LitElement {
363366
if (!this.showInfo || !'true, false,'.includes(`${this.showInfo},`)) { this.showInfo = 'true'; }
364367
if (!this.showComponents || !'true false'.includes(this.showComponents)) { this.showComponents = 'false'; }
365368
if (!this.infoDescriptionHeadingsInNavBar || !'true, false,'.includes(`${this.infoDescriptionHeadingsInNavBar},`)) { this.infoDescriptionHeadingsInNavBar = 'false'; }
369+
if (!this.isSearchByPropertiesModalShow) { this.isSearchByPropertiesModalShow = false; }
366370

367371
marked.setOptions({
368372
highlight: (code, lang) => {
@@ -538,6 +542,23 @@ export default class RapiDoc extends LitElement {
538542
this.matchPaths = '';
539543
}
540544

545+
onSearchByPropertiesChange(e) {
546+
this.matchProperties = findProperties(e.target.value.toLowerCase(), this.resolvedSpec.tags);
547+
if (this.matchProperties) {
548+
this.requestUpdate();
549+
}
550+
}
551+
552+
showSearchModal() {
553+
this.isSearchByPropertiesModalShow = true;
554+
this.requestUpdate();
555+
}
556+
557+
hideSearchModal() {
558+
this.isSearchByPropertiesModalShow = false;
559+
this.requestUpdate();
560+
}
561+
541562
// Public Method
542563
async loadSpec(specUrl) {
543564
if (!specUrl) {
@@ -691,6 +712,7 @@ export default class RapiDoc extends LitElement {
691712
}
692713
navEl.classList.add('active');
693714
window.history.replaceState(null, null, `${window.location.href.split('#')[0]}#${targetElId}`);
715+
this.hideSearchModal();
694716
setTimeout(() => {
695717
this.isIntersectionObserverActive = true;
696718
}, 300);

‎src/styles/dialog-box-styles.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { css } from 'lit-element';
2+
3+
export default css`
4+
.dialog-box-overlay {
5+
background-color: rgba(0, 0, 0, 0.4);
6+
position: fixed;
7+
z-index: 999;
8+
left: 0;
9+
top: 0;
10+
width: 100%;
11+
height: 100%;
12+
overflow: auto;
13+
}
14+
15+
.dialog-box {
16+
background-color: white;
17+
margin: 5% auto;
18+
border: 1px solid #888;
19+
width: 60vw;
20+
border-radius: 5px;
21+
}
22+
23+
.dialog-box-header {
24+
display: flex;
25+
align-items: center;
26+
border-bottom: 1px solid #e4e4e4;
27+
padding: 1rem;
28+
}
29+
30+
.dialog-box-header button {
31+
font-size: 1.5rem;
32+
font-weight: 700;
33+
line-height: 1;
34+
color: #000;
35+
text-shadow: 0 1px 0 #fff;
36+
opacity: .5;
37+
border: none;
38+
background-color: white;
39+
transition: all .2s;
40+
border-radius: 2px;
41+
}
42+
43+
.dialog-box-header button:hover {
44+
color: white;
45+
background-color: var(--primary-color);
46+
}
47+
48+
.dialog-box-title {
49+
flex-grow: 1;
50+
}
51+
52+
h4.dialog-box-title {
53+
margin: 0;
54+
padding: 0;
55+
}
56+
57+
.dialog-box-content {
58+
padding: 1rem;
59+
max-height: 80vh;
60+
overflow: auto;
61+
}
62+
`;

‎src/styles/input-styles.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,16 @@ export default css`
2727
.m-btn.thin-border { border-width: 1px; }
2828
.m-btn.large { padding:8px 14px; }
2929
.m-btn.small { padding:5px 12px; }
30+
.m-btn.tiny { padding:5px 6px; }
3031
.m-btn.circle { border-radius: 50%; }
3132
.m-btn:hover {
3233
background-color: var(--primary-color);
3334
color: var(--primary-color-invert);
3435
}
36+
.m-btn.nav { border: 2px solid var(--nav-accent-color); }
37+
.m-btn.nav:hover {
38+
background-color: var(--nav-accent-color);
39+
}
3540
.m-btn:disabled{
3641
background-color: var(--bg3);
3742
color: var(--fg3);

‎src/templates/header-template.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,15 @@ export default function headerTemplate() {
4949
<div style="margin: 6px 5px 0 -24px; font-size:var(--title-font-size); cursor:pointer;">&#x2b90;</div>
5050
`
5151
}
52+
53+
${(this.allowSearch === 'false' || this.allowSearchByParams === 'false' || 'read focused'.includes(this.renderStyle))
54+
? ''
55+
: html`
56+
<button class="m-btn" style="color: white; margin-left: 10px;" @click="${this.showSearchModal}">
57+
Search by parameters
58+
</button>
59+
`
60+
}
5261
</div>
5362
</header>`;
5463
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import componentsTemplate from '@/templates/components-template';
1313
import contactInfoTemplate from '@/templates/contact-info-template';
1414
import headerTemplate from '@/templates/header-template';
1515
import navbarTemplate from '@/templates/navbar-template';
16+
import searchByPropertiesModalTemplate from '@/templates/search-by-properties-modal-template';
1617

1718
import SetTheme from '@/utils/theme';
1819
import { isValidHexColor } from '@/utils/color-utils';
@@ -121,6 +122,8 @@ export default function mainBodyTemplate() {
121122
}
122123
</div>
123124
<slot name="footer"></slot>
125+
126+
${this.allowSearchByParams === 'true' ? searchByPropertiesModalTemplate.call(this) : ''}
124127
</main>
125128
</div>
126129
`;

0 commit comments

Comments
 (0)