Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-02-12 16:00:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add lazyRendering option

Browse Source
This commit is contained in:
Roman Hotsiy 2016-11-30 13:23:24 +02:00
parent e50055286b
commit fc46931551
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
4 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -116,6 +116,7 @@ ReDoc makes use of the following [vendor extensions](http://swagger.io/specifica
* **selector**: selector of the element to be used for specifying the offset. The distance from the top of the page to the element's bottom will be used as offset; * **selector**: selector of the element to be used for specifying the offset. The distance from the top of the page to the element's bottom will be used as offset;
* **function**: A getter function. Must return a number representing the offset (in pixels); * **function**: A getter function. Must return a number representing the offset (in pixels);
* `suppress-warnings` - if set, warnings are not rendered at the top of documentation (they still are logged to the console). * `suppress-warnings` - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
* `lazy-rendering` - if set, enables lazy rendering mode in ReDoc. This mode is useful for APIs with big number of operations (e.g. > 50). In this mode ReDoc shows initial screen ASAP and then renders the rest operations asynchronously while showing progress bar on the top. Check out the [demo](\\rebilly.github.io/ReDoc) for the example.
* `hide-hostname` - if set, the protocol and hostname is not shown in the method definition. * `hide-hostname` - if set, the protocol and hostname is not shown in the method definition.
## Advanced usage ## Advanced usage

2
lib/components/Redoc/redoc.html
View File

@ -2,7 +2,7 @@
<h1>Oops... ReDoc failed to render this spec</h1> <h1>Oops... ReDoc failed to render this spec</h1>
<div class='redoc-error-details'>{{error.message}}</div> <div class='redoc-error-details'>{{error.message}}</div>
</div> </div>
<loading-bar [progress]="loadingProgress"> </loading-bar> <loading-bar *ngIf="options.lazyRendering" [progress]="loadingProgress"> </loading-bar>
<div class="redoc-wrap" *ngIf="specLoaded && !error"> <div class="redoc-wrap" *ngIf="specLoaded && !error">
<div class="background"> <div class="background">
<div class="background-actual"> </div> <div class="background-actual"> </div>

1
lib/components/Redoc/redoc.ts
View File

@ -62,6 +62,7 @@ export class Redoc extends BaseComponent implements OnInit {
if (scrollParent === DOM.defaultDoc().body) scrollParent = window; if (scrollParent === DOM.defaultDoc().body) scrollParent = window;
optionsMgr.options.$scrollParent = scrollParent; optionsMgr.options.$scrollParent = scrollParent;
this.options = optionsMgr.options; this.options = optionsMgr.options;
this.lazyTasksService.allSync = !this.options.lazyRendering;
} }
hideLoadingAnimation() { hideLoadingAnimation() {

30
lib/services/options.service.ts
View File

@ -8,26 +8,43 @@ const defaults = {
disableLazySchemas: false disableLazySchemas: false
}; };
const OPTION_NAMES = new Set(['scrollYOffset', 'disableLazySchemas', 'specUrl', 'suppressWarnings', 'hideHostname']); const OPTION_NAMES = new Set([
'scrollYOffset',
'disableLazySchemas',
'specUrl',
'suppressWarnings',
'hideHostname',
'lazyRendering'
]);
interface Options {
scrollYOffset?: any;
disableLazySchemas?: boolean;
specUrl?: string;
suppressWarnings?: boolean;
hideHostname?: boolean;
lazyRendering?: boolean;
$scrollParent?: HTMLElement | Window;
}
@Injectable() @Injectable()
export class OptionsService { export class OptionsService {
private _options: any; private _options: Options;
constructor() { constructor() {
this._options = defaults; this._options = defaults;
this._normalizeOptions(); this._normalizeOptions();
} }
get options() { get options():Options {
return this._options; return this._options;
} }
set options(opts) { set options(opts:Options) {
this._options = Object.assign(this._options, opts); this._options = Object.assign(this._options, opts);
} }
parseOptions(el) { parseOptions(el:HTMLElement):void {
let parsedOpts; let parsedOpts;
let attributesMap = DOM.attributeMap(el); let attributesMap = DOM.attributeMap(el);
parsedOpts = {}; parsedOpts = {};
@ -47,7 +64,7 @@ export class OptionsService {
this._normalizeOptions(); this._normalizeOptions();
} }
_normalizeOptions() { _normalizeOptions():void {
// modify scrollYOffset to always be a function // modify scrollYOffset to always be a function
if (!isFunction(this._options.scrollYOffset)) { if (!isFunction(this._options.scrollYOffset)) {
if (isFinite(this._options.scrollYOffset)) { if (isFinite(this._options.scrollYOffset)) {
@ -71,5 +88,6 @@ export class OptionsService {
if (isString(this._options.disableLazySchemas)) this._options.disableLazySchemas = true; if (isString(this._options.disableLazySchemas)) this._options.disableLazySchemas = true;
if (isString(this._options.suppressWarnings)) this._options.suppressWarnings = true; if (isString(this._options.suppressWarnings)) this._options.suppressWarnings = true;
if (isString(this._options.hideHostname)) this._options.hideHostname = true; if (isString(this._options.hideHostname)) this._options.hideHostname = true;
if (isString(this._options.lazyRendering)) this._options.lazyRendering = true;
} }
} }