From 615d07fb424dbe972253a59684026e0961b6f38a Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 1 Sep 2022 12:57:57 +0200
Subject: [PATCH] [player] User directive to disable slider when it is set to
readonly
Using the html property "disabled" results in a warning message in the
player when reactive forms are used at the same time.
---
.../input-elements/slider.component.ts | 2 +-
.../directives/is-disabled.directive.ts | 20 +++++++++++++++++++
projects/common/shared.module.ts | 4 +++-
3 files changed, 24 insertions(+), 2 deletions(-)
create mode 100644 projects/common/directives/is-disabled.directive.ts
diff --git a/projects/common/components/input-elements/slider.component.ts b/projects/common/components/input-elements/slider.component.ts
index 5d5fac6c4..31811f4c7 100644
--- a/projects/common/components/input-elements/slider.component.ts
+++ b/projects/common/components/input-elements/slider.component.ts
@@ -73,7 +73,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[style.margin-left.px]="elementModel.barStyle ? valueMin.offsetWidth/2 - 8: valueMin.offsetWidth"
[style.margin-top.px]="elementModel.barStyle ? -32 : -valueContainer.offsetHeight">
<mat-slider [class]="elementModel.barStyle ? 'bar-style' : ''"
- [disabled]="elementModel.readOnly"
+ [isDisabled]="elementModel.readOnly"
[thumbLabel]="elementModel.thumbLabel"
[formControl]="elementFormControl"
[style.width.%]="100"
diff --git a/projects/common/directives/is-disabled.directive.ts b/projects/common/directives/is-disabled.directive.ts
new file mode 100644
index 000000000..f2fa6b13b
--- /dev/null
+++ b/projects/common/directives/is-disabled.directive.ts
@@ -0,0 +1,20 @@
+import {
+ Directive, Input, OnChanges, SimpleChanges
+} from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+ selector: '[isDisabled]'
+})
+export class IsDisabledDirective implements OnChanges {
+ @Input() isDisabled!: boolean;
+
+ constructor(private ngControl : NgControl) {}
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.isDisabled && this.ngControl) {
+ const action = changes.isDisabled.currentValue ? 'disable' : 'enable';
+ this.ngControl?.control?.[action]();
+ }
+ }
+}
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index 54576116b..f5970abc7 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -65,6 +65,7 @@ import { StyleMarksPipe } from './pipes/styleMarks.pipe';
import { TextMarkingButtonComponent } from './components/text/text-marking-bar/text-marking-button.component';
import { CompoundChildOverlayComponent } from './components/compound-elements/cloze/compound-child-overlay.component';
import { MarkListPipe } from './pipes/mark-list.pipe';
+import { IsDisabledDirective } from './directives/is-disabled.directive';
@NgModule({
imports: [
@@ -120,7 +121,8 @@ import { MarkListPipe } from './pipes/mark-list.pipe';
StyleMarksPipe,
TextMarkingButtonComponent,
CompoundChildOverlayComponent,
- MarkListPipe
+ MarkListPipe,
+ IsDisabledDirective
],
exports: [
CommonModule,
--
GitLab