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

Fix content scrolling on language switch (#130)

Browse Source
This commit is contained in:
Roman Hotsiy 2016-11-02 11:37:33 +02:00
parent 1eb1d2aa7b
commit 1f64346584
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
lib/components/RequestSamples/request-samples.ts
View File

@ -1,14 +1,14 @@
'use strict';
import { Component, ViewChildren, QueryList, Input,
ChangeDetectionStrategy, OnInit, HostBinding } from '@angular/core';
ChangeDetectionStrategy, OnInit, HostBinding, ElementRef, NgZone } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { BaseComponent, SpecManager } from '../base';
import JsonPointer from '../../utils/JsonPointer';
import { Tabs } from '../../shared/components/index';
import { AppStateService } from '../../services/index';
import { AppStateService, ScrollService } from '../../services/index';
@Component({
selector: 'request-samples',
@ -26,14 +26,26 @@ export class RequestSamples extends BaseComponent implements OnInit {
selectedLang: Subject<any>;
samples: Array<any>;
constructor(specMgr:SpecManager, public appState:AppStateService) {
constructor(
specMgr:SpecManager,
public appState:AppStateService,
private scrollService: ScrollService,
private el: ElementRef,
private zone: NgZone
) {
super(specMgr);
this.selectedLang = this.appState.samplesLanguage;
}
changeLangNotify(lang) {
let relativeScrollPos = this.scrollService.relativeScrollPos(this.el.nativeElement);
this.selectedLang.next(lang);
// do scroll in the end of VM turn to have it seamless
let subscription = this.zone.onMicrotaskEmpty.subscribe(() => {
this.scrollService.scrollTo(this.el.nativeElement, relativeScrollPos);
subscription.unsubscribe();
});
}
init() {

13
lib/services/scroll.service.ts
View File

@ -42,17 +42,22 @@ export class ScrollService {
return INVIEW_POSITION.INVIEW;
}
scrollTo($el) {
scrollTo($el, offset:number = 0) {
// TODO: rewrite this to use offsetTop as more reliable solution
let subjRect = $el.getBoundingClientRect();
let offset = this.scrollY() + subjRect.top - this.scrollYOffset() + 1;
let posY = this.scrollY() + subjRect.top - this.scrollYOffset() + offset + 1;
if (this.$scrollParent.scrollTo) {
this.$scrollParent.scrollTo(0, offset);
this.$scrollParent.scrollTo(0, posY);
} else {
this.$scrollParent.scrollTop = offset;
this.$scrollParent.scrollTop = posY;
}
}
relativeScrollPos($el) {
let subjRect = $el.getBoundingClientRect();
return - subjRect.top + this.scrollYOffset() - 1;
}
scrollHandler(evt) {
let isScrolledDown = (this.scrollY() - this.prevOffsetY > 0);
this.prevOffsetY = this.scrollY();