Added side-menu click actions

This commit is contained in:
Roman Gotsiy 2015-10-15 21:35:05 +03:00
parent cb16c5d8d3
commit b98cfa8280
6 changed files with 82 additions and 36 deletions

View File

@ -1,4 +1,6 @@
<h2> Api reference </h2> <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> </div>

View File

@ -23,6 +23,9 @@ export class SideMenu extends BaseComponent {
constructor(schemaMgr, zone) { constructor(schemaMgr, zone) {
super(schemaMgr); super(schemaMgr);
this.zone = zone; this.zone = zone;
// for some reason constructor is not run inside zone
// as workaround running it manually
this.zone.run(() => { this.zone.run(() => {
this.bindScroll(); this.bindScroll();
}); });
@ -32,49 +35,77 @@ export class SideMenu extends BaseComponent {
this.prevOffsetY = null; 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 menu = this.data.menu;
let catCount = menu.length; let catCount = menu.length;
let catLength = menu[this.activeCatIdx].methods.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; 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) { 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() { scrollHandler() {
let isScrolledDown = (window.scrollY - this.prevOffsetY > 0); let isScrolledDown = (window.scrollY - this.prevOffsetY > 0);
this.prevOffsetY = window.scrollY; this.prevOffsetY = window.scrollY;
let ptr = this.activeMethodPtr; var activeMethodHost = this.getMethodEl();
var activeMethodHost = document.querySelector(`[pointer="${ptr}"]`);
if (!activeMethodHost) return; if (!activeMethodHost) return;
if(isScrolledDown && activeMethodHost.getBoundingClientRect().bottom <= 0 ) { 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() { prepareModel() {
this.data = {}; this.data = {};
this.data.menu = Array.from(this.buildMenuTree().entries()).map( this.data.menu = Array.from(this.buildMenuTree().entries()).map(

View File

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

View File

@ -1,6 +1,8 @@
<label> {{data.name}}</label> <label (click)="expandCat()"> {{data.name}}</label>
<ul [ng-class]="{active: data.active}"> <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}} {{method.summary}}
</li> </li>
</ul> </ul>

View File

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

View File

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