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

109 lines
3.3 KiB
TypeScript
Raw Normal View History

2015-10-15 20:06:16 +03:00
'use strict';
2016-05-10 09:44:44 +03:00
import { ElementRef, ChangeDetectorRef } from '@angular/core';
2016-05-06 00:48:41 +03:00
import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
import { global } from '@angular/core/src/facade/lang';
2016-06-19 17:41:04 +03:00
import { trigger, state, animate, transition, style } from '@angular/core';
2016-06-22 21:17:48 +03:00
import { RedocComponent, BaseComponent, SpecManager } from '../base';
2016-05-07 10:54:44 +03:00
import { ScrollService, Hash, MenuService, OptionsService } from '../../services/index';
2015-11-27 00:30:13 +03:00
2015-10-15 20:06:16 +03:00
@RedocComponent({
selector: 'side-menu',
templateUrl: './side-menu.html',
2016-05-07 10:54:44 +03:00
providers: [ScrollService, MenuService, Hash],
styleUrls: ['./side-menu.css'],
2016-05-18 16:59:54 +03:00
detect: true,
2016-06-19 17:41:04 +03:00
onPushOnly: false,
animations: [
trigger('itemAnimation', [
state('collapsed, void',
style({ height: '0px' })),
state('expanded',
style({ height: '*' })),
transition('collapsed <=> expanded', [
2016-07-10 14:46:24 +03:00
animate('200ms ease')
2016-06-19 17:41:04 +03:00
])
])
],
2015-10-15 20:06:16 +03:00
})
2016-05-06 00:48:41 +03:00
export class SideMenu extends BaseComponent {
$element: any;
$mobileNav: any;
$resourcesNav: any;
$scrollParent: any;
activeCatCaption: string;
activeItemCaption: string;
options: any;
data: any;
constructor(specMgr:SpecManager, elementRef:ElementRef, private dom:BrowserDomAdapter,
2016-06-13 20:54:24 +03:00
private scrollService:ScrollService, private menuService:MenuService, private hash:Hash,
optionsService:OptionsService, private detectorRef:ChangeDetectorRef) {
super(specMgr);
this.$element = elementRef.nativeElement;
2016-01-21 18:26:54 +03:00
this.activeCatCaption = '';
this.activeItemCaption = '';
2015-11-27 01:43:01 +03:00
2016-05-07 10:54:44 +03:00
this.options = optionsService.options;
2016-05-05 11:05:02 +03:00
2016-05-17 19:38:12 +03:00
this.menuService.changed.subscribe((evt) => this.changed(evt));
}
2016-05-17 19:38:12 +03:00
changed({cat, item}) {
2016-05-07 10:54:44 +03:00
this.activeCatCaption = cat.name || '';
this.activeItemCaption = item && item.summary || '';
2016-05-10 09:44:44 +03:00
//safari doesn't update bindings if not run changeDetector manually :(
this.detectorRef.detectChanges();
2015-10-15 21:35:05 +03:00
}
activateAndScroll(idx, methodIdx) {
2016-01-21 18:26:54 +03:00
if (this.mobileMode()) {
this.toggleMobileNav();
}
2016-05-07 10:54:44 +03:00
this.menuService.activate(idx, methodIdx);
this.menuService.scrollToActive();
2016-02-07 17:10:32 +03:00
}
2016-05-07 10:54:44 +03:00
init() {
this.$mobileNav = this.dom.querySelector(this.$element, '.mobile-nav');
this.$resourcesNav = this.dom.querySelector(this.$element, '#resources-nav');
2015-11-27 00:30:13 +03:00
2016-05-17 19:38:12 +03:00
//decorate scrollYOffset to account mobile nav
this.scrollService.scrollYOffset = () => {
2016-05-07 10:54:44 +03:00
let mobileNavOffset = this.$mobileNav.clientHeight;
2016-05-17 19:38:12 +03:00
return this.options.scrollYOffset() + mobileNavOffset;
2016-05-07 10:54:44 +03:00
};
2015-10-15 20:06:16 +03:00
}
prepareModel() {
this.data = {};
2016-05-07 10:54:44 +03:00
this.data.menu = this.menuService.categories;
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;
2016-05-17 19:38:12 +03:00
let $overflowParent = (this.options.$scrollParent === global) ? dom.defaultDoc().body
: this.$scrollParent.$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 {
2016-05-17 19:38:12 +03:00
let viewportHeight = this.options.$scrollParent.innerHeight
|| this.options.$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
}
}
2016-05-07 10:54:44 +03:00
destroy() {
this.scrollService.unbind();
this.hash.unbind();
}
2015-10-15 20:06:16 +03:00
}