Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-09-21 03:08:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'menu-refactor'

Browse Source
This commit is contained in:
Roman Hotsiy 2017-01-06 12:58:15 +02:00
commit 177bffb1c3
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
25 changed files with 789 additions and 529 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -113,6 +113,7 @@ ReDoc makes use of the following [vendor extensions](http://swagger.io/specifica
* [`x-code-samples`](docs/redoc-vendor-extensions.md#x-code-samples) - specify operation code samples
* [`x-nullable`](docs/redoc-vendor-extensions.md#nullable) - mark schema param as a nullable
* [`x-displayName`](docs/redoc-vendor-extensions.md#x-displayname) - specify human-friendly names for the menu categories
* [`x-tagGroups`](docs/redoc-vendor-extensions.md#x-tagGroups) - group tags by categories in the side menu
### `<redoc>` tag attributes
* `spec-url` - relative or absolute url to your spec file;

1
build/webpack.test.js
View File

@ -7,6 +7,7 @@ const VERSION = JSON.stringify(require('../package.json').version);
module.exports = {
devtool: 'inline-source-map',
performance: { hints: false },
resolve: {
extensions: ['.ts', '.js', '.json', '.css'],
alias: {

8
demo/swagger.yaml
View File

@ -54,6 +54,14 @@ tags:
description: Access to Petstore orders
- name: user
description: Operations about user
x-tagGroups:
- name: General
tags:
- pet
- store
- name: User Management
tags:
- user
securityDefinitions:
petstore_auth:
description: |

51
docs/redoc-vendor-extensions.md
View File

@ -1,6 +1,57 @@
# ReDoc vendor extensions
ReDoc makes use of the following [vendor extensions](http://swagger.io/specification/#vendorExtensions)
### Swagger Object vendor extensions
Extend OpenAPI root [Swagger Object](http://swagger.io/specification/#swaggerObject)
#### x-tagGroups
| Field Name | Type | Description |
| :------------- | :-----------: | :---------- |
| x-tagGroups | [ [Tag Group Object](#tagGroupObject) ] | A list of tag groups |
###### Usage in Redoc
`x-tagGroups` is used to group tags in the side menu
#### <a name="tagGroupObject"></a>Tag Group Object
Information about tags group
###### Fixed fields
| Field Name | Type | Description |
| :---------- | :--------: | :---------- |
| name | string | The group name |
| tags | [ string ] | List of tags to include in this group
###### x-tagGroups example
json
```json
{
"x-tagGroups": [
{
"name": "User Management",
"tags": ["Users", "API keys", "Admin"]
},
{
"name": "Statistics",
"tags": ["Main Stats", "Secondary Stats"]
}
]
}
```
yaml
```yaml
x-tagGroups:
- name: User Management
tags:
- Users
- API keys
- Admin
- name: Statistics
tags:
- Main Stats
- Secondary Stats
```
#### <a name="logoObject"></a>Logo Object
### Info Object vendor extensions
Extends OpenAPI [Info Object](http://swagger.io/specification/#infoObject)
#### x-logo

74
lib/components/Method/method.ts
View File

@ -1,10 +1,24 @@
'use strict';
import { Input, Component, OnInit, ChangeDetectionStrategy, ElementRef } from '@angular/core';
import { Input, HostBinding, Component, OnInit, ChangeDetectionStrategy, ElementRef } from '@angular/core';
import JsonPointer from '../../utils/JsonPointer';
import { BaseComponent, SpecManager } from '../base';
import { SchemaHelper } from '../../services/schema-helper.service';
import { OptionsService } from '../../services/';
interface MethodInfo {
apiUrl: string;
httpMethod: string;
path: string;
info: {
tags: string[];
description: string;
};
bodyParam: any;
summary: any;
anchor: any;
}
@Component({
selector: 'method',
templateUrl: './method.html',
@ -12,35 +26,47 @@ import { OptionsService } from '../../services/';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class Method extends BaseComponent implements OnInit {
@Input() pointer:string;
@Input() tag:string;
@Input() posInfo: any;
@Input() pointer :string;
@Input() parentTagId :string;
hidden = true;
@HostBinding('attr.operation-id') operationId;
method:any;
method: MethodInfo;
constructor(specMgr:SpecManager, private optionsService: OptionsService, private el: ElementRef) {
constructor(specMgr:SpecManager, private optionsService: OptionsService) {
super(specMgr);
}
init() {
this.method = {};
if (this.optionsService.options.hideHostname) {
this.method.apiUrl = this.specMgr.basePath;
this.operationId = this.componentSchema.operationId;
this.method = {
httpMethod: JsonPointer.baseName(this.pointer),
path: JsonPointer.baseName(this.pointer, 2),
info: {
description: this.componentSchema.description,
tags: this.filterMainTags(this.componentSchema.tags)
},
bodyParam: this.findBodyParam(),
summary: SchemaHelper.methodSummary(this.componentSchema),
apiUrl: this.getBaseUrl(),
anchor: this.buildAnchor()
};
}
buildAnchor() {
if (this.operationId) {
return 'operation/' + encodeURIComponent(this.componentSchema.operationId);
} else {
this.method.apiUrl = this.specMgr.apiUrl;
return this.parentTagId + encodeURIComponent(this.pointer);
}
this.method.httpMethod = JsonPointer.baseName(this.pointer);
this.method.path = JsonPointer.baseName(this.pointer, 2);
this.method.info = this.componentSchema;
this.method.info.tags = this.filterMainTags(this.method.info.tags);
this.method.bodyParam = this.findBodyParam();
this.method.summary = SchemaHelper.methodSummary(this.componentSchema);
if (this.componentSchema.operationId) {
this.method.anchor = 'operation/' + encodeURIComponent(this.componentSchema.operationId);
}
getBaseUrl():string {
if (this.optionsService.options.hideHostname) {
return this.specMgr.basePath;
} else {
this.method.anchor = this.tag + encodeURIComponent(this.pointer);
return this.specMgr.apiUrl;
}
}
@ -56,14 +82,6 @@ export class Method extends BaseComponent implements OnInit {
return bodyParam;
}
show(res) {
if (res) {
this.el.nativeElement.firstElementChild.removeAttribute('hidden');
} else {
this.el.nativeElement.firstElementChild.setAttribute('hidden', 'hidden');
}
}
ngOnInit() {
this.preinit();
}

9
lib/components/MethodsList/methods-list.html
View File

@ -1,10 +1,11 @@
<div class="methods">
<div class="tag" *ngFor="let tag of tags;let catIdx = index; trackBy:trackByTagName">
<div class="tag-info" [attr.section]="tag.id" *ngIf="!tag.headless">
<div class="tag" *ngFor="let tag of tags; trackBy:trackByTagName" [attr.section]="tag.id">
<div class="tag-info" *ngIf="tag.name">
<h1 class="sharable-header"> <a class="share-link" href="#{{tag.id}}"></a>{{tag.name}} </h1>
<p *ngIf="tag.description" [innerHtml]="tag.description | marked"> </p>
</div>
<method *lazyFor="let method of tag.methods;let show = show;" [hidden]="!show" [pointer]="method.pointer" [attr.pointer]="method.pointer"
[attr.section]="method.tag" [tag]="method.tag" [attr.operation-id]="method.operationId"></method>
<method *lazyFor="let methodItem of tag.items; let ready = ready;"
[hidden]="!ready" [pointer]="methodItem.metadata.pointer"
[parentTagId]="tag.id" [attr.section]="methodItem.id"></method>
</div>
</div>

8
lib/components/MethodsList/methods-list.spec.ts
View File

@ -13,7 +13,7 @@ import { getChildDebugElement } from '../../../tests/helpers';
import { MethodsList } from './methods-list';
import { SpecManager } from '../../utils/spec-manager';
describe('Redoc components', () => {
describe('Redoc components', () => {
beforeEach(() => {
TestBed.configureTestingModule({ declarations: [ TestAppComponent ] });
});
@ -42,13 +42,13 @@ describe('Redoc components', () => {
expect(component).not.toBeNull();
});
it('should get correct tags list', () => {
it('should build correct tags list', () => {
expect(component.tags).not.toBeNull();
component.tags.should.have.lengthOf(2);
component.tags[0].name.should.be.equal('traitTag');
component.tags[0].methods.should.be.empty();
should.not.exist(component.tags[0].items);
component.tags[1].name.should.be.equal('tag1');
component.tags[1].methods.should.have.lengthOf(2);
component.tags[1].items.should.have.lengthOf(2);
});
});
});

29
lib/components/MethodsList/methods-list.ts
View File

@ -1,7 +1,7 @@
'use strict';
import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { BaseComponent, SpecManager } from '../base';
import { SchemaHelper } from '../../services/index';
import { MenuService } from '../../services/index';
@Component({
selector: 'methods-list',
@ -14,20 +14,29 @@ export class MethodsList extends BaseComponent implements OnInit {
tags:Array<any> = [];
constructor(specMgr:SpecManager) {
constructor(specMgr:SpecManager, private menu: MenuService) {
super(specMgr);
}
init() {
let tags = SchemaHelper.buildMenuTree(this.specMgr.schema);
this.tags = tags.filter(tagInfo => !tagInfo.virtual);
this.tags.forEach(tagInfo => {
// inject tag name into method info
tagInfo.methods = tagInfo.methods || [];
tagInfo.methods.forEach(method => {
method.tag = tagInfo.id;
});
let flatMenuItems = this.menu.flatItems;
this.tags = [];
let emptyTag = {
name: '',
items: []
};
flatMenuItems.forEach(menuItem => {
// skip items that are not bound to swagger tags/methods
if (!menuItem.metadata) return;
if (menuItem.metadata.type === 'tag') {
this.tags.push(menuItem);
}
if (menuItem.metadata.type === 'method' && !menuItem.parent) {
emptyTag.items.push(menuItem);
}
});
if (emptyTag.items.length) this.tags.push(emptyTag);
}
trackByTagName(_, el) {

7
lib/components/SideMenu/side-menu-items.html Normal file
View File

@ -0,0 +1,7 @@
<li *ngFor="let item of items; let idx = index" class="menu-item"
ngClass="menu-item-depth-{{item.depth}} {{item.active ? 'active' : ''}} menu-item-for-{{item.metadata?.type}}">
<label class="menu-item-header" [ngClass]="{disabled: !item.ready}" (click)="activateItem(item)"> {{item.name}}</label>
<ul *ngIf="item.items" class="menu-subitems">
<side-menu-items [items]="item.items" (activate)="activateItem($event)"> </side-menu-items>
</ul>
</li>

110
lib/components/SideMenu/side-menu-items.scss Normal file
View File

@ -0,0 +1,110 @@
@import '../../shared/styles/variables';
.menu-item-header {
cursor: pointer;
color: rgba($text-color, .9);
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
display: block;
padding: $side-menu-item-vpadding*2.5 $side-menu-item-hpadding;
&[hidden] {
display: none;
}
&.disabled, &.disabled:hover {
cursor: default;
color: lighten($text-color, 60%);
}
}
.menu-item {
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
list-style: none inside none;
overflow: hidden;
text-overflow: ellipsis;
padding: 0;
}
.menu-item:hover,
.menu-item.active {
//background: darken($side-menu-active-bg-color, 6%);
}
.menu-subitems {
margin: 0;
font-size: 0.929em;
line-height: 1.2em;
font-weight: $light;
color: rgba($text-color, .9);
padding: 0;
overflow: hidden;
height: 0;
.active > & {
height: auto;
}
}
.menu-item-depth-1 {
> .menu-item-header {
font-family: $headers-font, $headers-font-family;
font-weight: $light;
font-size: $h5;
text-transform: uppercase;
}
// do not capitalize method summuary in level-1 menu
&.menu-item-for-method > .menu-item-header {
text-transform: none;
}
> .menu-item-header:not(.disabled):hover,
&.active > .menu-item-header {
color: $primary-color;
background: $side-menu-active-bg-color;
}
&.active {
//background: $side-menu-active-bg-color;
}
}
.menu-item-depth-2 {
> .menu-item-header {
padding-left: 2*$side-menu-item-hpadding;
}
> .menu-item-header:hover,
&.active > .menu-item-header {
background: darken($side-menu-active-bg-color, 6%);
}
}
// group items
.menu-item-depth-0 {
margin-top: 15px;
> .menu-subitems {
height: auto;
}
> .menu-item-header {
font-family: $headers-font, $headers-font-family;
color: rgba($text-color, .4);
text-transform: uppercase;
font-size: 0.8em;
padding-bottom: 0;
cursor: default;
}
&:hover,
&.active {
//background: none;
}
}

16
lib/components/SideMenu/side-menu.html
View File

@ -7,17 +7,7 @@
</div>
<div #desktop id="resources-nav">
<h5 class="menu-header"> API reference </h5>
<div *ngFor="let cat of categories; let idx = index" class="menu-cat">
<label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [hidden]="cat.headless"
[ngClass]="{active: cat.active, disabled: !cat.ready }"> {{cat.name}}</label>
<ul *ngIf="cat.methods.length" class="menu-subitems" [@itemAnimation]="cat.active ? 'expanded' : 'collapsed'">
<li *ngFor="let method of cat.methods; trackBy:summary; let methIdx = index"
[ngClass]="{active: method.active, disabled: !method.ready}"
(click)="activateAndScroll(idx, methIdx)">
{{method.summary}}
</li>
</ul>
</div>
<ul class="menu-root">
<side-menu-items [items]="menuItems" (activate)="activateAndScroll($event)"></side-menu-items>
</ul>
</div>

80
lib/components/SideMenu/side-menu.scss
View File

@ -6,6 +6,11 @@ $mobile-menu-compact-breakpoint: 550px;
box-sizing: border-box;
}
ul.menu-root {
margin: 0;
padding: 0;
}
.menu-header {
text-transform: uppercase;
color: $headers-color;
@ -13,81 +18,6 @@ $mobile-menu-compact-breakpoint: 550px;
margin: 10px 0;
}
.menu-cat-header {
font-size: $h5;
font-family: $headers-font, $headers-font-family;
font-weight: $light;
cursor: pointer;
color: rgba($text-color, .6);
text-transform: uppercase;
background-color: $side-bar-bg-color;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
display: block;
padding: $side-menu-item-vpadding*2.5 $side-menu-item-hpadding;
&:hover,
&.active {
color: $primary-color;
background-color: $side-menu-active-bg-color;
}
&[hidden] {
display: none;
}
&.disabled, &.disabled:hover {
cursor: default;
color: lighten($text-color, 60%);
}
}
.menu-subitems {
margin: 0;
font-size: 0.929em;
line-height: 1.2em;
font-weight: $light;
color: rgba($text-color, .9);
padding: 0;
overflow: hidden;
&.active {
height: auto;
}
& li {
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
list-style: none inside none;
cursor: pointer;
background-color: $side-menu-active-bg-color;
padding: $side-menu-item-vpadding*2 $side-menu-item-hpadding*2;
padding-left: $side-menu-item-hpadding*2;
overflow: hidden;
text-overflow: ellipsis;
}
& li:hover,
& li.active {
background: darken($side-menu-active-bg-color, 6%);
}
&.disabled, &.disabled:hover {
cursor: default;
color: lighten($text-color, 60%);
}
}
.menu-subitems li.active {
}
.mobile-nav {
display: none;
height: 3em;

71
lib/components/SideMenu/side-menu.ts
View File

@ -1,36 +1,49 @@
'use strict';
import { Component, ElementRef, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
import { Component, EventEmitter, Input, Output, ElementRef, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
//import { global } from '@angular/core/src/facade/lang';
import { trigger, state, animate, transition, style } from '@angular/core';
import { BaseComponent, SpecManager } from '../base';
import { ScrollService, MenuService, OptionsService } from '../../services/index';
import { ScrollService, MenuService, OptionsService, MenuItem } from '../../services/';
import { BrowserDomAdapter as DOM } from '../../utils/browser-adapter';
import { MenuCategory } from '../../services/schema-helper.service';
const global = window;
@Component({
selector: 'side-menu-items',
templateUrl: './side-menu-items.html',
styleUrls: ['./side-menu-items.css']
})
export class SideMenuItems {
@Input() items: MenuItem[];
@Output() activate = new EventEmitter<MenuItem>();
activateItem(item) {
this.activate.next(item);
}
}
@Component({
selector: 'side-menu',
templateUrl: './side-menu.html',
styleUrls: ['./side-menu.css'],
animations: [
trigger('itemAnimation', [
state('collapsed, void',
style({ height: '0px' })),
state('expanded',
style({ height: '*' })),
transition('collapsed <=> expanded', [
animate('200ms ease')
])
])
// trigger('itemAnimation', [
// state('collapsed, void',
// style({ height: '0px' })),
// state('expanded',
// style({ height: '*' })),
// transition('collapsed <=> expanded', [
// animate('200ms ease')
// ])
// ])
],
})
export class SideMenu extends BaseComponent implements OnInit, OnDestroy {
activeCatCaption: string;
activeItemCaption: string;
categories: Array<MenuCategory>;
menuItems: Array<MenuItem>;
private options: any;
private $element: any;
@ -54,11 +67,18 @@ export class SideMenu extends BaseComponent implements OnInit, OnDestroy {
this.menuService.changed.subscribe((evt) => this.changed(evt));
}
changed(newItem) {
if (newItem) {
let {cat, item} = newItem;
this.activeCatCaption = cat.name || '';
this.activeItemCaption = item && item.summary || '';
changed(item) {
if (!item) {
this.activeCatCaption = '';
this.activeItemCaption = '';
return;
}
if (item.parent) {
this.activeItemCaption = item.name;
this.activeCatCaption = item.parent.name;
} else {
this.activeCatCaption = item.name;
this.activeItemCaption = '';
}
//safari doesn't update bindings if not run changeDetector manually :(
@ -74,22 +94,17 @@ export class SideMenu extends BaseComponent implements OnInit, OnDestroy {
if ($item) $item.scrollIntoView();
}
activateAndScroll(catIdx, methodIdx) {
if (this.mobileMode()) {
activateAndScroll(item) {
if (this.mobileMode) {
this.toggleMobileNav();
}
let menu = this.categories;
if (!menu[catIdx].ready) return;
if (menu[catIdx].methods && menu[catIdx].methods.length && (methodIdx >= 0) &&
!menu[catIdx].methods[methodIdx].ready) return;
this.menuService.activate(catIdx, methodIdx);
this.menuService.activate(item.flatIdx);
this.menuService.scrollToActive();
}
init() {
this.categories = this.menuService.categories;
this.menuItems = this.menuService.items;
this.$mobileNav = DOM.querySelector(this.$element, '.mobile-nav');
this.$resourcesNav = DOM.querySelector(this.$element, '#resources-nav');
@ -101,7 +116,7 @@ export class SideMenu extends BaseComponent implements OnInit, OnDestroy {
};
}
mobileMode() {
get mobileMode() {
return this.$mobileNav.clientHeight > 0;
}

6
lib/components/index.ts
View File

@ -9,7 +9,7 @@ import { RequestSamples } from './RequestSamples/request-samples';
import { ResponsesList } from './ResponsesList/responses-list';
import { ResponsesSamples } from './ResponsesSamples/responses-samples';
import { SchemaSample } from './SchemaSample/schema-sample';
import { SideMenu } from './SideMenu/side-menu';
import { SideMenu, SideMenuItems } from './SideMenu/side-menu';
import { MethodsList } from './MethodsList/methods-list';
import { Method } from './Method/method';
import { Warnings } from './Warnings/warnings';
@ -21,9 +21,9 @@ import { Redoc } from './Redoc/redoc';
export const REDOC_DIRECTIVES = [
ApiInfo, ApiLogo, JsonSchema, JsonSchemaLazy, ParamsList, RequestSamples, ResponsesList,
ResponsesSamples, SchemaSample, SideMenu, MethodsList, Method, Warnings, Redoc, SecurityDefinitions,
LoadingBar
LoadingBar, SideMenuItems
];
export { ApiInfo, ApiLogo, JsonSchema, JsonSchemaLazy, ParamsList, RequestSamples, ResponsesList,
ResponsesSamples, SchemaSample, SideMenu, MethodsList, Method, Warnings, Redoc, SecurityDefinitions,
LoadingBar }
LoadingBar, SideMenuItems }

111
lib/services/menu.service.spec.ts
View File

@ -6,7 +6,7 @@ import {
} from '@angular/core/testing';
import { MethodsList } from '../components/MethodsList/methods-list';
import { MenuService } from './menu.service';
import { MenuService, MenuItem } from './menu.service';
import { Hash } from './hash.service';
import { LazyTasksService } from '../shared/components/LazyFor/lazy-for';
import { ScrollService } from './scroll.service';
@ -18,7 +18,7 @@ describe('Menu service', () => {
TestBed.configureTestingModule({ declarations: [ TestAppComponent, MethodsList ] });
});
let menu, hashService, scroll, tasks;
let menu:MenuService, hashService, scroll, tasks;
let specMgr;
beforeEach(inject([SpecManager, Hash, ScrollService, LazyTasksService],
@ -70,22 +70,113 @@ describe('Menu service', () => {
});
it('should select next/prev menu item when scrolled down/up', () => {
scroll.$scrollParent = document.querySelector('#parent');
menu.activeCatIdx.should.be.equal(0);
menu.activeMethodIdx.should.be.equal(-1);
let nextElTop = menu.getRelativeCatOrItem(1).getBoundingClientRect().top;
// enable all items
menu.items.forEach(item => item.ready = true);
scroll.$scrollParent = document.querySelector('#parent');
menu.activeIdx.should.be.equal(-1);
let nextElTop = menu.getEl(1).getBoundingClientRect().top;
scroll.$scrollParent.scrollTop = nextElTop + 1;
//simulate scroll down
spyOn(scroll, 'scrollY').and.returnValue(nextElTop + 10);
menu.scrollUpdate(true);
menu.activeCatIdx.should.be.equal(1);
menu.onScroll(true);
menu.activeIdx.should.be.equal(1);
scroll.scrollY.and.returnValue(nextElTop - 2);
scroll.$scrollParent.scrollTop = nextElTop - 1;
menu.scrollUpdate(false);
menu.activeCatIdx.should.be.equal(0);
menu.onScroll(false);
menu.activeIdx.should.be.equal(0);
});
describe('buildMenu method', () => {
let suitSchema = {
tags: [
{name: 'tag1', description: 'info1', 'x-traitTag': true},
{name: 'tag2', description: 'info2'},
{name: 'tag4', description: 'info2', 'x-displayName': 'Tag Four'}
],
paths: {
test: {
put: {
tags: ['tag1', 'tag3'],
summary: 'test put'
},
get: {
tags: ['tag1', 'tag2'],
summary: 'test get'
},
delete: {
tags: ['tag4'],
summary: 'test delete'
},
// no tags
post: {
summary: 'test post'
}
}
}
};
let items:MenuItem[];
beforeEach(() => {
menu.items = null;
specMgr._schema = suitSchema;
menu.buildMenu();
items = menu.items;
});
it('should return instance of Array', () => {
items.should.be.instanceof(Array);
});
it('should return Array with correct number of items', () => {
// 3 - defined tags, 1 - tag3 and 1 method item for method without tag
items.length.should.be.equal(3 + 1 + 1);
});
it('should append not defined tags to the end of list', () => {
let item = items[3];
item.name.should.be.equal('tag3');
item.items.length.should.be.equal(1);
item.items[0].name.should.be.equal('test put');
});
it('should append method items without tags to the end of list', () => {
let methodItem = items[4];
methodItem.name.should.be.equal('test post');
methodItem.metadata.type.should.be.equal('method');
should.not.exist(methodItem.items);
});
it('should map x-traitTag to empty method list', () => {
let item = items[0];
should.not.exist(item.items);
});
it('methods for tag should contain valid pointer and name', () => {
for (let item of items) {
item.should.be.an.Object();
if (item.items) {
for (let subItem of item.items) {
subItem.should.have.properties(['metadata']);
let pointer = subItem.metadata.pointer;
let methSchema = specMgr.byPointer(pointer);
should.exist(methSchema);
if (methSchema.summary) {
methSchema.summary.should.be.equal(subItem.name);
}
}
}
}
});
it('should use x-displayName to set custom names', () => {
let info = items[2];
info.id.should.be.equal('tag/tag4');
info.name.should.be.equal('Tag Four');
});
});
});

473
lib/services/menu.service.ts
View File

@ -5,97 +5,113 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { ScrollService, INVIEW_POSITION } from './scroll.service';
import { Hash } from './hash.service';
import { SpecManager } from '../utils/spec-manager';
import { SchemaHelper, MenuCategory } from './schema-helper.service';
import { SchemaHelper } from './schema-helper.service';
import { AppStateService } from './app-state.service';
import { LazyTasksService } from '../shared/components/LazyFor/lazy-for';
import { JsonPointer } from '../utils/JsonPointer';
import * as slugify from 'slugify';
const CHANGE = {
NEXT : 1,
BACK : -1,
INITIAL : 0
};
interface TagGroup {
name: string;
tags: string[];
}
export interface MenuItem {
id: string;
name: string;
description?: string;
items?: Array<MenuItem>;
parent?: MenuItem;
active?: boolean;
ready?: boolean;
level?: number;
flatIdx?: number;
metadata?: any;
isGroup?: boolean;
}
@Injectable()
export class MenuService {
changed: EventEmitter<any> = new EventEmitter();
ready: BehaviorSubject<boolean> = new BehaviorSubject(false);
categories: Array<MenuCategory>;
activeCatIdx: number = 0;
activeMethodIdx: number = -1;
items: MenuItem[];
activeIdx: number = -1;
private _flatItems: MenuItem[];
private _hashSubscription: Subscription;
private _scrollSubscription: Subscription;
private _tagsWithMethods: any;
constructor(
private hash:Hash,
private tasks: LazyTasksService,
private scrollService: ScrollService,
private appState: AppStateService,
specMgr:SpecManager
private specMgr:SpecManager
) {
this.hash = hash;
this.categories = SchemaHelper.buildMenuTree(specMgr.schema);
this.buildMenu();
scrollService.scroll.subscribe((evt) => {
this.scrollUpdate(evt.isScrolledDown);
this._scrollSubscription = scrollService.scroll.subscribe((evt) => {
this.onScroll(evt.isScrolledDown);
});
//this.changeActive(CHANGE.INITIAL);
this._hashSubscription = this.hash.value.subscribe((hash) => {
if (hash == undefined) return;
this.setActiveByHash(hash);
if (!this.tasks.empty) {
this.tasks.start(this.activeCatIdx, this.activeMethodIdx, this);
this.scrollService.setStickElement(this.getCurrentMethodEl());
if (hash) this.scrollToActive();
this.appState.stopLoading();
} else {
if (hash) this.scrollToActive();
}
this.onHashChange(hash);
});
}
enableItem(catIdx, methodIdx, skipUpdate = false) {
let cat = this.categories[catIdx];
cat.ready = true;
if (cat.methods.length) cat.methods[methodIdx].ready = true;
let prevCat = this.categories[catIdx - 1];
if (prevCat && !prevCat.ready && (prevCat.virtual || !prevCat.methods.length)) {
this.enableItem(catIdx - 1, -1, true);
get flatItems():MenuItem[] {
if (!this._flatItems) {
this._flatItems = this.flatMenu();
}
return this._flatItems;
}
enableItem(idx) {
let item = this.flatItems[idx];
item.ready = true;
if (item.parent) {
item.parent.ready = true;
idx = item.parent.flatIdx;
}
// check if previous items can be enabled
let prevItem = this.flatItems[idx -= 1];
while(prevItem && (!prevItem.metadata || !prevItem.items)) {
prevItem.ready = true;
prevItem = this.flatItems[idx -= 1];
}
if (skipUpdate) return;
this.changed.next();
}
get activeMethodPtr() {
let cat = this.categories[this.activeCatIdx];
let ptr = null;
if (cat && cat.methods.length) {
let mtd = cat.methods[this.activeMethodIdx];
ptr = mtd && mtd.pointer || null;
}
return ptr;
}
scrollUpdate(isScrolledDown) {
onScroll(isScrolledDown) {
let stable = false;
while(!stable) {
let $activeMethodHost = this.getCurrentMethodEl();
if (!$activeMethodHost) return;
var elementInViewPos = this.scrollService.getElementPos($activeMethodHost);
if(isScrolledDown) {
//&& elementInViewPos === INVIEW_POSITION.BELLOW
let $nextEl = this.getRelativeCatOrItem(1);
let $nextEl = this.getEl(this.activeIdx + 1);
if (!$nextEl) return;
let nextInViewPos = this.scrollService.getElementPos($nextEl, true);
if (elementInViewPos === INVIEW_POSITION.BELLOW && nextInViewPos === INVIEW_POSITION.ABOVE) {
if (nextInViewPos === INVIEW_POSITION.ABOVE) {
stable = this.changeActive(CHANGE.NEXT);
continue;
}
}
let $currentEl = this.getCurrentEl();
if (!$currentEl) return;
var elementInViewPos = this.scrollService.getElementPos($currentEl);
if(!isScrolledDown && elementInViewPos === INVIEW_POSITION.ABOVE ) {
stable = this.changeActive(CHANGE.BACK);
continue;
@ -104,136 +120,291 @@ export class MenuService {
}
}
getRelativeCatOrItem(offset: number = 0) {
let ptr, cat;
cat = this.categories[this.activeCatIdx];
if (cat.methods.length === 0) {
ptr = null;
cat = this.categories[this.activeCatIdx + Math.sign(offset)] || cat;
onHashChange(hash?: string) {
if (hash == undefined) return;
let activated = this.activateByHash(hash);
if (!this.tasks.empty) {
this.tasks.start(this.activeIdx, this);
this.scrollService.setStickElement(this.getCurrentEl());
if (activated) this.scrollToActive();
this.appState.stopLoading();
} else {
let cat = this.categories[this.activeCatIdx];
let idx = this.activeMethodIdx + offset;
if ((idx >= cat.methods.length - 1) || idx < 0) {
cat = this.categories[this.activeCatIdx + Math.sign(offset)] || cat;
idx = offset > 0 ? -1 : cat.methods.length - 1;
if (activated) this.scrollToActive();
}
}
getEl(flatIdx:number):Element {
if (flatIdx < 0) return null;
let currentItem = this.flatItems[flatIdx];
if (!currentItem) return;
if (currentItem.isGroup) currentItem = this.flatItems[flatIdx + 1];
let selector = '';
while(currentItem) {
if (currentItem.id) {
selector = `[section="${currentItem.id}"] ` + selector;
// We only need to go up the chain for methods that
// might have multiple tags. For headers/subheaders
// we need to siply early terminate.
if (!currentItem.metadata) {
break;
}
}
ptr = cat.methods[idx] && cat.methods[idx].pointer;
currentItem = currentItem.parent;
}
return this.getMethodElByPtr(ptr, cat.id);
selector = selector.trim();
return selector ? document.querySelector(selector) : null;
}
getCurrentMethodEl() {
return this.getMethodElByPtr(this.activeMethodPtr,
this.categories[this.activeCatIdx].id);
getCurrentEl():Element {
return this.getEl(this.activeIdx);
}
getMethodElByPtr(ptr, section) {
let selector = ptr ? `[pointer="${ptr}"][section="${section}"]` : `[section="${section}"]`;
return document.querySelector(selector);
deactivate(idx) {
if (idx < 0) return;
let item = this.flatItems[idx];
item.active = false;
while (item.parent) {
item.parent.active = false;
item = item.parent;
}
}
getMethodElByOperId(operationId) {
let selector =`[operation-id="${operationId}"]`;
return document.querySelector(selector);
activate(idx, force = false) {
let item = this.flatItems[idx];
if (!force && item && !item.ready) return;
this.deactivate(this.activeIdx);
this.activeIdx = idx;
if (idx < 0) return;
item.active = true;
let cItem = item;
while (cItem.parent) {
cItem.parent.active = true;
cItem = cItem.parent;
}
this.changed.next(item);
}
activate(catIdx, methodIdx) {
if (catIdx < 0) return;
let menu = this.categories;
menu[this.activeCatIdx].active = false;
if (menu[this.activeCatIdx].methods.length) {
if (this.activeMethodIdx >= 0) {
menu[this.activeCatIdx].methods[this.activeMethodIdx].active = false;
}
}
this.activeCatIdx = catIdx;
this.activeMethodIdx = methodIdx;
menu[catIdx].active = true;
let currentItem;
if (menu[catIdx].methods.length && (methodIdx > -1)) {
currentItem = menu[catIdx].methods[methodIdx];
currentItem.active = true;
}
this.changed.next({cat: menu[catIdx], item: currentItem});
}
_calcActiveIndexes(offset) {
let menu = this.categories;
let catCount = menu.length;
if (!catCount) return [0, -1];
let catLength = menu[this.activeCatIdx].methods.length;
let resMethodIdx = this.activeMethodIdx + offset;
let resCatIdx = this.activeCatIdx;
if (resMethodIdx > catLength - 1) {
resCatIdx++;
resMethodIdx = -1;
}
if (resMethodIdx < -1) {
let prevCatIdx = --resCatIdx;
catLength = menu[Math.max(prevCatIdx, 0)].methods.length;
resMethodIdx = catLength - 1;
}
if (resCatIdx > catCount - 1) {
resCatIdx = catCount - 1;
resMethodIdx = catLength - 1;
}
if (resCatIdx < 0) {
resCatIdx = 0;
resMethodIdx = 0;
}
return [resCatIdx, resMethodIdx];
}
changeActive(offset = 1) {
let [catIdx, methodIdx] = this._calcActiveIndexes(offset);
this.activate(catIdx, methodIdx);
return (methodIdx === 0 && catIdx === 0);
changeActive(offset = 1):boolean {
let noChange = (this.activeIdx <= 0 && offset === -1) ||
(this.activeIdx === this.flatItems.length - 1 && offset === 1);
this.activate(this.activeIdx + offset);
return noChange;
}
scrollToActive() {
this.scrollService.scrollTo(this.getCurrentMethodEl());
let $el = this.getCurrentEl();
if ($el) this.scrollService.scrollTo($el);
}
setActiveByHash(hash) {
if (!hash) {
if (this.categories[0].headless) {
this.activate(0, 0);
}
return;
}
let catIdx, methodIdx;
activateByHash(hash):boolean {
if (!hash) return;
let idx = 0;
hash = hash.substr(1);
let namespace = hash.split('/')[0];
let ptr = decodeURIComponent(hash.substr(namespace.length + 1));
if (namespace === 'section' || namespace === 'tag') {
let sectionId = ptr.split('/')[0];
catIdx = this.categories.findIndex(cat => cat.id === namespace + '/' + sectionId);
let cat = this.categories[catIdx];
ptr = ptr.substr(sectionId.length) || null;
methodIdx = cat.methods.findIndex(method => method.pointer === ptr);
} else {
catIdx = this.categories.findIndex(cat => {
if (!cat.methods.length) return false;
methodIdx = cat.methods.findIndex(method => method.operationId === ptr || method.pointer === ptr);
if (methodIdx >= 0) {
return true;
} else {
return false;
}
let searchId;
if (namespace === 'section') {
searchId = hash;
} else {
searchId = ptr || (namespace + '/' + sectionId);;
}
idx = this.flatItems.findIndex(item => item.id === searchId);
if (idx < 0) this.tryScrollToId(searchId);
} else if (namespace === 'operation') {
idx = this.flatItems.findIndex(item => {
return item.metadata && item.metadata.operationId === ptr;
});
}
this.activate(catIdx, methodIdx);
this.activate(idx, true);
return idx >= 0;
}
tryScrollToId(id) {
let $el = document.querySelector(`[section="${id}"]`);
if ($el) this.scrollService.scrollTo($el);
}
addMarkdownItems() {
let schema = this.specMgr.schema;
for (let header of (<Array<string>>(schema.info && schema.info['x-redoc-markdown-headers'] || []))) {
let id = 'section/' + slugify(header);
let item = {
name: header,
id: id,
items: null
};
item.items = this.getMarkdownSubheaders(item);
this.items.push(item);
}
}
getMarkdownSubheaders(parent: MenuItem):MenuItem[] {
let res = [];
let schema = this.specMgr.schema;
for (let subheader of (<Array<string>>(schema.info && schema.info['x-redoc-markdown-subheaders'] || []))) {
let parts = subheader.split('/');
let header = parts[0];
if (parent.name !== header) {
continue;
}
let name = parts[1];
let id = parent.id + '/' + slugify(name);
let subItem = {
name: name,
id: id,
parent: parent
};
res.push(subItem);
}
return res;
}
getMethodsItems(parent: MenuItem, tag:any):MenuItem[] {
if (!tag.methods || !tag.methods.length) return null;
let res = [];
for (let method of tag.methods) {
let subItem = {
name: SchemaHelper.methodSummary(method),
id: method._pointer,
description: method.description,
metadata: {
type: 'method',
pointer: method._pointer,
operationId: method.operationId
},
parent: parent
};
res.push(subItem);
}
return res;
}
getTagsItems(parent: MenuItem, tagGroup:TagGroup = null):MenuItem[] {
let schema = this.specMgr.schema;
let tags;
if (!tagGroup) {
// all tags
tags = Object.keys(this._tagsWithMethods);
} else {
tags = tagGroup.tags;
}
tags = tags.map(k => {
if (!this._tagsWithMethods[k]) {
console.warn(`Non-existing tag "${k}" is specified in tag group "${tagGroup.name}"`);
return null;
}
this._tagsWithMethods[k].used = true;
return this._tagsWithMethods[k];
});
let res = [];
for (let tag of tags || []) {
if (!tag) continue;
let id = 'tag/' + slugify(tag.name);
let item: MenuItem;
// don't put empty tag into menu, instead put their methods
if (tag.name === '') {
let items = this.getMethodsItems(null, tag);
res.push(...items);
continue;
}
item = {
name: tag['x-displayName'] || tag.name,
id: id,
description: tag.description,
metadata: { type: 'tag' },
parent: parent,
items: null
};
item.items = this.getMethodsItems(item, tag);
res.push(item);
}
return res;
}
getTagGroupsItems(parent: MenuItem, groups: TagGroup[]):MenuItem[] {
let res = [];
for (let group of groups) {
let item;
item = {
name: group.name,
id: null,
description: '',
parent: parent,
isGroup: true,
items: null
};
item.items = this.getTagsItems(item, group);
res.push(item);
}
this.checkAllTagsUsedInGroups();
return res;
}
checkAllTagsUsedInGroups() {
for (let tag of Object.keys(this._tagsWithMethods)) {
if (!this._tagsWithMethods[tag].used) {
console.warn(`Tag "${tag}" is not added to any group`);
}
}
}
buildMenu() {
this._tagsWithMethods = SchemaHelper.getTagsWithMethods(this.specMgr.schema);
this.items = this.items || [];
this.addMarkdownItems();
if (this.specMgr.schema['x-tagGroups']) {
this.items.push(...this.getTagGroupsItems(null, this.specMgr.schema['x-tagGroups']));
} else {
this.items.push(...this.getTagsItems(null));
}
}
flatMenu():MenuItem[] {
let menu = this.items;
let res = [];
let curDepth = 1;
let recursive = (items) => {
for (let item of items) {
res.push(item);
item.depth = item.isGroup ? 0 : curDepth;
item.flatIdx = res.length - 1;
if (item.items) {
if (!item.isGroup) curDepth++;
recursive(item.items);
if (!item.isGroup) curDepth--;
}
}
};
recursive(menu);
return res;
}
destroy() {
this._hashSubscription.unsubscribe();
this._scrollSubscription.unsubscribe();
}
}

94
lib/services/schema-helper.service.spec.ts
View File

@ -3,100 +3,6 @@ import { SchemaHelper } from './schema-helper.service';
import { SpecManager } from '../utils/spec-manager';
describe('Spec Helper', () => {
describe('buildMenuTree method', () => {
let suitSchema = {
tags: [
{name: 'tag1', description: 'info1', 'x-traitTag': true},
{name: 'tag2', description: 'info2'},
{name: 'tag4', description: 'info2', 'x-displayName': 'Tag Four'}
],
paths: {
test: {
put: {
tags: ['tag1', 'tag3'],
summary: 'test put'
},
get: {
tags: ['tag1', 'tag2'],
summary: 'test get'
},
delete: {
tags: ['tag4'],
summary: 'test delete'
},
// no tags
post: {
summary: 'test post'
}
}
}
};
let menuTree;
let specMgr;
beforeAll(() => {
specMgr = new SpecManager();
specMgr._schema = suitSchema;
menuTree = SchemaHelper.buildMenuTree(suitSchema);
});
it('should return instance of Array', () => {
menuTree.should.be.instanceof(Array);
});
it('should return Array with correct number of items', () => {
//3 - defined tags, 1 - tag3 and 1 [other] tag for no-tags method
menuTree.length.should.be.equal(3 + 1 + 1);
});
it('should append not defined tags to the end of list', () => {
let info = menuTree[3];
info.name.should.be.equal('tag3');
info.methods.length.should.be.equal(1);
info.methods[0].summary.should.be.equal('test put');
});
it('should append methods without tags to [other] tag', () => {
let info = menuTree[4];
info.name.should.be.equal('');
info.methods.length.should.be.equal(1);
info.methods[0].summary.should.be.equal('test post');
});
it('should map x-traitTag to empty section', () => {
let info = menuTree[0];
info.empty.should.be.true();
});
it('should map x-traitTag to empty methods list', () => {
let info = menuTree[0];
info.methods.should.be.empty();
});
it('methods for tag should contain valid pointer and summary', () => {
for (let entr of menuTree) {
let info = entr;
info.should.be.an.Object();
info.methods.should.be.an.Array();
for (let methodInfo of info.methods) {
methodInfo.should.have.properties(['pointer', 'summary']);
let methSchema = specMgr.byPointer(methodInfo.pointer);
expect(methSchema).not.toBeNull();
if (methSchema.summary) {
methSchema.summary.should.be.equal(methodInfo.summary);
}
}
}
});
it('should use x-displayName to set custom names', () => {
let info = menuTree[2];
info.id.should.be.equal('tag/tag4');
info.name.should.be.equal('Tag Four');
});
});
describe('injectors', () => {
it('should autodetect type if not-specified', () => {
spyOn(console, 'warn').and.stub();

91
lib/services/schema-helper.service.ts
View File

@ -9,28 +9,6 @@ interface PropertyPreprocessOptions {
skipReadOnly?: boolean;
}
export interface MenuMethod {
active: boolean;
summary: string;
tag: string;
pointer: string;
operationId: string;
ready: boolean;
}
export interface MenuCategory {
name: string;
id: string;
active?: boolean;
methods?: Array<MenuMethod>;
description?: string;
empty?: string;
virtual?: boolean;
ready: boolean;
headless: boolean;
}
// global var for this module
var specMgrInstance;
@ -300,30 +278,11 @@ export class SchemaHelper {
}
}
static buildMenuTree(schema):Array<MenuCategory> {
var catIdx = 0;
let tag2MethodMapping = {};
for (let header of (<Array<string>>(schema.info && schema.info['x-redoc-markdown-headers'] || []))) {
let id = 'section/' + slugify(header);
tag2MethodMapping[id] = {
name: header, id: id, virtual: true, methods: [], idx: catIdx
};
catIdx++;
}
static getTagsWithMethods(schema) {
let tags = {};
for (let tag of schema.tags || []) {
let id = 'tag/' + slugify(tag.name);
tag2MethodMapping[id] = {
name: tag['x-displayName'] || tag.name,
id: id,
description: tag.description,
headless: tag.name === '',
empty: !!tag['x-traitTag'],
methods: [],
idx: catIdx
};
catIdx++;
tags[tag.name] = tag;
tag.methods = [];
}
let paths = schema.paths;
@ -331,39 +290,29 @@ export class SchemaHelper {
let methods = Object.keys(paths[path]).filter((k) => swaggerMethods.has(k));
for (let method of methods) {
let methodInfo = paths[path][method];
let tags = methodInfo.tags;
let methodTags = methodInfo.tags;
if (!tags || !tags.length) {
tags = [''];
// empty tag
if (!(methodTags && methodTags.length)) {
methodTags = [''];
}
let methodPointer = JsonPointer.compile(['paths', path, method]);
let methodSummary = SchemaHelper.methodSummary(methodInfo);
for (let tag of tags) {
let id = 'tag/' + slugify(tag);
let tagDetails = tag2MethodMapping[id];
if (!tagDetails) {
tagDetails = {
name: tag,
id: id,
headless: tag === '',
idx: catIdx
for (let tagName of methodTags) {
let tag = tags[tagName];
if (!tag) {
tag = {
name: tagName,
};
tag2MethodMapping[id] = tagDetails;
catIdx++;
tags[tagName] = tag;
}
if (tagDetails.empty) continue;
if (!tagDetails.methods) tagDetails.methods = [];
tagDetails.methods.push({
pointer: methodPointer,
summary: methodSummary,
operationId: methodInfo.operationId,
tag: tag,
idx: tagDetails.methods.length,
catIdx: tagDetails.idx
});
if (tag['x-traitTag']) continue;
if (!tag.methods) tag.methods = [];
tag.methods.push(methodInfo);
methodInfo._pointer = methodPointer;
}
}
}
return Object.keys(tag2MethodMapping).map(tag => tag2MethodMapping[tag]);
return tags;
}
}

38
lib/shared/components/LazyFor/lazy-for.ts
View File

@ -17,7 +17,7 @@ import { OptionsService } from '../../../services/options.service';
import { isSafari } from '../../../utils/helpers';
export class LazyForRow {
constructor(public $implicit: any, public index: number, public show: boolean) {}
constructor(public $implicit: any, public index: number, public ready: boolean) {}
get first(): boolean { return this.index === 0; }
@ -51,8 +51,8 @@ export class LazyTasksService {
}
addTasks(tasks:any[], callback:Function) {
tasks.forEach((task) => {
let taskCopy = Object.assign({_callback: callback}, task);
tasks.forEach((task, idx) => {
let taskCopy = Object.assign({_callback: callback, idx: idx}, task);
this._tasks.push(taskCopy);
});
}
@ -62,7 +62,7 @@ export class LazyTasksService {
if (!task) return;
task._callback(task.idx, true);
this._current++;
this.menuService.enableItem(task.catIdx, task.idx);
this.menuService.enableItem(task.flatIdx);
this.loadProgress.next(this._current / this._tasks.length * 100);
}
@ -72,39 +72,30 @@ export class LazyTasksService {
if (!task) return;
task._callback(task.idx, false).then(() => {
this._current++;
this.menuService.enableItem(task.catIdx, task.idx);
this.menuService.enableItem(task.flatIdx);
setTimeout(()=> this.nextTask());
this.loadProgress.next(this._current / this._tasks.length * 100);
}).catch(err => console.error(err));
});
}
sortTasks(catIdx, metIdx) {
sortTasks(center) {
let idxMap = {};
this._tasks.forEach((task, idx) => {
idxMap[task.catIdx + '_' + task.idx] = idx;
});
metIdx = metIdx < 0 ? 0 : metIdx;
let destIdx = idxMap[catIdx + '_' + metIdx] || 0;
this._tasks.sort((a, b) => {
let aIdx = idxMap[a.catIdx + '_' + a.idx];
let bIdx = idxMap[b.catIdx + '_' + b.idx];
return Math.abs(aIdx - destIdx) - Math.abs(bIdx - destIdx);
return Math.abs(a.flatIdx - center) - Math.abs(b.flatIdx - center);
})
}
start(catIdx, metIdx, menuService) {
start(idx, menuService) {
this.menuService = menuService;
let syncCount = 5;
// I know this is bad practice to detect browsers but there is an issue on Safari only
// I know this is a bad practice to detect browsers but there is an issue in Safari only
// http://stackoverflow.com/questions/40692365/maintaining-scroll-position-while-inserting-elements-above-glitching-only-in-sa
if (isSafari && this.optionsService.options.$scrollParent === window) {
syncCount = (metIdx >= 0) ?
this._tasks.findIndex(task => (task.catIdx === catIdx) && (task.idx === metIdx))
: this._tasks.findIndex(task => task.catIdx === catIdx);
syncCount = this._tasks.findIndex(task => task.flatIdx === idx);
syncCount += 1;
} else {
this.sortTasks(catIdx, metIdx);
this.sortTasks(idx);
}
if (this.allSync) syncCount = this._tasks.length;
for (var i = this._current; i < syncCount; i++) {
@ -141,8 +132,8 @@ export class LazyFor {
}
nextIteration(idx: number, sync: boolean):Promise<void> {
const view = this._viewContainer.createEmbeddedView(
this._template, new LazyForRow(this.lazyForOf[idx], idx, sync), idx < this.prevIdx ? 0 : undefined);
const view = this._viewContainer.createEmbeddedView(this._template,
new LazyForRow(this.lazyForOf[idx], idx, sync), idx < this.prevIdx ? 0 : undefined);
this.prevIdx = idx;
view.context.index = idx;
(<any>view as ChangeDetectorRef).markForCheck();
@ -154,7 +145,7 @@ export class LazyFor {
requestAnimationFrame(() => {
this.scroll.saveScroll();
view.context.show = true;
view.context.ready = true;
(<any>view as ChangeDetectorRef).markForCheck();
(<any>view as ChangeDetectorRef).detectChanges();
@ -165,6 +156,7 @@ export class LazyFor {
}
ngOnInit() {
if (!this.lazyForOf) return;
this.lazyTasks.addTasks(this.lazyForOf, this.nextIteration.bind(this))
}
}

1
lib/shared/components/StickySidebar/sticky-sidebar.ts
View File

@ -84,7 +84,6 @@ export class StickySidebar implements OnInit, OnDestroy {
this.$redocEl = this.$element.offsetParent.parentNode || DOM.defaultDoc().body;
this.bind();
requestAnimationFrame(() => this.updatePosition());
//this.updatePosition()
}
ngOnDestroy() {

22
lib/utils/md-renderer.ts
View File

@ -22,6 +22,8 @@ const md = new Remarkable({
@Injectable()
export class MdRenderer {
public firstLevelHeadings: string[] = [];
public secondLevelHeadings: string[] = [];
public currentHeading: string = null;
private _origRules:any = {};
private _preProcessors:Function[] = [];
@ -44,19 +46,27 @@ export class MdRenderer {
}
headingOpenRule(tokens, idx) {
if (tokens[idx].hLevel !== 1 ) {
if (tokens[idx].hLevel > 2 ) {
return this._origRules.open(tokens, idx);
} else {
let content = tokens[idx + 1].content;
this.firstLevelHeadings.push(content);
let contentSlug = slugify(content);
return `<h${tokens[idx].hLevel} section="section/${contentSlug}">` +
`<a class="share-link" href="#section/${contentSlug}"></a>`;
if (tokens[idx].hLevel === 1 ) {
this.firstLevelHeadings.push(content);
this.currentHeading = content;
let contentSlug = slugify(content);
return `<h${tokens[idx].hLevel} section="section/${contentSlug}">` +
`<a class="share-link" href="#section/${contentSlug}"></a>`;
} else if (tokens[idx].hLevel === 2 ) {
this.secondLevelHeadings.push(this.currentHeading + `/` + content);
let contentSlug = slugify(this.currentHeading) + `/` + slugify(content);
return `<h${tokens[idx].hLevel} section="section/${contentSlug}">` +
`<a class="share-link" href="#section/${contentSlug}"></a>`;
}
}
}
headingCloseRule(tokens, idx) {
if (tokens[idx].hLevel !== 1 ) {
if (tokens[idx].hLevel > 2 ) {
return this._origRules.close(tokens, idx);
} else {
return `</h${tokens[idx].hLevel}>\n`;

1
lib/utils/spec-manager.ts
View File

@ -76,6 +76,7 @@ export class SpecManager {
}
this._schema.info['x-redoc-html-description'] = mdRender.renderMd(this._schema.info.description);
this._schema.info['x-redoc-markdown-headers'] = mdRender.firstLevelHeadings;
this._schema.info['x-redoc-markdown-subheaders'] = mdRender.secondLevelHeadings;
}
get schema() {

4
tests/e2e/index.html
View File

@ -4,8 +4,8 @@
<meta charset="UTF-8">
<title>ReDoc</title>
</head>
<body>
<redoc>
<body style="margin:0">
<redoc >
Loading...
</redoc>

8
tests/e2e/redoc.e2e.js
View File

@ -56,16 +56,16 @@ describe('Scroll sync', () => {
it('should update active menu entries on page scroll forwards', () => {
scrollToEl('[section="tag/store"]').then(() => {
expect($('.menu-cat-header.active').getInnerHtml()).toContain('store');
expect($('.menu-item.active > .menu-item-header').getInnerHtml()).toContain('store');
expect($('.selected-tag').getInnerHtml()).toContain('store');
});
});
it('should update active menu entries on page scroll backwards', () => {
scrollToEl('[operation-id="getPetById"]').then(() => {
expect($('.menu-cat-header.active').getInnerHtml()).toContain('pet');
expect($('.menu-item.menu-item-depth-1.active .menu-item-header').getInnerHtml()).toContain('pet');
expect($('.selected-tag').getInnerHtml()).toContain('pet');
expect($('.menu-cat li.active').getInnerHtml()).toContain('Find pet by ID');
expect($('.menu-item.menu-item-depth-2.active .menu-item-header').getInnerHtml()).toContain('Find pet by ID');
expect($('.selected-endpoint').getInnerHtml()).toContain('Find pet by ID');
});
});
@ -85,7 +85,7 @@ describe('Language tabs sync', () => {
// check if correct item
expect($item.getText()).toContain('PHP');
var EC = protractor.ExpectedConditions;
browser.wait(EC.elementToBeClickable($item), 2000);
browser.wait(EC.elementToBeClickable($item), 5000);
$item.click().then(() => {
expect($('[operation-id="updatePet"] li.active').getText()).toContain('PHP');
});

4
tests/helpers.ts
View File

@ -1,7 +1,7 @@
'use strict';
import {By} from '@angular/platform-browser';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import { By } from '@angular/platform-browser';
import { getDOM } from '@angular/platform-browser/src/dom/dom_adapter';
/** Gets a child DebugElement by tag name. */
export function getChildDebugElement(parent, tagName) {