mirror of
https://github.com/Redocly/redoc.git
synced 2025-07-11 08:42:24 +03:00
Added side-menu click actions
This commit is contained in:
parent
cb16c5d8d3
commit
b98cfa8280
|
@ -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>
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue
Block a user