Skip to content

Commit

Permalink
Refactor #12031 - Added new directions and target option
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Nov 8, 2022
1 parent 5eff9de commit f9f574f
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 17 deletions.
5 changes: 4 additions & 1 deletion src/app/components/api/overlayoptions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { AnimationEvent } from '@angular/animations';

export type OverlayModeType = 'modal' | 'overlay' | undefined;

export type ResponsiveOverlayDirectionType = 'start' | 'center' | 'end' | undefined;
export type ResponsiveOverlayDirectionType = 'center' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | undefined;

export interface OverlayListenerOptions {
type?: 'scroll' | 'outside' | 'resize' | undefined;
Expand All @@ -13,6 +13,8 @@ export interface OverlayListenerOptions {
export interface ResponsiveOverlayOptions {
style?: any;
styleClass?: string;
contentStyle?: any;
contentStyleClass?: string;
breakpoint?: string;
media?: string;
direction?: ResponsiveOverlayDirectionType;
Expand All @@ -36,6 +38,7 @@ export interface OverlayOptions {
styleClass?: string;
contentStyle?: any;
contentStyleClass?: string;
target?: any;
appendTo?: 'body' | HTMLElement | undefined;
autoZIndex?: boolean;
baseZIndex?: number;
Expand Down
48 changes: 44 additions & 4 deletions src/app/components/overlay/overlay.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,54 @@
}

/* Position */
.p-overlay-start {
/* top */
.p-overlay-top {
align-items: flex-start;
}
.p-overlay-top-start {
align-items: flex-start;
justify-content: flex-start;
}
.p-overlay-top-end {
align-items: flex-start;
justify-content: flex-end;
}

.p-overlay-center {
align-items: center;
/* bottom */
.p-overlay-bottom {
align-items: flex-end;
}
.p-overlay-bottom-start {
align-items: flex-end;
justify-content: flex-start;
}
.p-overlay-bottom-end {
align-items: flex-end;
justify-content: flex-end;
}

.p-overlay-end {
/* left */
.p-overlay-left {
justify-content: flex-start;
}
.p-overlay-left-start {
justify-content: flex-start;
align-items: flex-start;
}
.p-overlay-left-end {
justify-content: flex-start;
align-items: flex-end;
}

/* right */
.p-overlay-right {
justify-content: flex-end;
}
.p-overlay-right-start {
justify-content: flex-end;
align-items: flex-start;
}
.p-overlay-right-end {
justify-content: flex-end;
align-items: flex-end;
}
54 changes: 42 additions & 12 deletions src/app/components/overlay/overlay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { OverlayModeType, OverlayOptions, OverlayService, PrimeNGConfig, PrimeTemplate, ResponsiveOverlayOptions, SharedModule } from 'primeng/api';
import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';
import { ZIndexUtils } from 'primeng/utils';
import { ObjectUtils, ZIndexUtils } from 'primeng/utils';

export const OVERLAY_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
Expand All @@ -46,9 +46,19 @@ const hideOverlayContentAnimation = animation([animate('{{hideTransitionParams}}
[ngClass]="{
'p-overlay p-component': true,
'p-overlay-modal p-component-overlay p-component-overlay-enter': modal,
'p-overlay-start': modal && overlayResponsiveDirection === 'start',
'p-overlay-center': modal && overlayResponsiveDirection === 'center',
'p-overlay-end': modal && overlayResponsiveDirection === 'end'
'p-overlay-top': modal && overlayResponsiveDirection === 'top',
'p-overlay-top-start': modal && overlayResponsiveDirection === 'top-start',
'p-overlay-top-end': modal && overlayResponsiveDirection === 'top-end',
'p-overlay-bottom': modal && overlayResponsiveDirection === 'bottom',
'p-overlay-bottom-start': modal && overlayResponsiveDirection === 'bottom-start',
'p-overlay-bottom-end': modal && overlayResponsiveDirection === 'bottom-end',
'p-overlay-left': modal && overlayResponsiveDirection === 'left',
'p-overlay-left-start': modal && overlayResponsiveDirection === 'left-start',
'p-overlay-left-end': modal && overlayResponsiveDirection === 'left-end',
'p-overlay-right': modal && overlayResponsiveDirection === 'right',
'p-overlay-right-start': modal && overlayResponsiveDirection === 'right-start',
'p-overlay-right-end': modal && overlayResponsiveDirection === 'right-end'
}"
(click)="onOverlayClick($event)"
>
Expand All @@ -64,7 +74,7 @@ const hideOverlayContentAnimation = animation([animate('{{hideTransitionParams}}
(@overlayContentAnimation.done)="onOverlayContentAnimationDone($event)"
>
<ng-content></ng-content>
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
<ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: { mode: overlayMode } }"></ng-container>
</div>
</div>
`,
Expand Down Expand Up @@ -97,33 +107,41 @@ export class Overlay implements AfterContentInit, OnDestroy {
}

@Input() get style(): any {
return this._style || (this.modal ? this.overlayResponsiveOptions?.style : this.overlayOptions?.style);
return ObjectUtils.merge(this._style, this.modal ? this.overlayResponsiveOptions?.style : this.overlayOptions?.style);
}
set style(value: any) {
this._style = value;
}

@Input() get styleClass(): string | undefined {
return this._styleClass || (this.modal ? this.overlayResponsiveOptions?.styleClass : this.overlayOptions?.styleClass);
return ObjectUtils.merge(this._styleClass, this.modal ? this.overlayResponsiveOptions?.styleClass : this.overlayOptions?.styleClass);
}
set styleClass(value: string) {
this._styleClass = value;
}

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

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

@Input() get target(): any {
const value = this._target || this.overlayOptions?.target;
return value === undefined ? '@prev' : value;
}
set target(value: any) {
this._target = value;
}

@Input() get appendTo(): any {
return this._appendTo || this.overlayOptions?.appendTo;
}
Expand Down Expand Up @@ -218,6 +236,8 @@ export class Overlay implements AfterContentInit, OnDestroy {

_contentStyleClass: string;

_target: any;

_appendTo: 'body' | HTMLElement | undefined;

_autoZIndex: boolean;
Expand Down Expand Up @@ -250,9 +270,19 @@ export class Overlay implements AfterContentInit, OnDestroy {

protected transformOptions: any = {
default: 'scaleY(0.8)',
start: 'translate3d(0px, -100%, 0px)',
center: 'scale(0.7)',
end: 'translate3d(0px, 100%, 0px)'
top: 'translate3d(0px, -100%, 0px)',
'top-start': 'translate3d(0px, -100%, 0px)',
'top-end': 'translate3d(0px, -100%, 0px)',
bottom: 'translate3d(0px, 100%, 0px)',
'bottom-start': 'translate3d(0px, 100%, 0px)',
'bottom-end': 'translate3d(0px, 100%, 0px)',
left: 'translate3d(-100%, 0px, 0px)',
'left-start': 'translate3d(-100%, 0px, 0px)',
'left-end': 'translate3d(-100%, 0px, 0px)',
right: 'translate3d(100%, 0px, 0px)',
'right-start': 'translate3d(100%, 0px, 0px)',
'right-end': 'translate3d(100%, 0px, 0px)'
};

get modal() {
Expand All @@ -272,7 +302,7 @@ export class Overlay implements AfterContentInit, OnDestroy {
}

get overlayResponsiveDirection() {
return this.overlayResponsiveOptions?.direction;
return this.overlayResponsiveOptions?.direction || 'center';
}

get overlayEl() {
Expand All @@ -284,7 +314,7 @@ export class Overlay implements AfterContentInit, OnDestroy {
}

get targetEl() {
return this.el?.nativeElement?.parentElement;
return DomHandler.getTargetElement(this.target, this.el?.nativeElement);
}

constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, private config: PrimeNGConfig, public overlayService: OverlayService, private cd: ChangeDetectorRef) {
Expand Down

0 comments on commit f9f574f

Please sign in to comment.