Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-03-06 10:55:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

Adapt menu service and lazy-tasks to new menu strcuture

Browse Source
This commit is contained in:
Roman Hotsiy 2016-12-23 00:43:56 +02:00
parent 398aa60a46
commit 97949a17f9
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
2 changed files with 84 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
lib/services/menu.service.ts
View File

@ -5,9 +5,12 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { ScrollService, INVIEW_POSITION } from './scroll.service'; import { ScrollService, INVIEW_POSITION } from './scroll.service';
import { Hash } from './hash.service'; import { Hash } from './hash.service';
import { SpecManager } from '../utils/spec-manager'; import { SpecManager } from '../utils/spec-manager';
import { SchemaHelper, MenuCategory } from './schema-helper.service'; import { SchemaHelper, MenuItem } from './schema-helper.service';
import { AppStateService } from './app-state.service'; import { AppStateService } from './app-state.service';
import { LazyTasksService } from '../shared/components/LazyFor/lazy-for'; import { LazyTasksService } from '../shared/components/LazyFor/lazy-for';
import { JsonPointer } from '../utils/JsonPointer';
import * as slugify from 'slugify';
const CHANGE = { const CHANGE = {
NEXT : 1, NEXT : 1,
@ -20,11 +23,14 @@ export class MenuService {
changed: EventEmitter<any> = new EventEmitter(); changed: EventEmitter<any> = new EventEmitter();
ready: BehaviorSubject<boolean> = new BehaviorSubject(false); ready: BehaviorSubject<boolean> = new BehaviorSubject(false);
categories: Array<MenuCategory>; items: Array<MenuItem>;
flatItems: Array<MenuItem>;
activeCatIdx: number = 0; activeCatIdx: number = 0;
activeMethodIdx: number = -1; activeMethodIdx: number = -1;
activeIdx: number = -1;
private _hashSubscription: Subscription; private _hashSubscription: Subscription;
constructor( constructor(
@ -35,20 +41,19 @@ export class MenuService {
specMgr:SpecManager specMgr:SpecManager
) { ) {
this.hash = hash; this.hash = hash;
this.categories = SchemaHelper.buildMenuTree(specMgr.schema); this.items = SchemaHelper.buildMenuTree(specMgr.schema);
this.flatItems = SchemaHelper.flatMenu(this.items);
scrollService.scroll.subscribe((evt) => { scrollService.scroll.subscribe((evt) => {
this.scrollUpdate(evt.isScrolledDown); this.scrollUpdate(evt.isScrolledDown);
}); });
//this.changeActive(CHANGE.INITIAL);
this._hashSubscription = this.hash.value.subscribe((hash) => { this._hashSubscription = this.hash.value.subscribe((hash) => {
if (hash == undefined) return; if (hash == undefined) return;
this.setActiveByHash(hash); this.setActiveByHash(hash);
if (!this.tasks.empty) { if (!this.tasks.empty) {
this.tasks.start(this.activeCatIdx, this.activeMethodIdx, this); this.tasks.start(this.activeIdx, this);
this.scrollService.setStickElement(this.getCurrentMethodEl()); this.scrollService.setStickElement(this.getCurrentEl());
if (hash) this.scrollToActive(); if (hash) this.scrollToActive();
this.appState.stopLoading(); this.appState.stopLoading();
} else { } else {
@ -57,45 +62,39 @@ export class MenuService {
}); });
} }
enableItem(catIdx, methodIdx, skipUpdate = false) { enableItem(idx) {
let cat = this.categories[catIdx]; let item = this.flatItems[idx];
cat.ready = true; item.ready = true;
if (cat.methods.length) cat.methods[methodIdx].ready = true; if (item.parent) {
let prevCat = this.categories[catIdx - 1]; item.parent.ready = true;
if (prevCat && !prevCat.ready && (prevCat.virtual || !prevCat.methods.length)) { idx = item.parent.flatIdx;
this.enableItem(catIdx - 1, -1, true); }
let prevItem = this.flatItems[idx -= 1];
while(prevItem && (!prevItem.metadata || !prevItem.items)) {
prevItem.ready = true;
prevItem = this.flatItems[idx -= 1];
} }
if (skipUpdate) return;
this.changed.next(); this.changed.next();
} }
get activeMethodPtr() {
let cat = this.categories[this.activeCatIdx];
let ptr = null;
if (cat && cat.methods.length) {
let mtd = cat.methods[this.activeMethodIdx];
ptr = mtd && mtd.pointer || null;
}
return ptr;
}
scrollUpdate(isScrolledDown) { scrollUpdate(isScrolledDown) {
let stable = false; let stable = false;
while(!stable) { while(!stable) {
let $activeMethodHost = this.getCurrentMethodEl();
if (!$activeMethodHost) return;
var elementInViewPos = this.scrollService.getElementPos($activeMethodHost);
if(isScrolledDown) { if(isScrolledDown) {
//&& elementInViewPos === INVIEW_POSITION.BELLOW //&& elementInViewPos === INVIEW_POSITION.BELLOW
let $nextEl = this.getRelativeCatOrItem(1); let $nextEl = this.getEl(this.activeIdx + 1);
if (!$nextEl) return; if (!$nextEl) return;
let nextInViewPos = this.scrollService.getElementPos($nextEl, true); let nextInViewPos = this.scrollService.getElementPos($nextEl, true);
if (elementInViewPos === INVIEW_POSITION.BELLOW && nextInViewPos === INVIEW_POSITION.ABOVE) { if (nextInViewPos === INVIEW_POSITION.ABOVE) {
stable = this.changeActive(CHANGE.NEXT); stable = this.changeActive(CHANGE.NEXT);
continue; continue;
} }
} }
let $currentEl = this.getCurrentEl();
if (!$currentEl) return;
var elementInViewPos = this.scrollService.getElementPos($currentEl);
if(!isScrolledDown && elementInViewPos === INVIEW_POSITION.ABOVE ) { if(!isScrolledDown && elementInViewPos === INVIEW_POSITION.ABOVE ) {
stable = this.changeActive(CHANGE.BACK); stable = this.changeActive(CHANGE.BACK);
continue; continue;
@ -104,133 +103,74 @@ export class MenuService {
} }
} }
getRelativeCatOrItem(offset: number = 0) { getEl(flatIdx) {
let ptr, cat; if (flatIdx < 0) flatIdx = 0;
cat = this.categories[this.activeCatIdx]; let currentItem = this.flatItems[flatIdx];
if (cat.methods.length === 0) { let selector = '';
ptr = null; while(currentItem) {
cat = this.categories[this.activeCatIdx + Math.sign(offset)] || cat; selector = `[section="${currentItem.id}"] ` + selector
} else { currentItem = currentItem.parent;
let cat = this.categories[this.activeCatIdx];
let idx = this.activeMethodIdx + offset;
if ((idx >= cat.methods.length - 1) || idx < 0) {
cat = this.categories[this.activeCatIdx + Math.sign(offset)] || cat;
idx = offset > 0 ? -1 : cat.methods.length - 1;
}
ptr = cat.methods[idx] && cat.methods[idx].pointer;
} }
selector = selector.trim();
return this.getMethodElByPtr(ptr, cat.id); return selector ? document.querySelector(selector) : null;
} }
getCurrentMethodEl() { getCurrentEl() {
return this.getMethodElByPtr(this.activeMethodPtr, return this.getEl(this.activeIdx);
this.categories[this.activeCatIdx].id);
} }
getMethodElByPtr(ptr, section) { deactivate(idx) {
let selector = ptr ? `[pointer="${ptr}"][section="${section}"]` : `[section="${section}"]`; if (idx < 0) return;
return document.querySelector(selector);
let prevItem = this.flatItems[idx];
prevItem.active = false;
if (prevItem.parent) {
prevItem.parent.active = false;
}
} }
getMethodElByOperId(operationId) { activate(idx) {
let selector =`[operation-id="${operationId}"]`; this.deactivate(this.activeIdx);
return document.querySelector(selector); this.activeIdx = idx;
} if (idx < 0) return;
activate(catIdx, methodIdx) { let currentItem = this.flatItems[this.activeIdx];
if (catIdx < 0) return; currentItem.active = true;
if (currentItem.parent) {
let menu = this.categories; currentItem.parent.active = true;
menu[this.activeCatIdx].active = false;
if (menu[this.activeCatIdx].methods.length) {
if (this.activeMethodIdx >= 0) {
menu[this.activeCatIdx].methods[this.activeMethodIdx].active = false;
}
}
this.activeCatIdx = catIdx;
this.activeMethodIdx = methodIdx;
menu[catIdx].active = true;
let currentItem;
if (menu[catIdx].methods.length && (methodIdx > -1)) {
currentItem = menu[catIdx].methods[methodIdx];
currentItem.active = true;
} }
this.changed.next({cat: menu[catIdx], item: currentItem}); this.changed.next(currentItem);
}
_calcActiveIndexes(offset) {
let menu = this.categories;
let catCount = menu.length;
if (!catCount) return [0, -1];
let catLength = menu[this.activeCatIdx].methods.length;
let resMethodIdx = this.activeMethodIdx + offset;
let resCatIdx = this.activeCatIdx;
if (resMethodIdx > catLength - 1) {
resCatIdx++;
resMethodIdx = -1;
}
if (resMethodIdx < -1) {
let prevCatIdx = --resCatIdx;
catLength = menu[Math.max(prevCatIdx, 0)].methods.length;
resMethodIdx = catLength - 1;
}
if (resCatIdx > catCount - 1) {
resCatIdx = catCount - 1;
resMethodIdx = catLength - 1;
}
if (resCatIdx < 0) {
resCatIdx = 0;
resMethodIdx = 0;
}
return [resCatIdx, resMethodIdx];
} }
changeActive(offset = 1) { changeActive(offset = 1) {
let [catIdx, methodIdx] = this._calcActiveIndexes(offset); let noChange = (this.activeIdx <= 0 && offset === -1) ||
this.activate(catIdx, methodIdx); (this.activeIdx === this.flatItems.length - 1 && offset === 1);
return (methodIdx === 0 && catIdx === 0); this.activate(this.activeIdx + offset);
return noChange;
} }
scrollToActive() { scrollToActive() {
this.scrollService.scrollTo(this.getCurrentMethodEl()); this.scrollService.scrollTo(this.getCurrentEl());
} }
setActiveByHash(hash) { setActiveByHash(hash) {
if (!hash) { if (!hash) return;
if (this.categories[0].headless) { let idx = 0;
this.activate(0, 0);
}
return;
}
let catIdx, methodIdx;
hash = hash.substr(1); hash = hash.substr(1);
let namespace = hash.split('/')[0]; let namespace = hash.split('/')[0];
let ptr = decodeURIComponent(hash.substr(namespace.length + 1)); let ptr = decodeURIComponent(hash.substr(namespace.length + 1));
if (namespace === 'section' || namespace === 'tag') { if (namespace === 'section' || namespace === 'tag') {
let sectionId = ptr.split('/')[0]; let sectionId = ptr.split('/')[0];
catIdx = this.categories.findIndex(cat => cat.id === namespace + '/' + sectionId);
let cat = this.categories[catIdx];
ptr = ptr.substr(sectionId.length) || null; ptr = ptr.substr(sectionId.length) || null;
methodIdx = cat.methods.findIndex(method => method.pointer === ptr); let searchId = ptr || (namespace + '/' + sectionId);
} else { idx = this.flatItems.findIndex(item => item.id === searchId);
catIdx = this.categories.findIndex(cat => { } else if (namespace === 'operation') {
if (!cat.methods.length) return false; idx = this.flatItems.findIndex(item => {
methodIdx = cat.methods.findIndex(method => method.operationId === ptr || method.pointer === ptr); return item.metadata && item.metadata.operationId === ptr
if (methodIdx >= 0) { })
return true;
} else {
return false;
}
});
} }
this.activate(catIdx, methodIdx); this.activate(idx);
} }
destroy() { destroy() {

34
lib/shared/components/LazyFor/lazy-for.ts
View File

@ -51,8 +51,8 @@ export class LazyTasksService {
} }
addTasks(tasks:any[], callback:Function) { addTasks(tasks:any[], callback:Function) {
tasks.forEach((task) => { tasks.forEach((task, idx) => {
let taskCopy = Object.assign({_callback: callback}, task); let taskCopy = Object.assign({_callback: callback, idx: idx}, task);
this._tasks.push(taskCopy); this._tasks.push(taskCopy);
}); });
} }
@ -62,7 +62,7 @@ export class LazyTasksService {
if (!task) return; if (!task) return;
task._callback(task.idx, true); task._callback(task.idx, true);
this._current++; this._current++;
this.menuService.enableItem(task.catIdx, task.idx); this.menuService.enableItem(task.flatIdx);
this.loadProgress.next(this._current / this._tasks.length * 100); this.loadProgress.next(this._current / this._tasks.length * 100);
} }
@ -72,39 +72,30 @@ export class LazyTasksService {
if (!task) return; if (!task) return;
task._callback(task.idx, false).then(() => { task._callback(task.idx, false).then(() => {
this._current++; this._current++;
this.menuService.enableItem(task.catIdx, task.idx); this.menuService.enableItem(task.flatIdx);
setTimeout(()=> this.nextTask()); setTimeout(()=> this.nextTask());
this.loadProgress.next(this._current / this._tasks.length * 100); this.loadProgress.next(this._current / this._tasks.length * 100);
}).catch(err => console.error(err)); }).catch(err => console.error(err));
}); });
} }
sortTasks(catIdx, metIdx) { sortTasks(center) {
let idxMap = {}; let idxMap = {};
this._tasks.forEach((task, idx) => {
idxMap[task.catIdx + '_' + task.idx] = idx;
});
metIdx = metIdx < 0 ? 0 : metIdx;
let destIdx = idxMap[catIdx + '_' + metIdx] || 0;
this._tasks.sort((a, b) => { this._tasks.sort((a, b) => {
let aIdx = idxMap[a.catIdx + '_' + a.idx]; return Math.abs(a.flatIdx - center) - Math.abs(b.flatIdx - center);
let bIdx = idxMap[b.catIdx + '_' + b.idx];
return Math.abs(aIdx - destIdx) - Math.abs(bIdx - destIdx);
}) })
} }
start(catIdx, metIdx, menuService) { start(idx, menuService) {
this.menuService = menuService; this.menuService = menuService;
let syncCount = 5; let syncCount = 5;
// I know this is bad practice to detect browsers but there is an issue on Safari only // I know this is a bad practice to detect browsers but there is an issue in Safari only
// http://stackoverflow.com/questions/40692365/maintaining-scroll-position-while-inserting-elements-above-glitching-only-in-sa // http://stackoverflow.com/questions/40692365/maintaining-scroll-position-while-inserting-elements-above-glitching-only-in-sa
if (isSafari && this.optionsService.options.$scrollParent === window) { if (isSafari && this.optionsService.options.$scrollParent === window) {
syncCount = (metIdx >= 0) ? syncCount = this._tasks.findIndex(task => task.idx === idx);
this._tasks.findIndex(task => (task.catIdx === catIdx) && (task.idx === metIdx))
: this._tasks.findIndex(task => task.catIdx === catIdx);
syncCount += 1; syncCount += 1;
} else { } else {
this.sortTasks(catIdx, metIdx); this.sortTasks(idx);
} }
if (this.allSync) syncCount = this._tasks.length; if (this.allSync) syncCount = this._tasks.length;
for (var i = this._current; i < syncCount; i++) { for (var i = this._current; i < syncCount; i++) {
@ -141,8 +132,8 @@ export class LazyFor {
} }
nextIteration(idx: number, sync: boolean):Promise<void> { nextIteration(idx: number, sync: boolean):Promise<void> {
const view = this._viewContainer.createEmbeddedView( const view = this._viewContainer.createEmbeddedView(this._template,
this._template, new LazyForRow(this.lazyForOf[idx], idx, sync), idx < this.prevIdx ? 0 : undefined); new LazyForRow(this.lazyForOf[idx], idx, sync), idx < this.prevIdx ? 0 : undefined);
this.prevIdx = idx; this.prevIdx = idx;
view.context.index = idx; view.context.index = idx;
(<any>view as ChangeDetectorRef).markForCheck(); (<any>view as ChangeDetectorRef).markForCheck();
@ -165,6 +156,7 @@ export class LazyFor {
} }
ngOnInit() { ngOnInit() {
if (!this.lazyForOf) return;
this.lazyTasks.addTasks(this.lazyForOf, this.nextIteration.bind(this)) this.lazyTasks.addTasks(this.lazyForOf, this.nextIteration.bind(this))
} }
} }