diff --git a/projects/player/src/app/components/layout/layout.component.css b/projects/player/src/app/components/layout/layout.component.css
index aa11682c19b2bf1704bf7699e4c4636e903ecf6b..85bbc17ffd5e8c533cc813521a07c997462edb15 100644
--- a/projects/player/src/app/components/layout/layout.component.css
+++ b/projects/player/src/app/components/layout/layout.component.css
@@ -7,17 +7,14 @@
}
.page-container{
- overflow: scroll;
- margin-left: 1vw;
- margin-top: 1vh;
+ flex: 1 1 100%;
+ overflow: auto;
}
.layout-container{
- max-height: 100vh;
+ margin: auto;
}
-.tab-page-container{
- overflow: hidden;
- margin-left: 1vw;
- margin-top: 1vh;
+.layout-flex-container{
+ height: 100vh;
}
diff --git a/projects/player/src/app/components/layout/layout.component.html b/projects/player/src/app/components/layout/layout.component.html
index 08f0d74c0de4c984eb2452003a5e9764e2069f9d..6ac2ab4eb6a285647e5b0562b469bb02d804a40f 100644
--- a/projects/player/src/app/components/layout/layout.component.html
+++ b/projects/player/src/app/components/layout/layout.component.html
@@ -1,21 +1,28 @@
-<div class="layout-container" #layoutContainer [fxLayout]="layoutAlignment">
- <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'top' || alwaysVisiblePagePosition === 'left' ?
- alwaysVisiblePageView :
- scrollPagesView"></ng-container>
- <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'bottom' || alwaysVisiblePagePosition === 'right' ?
- alwaysVisiblePageView :
- scrollPagesView"></ng-container>
+<div class="layout-container" [style.max-width.px]="layoutWidth">
+ <div class="layout-flex-container"
+ [fxLayout]="layoutAlignment">
+ <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'top' || alwaysVisiblePagePosition === 'left' ?
+ alwaysVisiblePageView :
+ scrollPagesView"></ng-container>
+ <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'bottom' || alwaysVisiblePagePosition === 'right' ?
+ alwaysVisiblePageView :
+ scrollPagesView"></ng-container>
+ </div>
</div>
<ng-template #alwaysVisiblePageView>
<div *ngIf="alwaysVisiblePage"
+ #alwaysVisiblePageContainer
class="page-container"
- [fxFlex]="pageExpansion">
- <div appHideFirstChild [hideFirstChild]="hidePageLabels">
- <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}}</div>
+ [style.max-width.px]="layoutAlignment === 'row' ? alwaysVisiblePageWidth : layoutWidth">
+ <div appHideFirstChild
+ [hideFirstChild]="hidePageLabels"
+ [style.max-width.px]="alwaysVisiblePage.width"
+ [style.margin.px]="alwaysVisiblePage.margin">
+ <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}}</div>
<app-page [parentArrayIndex]="alwaysVisibleUnitPageIndex"
[parentForm]="parentForm"
- [pagesContainer]="layoutContainer"
+ [pagesContainer]="alwaysVisiblePageContainer"
[page]="alwaysVisiblePage">
</app-page>
</div>
@@ -31,45 +38,52 @@
</ng-template>
<ng-template #scrollPagesSeparatedView>
+ <div #pagesSeparatedContainer
+ class="page-container"
+ [style.max-width.px]="layoutAlignment === 'row' ? scrollPageWidth : layoutWidth">
<mat-tab-group appHideFirstChild
[hideFirstChild]="hidePageLabels"
- class="tab-page-container"
- [fxFlex]="pageExpansion"
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} }}">
- <app-page [parentArrayIndex]="i"
- [parentForm]="parentForm"
- [pagesContainer]="layoutContainer"
- [page]="page">
- </app-page>
+ <div [style.margin.px]="page.margin" [style.max-width.px]="page.width">
+ <app-page [parentArrayIndex]="i"
+ [parentForm]="parentForm"
+ [pagesContainer]="pagesSeparatedContainer"
+ [page]="page">
+ </app-page>
+ </div>
</mat-tab>
</ng-container>
</mat-tab-group>
+ </div>
</ng-template>
<ng-template #scrollPagesScrolledView>
- <div class="page-container"
- [ngClass]="{'concat-scroll-snap' : playerConfig.pagingMode === 'concat-scroll-snap'}"
- [fxFlex]="pageExpansion">
+ <div #pagesScrolledContainer
+ class="page-container"
+ [class.concat-scroll-snap]="playerConfig.pagingMode === 'concat-scroll-snap'"
+ [style.max-width.px]="layoutAlignment === 'row' ? scrollPageWidth : layoutWidth">
<div fxLayout="column">
<ng-container *ngFor="let page of pages; let i = index">
<div *ngIf="!page.alwaysVisible"
- [ngClass]="{'concat-scroll-snap-align' : playerConfig.pagingMode === 'concat-scroll-snap'}"
+ [class.concat-scroll-snap-align]="playerConfig.pagingMode === 'concat-scroll-snap'"
appHideFirstChild
[hideFirstChild]="hidePageLabels"
appScrollIndex
[selectedIndex]="selectedIndex"
- [index]="playerPageIndices[i]">
+ [index]="playerPageIndices[i]"
+ [style.max-width.px]="page.width"
+ [style.margin.px]="page.margin">
<div class="mat-tab-label">
{{'pageIndication' | translate: {index: playerPageIndices[i] + 1} }}
</div>
<app-page [parentArrayIndex]="i"
[parentForm]="parentForm"
- [pagesContainer]="layoutContainer"
+ [pagesContainer]="pagesScrolledContainer"
[page]="page"
(selectedIndexChange)="onSelectedIndexChange($event)">
</app-page>
diff --git a/projects/player/src/app/components/layout/layout.component.ts b/projects/player/src/app/components/layout/layout.component.ts
index 6e9415c1e96053168e5d602dd2abe81c59b29e21..833c1e9bee19f9955d2789b3c2e1629106fe5a49 100644
--- a/projects/player/src/app/components/layout/layout.component.ts
+++ b/projects/player/src/app/components/layout/layout.component.ts
@@ -31,6 +31,9 @@ export class LayoutComponent implements OnInit {
layoutAlignment!: 'row' | 'column';
scrollPageMode!: 'separate' | 'concat-scroll' | 'concat-scroll-snap';
hidePageLabels!: boolean;
+ layoutWidth!: number;
+ alwaysVisiblePageWidth!: number;
+ scrollPageWidth!: number;
constructor(private translateService: TranslateService) { }
@@ -64,8 +67,21 @@ export class LayoutComponent implements OnInit {
this.pageExpansion = !this.alwaysVisiblePage || !this.hasScrollPages ? 100 : 50;
this.scrollPageMode = this.playerConfig.pagingMode ? this.playerConfig.pagingMode : 'separate';
this.hidePageLabels = false;
+
+ this.alwaysVisiblePageWidth = this.getAbsolutePageWidth(this.alwaysVisiblePage);
+ this.scrollPageWidth = this.calculateScrollPagesWidth();
+
+ this.layoutWidth = this.layoutAlignment === 'row' ?
+ this.alwaysVisiblePageWidth + this.scrollPageWidth : Math.max(this.alwaysVisiblePageWidth, this.scrollPageWidth);
}
+ private calculateScrollPagesWidth(): number {
+ return this.hasScrollPages ?
+ Math.max(...this.scrollPages.map((page: UnitPage): number => this.getAbsolutePageWidth(page))) : 0;
+ }
+
+ private getAbsolutePageWidth = (page: UnitPage | undefined): number => ((page) ? 2 * page.margin + page.width : 0);
+
onSelectedIndexChange(selectedIndex: number): void {
this.selectedIndexChange.emit(selectedIndex);
}
diff --git a/projects/player/src/app/components/page/page.component.html b/projects/player/src/app/components/page/page.component.html
index 730168a2d96d349c133f342fc9922345e03987c6..23c4f7a016109851febcbe7c1c2e6a369042eae0 100644
--- a/projects/player/src/app/components/page/page.component.html
+++ b/projects/player/src/app/components/page/page.component.html
@@ -9,10 +9,11 @@
[section]="section"
[ngStyle]="{
position: 'relative',
- display: 'inline-block',
+ display: 'block',
+ overflow: 'auto',
+ width: '100%',
'background-color': section.backgroundColor,
- 'height.px': section.height,
- 'width.px': section.width }">
+ 'min-height.px': section.height}">
</app-section>
<div appIntersectionDetection
detectionType="bottom"
diff --git a/projects/player/src/app/components/section/section.component.html b/projects/player/src/app/components/section/section.component.html
index f9760861d84d899612fe09d5208ea539045bdc22..7079685564177d240dc676b22147ccedeb3eed7e 100644
--- a/projects/player/src/app/components/section/section.component.html
+++ b/projects/player/src/app/components/section/section.component.html
@@ -19,7 +19,7 @@
<div [style.display]="'grid'"
[style.grid-template-columns]="section.gridColumnSizes"
[style.grid-template-rows]="section.gridRowSizes"
- [style.height.%]="100">
+ [style.min-height.px]="section.height">
<div *ngFor="let element of section.elements; let i = index"
[style.min-width.px]="element.width"
[style.min-height.px]="element.height"
diff --git a/projects/player/src/index.html b/projects/player/src/index.html
index 5c1c3fbe6b22c889d5a3de54edc995e709122383..00d1f29322eecd1acd3b56040b666084733e76c6 100644
--- a/projects/player/src/index.html
+++ b/projects/player/src/index.html
@@ -23,7 +23,9 @@
<fieldset>
<h4>Load Unit Definition</h4>
<input type='file' id='fileInput' accept='.json,application/json'>
- <input type='button' value='Load' onclick='loadUnitDefinition();'>
+ <input type='button' value='Load separate' onclick='loadUnitDefinition("separate");'>
+ <input type='button' value='Load snap' onclick='loadUnitDefinition("concat-scroll-snap");'>
+ <input type='button' value='Load scroll' onclick='loadUnitDefinition("concat-scroll");'>
</fieldset>
</form>
<button onclick='denyNavigation();'>Deny Navigation</button>
@@ -50,7 +52,7 @@
}, '*');
}
- loadUnitDefinition = () => {
+ loadUnitDefinition = (pagingMode) => {
const setStartData = (e) => {
window.postMessage({
type: 'vopStartCommand',
@@ -61,7 +63,7 @@
},
playerConfig: {
stateReportPolicy: 'eager',
- pagingMode: 'separate', //concat-scroll, separate, concat-scroll-snap
+ pagingMode: pagingMode, //concat-scroll, separate, concat-scroll-snap
logPolicy: 'rich',
startPage: 'page0',
enabledNavigationTargets: ['next']
diff --git a/projects/player/src/styles.css b/projects/player/src/styles.css
index 910c5c6ece693f2a1ef44faed3bb205271f617ae..d9d9d6021740ad854b181f0aed1601c76c33c607 100644
--- a/projects/player/src/styles.css
+++ b/projects/player/src/styles.css
@@ -1,4 +1,4 @@
body {
overflow: hidden;
margin: 0;
-}/* You can add global styles to this file, and also import other style files */
+}