Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-25 18:13:44 +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"> <link rel="stylesheet" href="main.css">
</head> </head>
<body> <body>
<side-menu>
</side-menu>
<!-- The wrapper component --> <!-- The wrapper component -->
<redoc> <redoc>
Loading... Loading...

19
demo/main.css
View File

@ -1,6 +1,23 @@
body { body {
font-family: Verdana, Geneva, sans-serif; font-family: Verdana, Geneva, sans-serif;
font-size: 14px; font-size: 14px;
padding: 10px 20px;
color: #333; 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;
} }

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

7
lib/index.js
View File

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