From 16fec28ee4a81f2c535493bf8ab91b6d22213247 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Sat, 25 Sep 2021 14:16:29 +0200
Subject: [PATCH] [player] Refactor layout component
Because the always visible page is now positioned at the first place of
the unit definition.
---
.../components/layout/layout.component.html | 36 +++++++++----------
.../app/components/layout/layout.component.ts | 25 +++----------
2 files changed, 22 insertions(+), 39 deletions(-)
diff --git a/projects/player/src/app/components/layout/layout.component.html b/projects/player/src/app/components/layout/layout.component.html
index 9d994f549..0401acd90 100644
--- a/projects/player/src/app/components/layout/layout.component.html
+++ b/projects/player/src/app/components/layout/layout.component.html
@@ -32,9 +32,9 @@
[hideFirstChild]="hidePageLabels"
[style.max-width]="alwaysVisiblePage.hasMaxWidth ? alwaysVisiblePage.maxWidth + 'px' : '100%'"
[style.margin.px]="alwaysVisiblePage.margin">
- <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}} {{selectedIndex}}</div>
+ <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}}</div>
<app-page [parentArrayIndex]="alwaysVisibleUnitPageIndex"
- [index]="playerPageIndices[alwaysVisibleUnitPageIndex]"
+ [index]="alwaysVisibleUnitPageIndex"
[parentForm]="parentForm"
[isLastPage]="false"
[pagesContainer]="alwaysVisiblePageContainer"
@@ -70,15 +70,14 @@
mat-align-tabs="start"
[(selectedIndex)]="selectedIndex"
(selectedIndexChange)="onSelectedIndexChange($event)">
- <ng-container *ngFor="let page of pages; let i = index">
- <mat-tab *ngIf="!page.alwaysVisible"
- label="{{'pageIndication' | translate: {index: playerPageIndices[i] + 1} }}">
+ <ng-container *ngFor="let page of scrollPages; let i = index; let last = last">
+ <mat-tab [label]="'pageIndication' | translate: {index: i + 1}">
<div [style.margin.px]="page.margin"
[style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'">
- <app-page [parentArrayIndex]="i"
- [index]="playerPageIndices[i]"
+ <app-page [parentArrayIndex]="scrollPagesIndices[i]"
+ [index]="scrollPagesIndices[i]"
[parentForm]="parentForm"
- [isLastPage]="i === lastScrollPageIndex"
+ [isLastPage]="last"
[pagesContainer]="pagesContainer"
[page]="page">
</app-page>
@@ -89,26 +88,25 @@
</ng-template>
<ng-template #scrollPagesScrolledView let-pagesContainer>
- <ng-container *ngFor="let page of pages; let i = index">
- <div *ngIf="!page.alwaysVisible"
- [class.concat-scroll-snap-align]="scrollPageMode === 'concat-scroll-snap'"
- appHideFirstChild
+ <ng-container *ngFor="let page of scrollPages; let i = index; let last = last">
+ <div appHideFirstChild
[hideFirstChild]="hidePageLabels"
+ [class.concat-scroll-snap-align]="scrollPageMode === 'concat-scroll-snap'"
+ [style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'"
+ [style.margin.px]="page.margin"
appScrollIndex
[pagesContainer]="pagesContainer"
[selectIndex]="selectIndex"
- [index]="playerPageIndices[i]"
- [style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'"
- [style.margin.px]="page.margin">
+ [index]="i">
<div class="mat-tab-label">
- {{'pageIndication' | translate: {index: playerPageIndices[i] + 1} }}
+ {{'pageIndication' | translate: {index: i + 1} }}
</div>
- <app-page [parentArrayIndex]="i"
- [index]="playerPageIndices[i]"
+ <app-page [parentArrayIndex]="scrollPagesIndices[i]"
+ [index]="scrollPagesIndices[i]"
[parentForm]="parentForm"
[pagesContainer]="pagesContainer"
[page]="page"
- [isLastPage]="i === lastScrollPageIndex"
+ [isLastPage]="last"
(selectedIndexChange)="onSelectedIndexChange($event)">
</app-page>
</div>
diff --git a/projects/player/src/app/components/layout/layout.component.ts b/projects/player/src/app/components/layout/layout.component.ts
index 2f6a4a79a..41b6076a2 100644
--- a/projects/player/src/app/components/layout/layout.component.ts
+++ b/projects/player/src/app/components/layout/layout.component.ts
@@ -27,9 +27,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
private ngUnsubscribe = new Subject<void>();
isKeyboardOpen!: boolean;
-
- playerPageIndices!: number[];
- lastScrollPageIndex!: number;
+ scrollPagesIndices!: number[];
scrollPages!: UnitPage[];
hasScrollPages!: boolean;
alwaysVisiblePage!: UnitPage | undefined;
@@ -65,26 +63,13 @@ export class LayoutComponent implements OnInit, OnDestroy {
.subscribe((isOpen: boolean): void => { this.isKeyboardOpen = isOpen; });
}
- private getLastScrollPageIndex(): number {
- if (this.alwaysVisibleUnitPageIndex < 0 || this.alwaysVisibleUnitPageIndex < this.pages.length - 1) {
- return this.pages.length - 1;
- }
- return this.pages.length - 2;
- }
-
private initPages(): void {
this.alwaysVisibleUnitPageIndex = this.pages.findIndex((page: UnitPage): boolean => page.alwaysVisible);
this.alwaysVisiblePage = this.pages[this.alwaysVisibleUnitPageIndex];
this.scrollPages = this.pages.filter((page: UnitPage): boolean => !page.alwaysVisible);
- this.hasScrollPages = this.scrollPages && this.scrollPages.length > 0;
- this.lastScrollPageIndex = this.getLastScrollPageIndex();
- this.playerPageIndices = this.pages.map(
- (page: UnitPage, index: number): number => {
- if (index === this.alwaysVisibleUnitPageIndex) {
- return this.pages.length - 1;
- }
- return (this.alwaysVisibleUnitPageIndex < 0 || index < this.alwaysVisibleUnitPageIndex) ? index : index - 1;
- }
+ this.hasScrollPages = this.scrollPages?.length > 0;
+ this.scrollPagesIndices = this.scrollPages.map(
+ (scrollPage: UnitPage): number => this.pages.indexOf(scrollPage)
);
this.validPagesDetermined.emit(this.scrollPages.map((page: UnitPage, index: number): Record<string, string> => (
{ [index.toString(10)]: `${this.translateService.instant('pageIndication', { index: index + 1 })}` })));
@@ -108,7 +93,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
this.aspectRatioColumn.scrollPages = this.getAspectRatio('column', -100);
this.containerMaxWidth.alwaysVisiblePage = this.getContainerMaxWidth(
- !(this.alwaysVisiblePage && this.alwaysVisiblePage.hasMaxWidth),
+ !(this.alwaysVisiblePage?.hasMaxWidth),
this.maxWidth.alwaysVisiblePage
);
this.containerMaxWidth.scrollPages = this.getContainerMaxWidth(
--
GitLab