diff --git a/projects/common/components/button/button.component.ts b/projects/common/components/button/button.component.ts index ef08ef853310d9d21a36ab23ef3f318d3dabe3a9..e4edd1e85f5e01da51f76d19b0d60f0c8ae78bbf 100644 --- a/projects/common/components/button/button.component.ts +++ b/projects/common/components/button/button.component.ts @@ -19,11 +19,10 @@ import { ElementComponent } from '../../directives/element-component.directive'; [style.font-style]="elementModel.styling.italic ? 'italic' : ''" [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''" [style.border-radius.px]="elementModel.styling.borderRadius" - (click)="$event.preventDefault(); elementModel.action && elementModel.actionParam !== null ? - navigateTo.emit({ - action: elementModel.action, - param: elementModel.actionParam - }) : false"> + (click)="$event.preventDefault(); + elementModel.action && elementModel.actionParam !== null ? + buttonActionEvent.emit($any({ action: elementModel.action, param: elementModel.actionParam})) : + false"> <!--preventDefault to prevent form submission--> {{elementModel.label}} </a> @@ -41,25 +40,19 @@ import { ElementComponent } from '../../directives/element-component.directive'; [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''" [style.border-radius.px]="elementModel.styling.borderRadius" (click)="elementModel.action && elementModel.actionParam !== null ? - navigateTo.emit({ - action: elementModel.action, - param: elementModel.actionParam - }) : - false"> + buttonActionEvent.emit($any({ action: elementModel.action, param: elementModel.actionParam })) : + false"> {{elementModel.label}} </button> <input - *ngIf="elementModel.imageSrc" type="image" - [src]="elementModel.imageSrc | safeResourceUrl" - [class]="elementModel.position?.dynamicPositioning && + *ngIf="elementModel.imageSrc" type="image" + [src]="elementModel.imageSrc | safeResourceUrl" + [class]="elementModel.position?.dynamicPositioning && !elementModel.position?.fixedSize ? 'dynamic-image' : 'static-image'" - [alt]="'imageNotFound' | translate" - (click)="elementModel.action && elementModel.actionParam !== null? - navigateTo.emit({ - action: elementModel.action, - param: elementModel.actionParam - }) : - false"> + [alt]="'imageNotFound' | translate" + (click)="elementModel.action !== null && elementModel.actionParam !== null? + buttonActionEvent.emit($any({ action: elementModel.action, param: elementModel.actionParam })) : + false"> `, styles: [ '.dynamic-image {width: 100%; height: fit-content;}', @@ -69,5 +62,5 @@ import { ElementComponent } from '../../directives/element-component.directive'; }) export class ButtonComponent extends ElementComponent { @Input() elementModel!: ButtonElement; - @Output() navigateTo = new EventEmitter<ButtonEvent>(); + @Output() buttonActionEvent = new EventEmitter<ButtonEvent>(); } diff --git a/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts b/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts index 644fad4ee3ff2491083b6a3ecf77412292c8454d..d6d6c8e2dbfd927722b3244494457503a0ff59b7 100644 --- a/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts +++ b/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts @@ -66,7 +66,7 @@ export class CompoundGroupElementComponent extends ElementFormGroupDirective imp this.manageOnKeyDown(child as TextFieldSimpleComponent, childModel); } if (childModel.type === 'button') { - this.addNavigationEventListener(child as ButtonComponent); + this.addButtonActionEventListener(child as ButtonComponent); } }); } @@ -129,24 +129,24 @@ export class CompoundGroupElementComponent extends ElementFormGroupDirective imp } } - private addNavigationEventListener(button: ButtonComponent) { - button.navigateTo + private addButtonActionEventListener(button: ButtonComponent) { + button.buttonActionEvent .pipe(takeUntil(this.ngUnsubscribe)) - .subscribe(navigationEvent => { - switch (navigationEvent.action) { + .subscribe(buttonEvent => { + switch (buttonEvent.action) { case 'unitNav': this.veronaPostService.sendVopUnitNavigationRequestedNotification( - (navigationEvent.param as UnitNavParam) + (buttonEvent.param as UnitNavParam) ); break; case 'pageNav': - this.navigationService.setPage(navigationEvent.param as number); + this.navigationService.setPage(buttonEvent.param as number); break; case 'highlightText': - this.anchorService.toggleAnchor(navigationEvent.param as string); + this.anchorService.toggleAnchor(buttonEvent.param as string); break; case 'stateVariableChange': - this.unitStateService.changeElementCodeValue(navigationEvent.param as ValueChangeElement); + this.unitStateService.changeElementCodeValue(buttonEvent.param as ValueChangeElement); break; default: } diff --git a/projects/player/src/app/components/elements/interactive-group-element/interactive-group-element.component.html b/projects/player/src/app/components/elements/interactive-group-element/interactive-group-element.component.html index d8ee777818b46e9876f7d91a0aabe5f543e495e0..1f2ba9aa50f64c91cd73fa7bf6f9b3d4d14d4b7e 100644 --- a/projects/player/src/app/components/elements/interactive-group-element/interactive-group-element.component.html +++ b/projects/player/src/app/components/elements/interactive-group-element/interactive-group-element.component.html @@ -2,7 +2,7 @@ *ngIf="elementModel.type === 'button'" #elementComponent [elementModel]="elementModel | cast: ButtonElement" - (navigateTo)="navigateTo($event)"> + (buttonActionEvent)="applyButtonAction($event)"> </aspect-button> <aspect-frame *ngIf="elementModel.type === 'frame'" diff --git a/projects/player/src/app/components/elements/interactive-group-element/interactive-group-element.component.ts b/projects/player/src/app/components/elements/interactive-group-element/interactive-group-element.component.ts index 9fde6fd9d3ceff27699807f2b8b1cbd3ddfcab42..90230d6210f6f9e4669714f4ccb70091eb69001e 100644 --- a/projects/player/src/app/components/elements/interactive-group-element/interactive-group-element.component.ts +++ b/projects/player/src/app/components/elements/interactive-group-element/interactive-group-element.component.ts @@ -46,21 +46,21 @@ export class InteractiveGroupElementComponent extends ElementGroupDirective impl this.pageIndex); } - navigateTo(navigationEvent: ButtonEvent): void { - switch (navigationEvent.action) { + applyButtonAction(buttonEvent: ButtonEvent): void { + switch (buttonEvent.action) { case 'unitNav': this.veronaPostService.sendVopUnitNavigationRequestedNotification( - (navigationEvent.param as UnitNavParam) + (buttonEvent.param as UnitNavParam) ); break; case 'pageNav': - this.navigationService.setPage(navigationEvent.param as number); + this.navigationService.setPage(buttonEvent.param as number); break; case 'highlightText': - this.anchorService.toggleAnchor(navigationEvent.param as string); + this.anchorService.toggleAnchor(buttonEvent.param as string); break; case 'stateVariableChange': - this.unitStateService.changeElementCodeValue(navigationEvent.param as ValueChangeElement); + this.unitStateService.changeElementCodeValue(buttonEvent.param as ValueChangeElement); break; default: }