Implemented side-menu component

lib/components/MethodsList/methods-list.css

@@ -1,5 +1,5 @@
 method {
-  padding-bottom: 50px;
+  padding-bottom: 100px;
   display: block;
   border-bottom: 1px solid silver;
 }

lib/components/MethodsList/methods-list.html

@@ -1,3 +1,3 @@
 <div *ng-for="#method of data.methods">
-  <method pointer="{{pointer}}/{{method}}"></method>
+  <method pointer="{{pointer}}/{{method}}" attr.pointer="{{pointer}}/{{method}}"></method>
 </div>

lib/components/SideMenu/side-menu.html

@@ -0,0 +1,4 @@
+<h2> Api reference </h2>
+<div *ng-for="var cat of data.menu">
+  <side-menu-cat [cat-details]="cat"> </side-menu-cat>
+</div>

lib/components/SideMenu/side-menu.js

@@ -0,0 +1,125 @@
+'use strict';
+
+import {RedocComponent, BaseComponent} from '../base';
+import {SchemaManager} from '../../utils/SchemaManager';
+import {methods as swaggerMethods} from  '../../utils/swagger-defs';
+import {JsonPointer} from '../../utils/JsonPointer';
+import {SideMenuCat} from '../SideMenuCat/side-menu-cat';
+import {NgZone} from 'angular2/angular2';
+
+@RedocComponent({
+  selector: 'side-menu',
+  bindings: [SchemaManager],
+  templateUrl: './lib/components/SideMenu/side-menu.html',
+  directives: [SideMenuCat]
+})
+export class SideMenu extends BaseComponent {
+  constructor(schemaMgr, zone) {
+    super(schemaMgr);
+    this.zone = zone;
+    this.zone.run(() => {
+      this.bindScroll();
+    });
+
+    this.activeCatIdx = 0;
+    this.activeMethodIdx = 0;
+    this.prevOffsetY = null;
+  }
+
+  changeActiveMethod(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) {
+      this.activeCatIdx++;
+      this.activeMethodIdx = 0;
+    }
+    if (this.activeMethodIdx < 0) {
+      let prevCatIdx = --this.activeCatIdx;
+      catLength = menu[Math.max(prevCatIdx, 0)].methods.length;
+      this.activeMethodIdx = catLength - 1;
+    }
+    if (this.activeCatIdx > catCount - 1) {
+      this.activeCatIdx = catCount - 1;
+      this.activeMethodIdx = catLength - 1;
+    }
+    if (this.activeCatIdx < 0) {
+      this.activeCatIdx = 0;
+      this.activeMethodIdx = 0;
+    }
+  }
+  activateNext(offset = 1) {
+    let menu = this.data.menu;
+    menu[this.activeCatIdx].methods[this.activeMethodIdx].active = false;
+    menu[this.activeCatIdx].active = false;
+    
+    this.changeActiveMethod(offset);
+
+    menu[this.activeCatIdx].active = true;
+    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 = document.querySelector(`[pointer="${ptr}"]`);
+    if (!activeMethodHost) return;
+
+    if(isScrolledDown && activeMethodHost.getBoundingClientRect().bottom <= 0 ) {
+      this.activateNext(1);
+      return;
+    }
+    if(!isScrolledDown && activeMethodHost.getBoundingClientRect().top > 0 ) {
+      this.activateNext(-1);
+      return;
+    }
+  }
+
+  bindScroll() {
+    this.prevOffsetY = window.scrollY;
+    window.addEventListener('scroll', () => this.scrollHandler());
+  }
+
+  prepareModel() {
+    this.data = {};
+    this.data.menu = Array.from(this.buildMenuTree().entries()).map(
+      el => ({name: el[0], methods: el[1]})
+    );
+    this.activateNext(0);
+  }
+
+  buildMenuTree() {
+    let tag2MethodMapping = new Map();
+    let paths = this.componentSchema.paths;
+    for (let path of Object.keys(paths)) {
+      let methods = Object.keys(paths[path]).filter((k) => swaggerMethods.has(k));
+      for (let method of methods) {
+        let methodInfo = paths[path][method];
+        let tags = methodInfo.tags;
+
+        //TODO: mb need to do something cleverer
+        if (!tags || !tags.length) {
+          tags = ['[Other]'];
+        }
+        let methodPointer = JsonPointer.compile(['paths', path, method]);
+        let methodSummary = methodInfo.summary;
+        for (let tag of tags) {
+          let tagMethods = tag2MethodMapping.get(tag);
+          if (!tagMethods) {
+            tagMethods = [];
+            tag2MethodMapping.set(tag, tagMethods);
+          }
+
+          tagMethods.push({pointer: methodPointer, summary: methodSummary});
+        }
+      }
+    }
+    return tag2MethodMapping;
+  }
+}
+SideMenu.parameters.push([NgZone]);

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

@@ -0,0 +1,23 @@
+label {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+ul {
+  padding-left: 20px;
+  margin: 0;
+  display: none;
+}
+
+ul.active {
+  display: block;
+}
+
+li {
+  list-style: none inside none;
+  padding: 5px 0;
+}
+
+li.active {
+  color: #1976D3;
+}

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

@@ -0,0 +1,6 @@
+<label> {{data.name}}</label>
+<ul [ng-class]="{active: data.active}">
+  <li *ng-for="var method of data.methods" [ng-class]="{active: method.active}">
+    {{method.summary}}
+  </li>
+</ul>

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

@@ -0,0 +1,19 @@
+'use strict';
+
+import {RedocComponent, BaseComponent} from '../base';
+
+@RedocComponent({
+  selector: 'side-menu-cat',
+  inputs: ['catDetails'],
+  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);
+  }
+
+  prepareModel() {
+    this.data = this.catDetails;
+  }
+}

lib/components/index.js

@@ -1,4 +1,5 @@
 'use strict';
 
 export * from './Redoc/redoc';
+export * from './SideMenu/side-menu';
 export * from './ApiInfo/api-info';