Skip to content

Commit

Permalink
Merge pull request #6030 from egedarcin/#6027
Browse files Browse the repository at this point in the history 
#6027 fix
  • Loading branch information
@cagataycivici
cagataycivici authored Jul 10, 2018
2 parents 0a7fbb5 + cd5527d commit 58caf2c
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 53 deletions.
85 changes: 46 additions & 39 deletions src/app/components/sidebar/sidebar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {DomHandler} from '../dom/domhandler';
'ui-sidebar-top': (position === 'top'), 'ui-sidebar-bottom': (position === 'bottom'),
'ui-sidebar-full': fullScreen}"
[@panelState]="visible ? 'visible' : 'hidden'" [ngStyle]="style" [class]="styleClass">
<a [ngClass]="{'ui-sidebar-close ui-corner-all':true}" href="#" role="button" (click)="close($event)">
<a [ngClass]="{'ui-sidebar-close ui-corner-all':true}" *ngIf="showCloseIcon" href="#" role="button" (click)="close($event)">
<span class="pi pi-times"></span>
</a>
<ng-content></ng-content>
Expand All @@ -32,69 +32,73 @@ import {DomHandler} from '../dom/domhandler';
providers: [DomHandler]
})
export class Sidebar implements AfterViewInit, AfterViewChecked, OnDestroy {

@Input() position: string = 'left';

@Input() fullScreen: boolean;

@Input() appendTo: string;

@Input() blockScroll: boolean = false;

@Input() style: any;

@Input() styleClass: string;

@Input() autoZIndex: boolean = true;

@Input() baseZIndex: number = 0;

@Input() modal: boolean = true;


@Input() dismissible: boolean = true;

@Input() showCloseIcon: boolean = true;

@ViewChild('container') containerViewChild: ElementRef;

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

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

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

initialized: boolean;

_visible: boolean;

preventVisibleChangePropagation: boolean;

mask: HTMLDivElement;

maskClickListener: Function;

executePostDisplayActions: boolean;

constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) {}
ngAfterViewInit() {

ngAfterViewInit() {
this.initialized = true;

if(this.appendTo) {
if(this.appendTo === 'body')
document.body.appendChild(this.containerViewChild.nativeElement);
else
this.domHandler.appendChild(this.containerViewChild.nativeElement, this.appendTo);
}

if(this.visible) {
this.show();
}
}

@Input() get visible(): boolean {
return this._visible;
}

set visible(val:boolean) {
this._visible = val;

if(this.initialized && this.containerViewChild && this.containerViewChild.nativeElement) {
if(this._visible)
this.show();
Expand All @@ -106,14 +110,14 @@ export class Sidebar implements AfterViewInit, AfterViewChecked, OnDestroy {
}
}
}

ngAfterViewChecked() {
if(this.executePostDisplayActions) {
this.onShow.emit({});
this.executePostDisplayActions = false;
}
}

show() {
this.executePostDisplayActions = true;
if(this.autoZIndex) {
Expand All @@ -124,37 +128,40 @@ export class Sidebar implements AfterViewInit, AfterViewChecked, OnDestroy {
this.enableModality();
}
}

hide() {
this.onHide.emit({});

if(this.modal) {
this.disableModality();
}
}

close(event: Event) {
this.preventVisibleChangePropagation = true;
this.hide();
this.visibleChange.emit(false);
event.preventDefault();
}

enableModality() {
if(!this.mask) {
this.mask = document.createElement('div');
this.mask.style.zIndex = String(parseInt(this.containerViewChild.nativeElement.style.zIndex) - 1);
this.domHandler.addMultipleClasses(this.mask, 'ui-widget-overlay ui-sidebar-mask');
this.maskClickListener = this.renderer.listen(this.mask, 'click', (event: any) => {
this.close(event);
});
if(this.dismissible){
this.maskClickListener = this.renderer.listen(this.mask, 'click', (event: any) => {
this.close(event);
});
}

document.body.appendChild(this.mask);
if(this.blockScroll) {
this.domHandler.addClass(document.body, 'ui-overflow-hidden');
}
}
}

disableModality() {
if(this.mask) {
this.unbindMaskClickListener();
Expand All @@ -165,25 +172,25 @@ export class Sidebar implements AfterViewInit, AfterViewChecked, OnDestroy {
this.mask = null;
}
}

unbindMaskClickListener() {
if(this.maskClickListener) {
this.maskClickListener();
this.maskClickListener = null;
}
}

ngOnDestroy() {
this.initialized = false;

if(this.visible) {
this.hide();
}

if(this.appendTo) {
this.el.nativeElement.appendChild(this.containerViewChild.nativeElement);
}

this.unbindMaskClickListener();
}
}
Expand Down
39 changes: 25 additions & 14 deletions src/app/showcase/components/sidebar/sidebardemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,36 @@ <h1 style="font-weight:normal">Left Sidebar</h1>
<button pButton type="button" (click)="visibleSidebar1 = false" label="Save" class="ui-button-success"></button>
<button pButton type="button" (click)="visibleSidebar1 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>

<p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">
<h1 style="font-weight:normal">Right Sidebar</h1>
<button pButton type="button" (click)="visibleSidebar2 = false" label="Save" class="ui-button-success"></button>
<button pButton type="button" (click)="visibleSidebar2 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>

<p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">
<h1 style="font-weight:normal">Top Sidebar</h1>
<button pButton type="button" (click)="visibleSidebar3 = false" label="Save" class="ui-button-success"></button>
<button pButton type="button" (click)="visibleSidebar3 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>

<p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">
<h1 style="font-weight:normal">Bottom Sidebar</h1>
<button pButton type="button" (click)="visibleSidebar4 = false" label="Save" class="ui-button-success"></button>
<button pButton type="button" (click)="visibleSidebar4 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>

<p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">
<h1 style="font-weight:normal">Full Screen Sidebar</h1>
<button pButton type="button" (click)="visibleSidebar5 = false" label="Save" class="ui-button-success"></button>
<button pButton type="button" (click)="visibleSidebar5 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>

<button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right"></button>
<button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left"></button>
<button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down"></button>
<button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up"></button>
<button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-th-large"></button>
<button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-th-large"></button>
</div>

<div class="content-section documentation">
Expand All @@ -55,7 +55,7 @@ <h3>Import</h3>

<h3>Getting Started</h3>
<p>Sidebar is used as a container and visibility is controlled with visible property.</p>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-sidebar [(visible)]="display"&gt;
Expand Down Expand Up @@ -120,7 +120,7 @@ <h3>Properties</h3>
<td>position</td>
<td>string</td>
<td>left</td>
<td>Specifies the position of the sidebar, valid values are "left" and "right".</td>
<td>Specifies the position of the sidebar, valid values are "left", "right", "bottom" and "top".</td>
</tr>
<tr>
<td>fullScreen</td>
Expand Down Expand Up @@ -170,6 +170,17 @@ <h3>Properties</h3>
<td>true</td>
<td>Whether an overlay mask is displayed behind the sidebar.</td>
</tr>
<tr>
<td>dismissible</td>
<td>boolean</td>
<td>true</td>
<td>Whether to dismiss sidebar on click.</td>
</tr><tr>
<td>showCloseIcon</td>
<td>boolean</td>
<td>true</td>
<td>Whether to display the close icon.</td>
</tr>
</tbody>
</table>
</div>
Expand Down Expand Up @@ -271,7 +282,7 @@ <h3>Dependencies</h3>
<i class="fa fa-github"></i>
<span>View on GitHub</span>
</a>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000"&gt;
Expand Down Expand Up @@ -317,15 +328,15 @@ <h3>Dependencies</h3>
export class SidebarDemo &#123;

visibleSidebar1;

visibleSidebar2;

visibleSidebar3;

visibleSidebar4;

visibleSidebar5;

&#125;
</code>
</pre>
Expand Down

0 comments on commit 58caf2c

Please sign in to comment.