Commit 2f745bab authored by Quentin Torck's avatar Quentin Torck
Browse files

navigate between popup

parent 272cb5f7
......@@ -95,7 +95,7 @@ dlcm-theme-selector ::ng-deep {
background-color: $dark-grey;
}
&.is-keybord-selected {
&.is-keyboard-selected {
background-color: $grey;
}
......
......@@ -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"
>
......
......@@ -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
}
......
<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"
......
......@@ -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;
}
......
......@@ -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++) {
......
......@@ -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)
......
<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>
......@@ -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
......
<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)"
>
......
......@@ -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"
......
......@@ -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)"
>
......
<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)"
......
......@@ -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"
>
......
......@@ -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 {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment