diff --git a/docs/release-notes-editor.md b/docs/release-notes-editor.md
index 68da2dee1970d98eaf6823e53a6648bf3ff9dc37..6314446f0542c39852329526b13b9112caee6875 100644
--- a/docs/release-notes-editor.md
+++ b/docs/release-notes-editor.md
@@ -1,5 +1,9 @@
Editor
======
+## 1.36.0
+### Neue Funktionen
+- Bietet unterschiedliche Startpositionen für schwebende Eingabehilfen an
+
## 1.35.3
### Verbesserungen
- Ändert Symbol und Tooltip-Namen für Knopf als Lückentextelement
diff --git a/docs/release-notes-player.md b/docs/release-notes-player.md
index e3acf7d2345ccff6ed8023bea72c270e3db47df7..919805f44fb849824671efa60d58b75f1a420f50 100644
--- a/docs/release-notes-player.md
+++ b/docs/release-notes-player.md
@@ -1,5 +1,20 @@
Player
======
+## 1.29.0
+### Verbesserungen
+- Elemente von Ablegelisten, die nur ein Element zulassen, werden nur dann zentriert dargestellt,
+ wenn die Ablegelisten innerhalb von Lückentexten angelegt sind
+- Eingabehilfen bewegen sich innerhalb des sichtbaren Bereichs einer Seite mit,
+ wenn die Seite gescrollt wird
+
+##Fehlerbehebungen
+- Stellt die erreichte Sichtbarkeit von Abschnitte mit eingestellter Verzögerung beim erneuten Laden einer
+ Unit wieder her
+
+ Folgendes ist zu beachten:
+ - Abschnitte mit eingestellter Verzögerung dürfen nicht leer sein
+ - Bereits verstrichene Zeit kann beim erneuten Laden berücksichtigt werden
+
## 1.28.4
### Fehlerbehebungen
- Korrigiert Darstellungsfehler von hervorzuhebenden Textbereichen, bei gleichzeitiger Markierung
diff --git a/docs/unit_definition_changelog.txt b/docs/unit_definition_changelog.txt
index 51bc98f59a43cfe5bb19b8276ce05b3b01ecf512..dd3ead2512bdafcbacb2221848de3e9df44c8a24 100644
--- a/docs/unit_definition_changelog.txt
+++ b/docs/unit_definition_changelog.txt
@@ -64,3 +64,7 @@ iqb-aspect-definition@1.0.0
+ returnToOriginOnReplacement?: boolean;
+ originListID?: string;
+ originListIndex?: number;
+
+3.9.0
+- TextFieldElement/TextFieldSimpleElement/SpellCorrectElement/TextAreaElement
+ +inputAssistanceFloatingStartPosition: 'startBottom' | 'endCenter';
diff --git a/package.json b/package.json
index bbfa8f0d7ab5cc75c1d78055c9fd9aa3e64bf769..3e60084ac86c41d521390f89d5a2659ae31cb9c3 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
{
"name": "verona-modules-aspect",
"config": {
- "player_version": "1.28.4",
- "editor_version": "1.35.3",
- "unit_definition_version": "3.8.0"
+ "player_version": "1.29.0",
+ "editor_version": "1.36.0",
+ "unit_definition_version": "3.9.0"
},
"scripts": {
"ng": "ng",
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index 7c9f07a59bf424f6b225983058768d1c3367c4dd..4a67442a1c729704a50b02604eff005508aa3f04 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -44,7 +44,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
<div *ngIf="!dropListValueElement.imgSrc"
class="list-item"
fxLayout="row"
- [fxLayoutAlign]="elementModel.onlyOneItem ? 'center center' : 'none'"
+ [fxLayoutAlign]="elementModel.onlyOneItem ? (clozeContext ? 'center center' : 'start center') : 'none'"
draggable="true"
(dragstart)="dragStart($event, dropListValueElement, index)" (dragend)="dragEnd($event)"
(dragenter)="dragEnterItem($event)"
@@ -76,9 +76,10 @@ import { FormElementComponent } from '../../directives/form-element-component.di
'.list {padding: 2px;}',
'.list-item {border-radius: 5px;}',
':not(.cloze-context) .list-item {padding: 10px;}',
- '.cloze-context .list-item {padding: 0 5px; text-align: center; line-height: 1.2;}',
- '.only-one-item .list-item {padding: 0 !important; line-height: 1.2; text-align: center;}',
- '.only-one-item .list-item {height: 100%; min-height: 100%; min-width: 100%; width: 100%;}',
+ '.cloze-context .list-item {padding: 0 5px; line-height: 1.2;}',
+ '.only-one-item.cloze-context .list-item {padding: 0;}',
+ '.only-one-item:not(.cloze-context) .list-item {padding: 0 10px;}',
+ '.only-one-item .list-item {height: 100%; min-height: 100%; min-width: 100%; width: 100%; line-height: 1.2;}',
'img.list-item {align-self: start; padding: 2px !important;}',
'.vertical-orientation .list-item:not(:last-child) {margin-bottom: 5px;}',
'.horizontal-orientation .list-item:not(:last-child) {margin-right: 5px;}',
diff --git a/projects/common/models/elements/element.ts b/projects/common/models/elements/element.ts
index 5a81785c1e79e585145b12d0cd80b066e2c4b90e..dab687d66e12f97cdf8cf43e6eee07e186b509e7 100644
--- a/projects/common/models/elements/element.ts
+++ b/projects/common/models/elements/element.ts
@@ -137,6 +137,7 @@ export abstract class TextInputElement extends InputElement {
inputAssistancePreset: InputAssistancePreset = null;
inputAssistanceCustomKeys: string = '';
inputAssistancePosition: 'floating' | 'right' = 'floating';
+ inputAssistanceFloatingStartPosition: 'startBottom' | 'endCenter' = 'startBottom';
restrictedToInputAssistanceChars: boolean = true;
hasArrowKeys: boolean = false;
showSoftwareKeyboard: boolean = false;
@@ -148,6 +149,9 @@ export abstract class TextInputElement extends InputElement {
this.inputAssistanceCustomKeys = element.inputAssistanceCustomKeys;
}
if (element.inputAssistancePosition) this.inputAssistancePosition = element.inputAssistancePosition;
+ if (element.inputAssistanceFloatingStartPosition) {
+ this.inputAssistanceFloatingStartPosition = element.inputAssistanceFloatingStartPosition;
+ }
if (element.restrictedToInputAssistanceChars !== undefined) {
this.restrictedToInputAssistanceChars = element.restrictedToInputAssistanceChars;
}
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts
index 7c9c44980c67de0fca80f26c0d3f0e34c908cb9d..7644cbc1b0d2bfdef0c13987c232553f2cc4b542 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts
@@ -135,6 +135,21 @@ import { CombinedProperties } from 'editor/src/app/components/properties-panel/e
</mat-option>
</mat-select>
</mat-form-field>
+ <mat-form-field *ngIf="combinedProperties.inputAssistancePreset !== null &&
+ combinedProperties.inputAssistancePosition === 'floating'"
+ appearance="fill">
+ <mat-label>{{'propertiesPanel.inputAssistanceFloatingStartPosition' | translate }}</mat-label>
+ <mat-select [value]="combinedProperties.inputAssistanceFloatingStartPosition"
+ (selectionChange)="updateModel.emit({
+ property: 'inputAssistanceFloatingStartPosition',
+ value: $event.value
+ })">
+ <mat-option *ngFor="let option of ['startBottom', 'endCenter']"
+ [value]="option">
+ {{ 'propertiesPanel.' + option | translate }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
<mat-checkbox *ngIf="combinedProperties.inputAssistancePreset !== null &&
combinedProperties.restrictedToInputAssistanceChars !== undefined"
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index dc2716a01f0e61581f8a06e596e02f72d08c9bac..af2a25819b9b83692aad440c315460fc3473124a 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -139,6 +139,9 @@
"custom": "Eigene Zeichen",
"inputAssistanceCustomKeys": "Zeichenkette",
"inputAssistancePosition": "Eingabehilfeposition",
+ "inputAssistanceFloatingStartPosition": "Schwebende Startposition",
+ "startBottom": "vorne (unterhalb)",
+ "endCenter": "hinten (zentriert)",
"floating": "schwebend",
"showSoftwareKeyboard": "Tastatur einblenden",
"softwareKeyboardShowFrench": "Tastatur: Französische Sonderzeichen",
diff --git a/projects/player/src/app/app.module.ts b/projects/player/src/app/app.module.ts
index 04c0e7cbef60efe303876a93099338512cb97b68..0d12cfaa942e5d2db7e52fddbcd4e0716e3e1b72 100644
--- a/projects/player/src/app/app.module.ts
+++ b/projects/player/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { SharedModule, APIService } from 'common/shared.module';
import { KeyInputModule } from 'player/modules/key-input/key-input.module';
import { UnitMenuModule } from 'player/modules/unit-menu/unit-menu.module';
import { MetaDataService } from 'player/src/app/services/meta-data.service';
+import { ScrollingModule } from '@angular/cdk/scrolling';
import { AppComponent } from './app.component';
import { PageComponent } from './components/page/page.component';
import { SectionComponent } from './components/section/section.component';
@@ -96,6 +97,7 @@ import { ExternalAppGroupElementComponent } from
}
}),
OverlayModule,
+ ScrollingModule,
UnitMenuModule
],
providers: [
diff --git a/projects/player/src/app/components/floating-keypad/floating-keypad.component.html b/projects/player/src/app/components/floating-keypad/floating-keypad.component.html
index 842e27cfa39a86dd3066979d8a2800ce634ae286..d434a88a9741d4a10e368604600a77aa494cc103 100644
--- a/projects/player/src/app/components/floating-keypad/floating-keypad.component.html
+++ b/projects/player/src/app/components/floating-keypad/floating-keypad.component.html
@@ -1,7 +1,10 @@
<ng-template
*ngIf="keypadService.preset"
cdkConnectedOverlay
+ cdkConnectedOverlayPush
+ [cdkConnectedOverlayScrollStrategy]="repositionScrollStrategy"
[cdkConnectedOverlayOrigin]="keypadService.elementComponent"
+ [cdkConnectedOverlayPositions]="overlayPositions"
[cdkConnectedOverlayOpen]="isKeypadOpen && keypadService.position === 'floating'">
<aspect-keypad
cdkDrag
diff --git a/projects/player/src/app/components/floating-keypad/floating-keypad.component.spec.ts b/projects/player/src/app/components/floating-keypad/floating-keypad.component.spec.ts
index 4230ba092c7341dfae04981eaa603db1b5b89477..ba4b0d69704c745c515608c7894e5c405c9707a5 100644
--- a/projects/player/src/app/components/floating-keypad/floating-keypad.component.spec.ts
+++ b/projects/player/src/app/components/floating-keypad/floating-keypad.component.spec.ts
@@ -1,4 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { OverlayModule } from '@angular/cdk/overlay';
import { FloatingKeypadComponent } from './floating-keypad.component';
describe('FloatingKeypadComponent', () => {
@@ -7,7 +8,8 @@ describe('FloatingKeypadComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ FloatingKeypadComponent ]
+ imports: [OverlayModule],
+ declarations: [FloatingKeypadComponent]
})
.compileComponents();
});
@@ -21,5 +23,4 @@ describe('FloatingKeypadComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
-
});
diff --git a/projects/player/src/app/components/floating-keypad/floating-keypad.component.ts b/projects/player/src/app/components/floating-keypad/floating-keypad.component.ts
index f97adbd6fac281edd08c54ea970dee09991eb62e..5a220ed67dd1087a9f6e0c93b198630e44873526 100644
--- a/projects/player/src/app/components/floating-keypad/floating-keypad.component.ts
+++ b/projects/player/src/app/components/floating-keypad/floating-keypad.component.ts
@@ -1,6 +1,7 @@
import {
- Component, Input
+ Component, Input, OnChanges, SimpleChanges
} from '@angular/core';
+import { ConnectedPosition, Overlay, RepositionScrollStrategy } from '@angular/cdk/overlay';
import { KeypadService } from '../../services/keypad.service';
@Component({
@@ -8,10 +9,43 @@ import { KeypadService } from '../../services/keypad.service';
templateUrl: './floating-keypad.component.html',
styleUrls: ['./floating-keypad.component.scss']
})
-export class FloatingKeypadComponent {
+export class FloatingKeypadComponent implements OnChanges {
@Input() isKeypadOpen!: boolean;
+ repositionScrollStrategy: RepositionScrollStrategy;
+ overlayPositions: ConnectedPosition[] = [];
+
+ private static overlayPositionsConfig: { startBottom: ConnectedPosition[], endCenter: ConnectedPosition[] } = {
+ startBottom: [{
+ originX: 'start',
+ originY: 'bottom',
+ overlayX: 'start',
+ overlayY: 'top'
+ }, {
+ originX: 'start',
+ originY: 'top',
+ overlayX: 'start',
+ overlayY: 'bottom'
+ }],
+ endCenter: [{
+ originX: 'end',
+ originY: 'center',
+ overlayX: 'start',
+ overlayY: 'center'
+ }]
+ };
+
constructor(
+ private overlay: Overlay,
public keypadService: KeypadService
- ) {}
+ ) {
+ this.repositionScrollStrategy = overlay.scrollStrategies.reposition();
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.isKeypadOpen && this.isKeypadOpen) {
+ this.overlayPositions = FloatingKeypadComponent
+ .overlayPositionsConfig[this.keypadService.elementComponent.elementModel.inputAssistanceFloatingStartPosition];
+ }
+ }
}
diff --git a/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.html b/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.html
index 626bd0d543ff6a7ffb376419b4923ec9abeafc69..d7fd4ecbb4fdaf5106e6f8dd1fba1e4217b9f6d5 100644
--- a/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.html
+++ b/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.html
@@ -1,4 +1,5 @@
<div class="pages-container"
+ cdkScrollable
[fxLayout]="layoutAlignment">
<ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'top' || alwaysVisiblePagePosition === 'left' ?
alwaysVisiblePageView :
@@ -12,6 +13,7 @@
<aspect-page-scroll-button
*ngIf="alwaysVisiblePage"
class="page-container"
+ cdkScrollable
[isSnapMode]="false"
[style.max-height.%]="aspectRatioColumn.alwaysVisiblePage"
[style.max-width.%]="aspectRatioRow.alwaysVisiblePage">
@@ -42,6 +44,7 @@
<ng-container *ngIf="hasScrollPages">
<aspect-page-scroll-button
class="page-container"
+ cdkScrollable
[isSnapMode]="scrollPageMode === 'concat-scroll-snap'"
[class.concat-scroll-snap]="scrollPageMode === 'concat-scroll-snap'"
[style.max-height.%]="aspectRatioColumn.scrollPages"
diff --git a/projects/player/src/app/directives/section-visibility-handling.directive.ts b/projects/player/src/app/directives/section-visibility-handling.directive.ts
index 5255465a624373ba4a2cc12aac6296a84e4bcb1e..3bdac732cfddd14f998e57c7085cee08a0c72b81 100644
--- a/projects/player/src/app/directives/section-visibility-handling.directive.ts
+++ b/projects/player/src/app/directives/section-visibility-handling.directive.ts
@@ -2,6 +2,8 @@ import { Directive, ElementRef, Input } from '@angular/core';
import { delay, Subject } from 'rxjs';
import { Section } from 'common/models/section';
import { takeUntil } from 'rxjs/operators';
+import { ElementCodeStatusValue } from 'player/modules/verona/models/verona';
+import { UnitStateService } from 'player/src/app/services/unit-state.service';
@Directive({
selector: '[aspectSectionVisibilityHandling]'
@@ -12,21 +14,16 @@ export class SectionVisibilityHandlingDirective {
@Input() pageSections!: Section[];
private isVisible: boolean = true;
- private isScrollSection: boolean = false;
private ngUnsubscribe = new Subject<void>();
- constructor(private elementRef: ElementRef) {}
+ constructor(
+ private elementRef: ElementRef,
+ private unitStateService: UnitStateService
+ ) {}
ngOnInit(): void {
this.setVisibility(!this.section.activeAfterID);
- this.isScrollSection = this.isVisible ?
- false :
- this.pageSections
- .filter(pageSection => pageSection.activeAfterID === this.section.activeAfterID &&
- pageSection.activeAfterIdDelay === this.section.activeAfterIdDelay)
- .findIndex(section => section === this.section) === 0;
-
- if (this.mediaStatusChanged) {
+ if (!this.isVisible) {
this.mediaStatusChanged
.pipe(
takeUntil(this.ngUnsubscribe),
@@ -35,21 +32,33 @@ export class SectionVisibilityHandlingDirective {
}
}
+ private setVisibility(isVisible: boolean): void {
+ this.isVisible = isVisible || this.hasSeenElements;
+ this.elementRef.nativeElement.style.display = this.isVisible ? null : 'none';
+ }
+
private setActiveAfterID(id: string): void {
- if (!this.isVisible) {
- this.setVisibility(id === this.section.activeAfterID);
- if (this.isScrollSection) {
- this.elementRef.nativeElement.style.scrollMarginTop = 100;
- setTimeout(() => {
- this.elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
- });
- }
+ this.setVisibility(id === this.section.activeAfterID);
+ if (this.isScrollSection) {
+ this.elementRef.nativeElement.style.scrollMarginTop = 100;
+ setTimeout(() => {
+ this.elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ });
}
}
- private setVisibility(isVisible: boolean): void {
- this.isVisible = isVisible;
- this.elementRef.nativeElement.style.display = isVisible ? null : 'none';
+ private get isScrollSection(): boolean {
+ return this.pageSections
+ .filter(pageSection => pageSection.activeAfterID === this.section.activeAfterID &&
+ pageSection.activeAfterIdDelay === this.section.activeAfterIdDelay &&
+ pageSection.getAllElements().length)
+ .findIndex(section => section === this.section) === 0;
+ }
+
+ private get hasSeenElements(): boolean {
+ return this.section.getAllElements()
+ .map(element => this.unitStateService.getElementCodeById(element.id))
+ .some(code => (code ? ElementCodeStatusValue[code.status] > ElementCodeStatusValue.NOT_REACHED : false));
}
ngOnDestroy(): void {