diff --git a/src/app/app.component.html b/src/app/app.component.html index a7ebdc4..dae8e7c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,7 @@ - +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a8809cb..c1d7b95 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,7 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {fader} from './animations'; +import {ScrollService} from './services/scroll.service'; +import {PerfectScrollbarComponent} from 'ngx-perfect-scrollbar'; @Component({ selector: 'app-root', @@ -9,9 +11,24 @@ import {fader} from './animations'; }) export class AppComponent implements OnInit { public static hideLoader = () => document.querySelector('#load-bg').classList.add('hidden'); + @ViewChild('scrollbar', {static: false}) scrollbar: PerfectScrollbarComponent; + + constructor(private scrollService: ScrollService) { + scrollService.restoreScrollPosition$.subscribe(pos => { + if (this.scrollbar && pos) { + //this.scrollbar.scrollTo(pos, 0); + this.scrollbar.directiveRef.scrollTo(0, pos, 300) + // debugger; + } + }) + } public ngOnInit(): void { setTimeout(() => AppComponent.hideLoader(), 800); } + + onScoll($event: { srcElement: { scrollTop: number } }) { + this.scrollService.saveScrollPosition($event.srcElement.scrollTop); + } } diff --git a/src/app/modules/songs/song-list/song-list.component.ts b/src/app/modules/songs/song-list/song-list.component.ts index 3e9ec99..ac967af 100644 --- a/src/app/modules/songs/song-list/song-list.component.ts +++ b/src/app/modules/songs/song-list/song-list.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnDestroy, OnInit} from '@angular/core'; import {SongService} from '../services/song.service'; import {Song} from '../services/song'; import {debounceTime, map} from 'rxjs/operators'; @@ -7,6 +7,7 @@ import {fade} from '../../../animations'; import {ActivatedRoute} from '@angular/router'; import {filterSong} from '../../../services/filter.helper'; import {FilterValues} from './filter/filter-values'; +import {ScrollService} from '../../../services/scroll.service'; @Component({ selector: 'app-songs', @@ -14,12 +15,15 @@ import {FilterValues} from './filter/filter-values'; styleUrls: ['./song-list.component.less'], animations: [fade] }) -export class SongListComponent implements OnInit { +export class SongListComponent implements OnInit, OnDestroy { public songs$: Observable; public anyFilterActive = false; - constructor(private songService: SongService, private activatedRoute: ActivatedRoute) { + constructor( + private songService: SongService, + private activatedRoute: ActivatedRoute, + private scrollService: ScrollService) { } ngOnInit() { @@ -41,6 +45,11 @@ export class SongListComponent implements OnInit { }) ); + setTimeout(() => this.scrollService.restoreScrollPositionFor('songlist'), 100); + } + + public ngOnDestroy(): void { + this.scrollService.storeScrollPositionFor('songlist'); } private filter(song: Song, filter: FilterValues): boolean { diff --git a/src/app/modules/songs/song/song.component.html b/src/app/modules/songs/song/song.component.html index 689eb19..002e814 100644 --- a/src/app/modules/songs/song/song.component.html +++ b/src/app/modules/songs/song/song.component.html @@ -39,9 +39,11 @@ - -

- -

-
+ + +

+ +

+
+
diff --git a/src/app/services/scroll.service.spec.ts b/src/app/services/scroll.service.spec.ts new file mode 100644 index 0000000..d372776 --- /dev/null +++ b/src/app/services/scroll.service.spec.ts @@ -0,0 +1,16 @@ +import {TestBed} from '@angular/core/testing'; + +import {ScrollService} from './scroll.service'; + +describe('ScrollService', () => { + let service: ScrollService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ScrollService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/scroll.service.ts b/src/app/services/scroll.service.ts new file mode 100644 index 0000000..748928c --- /dev/null +++ b/src/app/services/scroll.service.ts @@ -0,0 +1,25 @@ +import {Injectable} from '@angular/core'; +import {BehaviorSubject} from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class ScrollService { + private scrollPosition: number; + private scrollSlots = {}; + private _restoreScrollPosition$ = new BehaviorSubject(0); + public restoreScrollPosition$ = this._restoreScrollPosition$.asObservable(); + + public saveScrollPosition(pos: number) { + this.scrollPosition = pos; + } + + public storeScrollPositionFor(slot: string) { + this.scrollSlots[slot] = this.scrollPosition; + } + + public restoreScrollPositionFor(slot: string) { + const pos = this.scrollSlots[slot]; + this._restoreScrollPosition$.next(pos); + } +}