redoc/lib/components/Redoc/redoc.ts

149 lines
4.1 KiB
TypeScript
Raw Normal View History

'use strict';
import { provide, enableProdMode, ElementRef,
ComponentRef, AfterViewInit } from '@angular/core';
2016-05-06 12:46:41 +03:00
import { bootstrap } from '@angular/platform-browser-dynamic';
2016-05-07 10:54:44 +03:00
import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
2016-05-06 12:46:41 +03:00
import { RedocComponent, BaseComponent } from '../base';
2016-05-09 22:55:16 +03:00
2016-05-20 20:36:10 +03:00
import detectScollParent from 'scrollparent';
2016-05-09 22:55:16 +03:00
import { ApiInfo } from '../ApiInfo/api-info';
import { ApiLogo } from '../ApiLogo/api-logo';
import { MethodsList } from '../MethodsList/methods-list';
import { SideMenu } from '../SideMenu/side-menu';
2016-05-06 00:48:41 +03:00
import { StickySidebar } from '../../shared/components/index';
2016-06-22 21:17:48 +03:00
import {SpecManager} from '../../utils/SpecManager';
2016-05-06 12:46:41 +03:00
import { OptionsService, RedocEventsService } from '../../services/index';
2016-05-20 20:36:10 +03:00
var dom = new BrowserDomAdapter();
var _modeLocked = false;
2016-01-24 20:01:17 +03:00
@RedocComponent({
selector: 'redoc',
providers: [
2016-06-22 21:17:48 +03:00
SpecManager,
2016-05-06 00:48:41 +03:00
BrowserDomAdapter,
RedocEventsService
],
templateUrl: './redoc.html',
styleUrls: ['./redoc.css'],
2016-05-18 16:59:54 +03:00
directives: [ ApiInfo, ApiLogo, MethodsList, SideMenu, StickySidebar ],
detect: true,
onPushOnly: false
})
export class Redoc extends BaseComponent implements AfterViewInit {
static appRef: ComponentRef<any>;
2016-06-06 19:32:20 +03:00
2016-06-13 20:54:24 +03:00
options: any;
2016-05-06 00:48:41 +03:00
2016-06-13 20:54:24 +03:00
private element: any;
2015-12-30 11:16:36 +03:00
2016-01-24 20:01:17 +03:00
static showLoadingAnimation() {
let elem = dom.query('redoc');
dom.addClass(elem, 'loading');
2016-01-24 20:01:17 +03:00
}
static hideLoadingAnimation() {
let redocEl = dom.query('redoc');
if (!redocEl) return;
2016-01-24 20:01:17 +03:00
dom.addClass(redocEl, 'loading-remove');
setTimeout(() => {
dom.removeClass(redocEl, 'loading-remove');
dom.removeClass(redocEl, 'loading');
}, 400);
}
2016-06-12 20:44:34 +03:00
static init(specUrl?, options?) {
2016-05-06 12:46:41 +03:00
var optionsService = new OptionsService(dom);
optionsService.options = options;
optionsService.options.specUrl = optionsService.options.specUrl || specUrl;
var providers = [
2016-06-23 11:34:49 +03:00
provide(OptionsService, {useValue: optionsService})
];
2016-01-15 20:01:09 +03:00
if (Redoc.appRef) {
2016-04-30 00:45:53 +03:00
Redoc.destroy();
2016-01-15 20:01:09 +03:00
}
2016-01-24 20:01:17 +03:00
Redoc.showLoadingAnimation();
2016-06-22 21:17:48 +03:00
return SpecManager.instance().load(specUrl)
2016-01-15 12:35:45 +03:00
.then(() => {
2016-05-06 12:46:41 +03:00
if (!_modeLocked && !optionsService.options.debugMode) {
enableProdMode();
_modeLocked = true;
}
return bootstrap(Redoc, providers);
2016-01-15 12:35:45 +03:00
})
2016-05-20 19:31:30 +03:00
.then(appRef => {
Redoc.hideLoadingAnimation();
Redoc.appRef = appRef;
console.log('ReDoc bootstrapped!');
2016-07-01 16:30:45 +03:00
}).catch(err => {
2016-05-20 19:31:30 +03:00
Redoc.hideLoadingAnimation();
Redoc.displayError(err);
2016-07-01 16:30:45 +03:00
throw err;
2016-05-20 19:31:30 +03:00
});
2015-12-30 11:16:36 +03:00
}
2016-01-15 12:35:45 +03:00
2016-01-20 18:05:43 +03:00
static autoInit() {
const specUrlAttributeName = 'spec-url';
let redocEl = dom.query('redoc');
if (!redocEl) return;
if (dom.hasAttribute(redocEl, specUrlAttributeName)) {
let url = dom.getAttribute(redocEl, specUrlAttributeName);
Redoc.init(url);
}
}
2016-05-20 19:31:30 +03:00
static displayError(err) {
let redocEl = dom.query('redoc');
if (!redocEl) return;
2016-05-20 19:31:30 +03:00
let heading = 'Oops... ReDoc failed to render this spec';
let details = err.message;
let erroHtml = `<div class="redoc-error">
<h1>${heading}</h1>
<div class='redoc-error-details'>${details}</div>`;
redocEl.innerHTML = erroHtml;
}
2016-04-30 00:45:53 +03:00
static destroy() {
2016-01-15 20:01:09 +03:00
let el = dom.query('redoc');
let elClone;
2016-01-20 17:37:23 +03:00
let parent;
let nextSibling;
if (el) {
parent = el.parentElement;
nextSibling = el.nextElementSibling;
}
2016-01-15 20:01:09 +03:00
elClone = el.cloneNode(false);
2016-01-20 17:37:23 +03:00
if (Redoc.appRef) {
2016-04-30 00:45:53 +03:00
Redoc.appRef.destroy();
2016-01-20 17:37:23 +03:00
Redoc.appRef = null;
2016-01-15 20:01:09 +03:00
2016-04-30 00:45:53 +03:00
// Redoc destroy removes host element, so need to restore it
elClone.innerHTML = 'Loading...';
2016-06-13 20:54:24 +03:00
if (parent) parent.insertBefore(elClone, nextSibling);
2016-01-20 17:37:23 +03:00
}
2016-01-15 20:01:09 +03:00
}
2016-06-13 20:54:24 +03:00
constructor(specMgr: SpecManager, optionsMgr:OptionsService, elementRef:ElementRef,
2016-06-13 20:54:24 +03:00
public events:RedocEventsService) {
super(specMgr);
2016-06-13 20:54:24 +03:00
this.element = elementRef.nativeElement;
//parse options (top level component doesn't support inputs)
optionsMgr.parseOptions( this.element );
optionsMgr.options.$scrollParent = detectScollParent( this.element );
this.options = optionsMgr.options;
this.events = events;
}
ngAfterViewInit() {
setTimeout( () => {
this.events.bootstrapped.next({});
});
}
}