optimization: lazy loading hidden-on-init schemas

This commit is contained in:
Roman Hotsiy 2016-01-24 19:02:02 +02:00
parent deed1272fc
commit 159a4c5e68
3 changed files with 36 additions and 4 deletions

View File

@ -0,0 +1,29 @@
'use strict';
import {Component, View, EventEmitter, ElementRef} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import JsonSchema from './json-schema';
import {DynamicComponentLoader} from 'angular2/src/core/linker/dynamic_component_loader';
@Component({
selector: 'json-schema-lazy',
inputs: ['pointer']
})
@View({
template: '',
directives: [CORE_DIRECTIVES]
})
export default class JsonSchemaLazy {
constructor(elementRef, dcl) {
this.elementRef = elementRef;
this.dcl = dcl;
}
load() {
this.dcl.loadNextToLocation(JsonSchema, this.elementRef).then((compRef) => {
compRef.instance.pointer = this.pointer;
});
}
}
JsonSchemaLazy.parameters = [[ElementRef], [DynamicComponentLoader]];

View File

@ -1,6 +1,6 @@
<h2 class="responses-list-header" *ngIf="data.responses.length"> Responses </h2> <h2 class="responses-list-header" *ngIf="data.responses.length"> Responses </h2>
<zippy *ngFor="#response of data.responses" title="{{response.code}} {{response.description}}" <zippy *ngFor="#response of data.responses" title="{{response.code}} {{response.description}}"
[type]="response.type" [empty]="!response.schema"> [type]="response.type" [empty]="!response.schema" (open)="lazy.load()">
<div *ngIf="response.headers" class="response-headers"> <div *ngIf="response.headers" class="response-headers">
<header> <header>
Headers Headers
@ -14,6 +14,8 @@
<header> <header>
Response schema Response schema
</header> </header>
<json-schema *ngIf="response.schema" class="schema type" pointer="{{response.pointer}}/schema"> <!--<json-schema *ngIf="response.schema" class="schema type" pointer="{{response.pointer}}/schema">
</json-schema> </json-schema>-->
<json-schema-lazy #lazy class="schema type" pointer="{{response.pointer}}/schema">
</json-schema-lazy>
</zippy> </zippy>

View File

@ -3,6 +3,7 @@
import {RedocComponent, BaseComponent} from '../base'; import {RedocComponent, BaseComponent} from '../base';
import JsonPointer from '../../utils/JsonPointer'; import JsonPointer from '../../utils/JsonPointer';
import JsonSchema from '../JsonSchema/json-schema'; import JsonSchema from '../JsonSchema/json-schema';
import JsonSchemaLazy from '../JsonSchema/json-schema-lazy';
import Zippy from '../../common/components/Zippy/zippy'; import Zippy from '../../common/components/Zippy/zippy';
import {statusCodeType} from '../../utils/helpers'; import {statusCodeType} from '../../utils/helpers';
@ -14,7 +15,7 @@ function isNumeric(n) {
selector: 'responses-list', selector: 'responses-list',
templateUrl: './lib/components/ResponsesList/responses-list.html', templateUrl: './lib/components/ResponsesList/responses-list.html',
styleUrls: ['./lib/components/ResponsesList/responses-list.css'], styleUrls: ['./lib/components/ResponsesList/responses-list.css'],
directives: [JsonSchema, Zippy] directives: [JsonSchema, Zippy, JsonSchemaLazy]
}) })
export default class ResponsesList extends BaseComponent { export default class ResponsesList extends BaseComponent {
constructor(schemaMgr) { constructor(schemaMgr) {