Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-22 00:26:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added side-menu to demo page

Browse Source
This commit is contained in:
Roman Gotsiy 2015-10-15 20:06:33 +03:00
parent 72795c6431
commit cb16c5d8d3
4 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/index.html
View File

@ -5,6 +5,8 @@
<link rel="stylesheet" href="main.css">
</head>
<body>
<side-menu>
</side-menu>
<!-- The wrapper component -->
<redoc>
Loading...

19
demo/main.css
View File

@ -1,6 +1,23 @@
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding: 10px 20px;
color: #333;
margin: 0;
}
side-menu, redoc {
display: block;
padding: 10px 20px;
box-sizing: border-box;
}
side-menu {
position: fixed;
width: 260px;
height: 100%;
overflow-y: auto;
}
redoc {
margin-left: 260px;
}

21
lib/components/SideMenu/side-menu.js
View File

@ -7,6 +7,12 @@ import {JsonPointer} from '../../utils/JsonPointer';
import {SideMenuCat} from '../SideMenuCat/side-menu-cat';
import {NgZone} from 'angular2/angular2';
const CHANGE = {
NEXT : 1,
BACK : -1,
HOLD : 0
};
@RedocComponent({
selector: 'side-menu',
bindings: [SchemaManager],
@ -26,7 +32,7 @@ export class SideMenu extends BaseComponent {
this.prevOffsetY = null;
}
changeActiveMethod(offset) {
_updateActiveMethod(offset) {
let menu = this.data.menu;
let catCount = menu.length;
let catLength = menu[this.activeCatIdx].methods.length;
@ -50,12 +56,13 @@ export class SideMenu extends BaseComponent {
this.activeMethodIdx = 0;
}
}
activateNext(offset = 1) {
changeActive(offset = 1) {
let menu = this.data.menu;
menu[this.activeCatIdx].methods[this.activeMethodIdx].active = false;
menu[this.activeCatIdx].active = false;
this.changeActiveMethod(offset);
this._updateActiveMethod(offset);
menu[this.activeCatIdx].active = true;
let currentItem = menu[this.activeCatIdx].methods[this.activeMethodIdx];
@ -71,11 +78,11 @@ export class SideMenu extends BaseComponent {
if (!activeMethodHost) return;
if(isScrolledDown && activeMethodHost.getBoundingClientRect().bottom <= 0 ) {
this.activateNext(1);
this.changeActive(CHANGE.NEXT);
return;
}
if(!isScrolledDown && activeMethodHost.getBoundingClientRect().top > 0 ) {
this.activateNext(-1);
this.changeActive(CHANGE.BACK);
return;
}
}
@ -90,7 +97,7 @@ export class SideMenu extends BaseComponent {
this.data.menu = Array.from(this.buildMenuTree().entries()).map(
el => ({name: el[0], methods: el[1]})
);
this.activateNext(0);
this.changeActive(CHANGE.HOLD);
}
buildMenuTree() {

7
lib/index.js
View File

@ -2,7 +2,7 @@
import 'reflect-metadata';
import { bootstrap } from 'angular2/angular2';
import { Redoc } from './components/Redoc/redoc';
import { Redoc, SideMenu } from './components/index';
import { SchemaManager} from './utils/SchemaManager';
export * from './components/index';
@ -12,8 +12,11 @@ export function init(schemaUrl) {
() => {
return bootstrap(Redoc);
}
).then(
).then(() => bootstrap(SideMenu))
.then(
() => console.log('ReDoc bootstrapped!'),
error => console.log(error)
);
}
window.Redoc = Redoc;