redoc/lib/components/SideMenu/side-menu.js

148 lines
3.9 KiB
JavaScript
Raw Normal View History

2015-10-15 20:06:16 +03:00
'use strict';
import {RedocComponent, BaseComponent} from '../base';
2015-10-27 20:44:08 +03:00
import SchemaManager from '../../utils/SchemaManager';
import SideMenuCat from '../SideMenuCat/side-menu-cat';
2015-10-15 20:06:16 +03:00
import {NgZone} from 'angular2/angular2';
2015-10-15 20:06:33 +03:00
const CHANGE = {
NEXT : 1,
BACK : -1,
INITIAL : 0
2015-10-15 20:06:33 +03:00
};
2015-10-15 20:06:16 +03:00
@RedocComponent({
selector: 'side-menu',
2015-10-17 21:56:24 +03:00
providers: [SchemaManager],
2015-10-15 20:06:16 +03:00
templateUrl: './lib/components/SideMenu/side-menu.html',
2015-10-27 20:44:08 +03:00
styleUrls: ['./lib/components/SideMenu/side-menu.css'],
2015-10-15 20:06:16 +03:00
directives: [SideMenuCat]
})
2015-10-27 20:44:08 +03:00
export default class SideMenu extends BaseComponent {
2015-10-15 20:06:16 +03:00
constructor(schemaMgr, zone) {
super(schemaMgr);
this.zone = zone;
2015-10-15 21:35:05 +03:00
// for some reason constructor is not run inside zone
// as workaround running it manually
2015-10-15 20:06:16 +03:00
this.zone.run(() => {
this.bindScroll();
});
this.activeCatIdx = 0;
2015-10-30 11:26:23 +03:00
this.activeMethodIdx = -1;
2015-10-15 20:06:16 +03:00
this.prevOffsetY = null;
}
2015-10-15 21:35:05 +03:00
bindScroll() {
this.prevOffsetY = window.scrollY;
window.addEventListener('scroll', () => this.scrollHandler());
}
activateAndScroll(idx, methodIdx) {
this.activate(idx, methodIdx);
this.scrollToActive();
}
scrollToActive() {
2015-10-30 11:26:23 +03:00
let subjRect = this.getMethodEl().getBoundingClientRect();
let offset = window.scrollY + subjRect.top;
window.scrollTo(0, offset);
2015-10-15 21:35:05 +03:00
}
activate(catIdx, methodIdx) {
let menu = this.data.menu;
menu[this.activeCatIdx].active = false;
2015-10-30 11:26:23 +03:00
if (menu[this.activeCatIdx].methods.length) {
if (this.activeMethodIdx >= 0) {
menu[this.activeCatIdx].methods[this.activeMethodIdx].active = false;
}
}
2015-10-15 21:35:05 +03:00
this.activeCatIdx = catIdx;
this.activeMethodIdx = methodIdx;
menu[catIdx].active = true;
2015-10-30 11:26:23 +03:00
this.activeMethodPtr = null;
if (menu[catIdx].methods.length && (methodIdx > -1)) {
let currentItem = menu[catIdx].methods[methodIdx];
currentItem.active = true;
this.activeMethodPtr = currentItem.pointer;
}
2015-10-15 21:35:05 +03:00
}
_calcActiveIndexes(offset) {
2015-10-15 20:06:16 +03:00
let menu = this.data.menu;
let catCount = menu.length;
let catLength = menu[this.activeCatIdx].methods.length;
2015-10-15 21:35:05 +03:00
let resMethodIdx = this.activeMethodIdx + offset;
let resCatIdx = this.activeCatIdx;
if (resMethodIdx > catLength - 1) {
resCatIdx++;
2015-10-30 11:26:23 +03:00
resMethodIdx = -1;
2015-10-15 20:06:16 +03:00
}
2015-10-30 11:26:23 +03:00
if (resMethodIdx < -1) {
2015-10-15 21:35:05 +03:00
let prevCatIdx = --resCatIdx;
2015-10-15 20:06:16 +03:00
catLength = menu[Math.max(prevCatIdx, 0)].methods.length;
2015-10-15 21:35:05 +03:00
resMethodIdx = catLength - 1;
2015-10-15 20:06:16 +03:00
}
2015-10-15 21:35:05 +03:00
if (resCatIdx > catCount - 1) {
resCatIdx = catCount - 1;
resMethodIdx = catLength - 1;
2015-10-15 20:06:16 +03:00
}
2015-10-15 21:35:05 +03:00
if (resCatIdx < 0) {
resCatIdx = 0;
resMethodIdx = 0;
2015-10-15 20:06:16 +03:00
}
2015-10-15 21:35:05 +03:00
return [resCatIdx, resMethodIdx];
2015-10-15 20:06:16 +03:00
}
2015-10-15 20:06:33 +03:00
changeActive(offset = 1) {
2015-10-15 21:35:05 +03:00
let [catIdx, methodIdx] = this._calcActiveIndexes(offset);
this.activate(catIdx, methodIdx);
2015-10-30 12:44:40 +03:00
return (methodIdx === 0 && catIdx === 0);
2015-10-15 21:35:05 +03:00
}
2015-10-15 20:06:16 +03:00
2015-10-15 21:35:05 +03:00
getMethodEl() {
let ptr = this.activeMethodPtr;
let tag = this.data.menu[this.activeCatIdx].name;
2015-10-30 11:26:23 +03:00
let selector = ptr ? `[pointer="${ptr}"][tag="${tag}"]` : `[tag="${tag}"]`;
return document.querySelector(selector);
2015-10-15 20:06:16 +03:00
}
scrollHandler() {
let isScrolledDown = (window.scrollY - this.prevOffsetY > 0);
this.prevOffsetY = window.scrollY;
2015-10-30 12:44:40 +03:00
let stable = false;
while(!stable) {
let activeMethodHost = this.getMethodEl();
if (!activeMethodHost) return;
if(isScrolledDown && activeMethodHost.getBoundingClientRect().bottom <= 0 ) {
stable = this.changeActive(CHANGE.NEXT);
continue;
}
if(!isScrolledDown && Math.floor(activeMethodHost.getBoundingClientRect().top) > 0 ) {
stable = this.changeActive(CHANGE.BACK);
continue;
}
stable = true;
2015-10-15 20:06:16 +03:00
}
}
prepareModel() {
this.data = {};
this.data.menu = Array.from(this.schemaMgr.buildMenuTree().entries()).map(
el => ({name: el[0], description: el[1].description, methods: el[1].methods})
2015-10-15 20:06:16 +03:00
);
}
init() {
this.changeActive(CHANGE.INITIAL);
2015-10-15 20:06:16 +03:00
}
}
2015-10-27 20:44:08 +03:00
SideMenu.parameters = SideMenu.parameters.concat([NgZone]);