Added side-menu click actions

lib/components/SideMenu/side-menu.html

@@ -1,4 +1,6 @@
 <h2> Api reference </h2>
-<div *ng-for="var cat of data.menu">
+<div *ng-for="var cat of data.menu; var idx = index">
-  <side-menu-cat [cat-details]="cat"> </side-menu-cat>
+  <side-menu-cat [cat-details]="cat" (expand)="activateAndScroll(idx, 0)"
+  (activate)="activateAndScroll(idx, $event.methodIdx)"> 
+  </side-menu-cat>
 </div>

lib/components/SideMenu/side-menu.js

@@ -23,6 +23,9 @@ export class SideMenu extends BaseComponent {
   constructor(schemaMgr, zone) {
     super(schemaMgr);
     this.zone = zone;
+
+    // for some reason constructor is not run inside zone
+    // as workaround running it manually
     this.zone.run(() => {
       this.bindScroll();
     });
@@ -32,49 +35,77 @@ export class SideMenu extends BaseComponent {
     this.prevOffsetY = null;
   }
 
-  _updateActiveMethod(offset) {
+  bindScroll() {
+    this.prevOffsetY = window.scrollY;
+    window.addEventListener('scroll', () => this.scrollHandler());
+  }
+
+
+  activateAndScroll(idx, methodIdx) {
+    this.activate(idx, methodIdx);
+    this.scrollToActive();
+  }
+
+  scrollToActive() {
+    window.scrollTo(0, this.getMethodEl().offsetTop);
+  }
+
+  activate(catIdx, methodIdx) {
+    let menu = this.data.menu;
+    menu[this.activeCatIdx].active = false;
+    menu[this.activeCatIdx].methods[this.activeMethodIdx].active = false;
+
+    this.activeCatIdx = catIdx;
+    this.activeMethodIdx = methodIdx;
+    menu[catIdx].active = true;
+    let currentItem = menu[catIdx].methods[methodIdx];
+    currentItem.active = true;
+    this.activeMethodPtr = currentItem.pointer;
+  }
+
+  _calcActiveIndexes(offset) {
     let menu = this.data.menu;
     let catCount = menu.length;
     let catLength = menu[this.activeCatIdx].methods.length;
-    this.activeMethodIdx += offset;
 
-    if (this.activeMethodIdx > catLength - 1) {
+    let resMethodIdx = this.activeMethodIdx + offset;
-      this.activeCatIdx++;
+    let resCatIdx = this.activeCatIdx;
-      this.activeMethodIdx = 0;
+
+    if (resMethodIdx > catLength - 1) {
+      resCatIdx++;
+      resMethodIdx = 0;
     }
-    if (this.activeMethodIdx < 0) {
+    if (resMethodIdx < 0) {
-      let prevCatIdx = --this.activeCatIdx;
+      let prevCatIdx = --resCatIdx;
       catLength = menu[Math.max(prevCatIdx, 0)].methods.length;
-      this.activeMethodIdx = catLength - 1;
+      resMethodIdx = catLength - 1;
     }
-    if (this.activeCatIdx > catCount - 1) {
+    if (resCatIdx > catCount - 1) {
-      this.activeCatIdx = catCount - 1;
+      resCatIdx = catCount - 1;
-      this.activeMethodIdx = catLength - 1;
+      resMethodIdx = catLength - 1;
     }
-    if (this.activeCatIdx < 0) {
+    if (resCatIdx < 0) {
-      this.activeCatIdx = 0;
+      resCatIdx = 0;
-      this.activeMethodIdx = 0;
+      resMethodIdx = 0;
     }
+
+    return [resCatIdx, resMethodIdx];
   }
 
   changeActive(offset = 1) {
-    let menu = this.data.menu;
+    let [catIdx, methodIdx] = this._calcActiveIndexes(offset);
-    menu[this.activeCatIdx].methods[this.activeMethodIdx].active = false;
+    this.activate(catIdx, methodIdx);
-    menu[this.activeCatIdx].active = false;
+  }
 
-    this._updateActiveMethod(offset);
+  getMethodEl() {
-
+    let ptr = this.activeMethodPtr;
-    menu[this.activeCatIdx].active = true;
+    return document.querySelector(`[pointer="${ptr}"]`);
-    let currentItem = menu[this.activeCatIdx].methods[this.activeMethodIdx];
-    currentItem.active = true;
-    this.activeMethodPtr = currentItem.pointer;
   }
 
   scrollHandler() {
     let isScrolledDown = (window.scrollY - this.prevOffsetY > 0);
     this.prevOffsetY = window.scrollY;
-    let ptr = this.activeMethodPtr;
+    var activeMethodHost = this.getMethodEl();
-    var activeMethodHost = document.querySelector(`[pointer="${ptr}"]`);
     if (!activeMethodHost) return;
 
     if(isScrolledDown && activeMethodHost.getBoundingClientRect().bottom <= 0 ) {
@@ -87,11 +118,6 @@ export class SideMenu extends BaseComponent {
     }
   }
 
-  bindScroll() {
-    this.prevOffsetY = window.scrollY;
-    window.addEventListener('scroll', () => this.scrollHandler());
-  }
-
   prepareModel() {
     this.data = {};
     this.data.menu = Array.from(this.buildMenuTree().entries()).map(

lib/components/SideMenuCat/side-menu-cat.css

@@ -1,21 +1,24 @@
 label {
   font-weight: bold;
   font-size: 18px;
+  cursor: pointer;
 }
 
 ul {
   padding-left: 20px;
   margin: 0;
-  display: none;
+  height: 0;
+  overflow: hidden;
 }
 
 ul.active {
-  display: block;
+  height: auto;
 }
 
 li {
   list-style: none inside none;
   padding: 5px 0;
+  cursor: pointer;
 }
 
 li.active {

lib/components/SideMenuCat/side-menu-cat.html

@@ -1,6 +1,8 @@
-<label> {{data.name}}</label>
+<label (click)="expandCat()"> {{data.name}}</label>
 <ul [ng-class]="{active: data.active}">
-  <li *ng-for="var method of data.methods" [ng-class]="{active: method.active}">
+  <li *ng-for="var method of data.methods; var idx = index"
+    [ng-class]="{active: method.active}"
+    (click)="activateMethod(idx)">
     {{method.summary}}
   </li>
 </ul>

lib/components/SideMenuCat/side-menu-cat.js

@@ -1,16 +1,28 @@
 'use strict';
 
 import {RedocComponent, BaseComponent} from '../base';
+import {EventEmitter} from 'angular2/angular2';
 
 @RedocComponent({
   selector: 'side-menu-cat',
   inputs: ['catDetails'],
+  outputs: ['expand', 'activate'],
   styleUrls: ['./lib/components/SideMenuCat/side-menu-cat.css'],
   templateUrl: './lib/components/SideMenuCat/side-menu-cat.html'
 })
 export class SideMenuCat extends BaseComponent {
   constructor(schemaMgr) {
     super(schemaMgr);
+    this.expand = new EventEmitter();
+    this.activate = new EventEmitter();
+  }
+
+  expandCat() {
+    this.expand.next();
+  }
+
+  activateMethod(methodIdx) {
+    this.activate.next({methodIdx: methodIdx});
   }
 
   prepareModel() {

lib/components/base.js

@@ -38,6 +38,7 @@ export function RedocComponent(options) {
     let componentDecorator = Component({
       selector: options.selector,
       inputs: inputs,
+      outputs: options.outputs,
       lifecycle: [OnInit],
       bindings: options.bindings
     });