Skip to content

Commit 503997e

Browse files
mrin9mrin9
committed
improved advance search functionality based on UX feedback
1 parent b4f69f7 commit 503997e

23 files changed

+400
-326
lines changed

‎dist/rapidoc-min.js‎

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rapidoc-min.js.gz‎

2.03 KB
Binary file not shown.

‎dist/rapidoc-min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rapidoc-min.js.map.gz‎

0 Bytes
Binary file not shown.

‎dist/report.html‎

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎docs/api.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,14 @@ <h2> Attributes</h2>
386386
<tr>
387387
<td class="mono bold right">allow-search</td>
388388
<td class="gray">
389-
If set to 'false', user will not be able to search APIs.
389+
Provides quick filtering of API
390+
</td>
391+
<td>true</td>
392+
</tr>
393+
<tr>
394+
<td class="mono bold right">allow-advance-search</td>
395+
<td class="gray">
396+
Provides advance search functionality, to search through API-paths, API-description, API-parameters and API-Responses
390397
</td>
391398
<td>true</td>
392399
</tr>

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

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,43 @@
11
<!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());
2+
<head>
3+
<!-- Global site tag (gtag.js) - Google Analytics -->
4+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
5+
<script>
6+
window.dataLayer = window.dataLayer || [];
7+
function gtag(){dataLayer.push(arguments);}
8+
gtag('js', new Date());
109

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>
10+
gtag('config', 'UA-132775238-1');
11+
</script>
12+
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/petstore_extended.yaml"
24+
show-header="true"
25+
allow-advance-search="true"
26+
render-style="read"
27+
allow-try="false"
28+
regular-font="Open Sans"
29+
mono-font = "Roboto Mono"
30+
use-path-in-nav-bar="true"
31+
theme="light"
32+
>
33+
34+
<div slot="nav-logo">
35+
<div style="text-align: center; padding: 0 0 12px 0; color:#47AFE8"> Advance Search </div>
36+
<div style="width:100%; display: flex;justify-content: center;">
37+
<button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('allow-advance-search', 'true')" >Allow</button>
38+
<button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('allow-advance-search', 'false')" >Disallow</button>
39+
</div>
40+
</div>
41+
</rapi-doc>
42+
</body>
4043
</html>

‎docs/list.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -320,9 +320,9 @@ <h2 style="font-weight:700"> Branding Ideas </h2>
320320
</div>
321321

322322
<div class = "container" >
323-
<a href="./examples/search-by-params.html">Search by Parameters</a>
323+
<a href="./examples/search-by-params.html">Advance Search</a>
324324
<div class = "c-description" >
325-
true / false
325+
Enable/Disable Advance search
326326
</div>
327327
</div>
328328

‎docs/rapidoc-min.js‎

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/dialog-box.js‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import DialogBoxStyles from '@/styles/dialog-box-styles';
66
export default class DialogBox extends LitElement {
77
static get properties() {
88
return {
9-
title: { type: String, attribute: 'title' },
10-
show: { type: Boolean, attribute: 'show' },
9+
heading: { type: String, attribute: 'heading' },
10+
show: { type: String, attribute: 'show' },
1111
};
1212
}
1313

@@ -17,8 +17,6 @@ export default class DialogBox extends LitElement {
1717

1818
connectedCallback() {
1919
super.connectedCallback();
20-
if (!this.title) { this.title = 'Modal title'; }
21-
2220
document.addEventListener('keydown', (e) => {
2321
if (e.code === 'Escape') {
2422
this.onClose();
@@ -28,34 +26,45 @@ export default class DialogBox extends LitElement {
2826

2927
attributeChangedCallback(name, oldVal, newVal) {
3028
if (oldVal !== newVal) {
31-
if (name === 'title') {
32-
this.title = newVal;
29+
if (name === 'heading') {
30+
this.heading = newVal;
3331
}
34-
3532
if (name === 'show') {
3633
this.show = newVal;
34+
if (newVal === 'true') {
35+
document.dispatchEvent(new CustomEvent('open', {
36+
bubbles: true,
37+
composed: true,
38+
detail: this,
39+
}));
40+
}
3741
}
3842
}
3943
}
4044

45+
/* eslint-disable indent */
4146
render() {
4247
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>
48+
${this.show === 'true'
49+
? html`
50+
<div class="dialog-box-overlay">
51+
<div class="dialog-box">
52+
<header class="dialog-box-header">
53+
<span class="dialog-box-title">${this.heading}</span>
54+
<button type="button" @click="${this.onClose}">&times;</button>
55+
</header>
56+
<div class="dialog-box-content">
57+
<slot></slot>
58+
</div>
5159
</div>
52-
</div>
53-
</div>
54-
`;
60+
</div>`
61+
: ''
62+
}`;
5563
}
64+
/* eslint-enable indent */
5665

5766
onClose() {
58-
document.dispatchEvent(new CustomEvent('ondialogboxclose', {
67+
document.dispatchEvent(new CustomEvent('close', {
5968
bubbles: true,
6069
composed: true,
6170
}));

0 commit comments

Comments
 (0)