From 2f745bababc1a7537049dd0be916bcf6cc8472d2 Mon Sep 17 00:00:00 2001
From: quentin <quentin.torck@aiso.com>
Date: Tue, 17 Mar 2020 19:01:10 +0100
Subject: [PATCH] navigate between popup
---
...olbar-desktop-vertical.presentational.scss | 2 +-
...semination-policy-form.presentational.html | 3 +-
...home-browsing-org-unit.presentational.scss | 2 +-
.../shared-tabs/shared-tabs.container.html | 1 -
...hared-abstract-content.presentational.scss | 2 +-
.../shared-abstract-content.presentational.ts | 8 +-
...ed-abstract-multi-select.presentational.ts | 37 ++++++---
...d-multi-select-content.presentational.html | 75 +++++++++++--------
...red-multi-select-content.presentational.ts | 2 -
...-default-value-content.presentational.html | 5 +-
.../shared-multi-select.presentational.html | 2 -
...e-multi-select-content.presentational.html | 5 +-
...-single-select-content.presentational.html | 4 +-
...archable-single-select.presentational.html | 4 +-
...searchable-single-select.presentational.ts | 22 ++++--
15 files changed, 105 insertions(+), 69 deletions(-)
diff --git a/src/app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational.scss b/src/app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational.scss
index 33ec3684a..77b40e018 100644
--- a/src/app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational.scss
+++ b/src/app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational.scss
@@ -95,7 +95,7 @@ dlcm-theme-selector ::ng-deep {
background-color: $dark-grey;
}
- &.is-keybord-selected {
+ &.is-keyboard-selected {
background-color: $grey;
}
diff --git a/src/app/features/admin/dissemination-policy/components/presentationals/admin-dissemination-policy-form/admin-dissemination-policy-form.presentational.html b/src/app/features/admin/dissemination-policy/components/presentationals/admin-dissemination-policy-form/admin-dissemination-policy-form.presentational.html
index 4afb288bd..6a37aa5c2 100644
--- a/src/app/features/admin/dissemination-policy/components/presentationals/admin-dissemination-policy-form/admin-dissemination-policy-form.presentational.html
+++ b/src/app/features/admin/dissemination-policy/components/presentationals/admin-dissemination-policy-form/admin-dissemination-policy-form.presentational.html
@@ -48,7 +48,8 @@
<button *ngIf="!readonly"
mat-flat-button
color="primary"
- (keydown.enter)="onSubmit()"
+ solidifyShortCuts
+ (onEnter)="onSubmit()"
type="submit"
[disabled]="!form.valid || !form.dirty"
>
diff --git a/src/app/features/home/components/presentationals/home-browsing-org-unit/home-browsing-org-unit.presentational.scss b/src/app/features/home/components/presentationals/home-browsing-org-unit/home-browsing-org-unit.presentational.scss
index 713ec030c..74a027768 100644
--- a/src/app/features/home/components/presentationals/home-browsing-org-unit/home-browsing-org-unit.presentational.scss
+++ b/src/app/features/home/components/presentationals/home-browsing-org-unit/home-browsing-org-unit.presentational.scss
@@ -37,7 +37,7 @@ $padding-vertical: 10px;
background-color: $extra-light-grey
}
- &.is-keybord-selected {
+ &.is-keyboard-selected {
cursor: initial;
background-color: $extra-light-grey
}
diff --git a/src/app/shared/components/containers/shared-tabs/shared-tabs.container.html b/src/app/shared/components/containers/shared-tabs/shared-tabs.container.html
index b9561a42d..d5857e7e8 100644
--- a/src/app/shared/components/containers/shared-tabs/shared-tabs.container.html
+++ b/src/app/shared/components/containers/shared-tabs/shared-tabs.container.html
@@ -1,7 +1,6 @@
<ul class="tabs-header-container">
<li *ngFor="let tab of tabs; trackBy: trackByFn"
class="tab-header"
- tabindex="0"
[tabIndex]="0"
[class.hide]="!(isDisplayed(tab) | async)"
[class.is-active]="tab === currentTab"
diff --git a/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.scss b/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.scss
index 53af944e9..e60673918 100644
--- a/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.scss
+++ b/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.scss
@@ -90,7 +90,7 @@ $min-height-result: $height-overlay/2 + $height-input;
color: $primary-color;
}
- &.is-keybord-selected {
+ &.is-keyboard-selected {
background-color: rgba(0, 0, 0, 0.04);
color: $primary-color;
}
diff --git a/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.ts b/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.ts
index 849b4e494..89f21b724 100644
--- a/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.ts
+++ b/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.ts
@@ -10,7 +10,6 @@ import {
BehaviorSubject,
Observable,
} from "rxjs";
-import {take} from "rxjs/operators";
import {
BaseResourceType,
isEmptyString,
@@ -31,6 +30,9 @@ export abstract class SharedAbstractContentPresentational<TResource extends Base
@Output("closeByTabChange")
readonly closeByTabObs: Observable<void> = ObservableUtil.asObservable(this._closeByTabBS);
+ private readonly _closeByShiftTabBS: BehaviorSubject<void> = new BehaviorSubject<void>(undefined);
+ @Output("closeByShiftTabChange")
+ readonly closeByShiftTabObs: Observable<void> = ObservableUtil.asObservable(this._closeByShiftTabBS);
constructor() {
super();
@@ -40,6 +42,9 @@ export abstract class SharedAbstractContentPresentational<TResource extends Base
this._closeByTabBS.next();
}
+ closeByShiftTab(): void {
+ this._closeByShiftTabBS.next();
+ }
ngOnInit(): void {
super.ngOnInit();
@@ -65,6 +70,7 @@ export abstract class SharedAbstractContentPresentational<TResource extends Base
}
selectNextResource(): void {
+ debugger
const val = this.host.list;
let activeValIndex = -1;
for (let index = 0; index < val.length; index++) {
diff --git a/src/app/shared/components/presentationals/shared-abstract-multi-select/shared-abstract-multi-select.presentational.ts b/src/app/shared/components/presentationals/shared-abstract-multi-select/shared-abstract-multi-select.presentational.ts
index 40250951f..efd8a77d5 100644
--- a/src/app/shared/components/presentationals/shared-abstract-multi-select/shared-abstract-multi-select.presentational.ts
+++ b/src/app/shared/components/presentationals/shared-abstract-multi-select/shared-abstract-multi-select.presentational.ts
@@ -209,37 +209,54 @@ export abstract class SharedAbstractMultiSelectPresentational<TResource extends
this._closeOverlay(overlayRef);
}),
));
- this.subscribe(componentRef.instance.closeByTabObs.pipe(
- tap(() => {
- this.closeOverlays();
- },
- )));
}
private _observeClickBackdrop(componentRef: ComponentRef<SharedAbstractContentPresentational<TResource>>, overlayRef: OverlayRef): void {
+
this.subscribe(overlayRef.backdropClick().pipe(
tap(() => {
this._closeOverlay(overlayRef);
}),
));
+ this.subscribe(componentRef.instance.closeByTabObs.pipe(
+ tap(() => {
+ debugger
+ this._closeOverlay(overlayRef, true);
+ },
+ )));
+ this.subscribe(componentRef.instance.closeByShiftTabObs.pipe(
+ tap(() => {
+ debugger
+ this._closeOverlay(overlayRef, false);
+ },
+ )));
}
- private _closeOverlay(overlayRef: OverlayRef, keepInOverlayRefs?: boolean): void {
+ private _closeOverlay(overlayRef: OverlayRef, isByTab: boolean = true, keepInOverlayRefs?: boolean): void {
+ debugger
overlayRef.detach();
if (!keepInOverlayRefs) {
this._overlayRefs.delete(overlayRef);
}
- this._tabulationService.focusNext(this._elementToReFocus);
-
this.formControl.markAsTouched();
this._changeDetector.detectChanges();
+ if (isByTab) {
+ this._tabulationService.focusNext(this._elementToReFocus);
+ } else {
+ this._tabulationService.focusPrev(this._elementToReFocus);
+ }
}
- closeOverlays(): void {
- this._overlayRefs.forEach(overlayRef => this._closeOverlay(overlayRef, true));
+ private _closeOverlays(isByTab: boolean = true): void {
+ this._overlayRefs.forEach(overlayRef => this._closeOverlay(overlayRef, isByTab, true));
this._overlayRefs.clear();
}
+ closeOverlays(keyEvent: KeyboardEvent, isByTab: boolean = true): void {
+ keyEvent.preventDefault();
+ this._closeOverlays(isByTab);
+ }
+
private _getPosition(elementToConnectTo: ElementRef): FlexibleConnectedPositionStrategy {
return this._overlay.position()
.flexibleConnectedTo(elementToConnectTo)
diff --git a/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.html b/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.html
index a1ff7a9b1..4d08f8c19 100644
--- a/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.html
+++ b/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.html
@@ -1,39 +1,48 @@
<lib-empty-container solidifyShortCuts
- (onEscape)="close()">
-<div class="button-wrapper">
- <mat-icon class="close"
- (click)="close()"
- >close
- </mat-icon>
-</div>
-<div class="result"
- [class.no-data]="host?.list?.length === 0"
+ cdkTrapFocus
+ [solidifyFocusFirstElement]="true"
+ (keydown.tab)="closeByTab()"
+ (keydown.shift.tab)="closeByShiftTab()"
+ (onEscape)="close()"
+ (keydown.enter)="select(host.list[indexSelected])"
>
- <ng-template [ngIf]="host.list | isNonEmptyArray"
- [ngIfElse]="noData"
+ <a [tabindex]="0"
+ ></a>
+ <div class="button-wrapper">
+ <mat-icon class="close"
+ (click)="close()"
+ >close
+ </mat-icon>
+ </div>
+ <div class="result"
+ [class.no-data]="host?.list?.length === 0"
>
+ <ng-template [ngIf]="host.list | isNonEmptyArray"
+ [ngIfElse]="noData"
+ >
- <ul>
- <ng-container *ngFor="let value of host.list">
- <li *ngIf="!host.hideItemSelected || !isActive(value)"
- [value]="value[host.valueKey]"
- [class.is-active]="isActive(value)"
- (click)="select(value)"
- >
- <span class="label">{{value[host.labelKey]}}</span>
- <span *ngIf="value[host.extraInfoLabelKey] | isNonEmptyString"
- class="extra-info"
- ><img *ngIf="host.extraInfoImage"
- [src]="'assets/images/'+ host.extraInfoImage"
- [alt]="host.extraInfoImage"
+ <ul>
+ <ng-container *ngFor="let value of host.list; let i = index">
+ <li *ngIf="!host.hideItemSelected || !isActive(value)"
+ [value]="value[host.valueKey]"
+ [class.is-keyboard-selected]="i === indexSelected"
+ [class.is-active]="isActive(value)"
+ (click)="select(value)"
>
- {{value[host.extraInfoLabelKey]}}</span>
- </li>
- </ng-container>
- </ul>
- </ng-template>
- <ng-template #noData>
- {{noDataToSelect | translate}}
- </ng-template>
-</div>
+ <span class="label">{{value[host.labelKey]}}</span>
+ <span *ngIf="value[host.extraInfoLabelKey] | isNonEmptyString"
+ class="extra-info"
+ ><img *ngIf="host.extraInfoImage"
+ [src]="'assets/images/'+ host.extraInfoImage"
+ [alt]="host.extraInfoImage"
+ >
+ {{value[host.extraInfoLabelKey]}}</span>
+ </li>
+ </ng-container>
+ </ul>
+ </ng-template>
+ <ng-template #noData>
+ {{noDataToSelect | translate}}
+ </ng-template>
+ </div>
</lib-empty-container>
diff --git a/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.ts b/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.ts
index 16c92cd74..91758a125 100644
--- a/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.ts
+++ b/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.ts
@@ -25,8 +25,6 @@ import {
})
export class SharedMultiSelectContentPresentational<TResource extends BaseResourceType> extends SharedAbstractContentPresentational<TResource> {
- // TODO add navigation to this component when issue of host fixed.
-
@Input()
host: any; // (SharedMultiSelectPresentational<TResource>;) CAUSE RUNTIME ERROR WHEN AOT BUILD WITHOUT SOURCEMAP. Following error on polyfills.js: Uncaught TypeError: Object prototype may only be an Object or null: undefined
diff --git a/src/app/shared/components/presentationals/shared-multi-select-default-value-content/shared-multi-select-default-value-content.presentational.html b/src/app/shared/components/presentationals/shared-multi-select-default-value-content/shared-multi-select-default-value-content.presentational.html
index 0d6155ac8..df8cd9fa6 100644
--- a/src/app/shared/components/presentationals/shared-multi-select-default-value-content/shared-multi-select-default-value-content.presentational.html
+++ b/src/app/shared/components/presentationals/shared-multi-select-default-value-content/shared-multi-select-default-value-content.presentational.html
@@ -1,7 +1,8 @@
<lib-empty-container [solidifyFocusFirstElement]="true"
solidifyShortCuts
cdkTrapFocus
- (keydown.tab)="close()"
+ (keydown.tab)="closeByTab()"
+ (keydown.shift.tab)="closeByShiftTab()"
(onEscape)="close()"
(onEnter)="select(host.list[indexSelected])"
>
@@ -28,7 +29,7 @@
<li *ngIf="!host.hideItemSelected || !isActive(value)"
[value]="value[host.valueKey]"
- [class.is-keybord-selected]="indexSelected === i"
+ [class.is-keyboard-selected]="indexSelected === i"
[class.is-active]="isActive(value)"
(click)="select(value)"
>
diff --git a/src/app/shared/components/presentationals/shared-multi-select/shared-multi-select.presentational.html b/src/app/shared/components/presentationals/shared-multi-select/shared-multi-select.presentational.html
index 322916b69..df77a9bed 100644
--- a/src/app/shared/components/presentationals/shared-multi-select/shared-multi-select.presentational.html
+++ b/src/app/shared/components/presentationals/shared-multi-select/shared-multi-select.presentational.html
@@ -64,8 +64,6 @@
#input
matInput
(focus)="openOverlay(input)"
- (keydown.tab)="closeOverlays()"
- (keydown.shift.tab)="closeOverlays()"
readonly
[placeholder]="placeholder ? placeholder : ('component.multiSelect.placeholder' | translate)"
[disabled]="formControl.disabled"
diff --git a/src/app/shared/components/presentationals/shared-searchable-multi-select-content/shared-searchable-multi-select-content.presentational.html b/src/app/shared/components/presentationals/shared-searchable-multi-select-content/shared-searchable-multi-select-content.presentational.html
index d17df9823..6b574c752 100644
--- a/src/app/shared/components/presentationals/shared-searchable-multi-select-content/shared-searchable-multi-select-content.presentational.html
+++ b/src/app/shared/components/presentationals/shared-searchable-multi-select-content/shared-searchable-multi-select-content.presentational.html
@@ -2,7 +2,8 @@
[dlcmAutoScrollIntoView]="!navigationResId"
(keydown.tab)="closeByTab()"
(keydown.escape)="closeByTab()"
- (keydown.shift.tab)="closeByTab()">
+ (keydown.shift.tab)="closeByShiftTab()"
+>
<div class="input">
<mat-form-field class="form-field">
<input #input
@@ -28,7 +29,7 @@
<li *ngIf="!host.hideItemSelected || !isActive(value)"
[value]="value[host.valueKey]"
[dlcmAutoScrollIntoView]="value.resId === navigationResId"
- [class.is-keybord-selected]="value.resId === navigationResId"
+ [class.is-keyboard-selected]="value.resId === navigationResId"
[class.is-active]="isActive(value)"
(click)="select(value)"
>
diff --git a/src/app/shared/components/presentationals/shared-searchable-single-select-content/shared-searchable-single-select-content.presentational.html b/src/app/shared/components/presentationals/shared-searchable-single-select-content/shared-searchable-single-select-content.presentational.html
index c985e3dfd..19b18d5ce 100644
--- a/src/app/shared/components/presentationals/shared-searchable-single-select-content/shared-searchable-single-select-content.presentational.html
+++ b/src/app/shared/components/presentationals/shared-searchable-single-select-content/shared-searchable-single-select-content.presentational.html
@@ -1,6 +1,6 @@
<form [formGroup]="form"
[dlcmAutoScrollIntoView]="!navigationResId"
- (keydown.shift.tab)="closeByTab()"
+ (keydown.shift.tab)="closeByShiftTab()"
(keydown.enter)="select(getFocusedResource())"
(keydown.tab)="closeByTab()">
<div class="input">
@@ -28,7 +28,7 @@
<li #itemList *ngFor="let value of (listObs | async)"
[value]="value[host.valueKey]"
[dlcmAutoScrollIntoView]="value.resId === navigationResId"
- [class.is-keybord-selected]="value.resId === navigationResId"
+ [class.is-keyboard-selected]="value.resId === navigationResId"
[class.is-active]="isActive(value)"
(keydown.enter)="select(getFocusedResource())"
(click)="select(value)"
diff --git a/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.html b/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.html
index 035925d24..8d569d920 100644
--- a/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.html
+++ b/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.html
@@ -17,8 +17,8 @@
<input #inputElement
matInput
[autocomplete]="'off'"
- (keydown.tab)="closeOverlays()"
- (keydown.shift.tab)="closeOverlays()"
+ (keydown.tab)="closeOverlays(true)"
+ (keydown.shift.tab)="closeOverlays(false)"
(focus)="openOverlay($event)"
[formControlName]="formDefinition.value"
>
diff --git a/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.ts b/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.ts
index 9314a94e6..4b3cdfdac 100644
--- a/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.ts
+++ b/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.ts
@@ -288,11 +288,17 @@ export class SharedSearchableSingleSelectPresentational<TStateModel extends Reso
));
}
- closeOverlays(): void {
+ closeOverlays(isFocusNext: boolean = true): void {
this._overlayRefs.forEach(overlayRef => this._closeOverlay(overlayRef, true));
this._overlayRefs.clear();
- const elementToFocus = this._tabulationService.getNext(this.openElementToRefocus);
- this._tabulationService.focusNext(elementToFocus);
+ if (isFocusNext) {
+ const elementToFocus = this._tabulationService.getNext(this.openElementToRefocus);
+ this._tabulationService.focusNext(elementToFocus);
+ } else {
+ const elementToFocus = this._tabulationService.getPrev(this.openElementToRefocus);
+ this._tabulationService.focusPrev(elementToFocus);
+ }
+
}
private _observeCloseEventInOverlay(componentRef: ComponentRef<SharedSearchableSingleSelectContentPresentational<TResource>>, overlayRef: OverlayRef): void {
@@ -301,11 +307,6 @@ export class SharedSearchableSingleSelectPresentational<TStateModel extends Reso
this._closeOverlay(overlayRef);
}),
));
- this.subscribe(componentRef.instance.closeByTabObs.pipe(
- tap(() => {
- this.closeOverlays();
- }),
- ));
}
private _observeClickBackdrop(componentRef: ComponentRef<SharedSearchableSingleSelectContentPresentational<TResource>>, overlayRef: OverlayRef): void {
@@ -314,6 +315,11 @@ export class SharedSearchableSingleSelectPresentational<TStateModel extends Reso
this._closeOverlay(overlayRef);
}),
));
+ this.subscribe(componentRef.instance.closeByTabObs.pipe(
+ tap(() => {
+ this.closeOverlays();
+ }),
+ ));
}
private _closeOverlay(overlayRef: OverlayRef, keepInOverlayRefs?: boolean): void {
--
GitLab