Use auto scroll when moving to next or previous slide.

This commit is contained in:
Chris Witterholt 2023-03-04 01:34:44 +00:00 committed by Mateus Meyer Jiacomelli
parent 0e9567fc76
commit 911966ae1f
3 changed files with 39 additions and 11 deletions

View File

@ -122,11 +122,15 @@ export class AppComponent implements OnInit {
}
nextSlide() {
this.openlpService.nextSlide().subscribe();
this.openlpService.nextSlide().subscribe( _ =>
this.hotKeysService.scrollToCurrentItem('slide', 'start')
);
}
previousSlide() {
this.openlpService.previousSlide().subscribe();
this.openlpService.previousSlide().subscribe(_ =>
this.hotKeysService.scrollToCurrentItem('slide', 'end')
);
}
blankDisplay() {

View File

@ -3,6 +3,7 @@ import { Subscription } from 'rxjs';
import { Slide } from '../../../responses';
import { OpenLPService } from '../../../openlp.service';
import { HotKeysService } from '../../../hotkeys.service';
@Component({
selector: 'openlp-slide-list',
@ -15,9 +16,13 @@ export class SlideListComponent implements OnInit, OnDestroy {
@Output() slideSelected = new EventEmitter<SlideListItem>();
_subscription: Subscription;
loading = false;
previousServiceItemId: string;
isServiceItemChanged: boolean;
constructor(private openlpService: OpenLPService) {
this._subscription = openlpService.stateChanged$.subscribe(item => this.fetchSlides());
constructor(private openlpService: OpenLPService, private hotKeysService: HotKeysService) {
this._subscription = openlpService.stateChanged$.subscribe(_ =>
this.fetchSlides()
);
}
ngOnInit() {
@ -34,13 +39,25 @@ export class SlideListComponent implements OnInit, OnDestroy {
fetchSlides() {
this.loading = true;
this.openlpService.getServiceItem().subscribe(serviceItem => {
this.loading = false;
if (serviceItem instanceof Array) {
this.slides = serviceItem;
}
else {
this.slides = serviceItem.slides;
this.openlpService.getServiceItem().subscribe({
next: (serviceItem) => {
this.loading = false;
if (serviceItem instanceof Array) {
this.slides = serviceItem;
}
else {
this.slides = serviceItem.slides;
if (this.previousServiceItemId !== serviceItem.id) {
this.isServiceItemChanged = true;
this.previousServiceItemId = serviceItem.id;
}
}
},
complete: () => {
if (this.isServiceItemChanged) {
setTimeout(() => this.hotKeysService.scrollToCurrentItem('slide', window.scrollY === 0 ? 'center' : 'end'), 25);
this.isServiceItemChanged = false;
}
}
});
}

View File

@ -42,4 +42,11 @@ export class HotKeysService {
};
});
}
scrollToCurrentItem(type: 'slide'|'service', block: 'start'|'center'|'end'|'nearest') {
document.querySelectorAll(`openlp-${type}-item .selected`)[0]?.scrollIntoView({
behavior: 'smooth',
block
});
}
}