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

255 lines
7.6 KiB
JavaScript
Raw Normal View History

2015-10-15 20:06:16 +03:00
'use strict';
2016-03-27 20:17:28 +03:00
import {ChangeDetectorRef, ChangeDetectionStrategy, ElementRef} from 'angular2/core';
2015-12-26 20:44:39 +03:00
import {document} from 'angular2/src/facade/browser';
import {BrowserDomAdapter} from 'angular2/platform/browser';
2015-12-19 20:26:23 +03:00
import {global} from 'angular2/src/facade/lang';
import {RedocComponent, BaseComponent, SchemaManager} from '../base';
import {redocEvents} from '../../events';
import OptionsManager from '../../options';
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-11-27 00:30:13 +03:00
const INVIEW_POSITION = {
ABOVE : 1,
BELLOW: -1,
INVIEW: 0
};
2015-10-15 20:06:16 +03:00
@RedocComponent({
selector: 'side-menu',
templateUrl: './lib/components/SideMenu/side-menu.html',
2015-11-29 13:47:42 +03:00
styleUrls: ['./lib/components/SideMenu/side-menu.css'],
changeDetection: ChangeDetectionStrategy.Default
2015-10-15 20:06:16 +03:00
})
@Reflect.metadata('parameters', [[SchemaManager], [ElementRef],
2016-03-27 20:17:28 +03:00
[BrowserDomAdapter], [ChangeDetectorRef], [OptionsManager]])
2015-10-27 20:44:08 +03:00
export default class SideMenu extends BaseComponent {
2016-03-27 20:17:28 +03:00
constructor(schemaMgr, elementRef, dom, changeDetectorRef, optionsMgr) {
2015-10-15 20:06:16 +03:00
super(schemaMgr);
this.$element = elementRef.nativeElement;
2016-03-27 20:17:28 +03:00
this.changeDetector = changeDetectorRef;
this.dom = dom;
this.options = optionsMgr.options;
this.$scrollParent = this.options.$scrollParent;
2016-03-27 20:17:28 +03:00
this.bindEvents();
2015-10-15 20:06:16 +03:00
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-11-27 01:43:01 +03:00
redocEvents.bootstrapped.subscribe(() => this.hashScroll());
2016-01-21 18:26:54 +03:00
this.activeCatCaption = '';
this.activeItemCaption = '';
2015-11-27 01:43:01 +03:00
}
scrollY() {
return (this.$scrollParent.pageYOffset != null) ? this.$scrollParent.pageYOffset : this.$scrollParent.scrollTop;
}
hashScroll(evt) {
let hash = this.dom.getLocation().hash;
2015-11-27 01:43:01 +03:00
if (!hash) return;
let $el;
2015-11-27 01:43:01 +03:00
hash = hash.substr(1);
2016-02-07 17:10:32 +03:00
let namespace = hash.split('/')[0];
2016-03-09 21:44:20 +03:00
let ptr = decodeURIComponent(hash.substr(namespace.length + 1));
2016-02-07 17:10:32 +03:00
if (namespace === 'operation') {
$el = this.getMethodElByOperId(ptr);
2016-02-07 17:10:32 +03:00
} else if (namespace === 'tag') {
let tag = ptr.split('/')[0];
ptr = ptr.substr(tag.length);
$el = this.getMethodElByPtr(ptr, tag);
2016-02-07 17:10:32 +03:00
}
if ($el) this.scrollTo($el);
if (evt) evt.preventDefault();
2015-10-15 20:06:16 +03:00
}
bindEvents() {
this.prevOffsetY = this.scrollY();
2016-01-21 18:26:54 +03:00
//decorate option.scrollYOffset to account mobile nav
this.scrollYOffset = () => {
let mobileNavOffset = this.$mobileNav.clientHeight;
return this.options.scrollYOffset() + mobileNavOffset;
2016-01-21 18:26:54 +03:00
};
2015-12-21 22:39:27 +03:00
this._cancel = {};
this._cancel.scroll = this.dom.onAndCancel(this.$scrollParent, 'scroll', () => { this.scrollHandler(); });
this._cancel.hash = this.dom.onAndCancel(global, 'hashchange', evt => this.hashScroll(evt));
2015-12-21 22:39:27 +03:00
}
destroy() {
this._cancel.scroll();
this._cancel.hash();
2015-10-15 21:35:05 +03:00
}
activateAndScroll(idx, methodIdx) {
2016-01-21 18:26:54 +03:00
if (this.mobileMode()) {
this.toggleMobileNav();
}
2015-10-15 21:35:05 +03:00
this.activate(idx, methodIdx);
this.scrollToActive();
}
scrollTo($el) {
2015-12-21 22:39:27 +03:00
// TODO: rewrite this to use offsetTop as more reliable solution
let subjRect = $el.getBoundingClientRect();
let offset = this.scrollY() + subjRect.top - this.scrollYOffset() + 1;
if (this.$scrollParent.scrollTo) {
this.$scrollParent.scrollTo(0, offset);
} else {
this.$scrollParent.scrollTop = offset;
}
2015-10-15 21:35:05 +03:00
}
2015-11-27 01:43:01 +03:00
scrollToActive() {
this.scrollTo(this.getCurrentMethodEl());
}
2015-10-15 21:35:05 +03:00
activate(catIdx, methodIdx) {
let menu = this.data.menu;
2016-01-21 18:26:54 +03:00
this.activeCatCaption = '';
this.activeItemCaption = '';
2015-10-15 21:35:05 +03:00
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;
2016-01-21 18:26:54 +03:00
this.activeCatCaption = menu[catIdx].name;
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;
2016-01-21 18:26:54 +03:00
this.activeItemCaption = currentItem.summary;
2015-10-30 11:26:23 +03:00
}
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
2016-02-07 17:10:32 +03:00
getMethodElByPtr(ptr, tag) {
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
}
2016-02-07 17:10:32 +03:00
getMethodElByOperId(operationId) {
let selector =`[operation-id="${operationId}"]`;
return document.querySelector(selector);
}
2015-11-27 01:43:01 +03:00
getCurrentMethodEl() {
2016-02-07 17:10:32 +03:00
return this.getMethodElByPtr(this.activeMethodPtr, this.data.menu[this.activeCatIdx].name);
2015-11-27 01:43:01 +03:00
}
2015-11-27 00:30:13 +03:00
/* returns 1 if element if above the view, 0 if in view and -1 below the view */
getElementInViewPos($el) {
if (Math.floor($el.getBoundingClientRect().top) > this.scrollYOffset()) {
2015-11-27 00:30:13 +03:00
return INVIEW_POSITION.ABOVE;
}
if ($el.getBoundingClientRect().bottom <= this.scrollYOffset()) {
2015-11-27 00:30:13 +03:00
return INVIEW_POSITION.BELLOW;
}
return INVIEW_POSITION.INVIEW;
}
2015-10-15 20:06:16 +03:00
scrollHandler() {
let isScrolledDown = (this.scrollY() - this.prevOffsetY > 0);
this.prevOffsetY = this.scrollY();
2015-10-30 12:44:40 +03:00
let stable = false;
while(!stable) {
let $activeMethodHost = this.getCurrentMethodEl();
if (!$activeMethodHost) return;
var elementInViewPos = this.getElementInViewPos($activeMethodHost);
2015-11-27 00:30:13 +03:00
if(isScrolledDown && elementInViewPos === INVIEW_POSITION.BELLOW) {
2015-10-30 12:44:40 +03:00
stable = this.changeActive(CHANGE.NEXT);
continue;
}
2015-11-27 00:30:13 +03:00
if(!isScrolledDown && elementInViewPos === INVIEW_POSITION.ABOVE ) {
2015-10-30 12:44:40 +03:00
stable = this.changeActive(CHANGE.BACK);
continue;
}
stable = true;
2015-10-15 20:06:16 +03:00
}
2016-03-27 20:17:28 +03:00
this.changeDetector.detectChanges();
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
);
}
2016-01-21 18:26:54 +03:00
mobileMode() {
return this.$mobileNav.clientHeight > 0;
2016-01-21 18:26:54 +03:00
}
toggleMobileNav() {
let dom = this.dom;
let $overflowParent = (this.$scrollParent === global) ? dom.defaultDoc().body : this.$scrollParent;
if (dom.hasStyle(this.$resourcesNav, 'height')) {
dom.removeStyle(this.$resourcesNav, 'height');
dom.removeStyle($overflowParent, 'overflow-y');
2016-01-21 18:26:54 +03:00
} else {
let viewportHeight = this.$scrollParent.innerHeight || this.$scrollParent.clientHeight;
let height = viewportHeight - this.$mobileNav.getBoundingClientRect().bottom;
dom.setStyle($overflowParent, 'overflow-y', 'hidden');
dom.setStyle(this.$resourcesNav, 'height', height + 'px');
2016-01-21 18:26:54 +03:00
}
}
init() {
this.$mobileNav = this.dom.querySelector(this.$element, '.mobile-nav');
this.$resourcesNav = this.dom.querySelector(this.$element, '#resources-nav');
this.changeActive(CHANGE.INITIAL);
2015-10-15 20:06:16 +03:00
}
}