Skip to content

Commit

Permalink
Fixed #10298 - Customizable ZIndex Layering
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Jun 3, 2021
1 parent 003d8eb commit 9ac0baf
Show file tree
Hide file tree
Showing 24 changed files with 488 additions and 200 deletions.
17 changes: 17 additions & 0 deletions src/app/components/api/overlayservice.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { Message } from './message';

@Injectable({providedIn: 'root'})
export class OverlayService {

private clickSource = new Subject<Message|Message[]>();

clickObservable = this.clickSource.asObservable();

add(event) {
if (event) {
this.clickSource.next(event);
}
}
}
13 changes: 10 additions & 3 deletions src/app/components/api/primengconfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,17 @@ export class PrimeNGConfig {
emptyFilterMessage: 'No results found'
}

zIndex = {
modal: 1100,
overlay: 1000,
menu: 1000,
tooltip: 1100
}

private translationSource = new Subject<any>();

translationObserver = this.translationSource.asObservable();

getTranslation(key: string) {
return this.translation[key];
}
Expand All @@ -91,4 +98,4 @@ export class PrimeNGConfig {
this.translation = {...this.translation, ...value};
this.translationSource.next(this.translation);
}
}
}
27 changes: 22 additions & 5 deletions src/app/components/autocomplete/autocomplete.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {ButtonModule} from 'primeng/button';
import {RippleModule} from 'primeng/ripple';
import {SharedModule,PrimeTemplate, TranslationKeys, PrimeNGConfig} from 'primeng/api';
import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
import {ObjectUtils, UniqueComponentId} from 'primeng/utils';
import {ObjectUtils, UniqueComponentId, ZIndexUtils} from 'primeng/utils';
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
import {CdkVirtualScrollViewport, ScrollingModule} from '@angular/cdk/scrolling';

Expand Down Expand Up @@ -40,7 +40,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
<i *ngIf="loading" class="p-autocomplete-loader pi pi-spinner pi-spin"></i><button #ddBtn type="button" pButton [icon]="dropdownIcon" class="p-autocomplete-dropdown" [disabled]="disabled" pRipple
(click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex"></button>
<div #panel *ngIf="overlayVisible" [ngClass]="['p-autocomplete-panel p-component']" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass"
[@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)">
[@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<ul role="listbox" [attr.id]="listId" class="p-autocomplete-items" [ngClass]="{'p-autocomplete-virtualscroll': virtualScroll}">
<ng-container *ngIf="group">
Expand Down Expand Up @@ -243,7 +243,7 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
footerTemplate: TemplateRef<any>;

selectedItemTemplate: TemplateRef<any>;

groupTemplate: TemplateRef<any>;

value: any;
Expand Down Expand Up @@ -331,7 +331,7 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
if (this.virtualScroll && this.viewPort) {
let range = this.viewPort.getRenderedRange();
this.updateVirtualScrollSelectedIndex();

if (range.start > this.virtualScrollSelectedIndex || range.end < this.virtualScrollSelectedIndex) {
this.viewPort.scrollToIndex(this.virtualScrollSelectedIndex);
}
Expand Down Expand Up @@ -538,9 +538,11 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
this.overlay = event.element;
this.itemsWrapper = this.virtualScroll ? DomHandler.findSingle(this.overlay, '.cdk-virtual-scroll-viewport') : this.overlay;
this.appendOverlay();

if (this.autoZIndex) {
this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
ZIndexUtils.set('overlay', this.overlay, this.baseZIndex + this.config.zIndex.overlay);
}

this.alignOverlay();
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
Expand All @@ -554,6 +556,16 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
}
}

onOverlayAnimationEnd(event: AnimationEvent) {
switch(event.toState) {
case 'void':
if (this.autoZIndex) {
ZIndexUtils.clear(event.element);
}
break;
}
}

appendOverlay() {
if (this.appendTo) {
if (this.appendTo === 'body')
Expand Down Expand Up @@ -965,6 +977,11 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
this.scrollHandler.destroy();
this.scrollHandler = null;
}

if (this.overlay) {
ZIndexUtils.clear(this.overlay);
}

this.restoreOverlayAppend();
this.onOverlayHide();
}
Expand Down
41 changes: 21 additions & 20 deletions src/app/components/blockui/blockui.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {NgModule,Component,Input,AfterViewInit,OnDestroy,ElementRef,ViewChild,ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ContentChildren, QueryList, TemplateRef} from '@angular/core';
import {CommonModule} from '@angular/common';
import {DomHandler} from 'primeng/dom';
import {PrimeTemplate} from 'primeng/api';
import {PrimeNGConfig, PrimeTemplate} from 'primeng/api';
import {ZIndexUtils} from 'primeng/utils';

@Component({
selector: 'p-blockUI',
Expand All @@ -18,38 +18,38 @@ import {PrimeTemplate} from 'primeng/api';
export class BlockUI implements AfterViewInit,OnDestroy {

@Input() target: any;

@Input() autoZIndex: boolean = true;

@Input() baseZIndex: number = 0;

@Input() styleClass: string;

@ContentChildren(PrimeTemplate) templates: QueryList<any>;

@ViewChild('mask') mask: ElementRef;

_blocked: boolean;

contentTemplate: TemplateRef<any>;
constructor(public el: ElementRef, public cd: ChangeDetectorRef) {}

constructor(public el: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}

@Input() get blocked(): boolean {
return this._blocked;
}

set blocked(val: boolean) {
this._blocked = val;

if (this.mask && this.mask.nativeElement) {
if (this._blocked)
this.block();
else
this.unblock();
}
}

ngAfterViewInit() {
if (this.target && !this.target.getBlockableElement) {
throw 'Target of BlockUI must implement BlockableUI interface';
Expand All @@ -62,14 +62,14 @@ export class BlockUI implements AfterViewInit,OnDestroy {
case 'content':
this.contentTemplate = item.template;
break;

default:
this.contentTemplate = item.template;
break;
}
});
}

block() {
if (this.target) {
this.target.getBlockableElement().appendChild(this.mask.nativeElement);
Expand All @@ -78,16 +78,17 @@ export class BlockUI implements AfterViewInit,OnDestroy {
else {
document.body.appendChild(this.mask.nativeElement);
}

if (this.autoZIndex) {
this.mask.nativeElement.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex + this.config.zIndex.modal);
}
}

unblock() {
ZIndexUtils.clear(this.mask.nativeElement);
this.el.nativeElement.appendChild(this.mask.nativeElement);
}

ngOnDestroy() {
this.unblock();
}
Expand All @@ -98,4 +99,4 @@ export class BlockUI implements AfterViewInit,OnDestroy {
exports: [BlockUI],
declarations: [BlockUI]
})
export class BlockUIModule { }
export class BlockUIModule { }
23 changes: 17 additions & 6 deletions src/app/components/calendar/calendar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
import {SharedModule,PrimeTemplate,PrimeNGConfig,TranslationKeys} from 'primeng/api';
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
import {Subscription} from 'rxjs';
import {ZIndexUtils} from 'primeng/utils';

export const CALENDAR_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
Expand Down Expand Up @@ -445,7 +446,7 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {

set defaultDate(defaultDate: Date) {
this._defaultDate = defaultDate;

if (this.initialized) {
const date = defaultDate||new Date();
this.currentMonth = date.getMonth();
Expand Down Expand Up @@ -1200,10 +1201,6 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
}

onInputClick() {
if (this.overlay && this.autoZIndex) {
this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
}

if (this.showOnFocus && !this.overlayVisible) {
this.showOverlay();
}
Expand Down Expand Up @@ -2030,8 +2027,12 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
this.overlay = event.element;
this.appendOverlay();
if (this.autoZIndex) {
this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
if (this.touchUI)
ZIndexUtils.set('modal', this.overlay, this.baseZIndex || this.config.zIndex.modal);
else
ZIndexUtils.set('overlay', this.overlay, this.baseZIndex || this.config.zIndex.overlay);
}

this.alignOverlay();
this.onShow.emit(event);
}
Expand All @@ -2054,6 +2055,12 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
this.bindScrollListener();
}
break;

case 'void':
if (this.autoZIndex) {
ZIndexUtils.clear(event.element);
}
break
}
}

Expand Down Expand Up @@ -2590,6 +2597,10 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
this.translationSubscription.unsubscribe();
}

if (this.overlay && this.autoZIndex) {
ZIndexUtils.clear(this.overlay);
}

this.clearTimePickerTimer();
this.restoreOverlayAppend();
this.onOverlayHide();
Expand Down
Loading

0 comments on commit 9ac0baf

Please sign in to comment.