Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-02-07 21:40:32 +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'; 'use strict';
import { Component, ViewChildren, QueryList, Input, 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 { Subject } from 'rxjs/Subject';
import { BaseComponent, SpecManager } from '../base'; import { BaseComponent, SpecManager } from '../base';
import JsonPointer from '../../utils/JsonPointer'; import JsonPointer from '../../utils/JsonPointer';
import { Tabs } from '../../shared/components/index'; import { Tabs } from '../../shared/components/index';
import { AppStateService } from '../../services/index'; import { AppStateService, ScrollService } from '../../services/index';
@Component({ @Component({
selector: 'request-samples', selector: 'request-samples',
@ -26,14 +26,26 @@ export class RequestSamples extends BaseComponent implements OnInit {
selectedLang: Subject<any>; selectedLang: Subject<any>;
samples: Array<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); super(specMgr);
this.selectedLang = this.appState.samplesLanguage; this.selectedLang = this.appState.samplesLanguage;
} }
changeLangNotify(lang) { changeLangNotify(lang) {
let relativeScrollPos = this.scrollService.relativeScrollPos(this.el.nativeElement);
this.selectedLang.next(lang); 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() { init() {

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

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