From 83c395b8664c4cf94d81f064dc8b06d78adac2d1 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 30 May 2018 11:49:30 +0300 Subject: [PATCH] (Sidebar) Make the sidebar invisible when it's not open Made the backdrop methods private --- .../components/sidebar/sidebar.component.ts | 208 ++++++++++++------ 1 file changed, 140 insertions(+), 68 deletions(-) diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index 5462686d..d44d1c77 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -1,7 +1,7 @@ import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { ObservableMedia } from '@angular/flex-layout'; -import { Subject, Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; import { FuseSidebarService } from './sidebar.service'; import { FuseMatchMediaService } from '@fuse/services/match-media.service'; @@ -159,6 +159,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Register the sidebar this._fuseSidebarService.register(this.name, this); + // Setup visibility + this._setupVisibility(); + // Setup alignment this._setupAlignment(); @@ -224,6 +227,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Set the wasActive for the first time this._wasActive = false; + // Show the sidebar + this._showSidebar(); + // Act on every media change this._fuseMatchMediaService.onMediaChange .pipe(takeUntil(this._unsubscribeAll)) @@ -244,6 +250,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Set the lockedOpen status this.isLockedOpen = true; + // Show the sidebar + this._showSidebar(); + // Force the the opened status to true this.opened = true; @@ -255,7 +264,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy } // Hide the backdrop if any exists - this.hideBackdrop(); + this._hideBackdrop(); } // De-Activate the lockedOpen else @@ -268,6 +277,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Force the the opened status to close this.opened = false; + + // Hide the sidebar + this._hideSidebar(); } // Store the new active status @@ -275,6 +287,124 @@ export class FuseSidebarComponent implements OnInit, OnDestroy }); } + /** + * Setup the visibility of the sidebar + * + * @private + */ + private _setupVisibility(): void + { + // Remove the existing box-shadow + this._renderer.setStyle(this._elementRef.nativeElement, 'box-shadow', 'none'); + + // Make the sidebar invisible + this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden'); + } + + /** + * Show the backdrop + * + * @private + */ + private _showBackdrop(): void + { + // Create the backdrop element + this._backdrop = this._renderer.createElement('div'); + + // Add a class to the backdrop element + this._backdrop.classList.add('fuse-sidebar-overlay'); + + // Append the backdrop to the parent of the sidebar + this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop); + + // Create the enter animation and attach it to the player + this._player = + this._animationBuilder + .build([ + animate('300ms ease', style({opacity: 1})) + ]).create(this._backdrop); + + // Play the animation + this._player.play(); + + // Add an event listener to the overlay + this._backdrop.addEventListener('click', () => { + this.close(); + } + ); + } + + /** + * Hide the backdrop + * + * @private + */ + private _hideBackdrop(): void + { + if ( !this._backdrop ) + { + return; + } + + // Create the leave animation and attach it to the player + this._player = + this._animationBuilder + .build([ + animate('300ms ease', style({opacity: 0})) + ]).create(this._backdrop); + + // Play the animation + this._player.play(); + + // Once the animation is done... + this._player.onDone(() => { + + // If the backdrop still exists... + if ( this._backdrop ) + { + // Remove the backdrop + this._backdrop.parentNode.removeChild(this._backdrop); + this._backdrop = null; + } + }); + } + + /** + * Change some properties of the sidebar + * and make it visible + * + * @private + */ + private _showSidebar(): void + { + // Remove the box-shadow style + this._renderer.removeStyle(this._elementRef.nativeElement, 'box-shadow'); + + // Make the sidebar invisible + this._renderer.removeStyle(this._elementRef.nativeElement, 'visibility'); + } + + /** + * Change some properties of the sidebar + * and make it invisible + * + * @private + */ + private _hideSidebar(delay = true): void + { + const delayAmount = delay ? 300 : 0; + + // Add a delay so close animation can play + setTimeout(() => { + + // Remove the box-shadow + this._renderer.setStyle(this._elementRef.nativeElement, 'box-shadow', 'none'); + + // Make the sidebar invisible + this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden'); + }, delayAmount); + } + // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- @@ -289,8 +419,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy return; } + // Show the sidebar + this._showSidebar(); + // Show the backdrop - this.showBackdrop(); + this._showBackdrop(); // Set the opened status this.opened = true; @@ -307,10 +440,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy } // Hide the backdrop - this.hideBackdrop(); + this._hideBackdrop(); // Set the opened status this.opened = false; + + // Hide the sidebar + this._hideSidebar(); } /** @@ -404,68 +540,4 @@ export class FuseSidebarComponent implements OnInit, OnDestroy this.fold(); } } - - /** - * Show the backdrop - */ - showBackdrop(): void - { - // Create the backdrop element - this._backdrop = this._renderer.createElement('div'); - - // Add a class to the backdrop element - this._backdrop.classList.add('fuse-sidebar-overlay'); - - // Append the backdrop to the parent of the sidebar - this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop); - - // Create the enter animation and attach it to the player - this._player = - this._animationBuilder - .build([ - animate('300ms ease', style({opacity: 1})) - ]).create(this._backdrop); - - // Play the animation - this._player.play(); - - // Add an event listener to the overlay - this._backdrop.addEventListener('click', () => { - this.close(); - } - ); - } - - /** - * Hide the backdrop - */ - hideBackdrop(): void - { - if ( !this._backdrop ) - { - return; - } - - // Create the leave animation and attach it to the player - this._player = - this._animationBuilder - .build([ - animate('300ms ease', style({opacity: 0})) - ]).create(this._backdrop); - - // Play the animation - this._player.play(); - - // Once the animation is done... - this._player.onDone(() => { - - // If the backdrop still exists... - if ( this._backdrop ) - { - // Remove the backdrop - this._backdrop.parentNode.removeChild(this._backdrop); - this._backdrop = null; - } - }); - } }