x-secondaryTag and menu-sync

This commit is contained in:
Roman Gotsiy 2015-10-30 10:26:23 +02:00
parent ab104f3d48
commit 29677bbd64
6 changed files with 29 additions and 20 deletions

View File

@ -44,13 +44,7 @@ export class Tabs {
<div class="tab-wrap" [hidden]="!active"> <div class="tab-wrap" [hidden]="!active">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
`, `
styles: [`
.tab-wrap {
padding: 5px;
background-color: #121427;
}
`]
}) })
export class Tab { export class Tab {
constructor(tabs) { constructor(tabs) {

View File

@ -1,6 +1,6 @@
<div class="methods"> <div class="methods">
<div class="tag" *ng-for="#tag of data.tags"> <div class="tag" *ng-for="#tag of data.tags">
<div class="tag-info"> <div class="tag-info" [attr.tag]="tag.name">
<h1> {{tag.name}} </h1> <h1> {{tag.name}} </h1>
<p *ng-if="tag.description" inner-html="{{ tag.description | marked }}"> </p> <p *ng-if="tag.description" inner-html="{{ tag.description | marked }}"> </p>
</div> </div>

View File

@ -6,7 +6,12 @@ import SchemaSampler from 'json-schema-instantiator';
@RedocComponent({ @RedocComponent({
selector: 'schema-sample', selector: 'schema-sample',
templateUrl: './lib/components/SchemaSample/schema-sample.html' templateUrl: './lib/components/SchemaSample/schema-sample.html',
styles: [`
pre {
background-color: #121427;
}
`]
}) })
export default class SchemaSample extends BaseComponent { export default class SchemaSample extends BaseComponent {
constructor(schemaMgr) { constructor(schemaMgr) {

View File

@ -30,7 +30,7 @@ export default class SideMenu extends BaseComponent {
}); });
this.activeCatIdx = 0; this.activeCatIdx = 0;
this.activeMethodIdx = 0; this.activeMethodIdx = -1;
this.prevOffsetY = null; this.prevOffsetY = null;
} }
@ -46,20 +46,29 @@ export default class SideMenu extends BaseComponent {
} }
scrollToActive() { scrollToActive() {
window.scrollTo(0, this.getMethodEl().offsetTop); let subjRect = this.getMethodEl().getBoundingClientRect();
let offset = window.scrollY + subjRect.top;
window.scrollTo(0, offset);
} }
activate(catIdx, methodIdx) { activate(catIdx, methodIdx) {
let menu = this.data.menu; let menu = this.data.menu;
menu[this.activeCatIdx].active = false; menu[this.activeCatIdx].active = false;
menu[this.activeCatIdx].methods[this.activeMethodIdx].active = false; if (menu[this.activeCatIdx].methods.length) {
if (this.activeMethodIdx >= 0) {
menu[this.activeCatIdx].methods[this.activeMethodIdx].active = false;
}
}
this.activeCatIdx = catIdx; this.activeCatIdx = catIdx;
this.activeMethodIdx = methodIdx; this.activeMethodIdx = methodIdx;
menu[catIdx].active = true; menu[catIdx].active = true;
let currentItem = menu[catIdx].methods[methodIdx]; this.activeMethodPtr = null;
currentItem.active = true; if (menu[catIdx].methods.length && (methodIdx > -1)) {
this.activeMethodPtr = currentItem.pointer; let currentItem = menu[catIdx].methods[methodIdx];
currentItem.active = true;
this.activeMethodPtr = currentItem.pointer;
}
} }
_calcActiveIndexes(offset) { _calcActiveIndexes(offset) {
@ -72,9 +81,9 @@ export default class SideMenu extends BaseComponent {
if (resMethodIdx > catLength - 1) { if (resMethodIdx > catLength - 1) {
resCatIdx++; resCatIdx++;
resMethodIdx = 0; resMethodIdx = -1;
} }
if (resMethodIdx < 0) { if (resMethodIdx < -1) {
let prevCatIdx = --resCatIdx; let prevCatIdx = --resCatIdx;
catLength = menu[Math.max(prevCatIdx, 0)].methods.length; catLength = menu[Math.max(prevCatIdx, 0)].methods.length;
resMethodIdx = catLength - 1; resMethodIdx = catLength - 1;
@ -99,7 +108,8 @@ export default class SideMenu extends BaseComponent {
getMethodEl() { getMethodEl() {
let ptr = this.activeMethodPtr; let ptr = this.activeMethodPtr;
let tag = this.data.menu[this.activeCatIdx].name; let tag = this.data.menu[this.activeCatIdx].name;
return document.querySelector(`[pointer="${ptr}"][tag="${tag}"]`); let selector = ptr ? `[pointer="${ptr}"][tag="${tag}"]` : `[tag="${tag}"]`;
return document.querySelector(selector);
} }
scrollHandler() { scrollHandler() {

View File

@ -22,6 +22,6 @@ li {
cursor: pointer; cursor: pointer;
} }
li.active { label.active, li.active {
color: #1976D3; color: #1976D3;
} }

View File

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