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-07-21 13:35:27 +03:00
|
|
|
|
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
|
|
|
|
2016-07-21 13:35:27 +03:00
|
|
|
import { MenuCategory } from '../../services/schema-helper.service';
|
|
|
|
|
2015-10-15 20:06:16 +03:00
|
|
|
@RedocComponent({
|
|
|
|
selector: 'side-menu',
|
2016-05-25 18:34:31 +03:00
|
|
|
templateUrl: './side-menu.html',
|
|
|
|
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 {
|
2016-05-25 18:34:31 +03:00
|
|
|
activeCatCaption: string;
|
|
|
|
activeItemCaption: string;
|
2016-07-21 13:35:27 +03:00
|
|
|
categories: Array<MenuCategory>;
|
2016-07-20 11:07:08 +03:00
|
|
|
|
|
|
|
private options: any;
|
|
|
|
private $element: any;
|
|
|
|
private $mobileNav: any;
|
|
|
|
private $resourcesNav: any;
|
|
|
|
private $scrollParent: any;
|
|
|
|
|
2016-06-23 17:36:38 +03:00
|
|
|
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,
|
2016-05-25 18:34:31 +03:00
|
|
|
optionsService:OptionsService, private detectorRef:ChangeDetectorRef) {
|
2016-06-23 17:36:38 +03:00
|
|
|
super(specMgr);
|
2016-02-11 14:38:44 +03:00
|
|
|
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));
|
2015-11-29 20:18:01 +03:00
|
|
|
}
|
|
|
|
|
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() {
|
2016-07-20 11:07:08 +03:00
|
|
|
this.categories = this.menuService.categories;
|
|
|
|
|
2016-05-07 10:54:44 +03:00
|
|
|
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
|
|
|
}
|
|
|
|
|
2016-01-21 18:26:54 +03:00
|
|
|
mobileMode() {
|
2016-02-10 16:48:07 +03:00
|
|
|
return this.$mobileNav.clientHeight > 0;
|
2016-01-21 18:26:54 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
toggleMobileNav() {
|
2016-02-10 16:48:07 +03:00
|
|
|
let dom = this.dom;
|
2016-05-17 19:38:12 +03:00
|
|
|
let $overflowParent = (this.options.$scrollParent === global) ? dom.defaultDoc().body
|
2016-07-21 13:35:27 +03:00
|
|
|
: this.$scrollParent;
|
2016-02-10 16:48:07 +03:00
|
|
|
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;
|
2016-02-10 16:48:07 +03:00
|
|
|
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
|
|
|
}
|