Skip to content

Commit

Permalink
Refactor #12031 - Update dom structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Oct 26, 2022
1 parent cf65bdc commit 7edd505
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 58 deletions.
4 changes: 3 additions & 1 deletion src/app/components/api/overlayoptions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export interface ResponsiveOverlayOptions {
}

export interface OverlayOnShowEvent {
container?: HTMLElement | undefined;
overlay?: HTMLElement | undefined;
target?: HTMLElement | undefined;
mode?: OverlayModeType;
}
Expand All @@ -30,6 +30,8 @@ export interface OverlayOptions {
mode?: OverlayModeType;
style?: any;
styleClass?: string;
contentStyle?: any;
contentStyleClass?: string;
appendTo?: 'body' | HTMLElement | undefined;
autoZIndex?: boolean;
baseZIndex?: number;
Expand Down
7 changes: 5 additions & 2 deletions src/app/components/overlay/overlay.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,11 @@
height: 100%;
}

.p-overlay-modal > .p-overlay {
position: static;
.p-overlay-content {
transform-origin: inherit;
}

.p-overlay-modal > .p-overlay-content {
z-index: 1;
width: 90%;
}
Expand Down
122 changes: 67 additions & 55 deletions src/app/components/overlay/overlay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,44 +12,42 @@ export const OVERLAY_VALUE_ACCESSOR: any = {
multi: true
};

const showOverlayAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{showTransitionParams}}')]);
const showOverlayContentAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{showTransitionParams}}')]);

const hideOverlayAnimation = animation([animate('{{hideTransitionParams}}', style({ transform: '{{transform}}', opacity: 0 }))]);
const hideOverlayContentAnimation = animation([animate('{{hideTransitionParams}}', style({ transform: '{{transform}}', opacity: 0 }))]);

@Component({
selector: 'p-overlay',
template: `
<ng-container *ngIf="modal; else overlayTemplate">
<div
*ngIf="modalVisible"
#modal
[ngClass]="{
'p-overlay-modal p-component-overlay p-component-overlay-enter': true,
'p-overlay-start': overlayResponsiveDirection === 'start',
'p-overlay-center': overlayResponsiveDirection === 'center',
'p-overlay-end': overlayResponsiveDirection === 'end'
}"
>
<ng-container *ngTemplateOutlet="overlayTemplate"></ng-container>
</div>
</ng-container>
<ng-template #overlayTemplate>
<div
*ngIf="modalVisible"
#overlay
[ngStyle]="style"
[class]="styleClass"
[ngClass]="{
'p-overlay p-component': true,
'p-overlay-modal p-component-overlay p-component-overlay-enter': modal,
'p-overlay-start': overlayResponsiveDirection === 'start',
'p-overlay-center': overlayResponsiveDirection === 'center',
'p-overlay-end': overlayResponsiveDirection === 'end'
}"
>
<div
*ngIf="visible"
#overlay
[ngStyle]="style"
[ngClass]="'p-overlay p-component'"
[class]="styleClass"
(click)="onOverlayClick($event)"
[@overlayAnimation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions, transform: transformOptions[modal ? overlayResponsiveDirection : 'default'] } }"
(@overlayAnimation.start)="onOverlayAnimationStart($event)"
(@overlayAnimation.done)="onOverlayAnimationDone($event)"
#content
[ngStyle]="contentStyle"
[class]="contentStyleClass"
[ngClass]="'p-overlay-content'"
(click)="onOverlayContentClick($event)"
[@overlayContentAnimation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions, transform: transformOptions[modal ? overlayResponsiveDirection : 'default'] } }"
(@overlayContentAnimation.start)="onOverlayContentAnimationStart($event)"
(@overlayContentAnimation.done)="onOverlayContentAnimationDone($event)"
>
<ng-content></ng-content>
</div>
</ng-template>
</div>
`,
animations: [trigger('overlayAnimation', [transition(':enter', [useAnimation(showOverlayAnimation)]), transition(':leave', [useAnimation(hideOverlayAnimation)])])],
animations: [trigger('overlayContentAnimation', [transition(':enter', [useAnimation(showOverlayContentAnimation)]), transition(':leave', [useAnimation(hideOverlayContentAnimation)])])],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [OVERLAY_VALUE_ACCESSOR],
Expand Down Expand Up @@ -91,6 +89,20 @@ export class Overlay implements OnDestroy {
this._styleClass = value;
}

@Input() get contentStyle(): any {
return this._contentStyle || this.overlayOptions?.contentStyle;
}
set contentStyle(value: any) {
this._contentStyle = value;
}

@Input() get contentStyleClass(): string | undefined {
return this._contentStyleClass || this.overlayOptions?.contentStyleClass;
}
set contentStyleClass(value: string) {
this._contentStyleClass = value;
}

@Input() get appendTo(): any {
return this._appendTo || this.overlayOptions?.appendTo;
}
Expand Down Expand Up @@ -152,10 +164,10 @@ export class Overlay implements OnDestroy {

@Output() onAnimationDone: EventEmitter<any> = new EventEmitter();

@ViewChild('modal') modalViewChild: ElementRef;

@ViewChild('overlay') overlayViewChild: ElementRef;

@ViewChild('content') contentViewChild: ElementRef;

_visible: boolean;

_mode: OverlayModeType | string;
Expand All @@ -164,6 +176,10 @@ export class Overlay implements OnDestroy {

_styleClass: string;

_contentStyle: any;

_contentStyleClass: string;

_appendTo: 'body' | HTMLElement | undefined;

_autoZIndex: boolean;
Expand Down Expand Up @@ -215,16 +231,12 @@ export class Overlay implements OnDestroy {
return this.overlayResponsiveOptions?.direction;
}

get modalEl() {
return this.modalViewChild?.nativeElement;
}

get overlayEl() {
return this.overlayViewChild?.nativeElement;
}

get containerEl() {
return this.modal ? this.modalEl : this.overlayEl;
get contentEl() {
return this.contentViewChild?.nativeElement;
}

get targetEl() {
Expand All @@ -235,49 +247,49 @@ export class Overlay implements OnDestroy {
this.window = this.document.defaultView;
}

show(container?: HTMLElement, isFocus: boolean = false) {
show(overlay?: HTMLElement, isFocus: boolean = false) {
this.visible = true;
this.handleEvents('onShow', { container: container || this.containerEl, target: this.targetEl, mode: this.overlayMode });
this.handleEvents('onShow', { overlay: overlay || this.overlayEl, target: this.targetEl, mode: this.overlayMode });

isFocus && DomHandler.focus(this.targetEl);
this.modal && DomHandler.addClass(this.document?.body, 'p-overflow-hidden');
}

hide(container?: HTMLElement, isFocus: boolean = false) {
hide(overlay?: HTMLElement, isFocus: boolean = false) {
this.visible = false;
this.handleEvents('onHide', { container: container || this.containerEl, target: this.targetEl, mode: this.overlayMode });
this.handleEvents('onHide', { overlay: overlay || this.overlayEl, target: this.targetEl, mode: this.overlayMode });

isFocus && DomHandler.focus(this.targetEl);
this.modal && DomHandler.removeClass(this.document?.body, 'p-overflow-hidden');
}

alignOverlay() {
DomHandler.alignOverlay(this.overlayEl, this.targetEl, this.appendTo);
!this.modal && DomHandler.alignOverlay(this.overlayEl, this.targetEl, this.appendTo);
}

onOverlayClick(event: MouseEvent) {
onOverlayContentClick(event: MouseEvent) {
this.overlayService.add({
originalEvent: event,
target: this.targetEl
});
}

onOverlayAnimationStart(event: AnimationEvent) {
onOverlayContentAnimationStart(event: AnimationEvent) {
switch (event.toState) {
case 'visible':
if (this.autoZIndex) {
ZIndexUtils.set(this.overlayMode, this.containerEl, this.baseZIndex + this.config?.zIndex[this.overlayMode]);
ZIndexUtils.set(this.overlayMode, this.overlayEl, this.baseZIndex + this.config?.zIndex[this.overlayMode]);
}

DomHandler.appendOverlay(this.containerEl, this.appendTo === 'body' ? this.document.body : this.appendTo, this.appendTo);
DomHandler.appendOverlay(this.overlayEl, this.appendTo === 'body' ? this.document.body : this.appendTo, this.appendTo);
this.alignOverlay();
this.bindListeners();

break;

case 'void':
DomHandler.appendOverlay(this.containerEl, this.targetEl, this.appendTo);
this.modal && DomHandler.addClass(this.containerEl, 'p-component-overlay-leave');
DomHandler.appendOverlay(this.overlayEl, this.targetEl, this.appendTo);
this.modal && DomHandler.addClass(this.overlayEl, 'p-component-overlay-leave');
this.unbindListeners();

break;
Expand All @@ -286,8 +298,8 @@ export class Overlay implements OnDestroy {
this.handleEvents('onAnimationStart', event);
}

onOverlayAnimationDone(event: AnimationEvent) {
const container = this.containerEl || (this.modal ? event.element.parentElement : event.element);
onOverlayContentAnimationDone(event: AnimationEvent) {
const container = this.overlayEl || event.element.parentElement;

switch (event.toState) {
case 'visible':
Expand All @@ -296,10 +308,10 @@ export class Overlay implements OnDestroy {
break;

case 'void':
this.hide(container, true);

ZIndexUtils.clear(container);
this.modalVisible = false;

this.hide(container, true);
break;
}

Expand Down Expand Up @@ -345,7 +357,7 @@ export class Overlay implements OnDestroy {
bindDocumentClickListener() {
if (!this.documentClickListener) {
this.documentClickListener = this.renderer.listen(this.document, 'click', (event) => {
const isOutsideClicked = this.targetEl && !(this.targetEl.isSameNode(event.target) || this.targetEl.contains(event.target) || (this.overlayEl && this.overlayEl.contains(<Node>event.target)));
const isOutsideClicked = this.targetEl && !(this.targetEl.isSameNode(event.target) || this.targetEl.contains(event.target) || (this.contentEl && this.contentEl.contains(<Node>event.target)));
const valid = this.listener ? this.listener(event, { type: 'outside', mode: this.overlayMode, valid: event.which !== 3 && isOutsideClicked }) : isOutsideClicked;

valid && this.hide(event);
Expand Down Expand Up @@ -378,11 +390,11 @@ export class Overlay implements OnDestroy {
}

ngOnDestroy() {
this.hide(this.containerEl, true);
this.hide(this.overlayEl, true);

if (this.containerEl) {
DomHandler.appendOverlay(this.containerEl, this.targetEl, this.appendTo);
ZIndexUtils.clear(this.containerEl);
if (this.overlayEl) {
DomHandler.appendOverlay(this.overlayEl, this.targetEl, this.appendTo);
ZIndexUtils.clear(this.overlayEl);
}

if (this.scrollHandler) {
Expand Down

0 comments on commit 7edd505

Please sign in to comment.