From 0e8b4c77997de9c6d7c0feee87805155e8b51a45 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Mon, 26 Jun 2023 11:00:30 +0200
Subject: [PATCH] [player] Implement support for enableReHide to toggle display
of section
---
.../visibility-rules-dialog.component.html | 2 +-
.../section-visibility-handling.directive.ts | 45 ++++++++++++-------
2 files changed, 31 insertions(+), 16 deletions(-)
diff --git a/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html b/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html
index 7a185f742..d3412cc85 100644
--- a/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html
+++ b/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html
@@ -55,7 +55,7 @@
</button>
<button *ngIf="controlIds.length"
mat-button
- [mat-dialog-close]="{visibilityRules, visibilityDelay, animatedVisibility:animatedVisibility}">
+ [mat-dialog-close]="{visibilityRules, visibilityDelay, animatedVisibility, enableReHide}">
{{'save' | translate}}
</button>
</div>
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 a0e929e67..fb1bf4f6b 100644
--- a/projects/player/src/app/directives/section-visibility-handling.directive.ts
+++ b/projects/player/src/app/directives/section-visibility-handling.directive.ts
@@ -16,8 +16,8 @@ export class SectionVisibilityHandlingDirective implements OnInit, OnDestroy {
@Input() section!: Section;
@Input() pageSections!: Section[];
- private isSectionSeen: boolean = false;
private ngUnsubscribe = new Subject<void>();
+ private rulesAreFulfilled: boolean = false;
constructor(
private elementRef: ElementRef,
@@ -26,6 +26,13 @@ export class SectionVisibilityHandlingDirective implements OnInit, OnDestroy {
ngOnInit(): void {
if (this.section.visibilityRules.length) {
+ this.addSubscription();
+ }
+ }
+
+ private addSubscription(): void {
+ if (this.section.enableReHide || !this.hasSeenElements()) {
+ this.displayHiddenSection();
this.unitStateService.elementCodeChanged
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(code => {
@@ -33,9 +40,6 @@ export class SectionVisibilityHandlingDirective implements OnInit, OnDestroy {
this.displayHiddenSection();
}
});
- this.isSectionSeen = this.hasSeenElements();
- } else {
- this.isSectionSeen = true;
}
}
@@ -65,14 +69,14 @@ export class SectionVisibilityHandlingDirective implements OnInit, OnDestroy {
}
private displayHiddenSection(): void {
- if (this.areVisibilityRulesFulfilled()) {
+ if (this.areVisibilityRulesFulfilled() || this.rulesAreFulfilled) {
if (this.section.visibilityDelay) {
if (!this.unitStateService.getElementCodeById(this.timerStateVariableId)) {
+ this.rulesAreFulfilled = true;
this.initTimerStateVariable();
}
- this.setVisibility(
- (this.unitStateService
- .getElementCodeById(this.timerStateVariableId)?.value as number) >= this.section.visibilityDelay);
+ this.setVisibility((this.unitStateService
+ .getElementCodeById(this.timerStateVariableId)?.value as number) >= this.section.visibilityDelay);
} else {
this.setVisibility(true);
}
@@ -83,15 +87,24 @@ export class SectionVisibilityHandlingDirective implements OnInit, OnDestroy {
private setVisibility(visible: boolean): void {
this.elementRef.nativeElement.style.display = visible ? null : 'none';
- if (visible && this.section.animatedVisibility && !this.isSectionSeen) {
- this.isSectionSeen = true;
- this.elementRef.nativeElement.style.scrollMarginTop = 100;
- setTimeout(() => {
- this.elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
- });
+ if (visible) {
+ if (this.section.animatedVisibility && !this.hasSeenElements()) {
+ this.scrollIntoView();
+ }
+ if (!this.section.enableReHide) {
+ this.ngUnsubscribe.next();
+ this.ngUnsubscribe.complete();
+ }
}
}
+ private scrollIntoView(): void {
+ this.elementRef.nativeElement.style.scrollMarginTop = 100;
+ setTimeout(() => {
+ this.elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ });
+ }
+
private areVisibilityRulesFulfilled(): boolean {
return this.section.visibilityRules.some(rule => {
if (this.unitStateService.getElementCodeById(rule.id)) {
@@ -119,7 +132,9 @@ export class SectionVisibilityHandlingDirective implements OnInit, OnDestroy {
private hasSeenElements(): boolean {
return this.section.getAllElements()
.map(element => this.unitStateService.getElementCodeById(element.id))
- .some(code => (code ? ElementCodeStatusValue[code.status] > ElementCodeStatusValue.NOT_REACHED : false));
+ .some(code => (code ?
+ ElementCodeStatusValue[code.status] > ElementCodeStatusValue.NOT_REACHED :
+ false));
}
ngOnDestroy(): void {
--
GitLab