Skip to content

Commit 4e1ffdd

Browse files
mrin9mrin9
committed
refactored file rapidoc.js - breakdown into smaller templates
1 parent f3e24d3 commit 4e1ffdd

File tree

1 file changed

+127
-101
lines changed

1 file changed

+127
-101
lines changed

‎src/rapidoc.js‎

Lines changed: 127 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,45 @@ export default class RapiDoc extends LitElement {
169169
}
170170
171171
</style>
172-
${this.showHeader === 'false' ? '' : html`
172+
${this.showHeader === 'false' ? '' : this.headerTemplate()}
173+
174+
<div class="body-container regular-font">
175+
<slot></slot>
176+
${this.loading === true ? html`<div style="text-align: center;margin: 16px;">Loading ... </div>` : ''}
177+
${this.loadFailed === true ? html`<div style="text-align: center;margin: 16px;"> Unable to load the Spec</div>` : ''}
178+
${(this.showInfo === 'false' || !this.resolvedSpec || !this.resolvedSpec.info) ? '' : html`
179+
<div class="section-gap">
180+
<div class="title">
181+
${this.resolvedSpec.info.title}
182+
${!this.resolvedSpec.info.version ? '' : html`
183+
<span style="font-size:var(--small-font-size);font-weight:bold">
184+
${this.resolvedSpec.info.version}
185+
</span>`
186+
}
187+
</div>
188+
189+
${this.resolvedSpec.info.description
190+
? html`${unsafeHTML(`<div class='m-markdown regular-font'>${marked(this.resolvedSpec.info.description)}</div>`)}`
191+
: ''
192+
}
193+
${this.resolvedSpec.info.termsOfService
194+
? html`${unsafeHTML(`<div class='tiny-title' style="margin-top:8px"> Terms: </div> <span class='m-markdown regular-font'>${marked(this.resolvedSpec.info.termsOfService)}</span>`)}`
195+
: ''
196+
}
197+
${this.resolvedSpec.info.contact ? this.contactInfoTemplate() : ''}
198+
</div>`
199+
}
200+
201+
${(this.allowTry === 'false' || !this.resolvedSpec) ? '' : this.apiServerListTemplate()}
202+
${(this.allowAuthentication === 'false' || !this.resolvedSpec || !this.resolvedSpec.securitySchemes) ? '' : this.securitySchemeTemplate()}
203+
${this.resolvedSpec && this.resolvedSpec.tags ? this.endpointsGroupedByTagTemplate() : ''}
204+
205+
<slot name="footer"></slot>
206+
</div>`;
207+
}
208+
209+
headerTemplate() {
210+
return html`
173211
<div class="row header regular-font" style="padding:8px 4px 8px 4px;min-height:48px;position:sticky;top:0;flex:1">
174212
<div class="only-large-screen-flex" style="align-items: center;">
175213
<slot name="logo" class="logo">
@@ -178,7 +216,6 @@ export default class RapiDoc extends LitElement {
178216
<div class="header-title">${this.headingText}</div>
179217
</div>
180218
<div style="margin: 0px 8px;display:flex;flex:1">
181-
182219
${(this.allowSpecUrlLoad === 'false') ? '' : html`
183220
<input id="spec-url" type="text" class="header-input" placeholder="Spec URL" value="${this.specUrl ? this.specUrl : ''}" @change="${this.onSepcUrlChange}" spellcheck="false" >
184221
<div style="margin: 6px 5px 0 -24px; font-size:var(--title-font-size); cursor:pointer;">&#x23ce;</div>
@@ -194,111 +231,98 @@ export default class RapiDoc extends LitElement {
194231
<div style="margin: 6px 5px 0 -24px; font-size:var(--title-font-size); cursor:pointer;">&#x23ce;</div>
195232
`}
196233
</div>
197-
</div>`}
198-
199-
<div class="body-container regular-font">
200-
<slot></slot>
201-
${this.loading === true ? html`<div style="text-align: center;margin: 16px;">Loading ... </div>` : ''}
202-
${this.loadFailed === true ? html`<div style="text-align: center;margin: 16px;"> Unable to load the Spec</div>` : ''}
203-
${(this.showInfo === 'false' || !this.resolvedSpec || !this.resolvedSpec.info) ? '' : html`
204-
<div class="section-gap">
205-
<div class="title">
206-
${this.resolvedSpec.info.title}
207-
${!this.resolvedSpec.info.version ? '' : html`
208-
<span style="font-size:var(--small-font-size);font-weight:bold">
209-
${this.resolvedSpec.info.version}
210-
</span>`
211-
}
212-
</div>
213-
${this.resolvedSpec.info.description ? html`
214-
${unsafeHTML(`<div class='m-markdown regular-font'>${marked(this.resolvedSpec.info.description)}</div>`)}
215-
` : ''}
216-
${this.resolvedSpec.info.termsOfService ? html`
217-
${unsafeHTML(`<div class='tiny-title' style="margin-top:8px"> Terms: </div> <span class='m-markdown regular-font'>${marked(this.resolvedSpec.info.termsOfService)}</span>`)}
218-
` : ''}
219-
220-
${this.resolvedSpec.info.contact ? html`
221-
<div style="font-size:13px; margin-top:8px; line-height: 18px;">
222-
${this.resolvedSpec.info.contact.email ? html`
223-
<div>
224-
<span class='tiny-title' style="display:inline-block; width:50px"> Email: </span>
225-
<span class='regular-font'> ${this.resolvedSpec.info.contact.email}</span>
226-
</div>
227-
` : ''}
228-
${this.resolvedSpec.info.contact.name ? html`
229-
<div>
230-
<span class='tiny-title' style="display:inline-block; width:50px"> Name: </span>
231-
<span class='regular-font'> ${this.resolvedSpec.info.contact.name}</span>
232-
</div>
233-
` : ''}
234-
${this.resolvedSpec.info.contact.url ? html`
235-
<div>
236-
<span class='tiny-title' style="display:inline-block; width:50px"> URL: </span>
237-
<span class='regular-font'> ${this.resolvedSpec.info.contact.url}</span>
238-
</div>
239-
` : ''}
240-
</div>
241-
` : ''}
242-
234+
</div>`;
235+
}
243236

244-
</div>`
245-
}
237+
contactInfoTemplate() {
238+
return html`
239+
<div style="font-size:13px; margin-top:8px; line-height: 18px;">
240+
${this.resolvedSpec.info.contact.email
241+
? html`
242+
<div>
243+
<span class='tiny-title' style="display:inline-block; width:50px"> Email: </span>
244+
<span class='regular-font'> ${this.resolvedSpec.info.contact.email}</span>
245+
</div>`
246+
: ''
247+
}
248+
${this.resolvedSpec.info.contact.name
249+
? html`
250+
<div>
251+
<span class='tiny-title' style="display:inline-block; width:50px"> Name: </span>
252+
<span class='regular-font'> ${this.resolvedSpec.info.contact.name}</span>
253+
</div>`
254+
: ''
255+
}
256+
${this.resolvedSpec.info.contact.url
257+
? html`
258+
<div>
259+
<span class='tiny-title' style="display:inline-block; width:50px"> URL: </span>
260+
<span class='regular-font'> ${this.resolvedSpec.info.contact.url}</span>
261+
</div>`
262+
: ''
263+
}
264+
</div>`;
265+
}
246266

247-
${(this.allowTry === 'false' || !this.resolvedSpec) ? '' : html`
248-
<div class="sub-title regular-font section-gap">
249-
<a id="api_server_options"> API SERVER: </a>
250-
<div class="mono-font" style="margin: 12px 0; font-size:calc(var(--small-font-size) + 1px);">
251-
${!this.resolvedSpec.servers || (this.resolvedSpec.servers.length === 0) ? '' : html`
252-
${this.resolvedSpec.servers.map((server) => html`
253-
<input type='radio' name='api_server' value='${server.url}' @change="${this.onApiServerChange}" checked style='margin:2px 0 5px 8px'/>
254-
${server.url}
255-
${server.description ? html`- ${server.description}` : ''}
256-
<br/>
257-
`)}
258-
`}
267+
apiServerListTemplate() {
268+
return html`
269+
<div class="sub-title regular-font section-gap">
270+
<a id="api_server_options"> API SERVER: </a>
271+
<div class="mono-font" style="margin: 12px 0; font-size:calc(var(--small-font-size) + 1px);">
272+
${!this.resolvedSpec.servers || (this.resolvedSpec.servers.length === 0)
273+
? ''
274+
: html`
275+
${this.resolvedSpec.servers.map((server) => html`
276+
<input type='radio' name='api_server' value='${server.url}' @change="${this.onApiServerChange}" checked style='margin:2px 0 5px 8px'/>
277+
${server.url}
278+
${server.description ? html`- ${server.description}` : ''}
279+
<br/>
280+
`)}
281+
`}
259282
260-
${(this.serverUrl) ? html`
261-
<input type='radio' name='api_server' value='${this.serverUrl}' @change="${this.onApiServerChange}" checked style='margin:2px 0 5px 8px'/>
262-
${this.serverUrl}<br/>
263-
` : ''
264-
}
265-
</div>
266-
</div>
267-
`}
283+
${(this.serverUrl) ? html`
284+
<input type='radio' name='api_server' value='${this.serverUrl}' @change="${this.onApiServerChange}" checked style='margin:2px 0 5px 8px'/>
285+
${this.serverUrl}<br/>
286+
` : ''
287+
}
288+
</div>
289+
</div>`;
290+
}
268291

292+
securitySchemeTemplate() {
293+
return html`
294+
<div class="sub-title regular-font section-gap">
295+
<security-schemes
296+
.schemes="${this.resolvedSpec.securitySchemes}"
297+
selected-api-key-name = "${this.apiKeyName ? this.apiKeyName : ''}"
298+
selected-api-key-value = "${this.apiKeyValue ? this.apiKeyValue : ''}"
299+
@change="${this.onSecurityChange}"
300+
></security-schemes>
301+
</div>`;
302+
}
269303

270-
${(this.allowAuthentication === 'false' || !this.resolvedSpec || !this.resolvedSpec.securitySchemes) ? '' : html`
271-
<div class="sub-title regular-font section-gap">
272-
<security-schemes
273-
.schemes="${this.resolvedSpec.securitySchemes}"
274-
selected-api-key-name = "${this.apiKeyName ? this.apiKeyName : ''}"
275-
selected-api-key-value = "${this.apiKeyValue ? this.apiKeyValue : ''}"
276-
@change="${this.onSecurityChange}"
277-
></security-schemes>
304+
endpointsGroupedByTagTemplate() {
305+
return html`
306+
${this.resolvedSpec.tags.map((tag) => html`
307+
<div class="sub-title tag regular-font section-gap">${tag.name}</div>
308+
<div style="margin:4px 20px">
309+
${unsafeHTML(`<div class='m-markdown regular-font'>${marked(tag.description ? tag.description : '')}</div>`)}
278310
</div>
279-
`}
280-
281-
${this.resolvedSpec && this.resolvedSpec.tags ? html`
282-
${this.resolvedSpec.tags.map((tag) => html`
283-
<div class="sub-title tag regular-font section-gap">${tag.name}</div>
284-
<div style="margin:4px 20px">
285-
${unsafeHTML(`<div class='m-markdown regular-font'>${marked(tag.description ? tag.description : '')}</div>`)}
286-
</div>
287-
<end-points
288-
selected-server = "${this.selectedServer ? this.selectedServer : ''}"
289-
api-key-name = "${this.apiKeyName ? this.apiKeyName : ''}"
290-
api-key-value = "${this.apiKeyValue ? this.apiKeyValue : ''}"
291-
api-key-location = "${this.apiKeyLocation ? this.apiKeyLocation : ''}"
292-
layout = "${this.layout ? this.layout : 'row'}"
293-
.paths = "${tag.paths}"
294-
allow-try = "${this.allowTry ? this.allowTry : 'true'}"
295-
match-paths = "${this.matchPaths}"
296-
></end-points>
297-
`)}`
298-
: ''}
299-
<slot name="footer"></slot>
300-
</div>`;
311+
<end-points
312+
selected-server = "${this.selectedServer ? this.selectedServer : ''}"
313+
api-key-name = "${this.apiKeyName ? this.apiKeyName : ''}"
314+
api-key-value = "${this.apiKeyValue ? this.apiKeyValue : ''}"
315+
api-key-location = "${this.apiKeyLocation ? this.apiKeyLocation : ''}"
316+
layout = "${this.layout ? this.layout : 'row'}"
317+
.paths = "${tag.paths}"
318+
allow-try = "${this.allowTry ? this.allowTry : 'true'}"
319+
match-paths = "${this.matchPaths}"
320+
></end-points>
321+
`)
322+
}`;
301323
}
324+
325+
302326
/* eslint-enable indent */
303327

304328
static get properties() {
@@ -325,6 +349,8 @@ export default class RapiDoc extends LitElement {
325349
apiKeyName: { type: String, attribute: 'api-key-name' },
326350
apiKeyValue: { type: String, attribute: 'api-key-value' },
327351
apiKeyLocation: { type: String, attribute: 'api-key-location' },
352+
groupByTags: { type: String, attribute: 'group-by-tags' },
353+
328354
};
329355
}
330356

@@ -346,7 +372,7 @@ export default class RapiDoc extends LitElement {
346372
this.setAttribute('spec-file', this.shadowRoot.getElementById('spec-file').value);
347373
const specFile = e.target.files[0];
348374
const reader = new FileReader();
349-
reader.onload = function () {
375+
reader.onload = () => {
350376
try {
351377
const specObj = JSON.parse(reader.result);
352378
me.loadSpec(specObj);

0 commit comments

Comments
 (0)