Skip to content

Commit c435825

Browse files
mrin9mrin9
committed
Fixed API servers
1 parent 34ad51f commit c435825

File tree

8 files changed

+263
-295
lines changed

8 files changed

+263
-295
lines changed

‎dist/rapidoc-min.js‎

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

‎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.

‎docs/rapidoc-min.js‎

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

‎src/components/api-request.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,13 @@ export default class ApiRequest extends LitElement {
7070
.tab-content{
7171
margin:-1px 0 0 0;
7272
}
73-
.response-url{
73+
.link{
7474
font-size:12px;
75-
white-space:nowrap;
76-
overflow:hidden;
77-
color:var(--light-fg);
75+
text-decoration: underline;
76+
color:var(--link-color);
7877
font-family:var(--font-mono);
7978
margin-bottom:2px;
80-
text-overflow: ellipsis;
79+
8180
}
8281
.response-message.error{
8382
color:var(--error-color);
@@ -277,11 +276,11 @@ export default class ApiRequest extends LitElement {
277276
apiCallTemplate(){
278277
return html`
279278
<div style="display:flex; align-items: center; margin:16px 0">
280-
<button class="m-btn" @click="${this.onTryClick}">TRY</button>
281279
<div style="font-size:12px; margin:0 5px; width:calc(100% - 50px);">
282-
<div class='response-url'> ${this.responseUrl} </div>
283-
<div class="response-message ${this.responseStatus}" >${this.responseMessage}</div>
280+
<span style="font-weight:bold;">API Server:</span>
281+
<span class='link'> ${this.server?this.server:location.origin}</span>
284282
</div>
283+
<button class="m-btn" @click="${this.onTryClick}">TRY</button>
285284
</div>
286285
${this.responseMessage===''?'':html`
287286
<div class="tab-panel col" style="border-width:0; min-height:200px">
@@ -305,7 +304,6 @@ export default class ApiRequest extends LitElement {
305304
if (e.target.classList.contains("active") || e.target.classList.contains("tab-btn")===false){
306305
return;
307306
}
308-
309307
let activeTabBtn = e.currentTarget.parentNode.querySelector('.tab-btn.active');
310308
let clickedTabBtn = e.target;
311309
activeTabBtn.classList.remove("active");
@@ -339,6 +337,8 @@ export default class ApiRequest extends LitElement {
339337
let formParamEls = [...requestPanelEl.querySelectorAll(".request-form-param")];
340338
let bodyParamEls = [...requestPanelEl.querySelectorAll(".request-body-param")];
341339

340+
let apiServer = this.shadowRoot.querySelector("input[name='api_server']:checked");
341+
342342
let url = me.path;
343343
let fetchOptions={
344344
'mode' : "cors",

‎src/components/security-schemes.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { LitElement, html } from 'lit-element';
2+
import FontStyles from '@/styles/font-styles';
3+
// Create your custom component
4+
export default class SecuritySchemes extends LitElement {
5+
render() {
6+
return html`
7+
${FontStyles}
8+
<div class="sub-title regular-font">AUTHENTICATION</div>
9+
<div style="font-size:12px; font-weight:bold; color:var(--error-color)">This section is under construction </div>
10+
`
11+
}
12+
13+
static get properties() {
14+
return {
15+
server: {type: String},
16+
layout: {type: String},
17+
paths : {type: Object}
18+
};
19+
}
20+
}
21+
// Register the element with the browser
22+
customElements.define('security-schemes', SecuritySchemes);

‎src/rapidoc.js‎

Lines changed: 89 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { LitElement, html, css} from 'lit-element';
22
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
33
import MLogo from '@/components/m-logo';
44
import EndPoints from '@/components/end-points';
5-
5+
import SecuritySchemes from '@/components/security-schemes';
66

77
import FontStyles from '@/styles/font-styles';
88
import InputStyles from '@/styles/input-styles';
@@ -109,15 +109,23 @@ class RapiDoc extends LitElement {
109109
background-color:var(--bg);
110110
font-family:var(--font-regular);
111111
}
112+
.body-container{
113+
margin:0 16px;
114+
}
112115
.header{
113116
background-color:var(--header-bg);
114117
color:var(--header-fg);
115118
width:100%;
116119
}
117-
.header .title{
120+
.header-title{
118121
font-size:24px;
119122
padding: 0 8px;
120123
}
124+
125+
.section-gap{
126+
padding: 28px 0px 4px 20px;
127+
}
128+
121129
input.header-input{
122130
background:${this.headerColor?vars.color.brightness(this.headerColor, -20):vars.color.inputReverseBg};
123131
color:var(--header-fg);
@@ -126,25 +134,19 @@ class RapiDoc extends LitElement {
126134
border-radius:3px;
127135
}
128136
.tag{
129-
font-size: 18px;
130-
color:var(--fg);
131-
padding: 28px 0px 4px 20px;
132137
text-transform: uppercase;
133138
}
134139
.doc-info{
135140
padding:16px 20px;
136141
}
137-
.doc-info .title{
138-
font-size:32px;
139-
}
140142
141143
</style>
142144
143145
${this.showHeader==='false'?'':html`
144146
<div class="row header regular-font" style="padding:8px 4px 8px 4px;min-height:48px;position:sticky;top:0;">
145147
<div style="display:flex; align-items: center;">
146148
<m-logo style="height:36px;width:36px;margin-left:5px"></m-logo>
147-
<div class="title">${this.headingText}</div>
149+
<div class="header-title">${this.headingText}</div>
148150
</div>
149151
<div style="margin: 0px 8px;display:flex">
150152
<input id="spec-url" type="text" class="large header-input" placeholder="Spec URL" value="${this.specUrl}" @change="${this.onSepcUrlChange}">
@@ -153,65 +155,82 @@ class RapiDoc extends LitElement {
153155
</div>
154156
<div style="flex:1"></div>
155157
</div>`}
158+
<div class="body-container regular-font">
159+
${this.showInfo==='false' || !this.resolvedSpec || !this.resolvedSpec.info ?``:html`
160+
<div class="doc-info">
161+
<div class="title">
162+
${this.resolvedSpec.info.title}
163+
${!this.resolvedSpec.info.version?"":html`
164+
<span style="font-size:14px;font-weight:bold">
165+
${this.resolvedSpec.info.version}
166+
</span>`
167+
}
168+
</div>
169+
${this.resolvedSpec.info.description?html`
170+
${unsafeHTML(`<div class='m-markdown regular-font'>${marked(this.resolvedSpec.info.description)}</div>`)}
171+
`:``}
172+
</div>`
173+
}
156174
157-
${this.showInfo==='false' || !this.resolvedSpec || !this.resolvedSpec.info ?``:html`
158-
<div class="doc-info">
159-
<div class="title">
160-
${this.resolvedSpec.info.title}
161-
${!this.resolvedSpec.info.version?"":html`
162-
<span style="font-size:14px;font-weight:bold">
163-
${this.resolvedSpec.info.version}
164-
</span>`
165-
}
166-
</div>
167-
${this.resolvedSpec.info.description?html`
168-
${unsafeHTML(`<div class='m-markdown regular-font'>${marked(this.resolvedSpec.info.description)}</div>`)}
169-
`:``}
170-
</div>`
171-
}
175+
${(this.developerMode==='false' || !this.resolvedSpec || !this.resolvedSpec.servers || this.resolvedSpec.servers.length===0) ?``:html`
176+
<div class="sub-title regular-font section-gap">API SERVER:
177+
<div style="margin: 8px 0; font-size:12px">
178+
${this.resolvedSpec.servers.map(server => html`
179+
<input type='radio' name='api_server' value='${server.url}' @change="${this.onApiServerChange}" checked style='margin:0 0 5px 8px'/>
180+
${server.url}<br/>
181+
`)}
182+
</div>
183+
</div>
184+
`
185+
}
186+
<div class="section-gap">
187+
<security-schemes> </security-schemes>
188+
</div>
172189
173-
190+
${this.resolvedSpec && this.resolvedSpec.tags ?html`
191+
${this.resolvedSpec.tags.map(tag => html`
192+
<div class="sub-title tag regular-font section-gap">${tag.name}</div>
193+
<div style="margin:4px 20px">
194+
${unsafeHTML(`<div class='m-markdown regular-font'>${marked(tag.description?tag.description:'')}</div>`)}
195+
</div>
196+
<end-points
197+
server = "${this.server?this.server:''}"
198+
layout = "${this.layout?this.layout:'row'}"
199+
.paths = "${tag.paths}"
200+
></end-points>
201+
`)}`
202+
:''}
203+
</div>
204+
`}
174205

175-
${ (this.developerMode==='false' || !this.resolvedSpec || !this.resolvedSpec.servers || this.resolvedSpec.servers.length===0) ?``:html`
176-
<div style="display:flex; align-items: center;margin:16px 36px;">
177-
<div class="regular-font">API Server : &nbsp;</div>
178-
<input type="text" class="large" style="width:400px" readonly placeholder="API Server" value="${this.resolvedSpec.servers[0].url}">
179-
</div>`
206+
// Initialize the server property b
207+
updated(changedProperties) {
208+
if (!this.server){
209+
let apiServerRadioEl = this.shadowRoot.querySelector("input[name='api_server']:checked");
210+
if (apiServerRadioEl !== null){
211+
//this.setAttribute('api-server', apiServerRadioEl.value);
212+
this.server = apiServerRadioEl.value;
213+
}
180214
}
181-
182-
183-
${this.resolvedSpec && this.resolvedSpec.tags ?html`<div id="searchInput" style="margin:0 16px">
184-
${this.resolvedSpec.tags.map(tag => html`
185-
<div class="tag regular-font">${tag.name}</div>
186-
<div style="margin:4px 20px">
187-
${unsafeHTML(`<div class='m-markdown regular-font'>${marked(tag.description?tag.description:'')}</div>`)}
188-
</div>
189-
<end-points
190-
server = "${this.resolvedSpec.servers && this.resolvedSpec.servers[0] && this.resolvedSpec.servers[0].url?this.resolvedSpec.servers[0].url:''}"
191-
layout = "${this.layout?this.layout:'row'}"
192-
.paths = "${tag.paths}"
193-
></end-points>
194-
`)}
195-
</div>`
196-
:''}
197-
`}
215+
}
198216

199217
static get properties() {
200218
return {
201-
specUrl : { type: String, attribute: 'spec-url',},
202-
specFile: { type: String, attribute: false,},
203-
headingText : {type: String, attribute: 'heading-text' },
204-
headerColor : {type: String, attribute: 'header-color' },
205-
primaryColor: {type: String, attribute: 'primary-color'},
206-
regularFont : {type: String, attribute: 'regular-font' },
207-
monoFont : {type: String, attribute: 'mono-font' },
208-
showHeader : {type: String, attribute: 'show-header'},
209-
layout : {type: String},
210-
theme : {type: String},
211-
logoUrl : {type: String , attribute: 'logo-url'},
212-
showTry : {type: Boolean, attribute: 'show-try'},
213-
showInfo: {type: Boolean, attribute: 'show-info'},
214-
showAuthentication: {type: Boolean, attribute: 'show-authentication'},
219+
specUrl : { type: String, attribute: 'spec-url' },
220+
specFile: { type: String, attribute: false },
221+
server : { type: String},
222+
headingText : { type: String, attribute: 'heading-text' },
223+
headerColor : { type: String, attribute: 'header-color' },
224+
primaryColor: { type: String, attribute: 'primary-color' },
225+
regularFont : { type: String, attribute: 'regular-font' },
226+
monoFont : { type: String, attribute: 'mono-font' },
227+
showHeader : { type: String, attribute: 'show-header' },
228+
layout : { type: String },
229+
theme : { type: String },
230+
logoUrl : { type: String , attribute: 'logo-url' },
231+
showTry : { type: Boolean, attribute: 'show-try' },
232+
showInfo: { type: Boolean, attribute: 'show-info' },
233+
showAuthentication: { type: Boolean, attribute: 'show-authentication' },
215234
};
216235
}
217236
attributeChangedCallback(name, oldVal, newVal) {
@@ -254,6 +273,15 @@ class RapiDoc extends LitElement {
254273
this.shadowRoot.getElementById('spec-file').click();
255274
}
256275

276+
onApiServerChange(){
277+
let apiServerRadioEl = this.shadowRoot.querySelector("input[name='api_server']:checked");
278+
if (apiServerRadioEl !== null){
279+
//this.setAttribute('api-server', apiServerRadioEl.value);
280+
this.server = apiServerRadioEl.value;
281+
}
282+
}
283+
284+
257285
loadSpec(specUrl) {
258286
var me = this;
259287
if (!specUrl){

‎src/styles/font-styles.js‎

Lines changed: 2 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ export default html`
55
<style>
66
.regular-font{font-family:var(--font-regular);}
77
.mono-font{font-family:var(--font-mono);}
8-
8+
.title{font-size:32px;}
9+
.sub-title{font-size: 18px;}
910
h1{ font-family:var(--font-regular); font-size:20px; font-weight:200; letter-spacing:normal; }
1011
h2{ font-family:var(--font-regular); font-size:18px; font-weight:200; letter-spacing:normal; }
1112
h3{ font-family:var(--font-regular); font-size:16px; font-weight:200; letter-spacing:normal; }
@@ -22,40 +23,6 @@ export default html`
2223
font-family: var(--font-mono);
2324
}
2425
25-
/* Text */
26-
.m-text{vertical-align: middle;}
27-
.m-text.small{font-size: 12px;line-height: 12px;}
28-
.m-text.gray{color: var(--light-fg)}
29-
.m-text.primary{color: var(--primary-color); }
30-
.m-text.bold{font-weight:bold;}
31-
.m-text.bottom-margin{ margin-bottom:4px}
32-
33-
/* Sub Title */
34-
.m-sub-title {
35-
font-size:20px;
36-
white-space:nowrap;
37-
overflow: hidden;
38-
text-overflow: ellipsis;
39-
}
40-
41-
.m-sub-title.m-1{
42-
font-size: 16px;
43-
font-weight:bold;
44-
margin: 20px 0 4px 0;
45-
}
46-
47-
.m-sub-title.m-2{
48-
font-size: 14px;
49-
font-weight:bold;
50-
margin: 16px 0 4px 0;
51-
}
52-
53-
.m-sub-title.m-3 {
54-
font-size: 12px;
55-
font-weight:bold;
56-
margin: 12px 0 4px 0;
57-
}
58-
5926
/* Markdown */
6027
.m-markdown p:only-child{
6128
color:var(--light-fg);

‎src/utils/parse-utils.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,4 @@ export default function ProcessSpec(specUrl){
166166

167167
}
168168

169-
170-
171-
172169
export {convertSpec}

0 commit comments

Comments
 (0)